FComponents (Internal UI components)

This package use for internal project for fint company

Usage

Import CSS

At top of your app, import css

import 'fint-component/dist/style.css'

Import your components

import React from 'react';
import 'fint-component/dist/style.css'

import { FActions, FCalendar } from 'fint-component';

function App() {
  return (
    <div className="App">
      <FActions showDownload showRemove />
      <FCalendar iconColor='red' />
    </div>
  );
}

export default App;

Storybook

yarn run storybook in terminal

Contributor

Write new component and testing by storybook

All components will be written in src/stories folder. Each component must has the following files: [your_name_component].tsx, [your_name_component].stories.tsx, styles.scss, index.ts. Anything else belong to this component must place at the same folder

[your_name_component].tsx Writing the docs for each props in interface or prop type, and above the name of the component, this will help generate auto docs for story

[your_name_component].stories.tsx this is config for story of the component. Meta is common config for component. Each export const [your_story_name] is one story, pass your props to show specific story. Please refer to the docs

Pre-commit

Pre-commit use eslint to check code convention (eslintrc.cjs). Commitlint to check commit convention (commitlint.config.cjs)

Publish to NPM

1. Run npm login in terminal to login NPM
2. In package.json file, increase version (Please refer to Semantic versioning)
3. Run npm run publish in terminal to publish your package. Note: this command with run render test and coverage test before publish