fe-components

fe-components is a comprehensive library of reusable and customizable frontend components designed to streamline development and enhance user experience.

Built with modern web technologies, this library offers a wide range of components that are easy to integrate and adapt to any project.

Features

• Reusable Components: A diverse set of components that can be easily reused across different projects, reducing development time and effort.
• Customizable: Highly customizable components that allow you to adjust styles and behaviors to match your project's requirements.
• Responsive Design: All components are designed to be fully responsive, ensuring a seamless user experience across different devices and screen sizes.
• TypeScript Support: Written in TypeScript to provide type safety and improve the development experience with better tooling support.
• Theming: Built-in support for theming, allowing you to easily switch between different themes or create your own.
• Accessibility: Components are designed with accessibility in mind, following best practices to ensure they are usable by everyone.

Installation

Install the library using npm or yarn:

npm install fe-components

or

yarn add fe-components

Usage

Here’s a quick example of how to use the fe-components library in your project:

Basic Button Component

import React from 'react';
import { Button } from 'fe-components';

const App = () => {
  return (
    <div>
      <Button
        color="primary"
        variant="contained"
        onClick={() => alert('Button Clicked!')}
      >
        Click Me
      </Button>
    </div>
  );
};

export default App;

Customizing Components

You can easily customize the components to fit your design needs:

import React from 'react';
import { Button } from 'fe-components';
import { ThemeProvider, createTheme } from 'fe-components/theme';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#007bff',
      hover: '#0056b3',
      dark: '#004085',
    },
    secondary: {
      main: '#6c757d',
    },
  },
});

const App = () => {
  return (
    <ThemeProvider theme={customTheme}>
      <div>
        <Button
          color="primary"
          variant="contained"
          onClick={() => alert('Button Clicked!')}
        >
          Custom Themed Button
        </Button>
      </div>
    </ThemeProvider>
  );
};

export default App;

Project Structure

Here is an overview of the project structure:

fe-components/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── src/
│   ├── index.ts
│   ├── providers/
│   │   ├── index.ts
│   │   └── theme/
│   │       └── index.tsx
│   ├── utils/
│   │   └── index.ts
│   ├── components/
│   │   ├── Button/
│   │   │   ├── components/
│   │   │   │   ├── StyledButton/
│   │   │   │   ├── StyledIconButton/
│   │   │   │   └── StyledIconButtonBox/
│   │   │   └── index.tsx
│   │   ├── Input/
│   │   │   └── index.tsx
│   │   └── Typography/
│   │       └── index.tsx
│   ├── stories/
│   │   ├── Configure.mdx
│   │   ├── components/
│   │   │   ├── Input/
│   │   │   │   └── Input.stories.tsx
│   │   │   ├── Button/
│   │   │   │   └── Button.stories.tsx
│   │   │   └── Typography/
│   │   │       └── Typography.stories.tsx
│   │   └── assets/
│   │       ├── testing.png
│   │       └── ...
└── theme/
    └── index.ts

Running the Project

To start the development server, use the following command:

npm run dev

or

yarn dev

Running Storybook

To run Storybook for this project, use the following command:

npm run storybook

or

yarn storybook

This will start the Storybook server, and you can view the interactive documentation for the components at http://localhost:6006.

Contributing

Contributions are welcome! If you would like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes and commit them (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature-branch).
5. Create a new Pull Request.

Please make sure to follow our contribution guidelines.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Contact

If you have any questions or suggestions, feel free to open an issue or contact us at contact@fe-components.com.

---

Thank you for using fe-components! We hope it helps you build amazing frontend applications.