Overview

After some bad words to "goodlike algorithm" I managed this react library. A lot of problem and issues coming with React + Tailwind + Storybook.

This library make my life easy. Afer update this i make some modifications and i solved some css issues.

Now it seems to work!!!

How to

If you don't want take 3 days or a week to understand all follow this todo.

There are tipically 2 use cases for this library:

• Production: We have our super client and we create our frontend from him/her.
• Development: We want make modifications to design system.

Production

Super easy:

From skratch

To use this library from skratch you need to:

1. Make a Nextjs or React project (in typescript please).
   • To make life easier we will call this project test-frontend.
2. Install this library into test-frontend.
3. Decide if install Tailwind or not on test-frontend-
   • If you install it you can inject classNames into our design-system component
   • Otherwise you cannot customize it
4. Set up library:
   • test-frontend/src/app/globals.css:

/* Import compiled style of clubz-design-system-library */
@import url('../../node_modules/clubz-design-system-library/dist/clubz-design-system-library.cjs.development.css');

/* If you want inject tailwind styles to clubz-design-system-library */
@tailwind base;
@tailwind components;
@tailwind utilities;

• test-frontend/src/...:

import { ...MAGIC_COMPONENT/S... } from 'clubz-design-system-library'
// ...

You don't want to loose time

Simply clone our standard frontend project!

Development

If you are here and you want help me, you are an hero!

I will describe syntetically what you need to know to help me here. If you want to goo deep, please, contact me.

Edit library

You can create, modify and remove whatever you want. But WHILE you do this run npm run start command. With this command you can see if you do mistakes or not

Test library

Instread of do npm publish every modification you can use npm link command. Suppose you are testing into you test-frontend. Every new update you want test you can use (into test-frontend directory) the command:

• npm link [/path_of_clubz-design-system-library]