I5 setup storybook js #9
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
maany
requested changes
Feb 16, 2023
I will rename |
ThePhisch
force-pushed
the
i5-setup-storybook-js
branch
from
2af8efe
to
4a5be75
Compare
ThePhisch
force-pushed
the
i5-setup-storybook-js
branch
2 times, most recently
from
b0f5063
to
35f4ef9
Compare
maany
requested changes
Feb 16, 2023
There was a problem hiding this comment.
Can we already migrate to Storybook 7
https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937
Also, can you refactor the component-library directory to have 2 sub-directories, one for components and one for sass/scss
The components can import from the sass/scss
|
can you rebase? |
Installed Storybook with webpack5 as builder. Also added `eslint-plugin` and did the `npm7` migration (generating the `.npmrc`-file), as recommended by the storybook installer. Deleted the contents of `src/stories`, meaning that Storybook has no stories it can display. The server starts up though.
The stories were ported from the old webui. The stories were chosen since they only rely on the `primer` CSS-library. Also ported the `rucio.d.ts` file containing the rucio webui story components proptype definitions. In the process, sass support was activated for the Storybook server. In addition, `@primer/css` was installed (as a depency for the story).
Ported components (stories) into `src/component-library`. These components are called *simple* because they use Bulma CSS (and related dependencies) but do not rely on other components. In addition, if a component requires the handling of images, it is omitted in this commit. Added Components: * Checkbox (requires `bulma-checkradio`) * Dropdown * Form * Input * Modal * ProgressBar * Steps (requires `bulma-steps`) * Table * Tabs * ToggleSwitch (requires `bulma-switch`)
Switched to a system in which `src/component-library` has contents: * `components` which are the story components that were previously directly under `component-library` * `scss` containing stylesheets important for the stories. The stories import the `main.scss`-file. The reasoning behind this is that each component should work in isolation and its styles should not depend on globally imported stylesheets.
Moved to Storybook `7.0.0-beta.49`. Had to add `util` to `resolve.fallback`, installed `util`. In upgrading, accepted all suggested migrations except for `autodocs: true`. These are: * `storybook-binary` * `sb-scripts` * `newFrameworks` (which removes webpack5) * `nextjsFramework` (which replaces `newFrameworks` with one specific to `nextjs` * `bare-mdx-stories-glob`
After deciding to not follow up on using PrimerCSS for many of the designs (due to the persisting issue of not being able to compile the SCSS files), the components taking style directions from PrimerCSS were redone to make use of TailwindCSS. In redoing the components, the interfaces found under `rucio.d.ts` were also changed. These changes primarily consisted of simpifying the interfaces to a minimum. In some cases, such as `CheckboxProps`, new parameters were added (`CheckboxProps` now has the optional attribute `disabled` so that the behaviour of other buttons is matched). The rework touched the Javascript logic in some cases, but mainly tried to port the designs from PrimerCSS into TailwindCSS. The components redone are: * Alert (split into Standard, Warning, Success and Error) * Box (split into Condensed, Spacious, Blue, Danger) * Button (Button, Checkbox, Radiobutton) (Switch remains unchanged)
Ported the `input` component into tailwind. Split into two components for numeric and text input. Also removed unnecessary scss files and moved `rucio.d.ts` to `src/component-library/components.d.ts` to reflect that this file only provides the interfaces for the components.
ThePhisch
force-pushed
the
i5-setup-storybook-js
branch
from
d385e45
to
bda5dbe
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Installed storybook and ported the first story components. Installed further dependencies including
@primer/css,bulma,sass,sass-loaderas needed.