Skip to content
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

Jump to bottom

I5 setup storybook js #9

Merged
merged 7 commits into from Feb 22, 2023
Merged

I5 setup storybook js #9

merged 7 commits into from Feb 22, 2023

Commits on Feb 22, 2023

  1. Install Storybook 

    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.
    @ThePhisch
    ThePhisch committed Feb 22, 2023
    Configuration menu
    Copy the full SHA
    9b83fad View commit details
    Browse the repository at this point in the history

  2. Ported Alert, Box, Button, Separator stories 

    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).
    @ThePhisch
    ThePhisch committed Feb 22, 2023
    Configuration menu
    Copy the full SHA
    fba7b33 View commit details
    Browse the repository at this point in the history

  3. Port Simple Components Including Bulma 

    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`)
    @ThePhisch
    ThePhisch committed Feb 22, 2023
    Configuration menu
    Copy the full SHA
    f5ebb16 View commit details
    Browse the repository at this point in the history

  4. Changed file structure 

    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.
    @ThePhisch
    ThePhisch committed Feb 22, 2023
    Configuration menu
    Copy the full SHA
    cb4c033 View commit details
    Browse the repository at this point in the history

  5. Upgrade to Storybook v7 (beta) 

    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`
    @ThePhisch
    ThePhisch committed Feb 22, 2023
    Configuration menu
    Copy the full SHA
    38b1599 View commit details
    Browse the repository at this point in the history

  6. Redid PrimerCSS-Components in TailwindCSS 

    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)
    @ThePhisch
    ThePhisch committed Feb 22, 2023
    Configuration menu
    Copy the full SHA
    b261d9f View commit details
    Browse the repository at this point in the history

  7. Work on Tailwind: Input 

    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
    ThePhisch committed Feb 22, 2023
    Configuration menu
    Copy the full SHA
    bda5dbe View commit details
    Browse the repository at this point in the history