bluconndesign 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# Design System
+
+An internal design system built with **React**, **Material-UI**, and **TypeScript**. This package provides a set of reusable UI components and a customized theme to ensure visual consistency across applications.
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- Node.js (v18 or higher recommended)
+- npm or yarn
+
+### Installation
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+## 🛠️ Development
+
+We use **Storybook** for component development and documentation.
+
+### Running Storybook
+To start the local development server for Storybook:
+```bash
+npm run storybook
+```
+This will open the Storybook UI in your browser (usually at `http://localhost:6006`).
+
+### Building the Library
+To build the design system for production distribution:
+```bash
+npm run build
+```
+The output will be in the `dist/` directory.
+
+## 🏗️ How to Change
+
+### 1. Adding or Modifying Components
+Components are located in `src/components/`. Each component follows this structure:
+```text
+src/components/MyComponent/
+├── MyComponent.tsx          # Component logic
+├── MyComponent.stories.tsx  # Storybook stories/documentation
+└── index.ts                 # Public export
+```
+
+**To add a new component:**
+1. Create a new directory in `src/components/`.
+2. Implement your component and its stories.
+3. Export the component from `src/components/index.ts`.
+
+### 2. Customizing the Theme
+The theme is globally managed in `src/theme/`.
+
+- **Colors**: Modified in `src/theme/colour.ts` or via design tokens in `src/tokens/`.
+- **Typography**: Configured in `src/theme/typography.ts`.
+- **Component Overrides**: MUI component defaults (like button padding or border-radius) are customized in `src/theme/components/`.
+- **Main Config**: `src/theme/theme.ts` brings everything together.
+
+### 3. Design Tokens
+Shared tokens (colors, spacing, etc.) are stored in `src/tokens/`. Updating these tokens will automatically propagate changes to the theme.
+
+## 📁 Project Structure
+
+```text
+├── .storybook/         # Storybook configuration
+├── src/
+│   ├── components/     # UI Components
+│   ├── theme/          # MUI Theme configuration
+│   ├── tokens/         # Design tokens (JSON)
+│   ├── index.ts        # Main entry point (exports all components)
+│   └── theme/index.ts  # Theme entry point (exports the theme)
+├── dist/               # Compiled build artifacts
+└── tsup.config.ts      # Build configuration (tsup)
+```
+
+## 📦 Usage in Other Projects
+
+Once published, you can use the design system in your React app:
+
+```tsx
+import { Button } from 'design_system';
+import { theme } from 'design_system/theme';
+import { ThemeProvider } from '@mui/material';
+
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <Button variant="contained">Click Me</Button>
+    </ThemeProvider>
+  );
+}
+```