LCT Africa UI Library

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.

Project Structure

src/
  components/
    ui/
      button/
        Button.tsx
        Button.stories.tsx
        Button.test.tsx

Getting Started

Prerequisites

• Node.js v18+ (recommended)
• npm or yarn

Installation

npm install
# or
yarn install

Development

Start the development server with hot module replacement:

npm run dev
# or
yarn dev

Building for Production

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:

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:

npm run test
# or
yarn test

Storybook

Component stories are located in:

src/components/ui/button/Button.stories.tsx

Run Storybook:

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:

git checkout -b feature/YourFeature

3. Commit your changes:

git commit -am "Add some feature"

4. Push to your branch:

git push origin feature/YourFeature

5. Open a pull request

Note: This library is intended for internal use within LCT Africa projects only.