DOC.md

⚙️ Technical documentation

🐳 Install dependencies

$ yarn install

💡 Note, if you are going to add new dependencies, you should add the names these dependencies to vite.config.ts in build.rollupOptions.external. This is done to avoid creating re bundles on the libraries externals such as react, bootstrap, styled-component etc.

View example in vite.config.ts

export default defineConfig({
  ...,
  build: {
    ...,
    rollupOptions: {
      external: [
        'react',
        'react-dom',
        'styled-components',
      ],
      ...
    }
  }
}

Config pre-commit

$ yarn prepare

🚀 Publish library

Local machine

Run for publish

$ npm publish

🧪 Scripts available

Run storybook locally

Runs the app in development mode. Open http://localhost:6006 to view it in the browser.

$ yarn storybook

Build storybook

Creates a storybook-static directory in root of project.

$ yarn storybook:build

Deploy storybook

This deployed app in purge.sh. Important that when try deploy app, Purge will request the next credentials.

• Email: rexif49573@pahed.com
• Password: rexif4******hed.com

Open https://ld-ui.surge.sh/ to view it in the browser

$ yarn storybook:deploy

Run tests

$ yarn test

Run coverage test

Creates a coverage directory in root of project.

$ yarn coverage

Build library

Creates a dist directory with a production build of your app.

$ yarn build

🗑 Guide for remove all dependencies of Storybook

💡 This only applies if Storybook is not going to be used

If you want remove Storybook, these are all dependencies that should remove

$ yarn remove @storybook/addon-actions @storybook/addon-essentials @storybook/addon-interactions @storybook/addon-links @storybook/builder-vite @storybook/testing-library babel-loader @storybook/react @babel/core

Remove scripts of package.json

• storybook
• storybook:build
• storybook:deploy

Remove folder .storybook

📄 File naming conventions

This helps us visually identify what task each file is going to do and allows us to perform more efficient searches when developing, this help us the development experience

Use PascalCase for all components

• ModalBody.tsx for create components

  • ModalBody.test.tsx for create components with test

  • ModalBody.stories.tsx for create components with storybook

  • ModalBody.modules.css or *.modules.scss for use css modules, click here for more info

  • ModalBody.style.tsx for create css in js with styled-components

• useFetch.ts for create custom hooks

• withSearch.ts for create HOC

• measures.util.ts for create utilities files

  • map-values.util.ts

• users.service.ts for create utilities files

🎯 Architecture of directories

├── README.md
├── package.json
├── src
│   ├── components
│   │   ├── index.ts
│   │   └── input
│   │       ├── Input.stories.tsx
│   │       ├── Input.styles.ts
│   │       ├── Input.test.tsx
│   │       ├── Input.tsx
│   │       └── index.ts
│   ├── hooks
│   │   ├── index.ts
│   ├── main.tsx
│   ├── styles
│   │   ├── bootstrap-custom.scss
│   │   ├── index.ts
│   │   └── variables.ts
│   ├── utils
│   │   ├── index.ts
│   │   └── measures.util.ts
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts

Used tools

🗂 External libraries

• Date picker
• React bootstrap
• React select
• React bootstrap icons

🌎 References

• Configuration Vitejs for mode library. Click next link for more info here.

• Create import absolutes @/components, @/utils. Click next link for more info here

• Install Storybook with Vite