add shared-components package #449
Conversation
| @@ -10,10 +10,10 @@ | |||
| "workspaces": { | |||
| "packages": [ | |||
| "packages/*" | |||
| ], | |||
| "nohoist": [ | |||
| "**" | |||
There was a problem hiding this comment.
nohoist: ** was removed since we need packages to share the same node_modules for things like react and react-dom
| "dependencies": {}, | ||
| "resolutions": { | ||
| "babel-loader": "8.1.0" | ||
| } |
There was a problem hiding this comment.
this babel-loader resolution was added to resolve the following problem: storybookjs/storybook#5183
| return webpackConfig; | ||
| }, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
craco is used so we can load things outside of packages/client with our create-react-app babel config
| @@ -1,7 +1,10 @@ | |||
| { | |||
| "compilerOptions": { | |||
| "baseUrl": "src" | |||
| "baseUrl": "src", | |||
| "jsx": "react-jsx" | |||
There was a problem hiding this comment.
add jsx: react-jsx so we dont have to import React from 'react' everywhere just to use JSX
| "@tanstack/react-query": "^4.1.0", | ||
| "@tanstack/react-query-devtools": "4.0.11-beta.0", | ||
| "@tanstack/react-query": "4.3.3", | ||
| "@tanstack/react-query-devtools": "4.3.3", |
There was a problem hiding this comment.
had to specify exact versions because I was running into this bug that was seemingly introduced yesterday: TanStack/query#4155
| 'Twitter', | ||
| 'Upload', | ||
| 'ValidCheckMark', | ||
| 'Website', |
There was a problem hiding this comment.
unfortunately have to maintain a list of options for the storybook as there wasnt a pretty way to dynamically get all the filenames of the Svgs the way we do with dynamic import
There was a problem hiding this comment.
I wonder if there's a way to show all icons in one component, so we can easily view them/search for them
| @@ -1,7 +1,10 @@ | |||
| { | |||
| "compilerOptions": { | |||
| "baseUrl": "src" | |||
| "baseUrl": "src", | |||
| "jsx": "react-jsx" | |||
There was a problem hiding this comment.
there are still some import React from 'react': in the components code, but can safely be removed later on a second PR to avoid increasing the size if this one (It's not the purpose of the PR)
| 'Twitter', | ||
| 'Upload', | ||
| 'ValidCheckMark', | ||
| 'Website', |
There was a problem hiding this comment.
I wonder if there's a way to show all icons in one component, so we can easily view them/search for them
| export const Controls = Template.bind({}); | ||
| Controls.args = { | ||
| name: 'Eye', | ||
| }; |
There was a problem hiding this comment.
Should we have this file inside the Svg folder? So each shared component has it's own .stories file and on a high level we have folders only. Also for updating the .stories file and at the same time the component structure, might be easier and closer
Adds
frontend/packages/shared-componentsas the place where components that are re-used many times to live. Currently this includes the following components, listed in order of the amount of files they appear in:Svg - 31
Loader - 13
FadeIn - 13
WrapperResponsive - 12
ActionButton - 11
WalletConnect - 6
Input - 5
Dropdown - 5
Error - 5
Label - 3
AddButton - 3
Tooltip - 2
Title - 2
Tablink - 2
StatusLabel - 2
This PR only handles the
Svgcomponent, turning into a high order component that takes anameprop and lazy loads the corresponding Svg icon, based on the work of Linxiao in DapperCollectives/VESSEL#102Additionally, this PR adds storybook to the
shared-componentsrepo so we can easily test, document, and iterate on shared components there. In follow up PRs I will move the above components toshared-components, add global styles and any necessary storybook addons.