Skip to content

feat: add video on storybook doc #654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
daniele-zurico merged 1 commit into from
May 24, 2024
Merged

feat: add video on storybook doc #654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ const config = {
},
},
'@storybook/addon-mdx-gfm',
'@storybook/addon-webpack5-compiler-babel'
'@storybook/addon-webpack5-compiler-babel',
'storybook-addon-mdx-embed'
],
framework: {
name: '@storybook/react-webpack5',
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@capgeminiuk/dcx-react-library",
"author": "Capgemini UK",
"license": "MIT",
"version": "1.0.0-rc8",
"version": "1.0.0",
"source": "src/index.ts",
"main": "dist/dcx-react-library.js",
"module": "dist/dcx-react-library.module.js",
Expand Down Expand Up @@ -110,6 +110,7 @@
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",
"lint": "0.8.19",
"mdx-embed": "^1.1.2",
"microbundle": "0.15.1",
"mock-fs": "5.2.0",
"postcss-functions": "4.0.2",
Expand All @@ -126,6 +127,7 @@
"sass": "1.75.0",
"sourcemap-codec": "1.4.8",
"storybook": "8.0.9",
"storybook-addon-mdx-embed": "^1.1.1",
"storybook-css-modules-preset": "1.1.1",
"storybook-design-token": "3.1.0",
"ts-jest": "29.1.2",
Expand All @@ -136,4 +138,4 @@
"@cesium133/forgjs": "1.1.10",
"imask": "^6.4.3"
}
}
}
16 changes: 10 additions & 6 deletions stories/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Meta } from '@storybook/blocks';
import {YouTube} from 'mdx-embed';
import TokensList from '../core/storybook/TokensList';

<Meta title="DCXLibrary/Introduction" />
Expand All @@ -8,9 +9,9 @@ import TokensList from '../core/storybook/TokensList';
[dcx-react-library](https://github.com/capgemini/dcx-react-library) is a React library with a set of components ready to use in your project.
There are plenty of libraries available in React that can help to increase your productivity however most of them contain lots of css and are hard to style based on your project's requirements.
dcx-react-library is **UI/UX agnostic**, this allows the dcx-react-library to be easily integrated into any project.
You have few options to make your components good looking :lipstick::
1. You provide the styling to match the look and feel of your application passing the class to every component :construction_worker:
2. :fire: :fire:You use the design system tokens that we built for you (from version 1.0.0) :fire: :fire:
You have few options to make your components good looking 💄:
1. You provide the styling to match the look and feel of your application passing the class to every component 👷‍♀️
2. 🔥 🔥 You use the design system tokens that we built for you (from version 1.0.0) 🔥 🔥

## Installation

Expand All @@ -36,6 +37,9 @@ function App() {
}
```

Have a look on this quick video for a quick introduction:
<YouTube youTubeId="kVjvOPd_rW4" />

## Styling

We don't ship `dcx-react-library` with any included CSS. However, some stylesheet is required to use some components (for example, `toggle` and `tooltip`).
Expand Down Expand Up @@ -73,6 +77,9 @@ import '@capgeminiuk/dcx-react-library/design-system/button.css'

Don't forget to add the `base.css` import before loading the individual stylesheets. It contains the core definitions used for the design system to work.

Have a look on this quick video for a quick introduction on the design system:
<YouTube youTubeId="KjYL9fzxdxw" />


### Customization

Expand Down Expand Up @@ -179,9 +186,6 @@ It is an interactive UI that displays the available custom properties for a give

To find the properties list use the `Toggle Available Tokens` button, then you can use the filter by scope and apply your own values for a quick preview.

<video src="/design-system-playground.mp4" style={{width: '100%'}} controls />


##### Predefined themes

Right next to the `Playground` you will usually find themes like: `Dark`, `Material` and `Accessible`. You may want to have a look to get inspiration for your own token definition.
Expand Down
41 changes: 38 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8719,6 +8719,11 @@ mdn-data@2.0.30:
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==

mdx-embed@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/mdx-embed/-/mdx-embed-1.1.2.tgz#04468e8dcb3be9fe3e65207e88a83d2f76555a24"
integrity sha512-AAronHC/sh4py+RhJOuX8+9+lyUbJsmCLquXNPCEHZ0llPWjMuwls77hII/lWI2kwBSPZPahrqti8kGTv1pi1w==

media-typer@0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
Expand Down Expand Up @@ -11504,6 +11509,11 @@ store2@^2.14.2:
resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.3.tgz#24077d7ba110711864e4f691d2af941ec533deb5"
integrity sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==

storybook-addon-mdx-embed@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/storybook-addon-mdx-embed/-/storybook-addon-mdx-embed-1.1.1.tgz#b91931e115f664ad8fc63f2e3b54bc0bde81a9ee"
integrity sha512-HPvygg6KHI6ekGBh7yU+O9pTg58DIh3F4xU2Aws8IAnu8Pzjij1mcII7Q/ICvqIxI5HcW8zVILhVhpPshlExjw==

storybook-css-modules-preset@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/storybook-css-modules-preset/-/storybook-css-modules-preset-1.1.1.tgz#30310eab3c324cb944ea760ecd73b5341bcae6c6"
Expand Down Expand Up @@ -11562,7 +11572,7 @@ string-natural-compare@^3.0.1:
resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==

"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand All @@ -11588,6 +11598,15 @@ string-width@^3.0.0, string-width@^3.1.0:
is-fullwidth-code-point "^2.0.0"
strip-ansi "^5.1.0"

string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

string-width@^5.0.1, string-width@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
Expand Down Expand Up @@ -11657,7 +11676,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand Down Expand Up @@ -11685,6 +11704,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
dependencies:
ansi-regex "^4.1.0"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1:
version "7.1.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
Expand Down Expand Up @@ -12755,7 +12781,7 @@ wordwrap@^1.0.0:
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -12773,6 +12799,15 @@ wrap-ansi@^5.1.0:
string-width "^3.0.0"
strip-ansi "^5.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Expand Down