Odaptos Design System

Commands

TSDX scaffolds your new library inside /src, and also sets up a Parcel-based playground for it inside /example.

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run either Storybook or the example playground:

Storybook

Run inside another terminal:

yarn storybook

This loads the stories from ./stories.

NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.

Example

Then run the example inside another:

cd example
npm i # or yarn to install dependencies
npm start # or yarn start

The default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.

Setup Files

This is the folder structure we set up for you:

/example
  index.html
  index.tsx       # test your component here in a demo app
  package.json
  tsconfig.json
/src
  index.tsx       # EDIT THIS
/test
  blah.test.tsx   # EDIT THIS
/stories
  Thing.stories.tsx # EDIT THIS
/.storybook
  main.js
  preview.js
.gitignore
package.json
README.md         # EDIT THIS
tsconfig.json

TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

Named Exports

Per Palmer Group guidelines, always use named exports. Code split inside your React app instead of your React library.

Publishing to NPM

Are you connected to npm locally? Go directly to the next step.

1/ To connect to npm from a terminal, follow these steps:

Install Node.js and npm: If you haven't already installed Node.js, download and install the latest version from the official Node.js website. npm is usually installed automatically with Node.js.

Open a terminal

Login to npm: Use the following command to login to npm:

npm login

You will be prompted to enter your username, password and e-mail address. Be sure to use the correct credentials associated with your npm account.

Once you've followed these steps, you should be connected to npm via your terminal. You can now publish packages, install packages from the npm registry, or perform other npm-related operations.

2/ Publish the package npm version minor / major / patch -> For the moment, we're only using the 'patch'. git push npm publish

For the moment, only [email protected] & l.obriot@odaptos can publish the package.

How to use this package ?

npm install odaptos_design_system And next just import the component like : import { Button } from 'odaptos_design_system'; <Button>Hello</Button>