Litmus UI

React component library for faster and easier web development. Build your own design system, or start with Litmus UI.

Table of Contents

1. Project Structure
2. Available Scripts
3. Tech Stack
4. Contribution Guidelines
5. Adding a Component
6. Branch
7. Publishing your Library on NPM

1. Project Structure

├── .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

2. Available Scripts

| 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 |

3. Tech Stack

Litmus UI is built using the following:

• Typescript
• Rollup
• Prettier
• ESLint
• StyleLint
• Storybook
• Husky
• Material UI
• Jest
• React Testing Library

4. Contribution Guidelines

Check our official contribution guidelines

5. Adding a new component

• add the new component directory in the src/labs directory 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.

6. Branch

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

7. Publishing your Library on NPM

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.json file.

Note: You will need to update the package.json name property with the name your library will be using on npm.