React component library for faster and easier web development. Build your own design system, or start with Litmus UI.
- Project Structure
- Available Scripts
- Tech Stack
- Contribution Guidelines
- Adding a Component
- Branch
- Publishing your Library on NPM
├── .storybook
| ├── main.js
├── coverage
├── dist
├── mocks
| ├── styleMock.js
├── node_modules
├── scripts
| ├── postBuild.js
├── src
│ ├── core
| | ├── <Stable Components>
| | | ├── __tests__
| | | ├── <components>.stories.tsx
| | | ├── index.ts
| | | ├── <components>.tsx
| | | ├── styles.tsx
| | ├── index.ts
│ ├── labs
| | ├── <UnStable Components>
| | | ├── __tests__
| | | ├── <components>.stories.tsx
| | | ├── index.ts
| | | ├── <components>.tsx
| | | ├── styles.tsx
| | ├── index.ts
| ├── index.ts
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── jest.config.js
├── LICENSE
├── package.json
├── package.lock.json
├── README.md
├── CONTRIBUTION.md
├── rollup.config.js
├── stylelint.config.js
├── tsconfig.json
├── yarn.lock
| Script | Description |
|---|---|
dev |
Start the development storybook server with hot module reloading. |
format |
Format your code with Prettier |
format:check |
Formats only the changed code with Prettier. |
clean |
Safely remove files and folders on all platforms directories. |
test |
Run your Jest tests once. |
test:watch |
Run your Jest tests in watch mode. |
test:coverage |
Run your Jest tests and check for code coverage. |
lint |
Lint both your code and style with ESLint. |
lint:script |
Lint only your code with ESLint. |
lint:watch |
Lint your code with ESLint in watch mode. |
lint:style |
Lint your css with ESLint. |
storybook |
Start the storybook server. |
build |
Compile your application and make it ready for deployment |
Litmus UI is built using the following:
- Typescript
- Rollup
- Prettier
- ESLint
- StyleLint
- Storybook
- Husky
- Material UI
- Jest
- React Testing Library
Check our official contribution guidelines
- add the new component directory in the
src/labsdirectory following this folder structure
├── MyComponent
| ├── index.ts
| ├── styles.ts
| ├── MyComponent.tsx
| ├── MyComponent.stories.tsx
| ├── __tests__
| | ├── MyComponent.test.tsx
Once you have created your new component make sure you have exported it in the src/labs/index.ts file. Doing so allows the component to be compiled into the final bundle using rollup.
// src/labs/index.ts
export * from './MyComponent';
export * from './SomeOtherComponent';
You can develope your new component using storybook as your playground. Once you have added the .stories.tsx file for you new component, you can run yarn storybook to start the service.
dev - This branch is for incomplete unstable components, accepting and reviewing PRs for the same.
next - This branch is for components which are complete but don't have all the required specification (tests, stories, etc) shifted from dev
master - This branch is for stable components shifted from next
Once you have created an account on NPM you will be able to publish your library using these commands
$ yarn build
$ cd dist
$ npm pack
$ npm publish
Note: You will have to manually bump your versions in the
package.jsonfile.
Note: You will need to update the package.json name property with the name your library will be using on npm.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent