Skip to content

Latest commit

 

History

History
149 lines (118 loc) · 5.18 KB

README.md

File metadata and controls

149 lines (118 loc) · 5.18 KB
Raw

Kubera UI

DeepScan grade

React component library for faster and easier web development. Build your own design system, or start with Kubera 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

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