Trademarkia-Component-Library

Component library for Trademarkia and its projects.

Important Links

• NPM Package
• Storybook Documentation

Usage Instructions

1. Add package to your project using
   yarn add @legalforcelawrapc/tm-component-library
2. import styles by adding this line to your src/tailwind.config.js file in content like. path.join(path.dirname(require.resolve('@legalforcelawrapc/tm-component-library')), '**/*.{js,ts,jsx,tsx}')
3. Import any component normally
   import { Button } from '@legalforcelawrapc/tm-component-library'

Local Dev Instructions

In the component library root

1. Install all dependencies.
   yarn
2. Create local package.
   yarn run rollup
3. Make package importable.
   yarn link

In the Project, where you want to use the package

1. Link package to project.
   yarn link "@legalforcelawrapc/tm-component-library"
2. import styles by adding this line to your src/tailwind.config.js file in content like. path.join(path.dirname(require.resolve('@legalforcelawrapc/tm-component-library')), '**/*.{js,ts,jsx,tsx}')
3. Simply import any component with
   import { Button } from '@legalforcelawrapc/tm-component-library'
4. Run your development server.

Note: If you get an error like useState not defined then follow the below steps

1. go to your {project root}/node_modules/react and run yarn link.
2. go to your local installation of {component library root} and run yarn link react.

Update/Modify package

1. Make changes to your package.
2. Run yarn run generate-barrels to create exports from all subdirs.
3. Run yarn run rollup.
4. Changes will be reflect in your project where you are importing it.

Publish package

1. Login to npm registry. npm login
2. Publish npm publish
3. Authenticate your account and done!

Storybook v7

This package supports storybook v7, so it is necessary to make a Story once a new component is added to the library.

• Refer below to know how to write stories.
  https://storybook.js.org/docs/7.0/react/writing-stories/introduction
• Run Storybook yarn run storybook and then visit https://localhost:6006.

Convention

• The project using this package is expected to have these colors defined in tailwind.config.js.

States

default
    |-primary
    |-- DEFAULT
    |-- 200, 300, 400, 500, 600, 700, 800
    |-secondary
    |-- DEFAULT
    |-- 200, 300, 400, 500, 600, 700, 800
base-color
disabled
    |-disabled-gray  was tm-gray-100
    |-disabled-gray-300 for borders, was tm-gray-300
borders
    |-default-gray
    |-default black
    |-default-black

• In addition to these, package supports all tailwind default colors.