Project Structure

Our library is built on a Modular File Architecture. Each component is self-contained within its own directory, making it easy to manage, test, and—most importantly—copy into your own project if you prefer manual installation.

Internal Library Structure

If you are contributing to the library or exploring the source code, this is how the core is organized:

• my-ui-library
  • packages
    • ui
      • src
        • components
          • Button
            • Button.jsx
            • button.module.css
            • index.js
          • Input
        • index.js
      • package.json
  • README.md

Manual Integration Structure

For users who do not wish to use npm install, you should replicate the following structure within your project’s components or ui folder:

Component Folder Pattern

Every component you “pluck” from this library requires three specific files to function correctly:

1. ComponentName.jsx The core React logic and markup.
2. ComponentName.module.css The isolated styles specific to that component.
3. index.js The public-facing export that allows for clean imports.

Example Implementation

If you were adding the Button component to your local project, your file tree should look like this:

• src
  • components
    • Button
      • Button.jsx
      • button.module.css
      • index.js
  • App.js

Note: By following this structure, your import statements will remain clean:
import { Button } from './components/Button';

Why this structure?

• Zero Side Effects: Styles are kept in .css files specific to the component, preventing global CSS pollution.
• Portability: Because the index.js handles the export, you can move the entire folder anywhere in your project without breaking the internal logic.
• Ease of Ownership: If you copy these files, you can modify the CSS or JS directly to fit your brand without needing to wrap or override library components.