feat: TUP-700 @tacc/core-components #463
Draft
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
* 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.
* docs(README): remove duplicate step
* 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
* 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
This was referenced May 16, 2024
This was referenced May 20, 2024
* test: move peerDeps to devDeps To avoid error like: ``` npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: hazmapper@0.0.0 npm ERR! Found: vite@3.2.10 npm ERR! node_modules/vite npm ERR! dev vite@"^3.0.7" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vite@"^5.0.0" from @nx/vite@17.3.2 npm ERR! node_modules/@nx/vite npm ERR! peer @nx/vite@"^17.2.8" from @tacc/core-components@0.0.1 npm ERR! node_modules/@tacc/core-components npm ERR! @tacc/core-components@"file:../../tacc-core-components-0.0.1.tgz" from the root project ``` * fix: match root & core-components vite…css version * fix: move vite…css to devDep * fix: core-components devDeps * fix: react-dropzone not a core-components dep yet * fix: missing @nx/react (thus no css module .d.ts) * conf: remove NPM scripts cuz they do not work The commands via `nx` for core-components DO work! * fix: missing @testing-library/user-event
* docs(core-components): README polish * chore(core-components): update version
1 task
* fix: revert FormikFieldWrapper→FieldWrapperFormik * fix: support .js imports * chore: use index.js when component is .jsx * fix: make FormikCheck useField like other fields * fix: FieldWrapper… TACC-Cloud/Hazmapper form crash TACC-Cloud/hazmapper's only form crashed. If checkbox is removed, then now it doesn't. Expect checkbox fix in next commit. TACC-Cloud/hazmapper#239 * fix: FieldWrapper… TACC-Cloud/Hazmapper checkbox TACC-Cloud/hazmapper's only checkbox field crashed. Now it doesn't. TACC-Cloud/hazmapper#239 * fix: FormikCheck not supporting ID attr * chore: npx nx format:write * fix: FieldWrapper… ID fallback support incomplete * fix: remove unused prop * refactor: use Formik field wrappers as components * fix: FieldWrapper… ID fallback support STILL incomplete * docs: update author, add contributors * Move to peer dependencies (#484) * Move to peer dependencies Also add vite for building as we want to make stand-alone * Make 0.0.3 prelease * Bump postcss and postcss-preset-env to match core styles requirements * Fix pretty issue * Add vite-plugin-lib-inject-css * Make uuid only as a dependeny allow any 8 or 9 version --------- Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com> --------- Co-authored-by: Nathan Franklin <nfranklin@tacc.utexas.edu>
In `epic/TUP-700…` branch: 1. `npm ci` 2. `npx nx build tup-cms` 3. Error building core-components as required by `npx nx build tup-ui`. In `main` branch: 1. `npm ci` 2. `npx nx build tup-cms` 3. No error.
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.
Overview
Publish a
@tacc/core-componentsfrom —libs/core-componentslibs/core-wrappers— which now exist together in one directory,
libs/core-components.Status
Related
Changes & Testing & UI
Warning
Changed
apps/tup-cms/Dockerfile.607b2e9In
epic/TUP-700…branch:npm cinpx nx build tup-cmsnpx nx build tup-ui.In
mainbranch:npm cinpx nx build tup-cmsNotes
How This Was Implemented