Fcasb-ui NPM | npm.io

FCASB UI

React component library for faster and easier web development.

FCASB UI
- Table of Contents - 1. Project Structure - 2. Available Scripts - 3. Tech Stack - 4. Adding a new component

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

FCASB UI is built using the following:

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

`4. Adding a new component`

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