feat: TUP-700 @tacc/core-components - storybook (replaced by #462) #435
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
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.
- 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.
…0-core-components-node-pkg--storybook
…0-core-components-node-pkg--storybook
…0-core-components-node-pkg--storybook
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
wesleyboar
changed the base branch from
feat/TUP-700-core-components-node-pkg
to
feat/TUP-700-core-components-node-pkg--wrappers
…eat/TUP-700-core-components-node-pkg--storybook
…eat/TUP-700-core-components-node-pkg--storybook
…eat/TUP-700-core-components-node-pkg--storybook
…eat/TUP-700-core-components-node-pkg--storybook
…eat/TUP-700-core-components-node-pkg--storybook
…eat/TUP-700-core-components-node-pkg--storybook
This causes more work when renaming a library.
…eat/TUP-700-core-components-node-pkg--storybook
These references are outside of this lib, so yeah, reference lib name.
…eat/TUP-700-core-components-node-pkg--storybook
…eat/TUP-700-core-components-node-pkg--storybook
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
For core-components, tell dev to only install for core-components.
All this change was required to run `npx nx serve core-components`.
Error occurred as red squiggly udnerline in code editor when importing a component from within a component.
wesleyboar
merged commit 8bf0550
into
feat/TUP-700-core-components-node-pkg--wrappers
1 check passed
wesleyboar
added a commit
that referenced
this pull request
May 16, 2024
This reverts commit 8bf0550.
This was referenced May 16, 2024
|
See #462 instead. |
wesleyboar
added a commit
that referenced
this pull request
May 16, 2024
* test(@tacc/core-components): TUP-700 (WIP)
* fix: tup-700 do not commit dist
* docs(README): tup-700 add `build core-components`
* feat: tup-700 peer dependencies
* feat: tup-700 build (no tested on a client yet)
* feat: tup-700 1st attempt to split files/css build
* fix: tup-700 add main file to dist
* build: tup-700 do not build tests
* fix: tup-700 add types & fix resulting errors
1. import & use `dts`
- Fixes build error:
> error TS2307: Cannot find module './….module.css' or its corresponding type declarations.
> … import styles from './….module.css';
2. `"composite": true`
- Fixes Typescript lint error:
> Referenced project '/…/tup-ui/libs/core-components/tsconfig.lib.json' must have setting "composite": true.
3. `"declaration": true,`
- Seemingly caused by `"composite": true`.
- Fixes Vite build error:
> \> nx run core-components:build:production
> error TS6304: Composite projects may not disable declaration emit.
* fix: tup-700 tag types in package.json
* style: tup-700 move rollup opts input glob inline
* style: npx nx format:write
* style: tup-700 peerDependencies
"So the consuming application is aware that it must have React installed to use this package."
— https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#dependencies
* feat: tup-700 add CSS as sideEffects
"To prevent the CSS files from being accidentally removed by the consumer's tree-shaking efforts…"
—https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#side-effects
* feat: tup-700 ensure build before publish
* fix: tup-700 do 2d5ab1c, 6336f2c, 233f165 correct
Move the changes from thsoe commits to be in core-components package.json, not root package.json.
- style: tup-700 peerDependencies
"So the consuming application is aware that it must have React installed to use this package."
— https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#dependencies
- feat: tup-700 add CSS as sideEffects
"To prevent the CSS files from being accidentally removed by the consumer's tree-shaking efforts…"
— https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma#side-effects
- feat: tup-700 ensure build before publish
* chore: tup-700 resolve vite.config.ts comment code
Resolve all commented code in `vite.config.ts`.
- `outDir` DELETED cuz `rollupOptions` > `output` exists
- `reportCompressedSize` RESTORED cuz why not & it was already there
- `commonjsOptions` & `transformMixedEsModules` DELETED cuz…
- no `require` i.e. common js modules
- `lib`'s `name` and `fileName` DELETED cuz…
- `rollupOptions` > `output` > `assetFileNames` exists
- `rollupOptions` > `output` > `entryFileNames` exists
* fix: tup-700 scripts inaccurate
* docs: tup-700 README
* feat: tup-700 core-components deps via workspace
* fix: tup-700 core-components deps via workspace
* npx nx format:write
* fix: core-components/package-lock.json should not exist
Only 1 root package-lock.json in an Nx project such as tup-ui.
Having this may have been cause of errors when starting CMS.
* chore: rename Navbar → NavbarWrapper
* chore: rename FieldWrapperFormik → FormikFieldWrapper
* npx nx format:write
* chore: move withBuilder to core-components
* feat: move core-wrappers to core-components
Because the distinction between them is not accurate.
Both have components that import other components.
* lint: rename some index.js to index.ts
* lint: import via rel. path not lib name
* deps: add core-wrappers deps to peerDeps
* 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): remove duplicate step
* 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
wesleyboar
changed the title
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.
Migrated to #462.