esarj-ui-lib v0.0.103

@esarj/ui

This library includes components used in Eşarj systems. Components documentation has been prepared using storybook.

Currently, two official plugins are available:

• React + TypeScript + Vite
• rollup
• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Available Scripts

In the project directory, you can run:

npm run dev:

Runs the storybook in the development mode.\ Open http://localhost:6006 to view it in the browser. The page will reload if you make edits.

npm run build:

Build the UI library using rollup

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

You can learn more in the Storybook documentation.

Components

Unit, integration, snapshot, image-snapshot tests are hereafter referred to as 'tests'.

• Components should be documented with stories.
• Tests are implemented within their own responsibilities.
• Stories are provided with interaction, control, action and tests.
• Components and properties are described.

Components are created at the following levels

• Core
  • It consists of atomic and business logic-free components used throughout the application
  • Core components can be dependent by all components.
• Business
  • They are stand-alone components that contain business logic
  • Business components can be dependent on Business and Screen components.
• Screen
  • They are components formed by many business components coming together.

Folder structure for components

/src
  /components
    /core
      /[component]
        /[component].tsx
        /[component].storeies.tsx
    /business
      /[feature]
        /detail
          /[feature]Detail.tsx
          /[feature]Detail.storeies.tsx
        /list
          /filter
          [feature]List.tsx
          [feature]List.stories.tsx
        /...
    /screen
      /[screen]
        /[screen].stories.tsx
        /[screen].tsx

# [feature]: Station, User etc.
# [screen]: StationManagement, UserManagement etc.