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.

• Side Note: New Icons have been added which will replace all current icons at a later date. New icons can be found in the 'new-components' directory and in storybook under 'All Icons' -> 'New'.

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

Github

We have a workflow on Github which handles the build and publishing of tagliatelle. It uses version 14.15.0 of node, just like we do on our local machines.

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!

Typescript and Tag

As Tag is built using typescript, we want our consuming app to be privy to each component's prop types. Typescript can generate declaration files for your types, which defines all the types a typescript file has declared.

To have typescript generate this for us we add in the tsconfig.json file the following.

{
  "compilerOptions": {
    ...other code
    "rootDir": "src/",
    "declaration": true,
    "declarationDir": "dist/dts",
  },
  ...other code
}

This flags the typescript engine to create declarations files for each typescript file that lies within the scope of the rootDir, and once it creates it we ask for them to be stored in the following directory dist/dts.

This works well but means our bundle size gets bigger because the number of files in the declarationDir is a lot. To optimise our bundle we want to be able to rollup our declarations into one single index file, just like we do with the rest of our code.

To do so we have to use the npm package rollup-plugin-dts.

We call the package in our rollup.config.js file like so;

  {
    input: 'dist/dts/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts()]
  }

When we build our app, in addition to our index.js file we get an index.d.ts file that our consuming app has access to. So, when a Tag component is now used in a consuming app the IDE can reference that components types to help with development.