Aklamio UI components library

@aklamio/ui is a collection of components

Installation

Prerequisites

1. Make sure you have installed React@^17 and ReactDOM@^17. This is the requirement of @mui@^5 library which is used as a root solution of @aklamio/ui.
2. Make sure you're using pnpm@^6 as a package manager in your project.

Usage

1. In your project root run pnpm i @aklamio/ui

2. In the root level of your React App create theme and pass it into ThemeProvider and implement CssBaseLine for injecting the self-hosted fonts used in our library and other general styles:

import { generateTheme, ThemeProvider, CssBaseline } from '@aklamio/ui';

const theme = generateTheme();

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <YourAppRoot />
    </ThemeProvider>
  );
};

3. Import needed component from the library:

import { Button } from '@aklamio/ui';

const User = () => {
  return (
    <div>
      // some JSX...
      <Button variant="primary" onClick={handleClick}>Submit</Button>
    </div>
  );
};

Development

Installation (run from the root folder):

1. Install pnpm globally: npm i pnpm -g
2. Install and use proper node version: nvm install & nvm use
3. Install dependencies: pnpm i -r

Storybook

1. For local development run pnpm run storybook from packages/ui directory
2. To build storybook run pnpm run build-storybook. Then you can see build assets in packages/ui/storybook-static directory

Build

To build the package run pnpm run build from packages/ui directory. Build assets will appear in packages/ui/build directory.

Test

To run projects test complete pnpm run testfrom packages/ui directory.

Publish

npm distribution (and version updating) is done via CI. The publishing job will be triggered when the MR is merged to master. Please follow the commit convention to let semantic-release bump the version correctly.

Linking package for local development

Sometimes during the UI Kit development you need to check the result locally before publish. In most cases you can use storybook for page hot reload, but sometimes you need to check it exact in the package consumer (for example, myAwesomeProject). To do that run following commands:

1. Build the package: pnpm run build
2. Create a global link for your local package pnpm link
3. Then go to the myAwesomeProject folder
4. Run pnpm link @aklamio/ui

After that myAwesomeProject will use local version of @aklamio/ui package. To unlink run pnpm link @aklamio/ui

You can use this docs reference for better commands understanding.

CLI Tool

For the fast component creation you can use the command pnpm run generate -- --name=COMPONENT_NAME or pnpm run generate -- -n=COMPONENT_NAME, where you can pass the name of the component as an argument. CLI will generate for you base folder structure of the component, where you'll see included component, test, story, types, documentation and re-export file with predefined base content. For example, the command pnpm run generate -- --name=Dropdown will create for you a folder with the provided name inside components directory, and following files:

• types.ts - with empty interface (nameholder) of props for the Dropdown component;
• styled.tsx - with exported styled component StyledDropdown that you'll import to the main file;
• Dropdown.tsx - main component file with exported Dropdown component;
• Dropdown.test.tsx - file with unit tests for the component;
• Dropdown.stories.tsx - file with the base structure of the story for Storybook;
• Dropdown.mdx - file with the documentation and base layout for the documentation for Dropdown component;
• index.ts - re-export file to export Dropdown component