Esbie Component Library
Welcome to the
Esbie Component Library! This project is a reusable, customisable component library built with React, TypeScript, and styled-components. It follows atomic design principles and includes components organised into atoms, molecules, organisms, and templates. The library is bundled using Rollup and tested with Jest and React Testing Library. A sandbox app is also included for developing and testing components.
Table of Contents
-
Project Structure
-
Getting Started
-
Scripts
-
Component Structure
-
Testing Components
-
Contributing
Project Structure
This repository uses a monorepo structure with
pnpm workspaces. The main folders include:
-
src/: Contains the component library source code.
-
sandbox/: A development environment to test and preview components.
$3
The component library is organized following atomic design principles:
-
Atoms: Basic, reusable elements like
Button,
Icon, and
Text.
-
Molecules: Combinations of atoms, such as
FormField or
Card.
-
Organisms: Groups of molecules, like
Form or
Header.
-
Templates: High-level layouts, such as
BasicLayout or
DashboardLayout.
Each component folder typically contains:
-
ComponentName.tsx: The main component file.
-
ComponentName.test.tsx: Jest test file.
-
index.ts: Barrel file for easier imports.
---
Getting Started
$3
-
Node.js: Ensure Node.js is installed (v14+ recommended).
-
pnpm: Install
pnpm globally if you haven't already:
npm install -g pnpm
Installation
1. Clone the repository:
git clone https://github.com/your-username/esbie-component-library.git
2. Navigate to the project directory:
cd esbie-component-library
3. Install dependencies:
pnpm install
Running the Sandbox App
To test components in a live environment, run the sandbox app:
cd sandbox
pnpm run dev --filter sandbox
This will start the Vite dev server at http://localhost:2000 (or another port if configured). Open this address in your browser to preview the components in the sandbox environment.
Scripts
The following commands are available in the project:
-
pnpm run build: Builds the component library using Rollup.
-
pnpm run dev --filter sandbox: Starts the sandbox app for testing components in a live environment.
-
pnpm run test: Runs tests for all components using Jest.
Testing Components
Components are tested with Jest and React Testing Library. Test files are located alongside each component and follow the .test.tsx naming convention.
To run tests:
pnpm run test
Notes
CSS Reset Recommendation: For consistent styling across browsers, I recommend applying a CSS reset or normalisation in your codebase. This component library does not include a global CSS reset, allowing you to choose the best approach for your project.
Contributing
Contributions are welcome! If you’d like to contribute to this project, please follow these steps:
1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Make your changes and commit them (git commit -m 'Add YourFeature').
4. Push to your branch (git push origin feature/YourFeature).
5. Open a pull request to the main branch.
Please ensure your code follows the existing style, is well-tested, and includes documentation if necessary.
License
This project is licensed under the MIT License. See the
LICENSE file for details.