@legalforcelawrapc/tm-component-library v1.1.36
Trademarkia-Component-Library
Component library for Trademarkia and its projects.
Important Links
Usage Instructions
- Add package to your project using
yarn add @legalforcelawrapc/tm-component-library
- 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}')
- Import any component normally
import { Button } from '@legalforcelawrapc/tm-component-library'
Local Dev Instructions
In the component library root
- Install all dependencies.
yarn
- Create local package.
yarn run rollup
- Make package importable.
yarn link
In the Project, where you want to use the package
- Link package to project.
yarn link "@legalforcelawrapc/tm-component-library"
- 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}')
- Simply import any component with
import { Button } from '@legalforcelawrapc/tm-component-library'
- Run your development server.
Note: If you get an error like useState not defined
then follow the below steps
- go to your
{project root}/node_modules/react
and runyarn link
. - go to your local installation of
{component library root}
and runyarn link react
.
Update/Modify package
- Make changes to your package.
- Run
yarn run generate-barrels
to create exports from all subdirs. - Run
yarn run rollup
. - Changes will be reflect in your project where you are importing it.
Publish package
- Login to npm registry.
npm login
- Publish
npm publish
- 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.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago