In order to make the storybook visible to everyone. Some changes
had to be made to make index.scss compiled with the rest of the
codebase, it had to be imported from preview.js, not directly from
preview.html.
Previously the docs order was defined by the default behavior of
Storybook: discovery order. But, in our situation we want the
"Getting Started" part to appear above "Components", and "Doc"
above any other stories. So we needed to create a custom sort callback.
In order to make this storySort callback to be taken into account by Storybook
it was needed to rename the file to preview.js. Strange but .. meh.
These were the missing parts in order to use every design tokens
of Cunningham. Including: spacing, font weight, size, family, and
colors. In order to be really versatile and to allow users to
define new design tokens I had to re-organize the way those tokens
are sub divided in sub objects in cunningham.ts file. That's why
sub division are created for theme.typ.sizes for instance.
Had the situation where the symlink to the cunningham bin was not
created on yarn build due to the fact that the tokens repo was
not updated. The turbo just replayed logs output, but doing this
prevent the symlink to be created from the package.json's build script.
So, in order to make sure that the symlink always exists, I added it
to the CI build job.
We adding do's and don't to the documentation I realized that the
danger button was really important in some cases even if the style
was not delivered by designers. Example: Delete buttons.
Based on the work delivered by designers, we simply replicates those
in the storybook documentation in order to centralize everything
related to the Button component.
These files will be used to define the custom design tokens per components.
They are automatically aggregated by the packages/react/cunningham.ts file,
this is why handling typescript config file was important.
This allow to use the default tokens from Typescript or Javascript file
of dependents repos. For instance this wîll be used by packages/react
to aggregate components tokens files.
Add the support to load cunningham.ts local config file based on ts-node.
Those files will be loaded as CommonJS to preserve to coherence regarding
the way the cunningham bin is ran by node.
This allows to modify the working dir of the bin. This will be
particularly useful when running tests, this is not especially
intended to be vastly used by end-users.
Relatives import are quite ugly and reduces readability, but
hard to say that Typescript handles it very well for compilation
time, but nothing for runtime. That's why I had to add tsc-alias
to the build script. Please see this issue for more details.
https://github.com/Microsoft/TypeScript/issues/15479
Furthermore, some configuration was needed for Jest to work well.
This demo is useful to test in the real usage of the design system as a real
user that will generate its own customized design tokens, implements the design
system's components, etc ...
This repo only contains a Button which is here only for demonstration purpose.
Its purpose is to contain all the future react-based components of the
design system.
This repo is made for the bin script that generates the tokens files,
at the moment it only generates a css file, but it is designed to be
able to generate any other file format ( Typescript, Javascript for example )
