Major re-write of the entire project #133
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
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.
First steps, mainly still in Storybook Ported the tabs to tailwind, also add more options to the button (now red -> reset, green -> submit, blue -> button)
If you press on the upass button, it will open a div (not yet a form) into which you can enter your credentials. I believe that it is now time to move this entire thing into the real app.
We decided to use the login page as a story, and I made some appropriate changes. I also created the helpers `H1` and `Collapsible`. Importantly, the LoginViewModel is passed to the story and the divs containing non-standard login options are collapsed as necessary.
Also created `CredentialInput` component for cleaner code.
Works for upass login (using a mock authentication function that skips the call to the server). Test using username `test` and password `test`. Read the console logs.
Interface declarations were previously in `src/component-library/components.d.ts`. This clutters the namespace unnecessarily. At the same time, packing the parameters for a component into a single object (which can then be described by an interface) is required by storybook. The compromise is to retain the interfaces but move them to the file they are used in. This means that storybook is happy, and if the interface is indeed needed (such as with the login page component), this interface can then be imported. Moved the interfaces `*Props` from components.d.ts only for the components rewritten to use TailwindCSS.
The tests run on the basis of the nextjs page (and NOT the storybook component). The nextjs page had to be changed because the storybook component relies on the complete LoginViewModel and this model is only queried after the initial render. I am not sure whether it is the best practice to have an if/else clause that only renders the storybook component if the LoginViewModel is not undefined, but it is what it is for now. The tests concern themselves with the collapsed divs depending on the input given by the LoginViewModel, which is passed to nextjs by virtue of fetchMocks.
1 task
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.
Fix #117
This PR moves all the work done in https://github.com/maany/rucio-webui-nextjs to the main rucio/webui repo.
The highlights of the changes include: