@lctafrica/ui 0.0.0 → 0.0.2

package/README.md

@@ -1,73 +1,142 @@
-# React + TypeScript + Vite
+# LCT Africa UI Library
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is an internal UI component library for **LCT Africa**, built with **React**, **TypeScript**, and **Vite**. It provides reusable, consistent, and tested UI components for use across LCT Africa’s frontend projects.
+---
 
-Currently, two official plugins are available:
+## Project Structure
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+```
+src/
+  components/
+    ui/
+      button/
+        Button.tsx
+        Button.stories.tsx
+        Button.test.tsx
+```
 
-## React Compiler
+---
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Getting Started
 
-## Expanding the ESLint configuration
+### Prerequisites
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+- Node.js v18+ (recommended)
+- npm or yarn
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+### Installation
+
+```bash
+npm install
+# or
+yarn install
+```
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+### Development
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+Start the development server with hot module replacement:
+
+```bash
+npm run dev
+# or
+yarn dev
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+---
+
+## Building for Production
+
+```bash
+npm run build
+# or
+yarn build
+```
+
+---
+
+## Linting
+
+This project uses **ESLint** with recommended **TypeScript** and **React** rules.
+
+You can expand the ESLint configuration for type-aware or React-specific lint rules. For example:
+
+```bash
+npm install --save-dev eslint-plugin-react-x eslint-plugin-react-dom
 ```
+
+Check `eslint.config.js` for comments on stricter or stylistic rules.
+
+---
+
+## Testing
+
+Example tests are located alongside components, e.g.:
+
+```
+src/components/ui/button/Button.test.tsx
+```
+
+Run tests with:
+
+```bash
+npm run test
+# or
+yarn test
+```
+
+---
+
+## Storybook
+
+Component stories are located in:
+
+```
+src/components/ui/button/Button.stories.tsx
+```
+
+Run Storybook:
+
+```bash
+npm run storybook
+# or
+yarn storybook
+```
+
+---
+
+## Project Highlights
+
+- **React + TypeScript:** Modern, type-safe UI development
+- **Vite:** Fast build and dev server
+- **Component-driven:** UI components organized under `ui`
+- **Testing:** Example tests using Vitest
+- **ESLint:** Ensures code quality and consistency
+
+---
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch:
+
+```bash
+git checkout -b feature/YourFeature
+```
+
+3. Commit your changes:
+
+```bash
+git commit -am "Add some feature"
+```
+
+4. Push to your branch:
+
+```bash
+git push origin feature/YourFeature
+```
+
+5. Open a pull request
+
+> **Note:** This library is intended for internal use within LCT Africa projects only.
+
+---

package/dist/components/ui/button./Button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/ui/button./Button';