Running locally can cause issues with multiple versions of react/styled-components producing an error relating to invalid hook calls.
To fix this locally, run the following:
cd YOUR_PROJECT/
yarn install
cd joes-components/
yarn install
npm link ../path/to/your-project/node_modules/react
npm link ../path/to/your-project/node_modules/styled-components
yarn link
cd YOUR_PROJECT/
yarn link @jalmendhry1/joes-components
yarn dev
This builds to /dist
and runs the project in watch mode so any edits you save inside src
causes a rebuild to /dist
.
will rebuild if you change files within src/
Then run Storybook
Run inside another terminal:
yarn storybook
This loads the stories from ./src/componetns/**/*.stories.tsx
.
TODO: implement husky hooks for ESlint/Prettier/Tests
Jest tests are set up to run with npm test
or yarn test
.
Calculates the real cost of your library using size-limit with npm run size
and visulize it with npm run analyze
.
This is the folder structure we set up for you:
/src
/components/
/YourComponent
YourComponent.tsx # EDIT THIS
YourComponent.test.tsx # EDIT THIS
YourComponent.stories.tsx # EDIT THIS
YourComponent.scss # EDIT THIS
index.ts
/.storybook
main.js
preview.js
.gitignore
package.json
README.md # EDIT THIS
tsconfig.json
uses Rollup as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.
tsconfig.json
is set up to interpret dom
and esnext
types, as well as react
for jsx
. Adjust according to your needs.
CJS, ESModules, and UMD module formats are supported.
The appropriate paths are configured in package.json
and dist/index.js
accordingly. Please report if any issues are found.
Per Palmer Group guidelines, always use named exports. Code split inside your React app instead of your React library.
There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
For vanilla CSS, you can include it at the root directory and add it to the files
section in your package.json
, so that it can be imported separately by your users and run through their bundler's loader.