-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: TUP-700 @tacc/core-components - Storybook (#435)
* feat: tup-700 storybook STEPS 1. `npm add -D @nx/storybook@17.2.8` 2. `npx nx@17.2.8 g @nx/storybook:configuration core-components --uiFramework="@storybook/react-vite" --bundler="vite"` 3. "Do you want to set up Storybook interaction tests? (Y/n) › false" CONCERNS 1. Generator installed `@swc-node/register` and `@swc/core`. 2. `@vitejs/plugin-react-swc` is already isntalled. 3. [Storybook 7 does not work with @vitejs/plugin-react-swc](storybookjs/storybook#22381) 4. I worry I cannot move to Storybook 8 via NX, because it requires NX v18. * deps: tup-700 uninstall `@swc-…` - Vite already uses `@vitejs/plugin-react-swc` (notice the SWC). - Storybook seems to work fine without these. - I read that in v8, Storybook will stop isntalling backup compilers. * feat: tup-700 Button stories, working Controls * fix: tup-700 ignore stories during build * fix: nx serve/build/test core-components * feat: tup-700 button story * style: npx nx format:write * docs(tup-ui): tup-700 README "Contributing" * fix: tup-700 npm ci core-components workspace ★ Running npm ci at this point: - DOES reinstall deps - does NOT create libs/core-components/node_modules - does NOT create libs/core-components/package-lock.json * npx nx format:write * docs: do not reference lib names This causes more work when renaming a library. * docs: do reference (other) lib names These references are outside of this lib, so yeah, reference lib name. * docs(README): add `make start` step * feat: make storybook optional * feat: make storybook optional (not peer) * docs(README): fix serve/start command * fix: make storybook optional (not peer) * chore: (redundantly) include optional dependences Optional dependencies are installed by default. We can not disable "install optional by default", cuz NX will fail: nrwl/nx#20617 We can not configure NPM to omit optional deps only per workspace, cuz: npm/cli#6099 * fix: limit install overhead for core-components For core-components, tell dev to only install for core-components. * fix: add missing dependencies for core-components All this change was required to run `npx nx serve core-components`. * fix: add missing `build-storybook` npm command * fix: a TypeScript lint error Error occurred as red squiggly udnerline in code editor when importing a component from within a component. * fix: do not pass size to `<Button type="link">` * feat: load global css via typescript not html
- Loading branch information
1 parent
650e728
commit 8bf0550
Showing
16 changed files
with
5,810 additions
and
979 deletions.
There are no files selected for viewing
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import type { StorybookConfig } from '@storybook/react-vite'; | ||
|
||
const config: StorybookConfig = { | ||
stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'], | ||
addons: ['@storybook/addon-essentials'], | ||
framework: { | ||
name: '@storybook/react-vite', | ||
options: { | ||
builder: { | ||
viteConfigPath: 'libs/core-components/vite.config.ts', | ||
}, | ||
}, | ||
}, | ||
}; | ||
|
||
export default config; | ||
|
||
// To customize your Vite configuration you can use the viteFinal field. | ||
// Check https://storybook.js.org/docs/react/builders/vite#configuration | ||
// and https://nx.dev/recipes/storybook/custom-builder-configs |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/* https://tacc-main.atlassian.net/wiki/x/hRlv */ | ||
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css') layer(foundation); | ||
@import url('@tacc/core-styles/dist/core-styles.base.css') layer(base); | ||
@import url('@tacc/core-styles/dist/core-styles.portal.css') layer(base); |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
import './preview.global.css'; |
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
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
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
3 changes: 3 additions & 0 deletions
3
libs/core-components/src/lib/Button/Button.stories.module.css
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.button + .button { | ||
margin-left: 1em; | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import Button, { SIZE_MAP } from './Button'; | ||
|
||
import styles from './Button.stories.module.css'; | ||
|
||
const meta: Meta<typeof Button> = { | ||
component: Button, | ||
argTypes: { | ||
size: { | ||
options: Object.keys(SIZE_MAP), | ||
control: { type: 'inline-radio' }, | ||
}, | ||
}, | ||
}; | ||
export default meta; | ||
|
||
type Story = StoryObj<typeof Button>; | ||
|
||
export const Types: Story = { | ||
render: (args) => { | ||
const { size, ...argsSansSize } = args; | ||
|
||
return ( | ||
<> | ||
<Button type="primary" {...args}> | ||
Primary | ||
</Button> | ||
<Button type="secondary" {...args}> | ||
Secondary | ||
</Button> | ||
<Button type="tertiary" {...args}> | ||
Tertiary | ||
</Button> | ||
<Button type="link" {...argsSansSize}> | ||
as Link | ||
</Button> | ||
</> | ||
); | ||
}, | ||
args: { | ||
className: styles['button'] + ' ', | ||
}, | ||
}; |
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
{ | ||
"extends": "./tsconfig.json", | ||
"compilerOptions": { | ||
"emitDecoratorMetadata": true, | ||
"outDir": "" | ||
}, | ||
"files": [ | ||
"../../node_modules/@nx/react/typings/styled-jsx.d.ts", | ||
"../../node_modules/@nx/react/typings/cssmodule.d.ts", | ||
"../../node_modules/@nx/react/typings/image.d.ts" | ||
], | ||
"exclude": [ | ||
"src/**/*.spec.ts", | ||
"src/**/*.test.ts", | ||
"src/**/*.spec.js", | ||
"src/**/*.test.js", | ||
"src/**/*.spec.tsx", | ||
"src/**/*.test.tsx", | ||
"src/**/*.spec.jsx", | ||
"src/**/*.test.js" | ||
], | ||
"include": [ | ||
"src/**/*.ts", | ||
"src/**/*.tsx", | ||
"src/**/*.stories.ts", | ||
"src/**/*.stories.js", | ||
"src/**/*.stories.jsx", | ||
"src/**/*.stories.tsx", | ||
"src/**/*.stories.mdx", | ||
".storybook/*.js", | ||
".storybook/*.ts" | ||
] | ||
} |
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
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
Oops, something went wrong.