Kuura Component Library

Introduction

The Kuura Component Library is a modern, lightweight, and reusable component library built with React and TypeScript. It is designed to streamline development by providing a set of high-quality UI components that are easy to use, customizable, and optimized for performance.

Features

• React And Vite
• Reusable UI Components
• Tested with Vitest
• Storybook Integration – Storybook is implemented, you can check the components in storybook
• Optimized for Bundle Size – Efficient code splitting

Installation

Warning The package has not been published yet.

To install the library in your project, use npm or yarn:

npm install @kuura/component-library
# or
yarn add @kuura/component-library

Customization

Import the global styles in your project:

import '@kuura/component-library/dist/assets/config.css';

You can reference the global styles file to see the available customizations. An example customization is shown below:

:root {
    --color-primary: var(--color-orange);
    --color-secondary: var(--color-purple);
    --font-family-sans: 'Arial', sans-serif;
    --font-size-md: 1.25rem;
    --radius: 0.5rem;
    --spacing-md: 1.5rem;
    --padding-md: 1.5rem;
    --shadow-md: 0 0 1rem rgba(0, 0, 0, 0.2);
}

Usage

You can then use the components in your project like such:

import { Button } from '@kuura/component-library';

function App() {
    return <Button color="primary">Click Me</Button>;
}

export default App;

Development

Prerequisites

Make sure you have the following installed:

• Node.js (LTS recommended)
• npm or yarn

Clone the Repository

git clone https://github.com/your-org/kuura-component-library.git
cd kuura-component-library

Install Dependencies

npm install
# or
yarn install

Coding Conventions

Prettier and ESLint configurations have been set up for the project. Make sure to have those working in your editor.

Component Structure

Each component should be placed in its own folder within the src/components directory. The component folder should contain the following files:

• ComponentName.tsx – The component file, when necessary, the component can be split into multiple files.
• ComponentName.stories.tsx – The Storybook file for the component.
• ComponentName.test.tsx – The unit test file for the component.
• ComponentName.module.css – The CSS module file for the component.

When defining variables in the component, you can pass them through the style prop. For example:

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
    color?: ThemeColor;
    textColor?: 'light' | 'dark' | 'accent';
    size?: Size;
};

export const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
    return (
        <button
            className={clsx(
                styles.button,
                styles[`size-${props.size || 'md'}`],
                styles[`text-${props.textColor || 'light'}`]
            )}
            style={colorShades(props.color || 'primary')}
            {...props}
        >
            {children}
        </button>
    );
};

Helper Functions

• colorShades – This function returns the color shades based on the color passed to it. This way you can access color-x in the css module file.

Helper Types

• ThemeColor – this type defines the possible color options that are available in the theme. These colors can be customized by the user of the library in their own CSS file.
• Size – this type defines the possible size options for a given variable. (sm,md,lg)

Color Conventions

When using a color inside of a component we use the --color-x variable name, this way any given color can be passed in, parsed by the colorShades function, and then used in the component.

Start the Development Server

Run the Vite development server:

npm run
# or
yarn dev

Running Tests

We use Vite Test for unit testing:

npm run test
# or
yarn test

Storybook

To view and test components interactively, run Storybook:

npm run storybook
# or
yarn storybook

Build

To build the library for production:

npm run build
# or
yarn build