avihang-react-design

Overview

A modern, accessible React UI component library designed for Avihang Company.

Installation

npm install avihang-react-design
# or
yarn add avihang-react-design

Importing Library Styles

To use the styles, import them in your main entry file (src/main.tsx):

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "avihang-react-design/dist/style.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Quick Start

import { Button, Tooltip } from "avihang-react-design";

function App() {
  return (
    <div>
      <Button variant="subtle" size="lg" styles="natural">
        Click me
      </Button>
      <Tooltip content="home">
        <Button styles="natural">Go home</Button>
      </Tooltip>
    </div>
  );
}

Core Principles

• Customization: Easily themeable through CSS variables.
• Performance: Lightweight and tree-shakeable.
• TypeScript: Full TypeScript support with detailed type definitions.

Components

Button

The Button component is used to trigger actions or events.

Props

| Prop | Type | Default | Description | |----------|--------------------------------------|----------|----------------------------------| | styles | 'primary' \| 'secondary' \| 'natural' | 'primary' | The visual style of the button. | | size | 'sm' \| 'md' \| 'lg' | 'md' | The size of the button. | | disabled | boolean | false | Whether the button is disabled. | | onClick | React.MouseEventHandler | - | Click event handler. |

Examples

// Primary button
<Button styles="primary">Primary Button</Button>

// Secondary button
<Button styles="secondary" size="lg">
  Large Secondary Button
</Button>

// Disabled button
<Button disabled>Disabled Button</Button>

Dependencies

This project uses Radix UI and ShadCN for headless UI components.

Custom Theme

You can create a custom theme by modifying your index.css file in the libary:

 [data-theme="halloween"] {
    --color-Primary-50: 255 242 204; /* Light Cream */
    --color-Primary-100: 255 230 153; /* Light Yellow */
    --color-Primary-200: 255 217 102; /* Yellow */
    --color-Primary-300: 255 204 51; /* Golden Yellow */
    --color-Primary-400: 255 191 0; /* Gold */
    --color-Primary-500: 255 178 0; /* DeeP Gold */
    --color-Primary-600: 230 162 0; /* Darker Gold */
    --color-Primary-700: 204 147 0; /* Even Darker Gold */
    --color-Primary-800: 178 132 0; /* Almost Brown Gold */
    --color-Primary-900: 153 117 0; /* Brown Gold */
    --color-Primary: 255 178 0; /* Deep Gold */

    --color-Secondary-50: 255 102 0; /* Light Orange */
    --color-Secondary-100: 255 128 25; /* Lighter Orange */
    --color-Secondary-200: 255 153 51; /* Light-Medium Orange */
    --color-Secondary-300: 255 178 77; /* Medium Orange */

and then use useTheme custom hook in your project to change the theme

import { Button, useTheme } from "avihang-react-design";

const App = () => {
  const  setTheme  = useTheme(); 

  return (
    <div>
      <Button styles="primary" onClick={() => setTheme("halloween")}>
        Switch to Halloween Theme
      </Button>
    </div>
  );
};

Building & Publishing

To add or modify components, follow these steps:

1. Update the version number in package.json.
2. Run the build process:

   npm run build

3. Publish the package to npm:

   npm publish