tagliatelle-components

Tagliatelle

Tagliatelle is a react component library built for www.stylist.co.uk.

We use:

• Storybook as our UI playground.
• Zeroheight to document our style guide.
• Chromatic as our visual testing tool.

Please ask for required credentials to the above.

Click here to visit our style guide: https://stylistmagazine.zeroheight.com/styleguide Click here to visit our hosted Storybook: https://61547074d1062d003aaf36e0-qtkwlizgaq.chromatic.com/

Getting Started with Local Development

npm run bootstrap

To install dependencies.

Running npm run start will launch Storybook at port http://localhost:6006/

and create a .env file with the following included;

CHROMATIC_PROJECT_TOKEN=

1. Creating a component

To create a new component its best to run the following command.

  npm run create-component

This command will require you to respond to two questions.

? Please select which category the new component belongs to? (Use arrow keys)
❯ atoms
  molecules
  organisms

? What is the component name? (please use camelCase)

You'll find your new component folder in the following directory src/components{category}

The new component folder will come with a *.stories.tsx file ready so you can see the changes you make on Storybook.

You will also find the following files:

- DOMAttributes
  - component.tsx
  - component.style.ts (We use styled-components for our styling)
  - component.test.tsx (Take a snapshot of your built component!)
  - index.ts

Happy Building!

2. Creating an icon

To create a new icon, add the *.svg to the following directory src/icons/assets, then in the terminal, run the following command;

  npm run create-icon

For logos run

  npm run create-icon -- --isLogo="true" --useCurrentColor="false"

In the src/icons/components you'll find a new component for your icon. The folder will also include a *.stories.tsx file enabling you to view this new icon on storybook.

3. Adding a design token

Design tokens can be found at src/tokens.

4. Using tagliatelle-components in Doris.

Run npm run link in tag and then npm link tagliatelle-components in Doris to create, make changes to components and use them in Doris without pubishing the component library.

Everytime you make a change and want to see it in Doris, run npm run build in tag.

If you prefer for rollup to watch for changes add -w to the link command in package.json.

Compiling and Publishing

PR and test changes on Chromatic

Increment package.json version, run npm i and then commit and push changes.

Run npm run chromatic on the branch you've opened a PR for.

Make sure you have the --project-token= in your .env file.

Build

After an approved PR, run npm run build.

Login in to npm with npm login and then run npm publish to publish your changes.

Storybook Production

Storybook can be deployed using the chromatic command.

Visit our storybook live in action: https://61547074d1062d003aaf36e0-qtkwlizgaq.chromatic.com/

Tada thats it!