Flop UI Theme

Flop UI Theme is a custom design system built on top of Material-UI, designed to provide a consistent and customizable user interface for your applications.

Features

• Custom Material-UI theme
• Global CSS styles for grids, icons, and spacing
• Easy integration with existing React projects

Installation

To install the Flop UI Theme, run the following command:

npm install flop-ui-theme

or if you are using yarn:

yarn add flop-ui-theme

Usage

Applying the Theme

To apply the Flop UI Theme in your project, wrap your application with the ThemeProvider and pass the custom theme.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@mui/material/styles';
import { theme } from 'flop-ui-theme';
import 'flop-ui-theme/dist/styles.css'; // Import global styles

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Using Global Styles

You can use the global CSS classes defined in the Flop UI Theme in your components:

import React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

const ExampleComponent = () => (
  <Box className="grid-container">
    <Button variant="contained" color="primary" className="spacing-8">
      Primary Button
    </Button>
    <Button variant="contained" color="secondary" className="spacing-8">
      Secondary Button
    </Button>
  </Box>
);

export default ExampleComponent;

Storybook

We use Storybook for developing, testing, and documenting our components. To see the Flop UI Theme in action and explore the components, you can run Storybook.

Running Storybook

First, make sure you have installed all dependencies:

npm install

or if you are using yarn:

yarn install

Then, start Storybook:

npm run storybook

or with yarn:

yarn storybook

Creating Stories

To create stories for your components, add .stories.tsx files in the same directory as your components.

Example: src/components/ExampleComponent.stories.tsx

import React from 'react';
import { ThemeProvider } from '@mui/material/styles';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import ExampleComponent from './ExampleComponent';
import { theme } from 'flop-ui-theme';
import 'flop-ui-theme/dist/styles.css'; // Import global styles

export default {
  title: 'Example/ExampleComponent',
  component: ExampleComponent,
} as ComponentMeta<typeof ExampleComponent>;

const Template: ComponentStory<typeof ExampleComponent> = (args) => (
  <ThemeProvider theme={theme}>
  <ExampleComponent {...args} />
  </ThemeProvider>
);

export const Default = Template.bind({});
Default.args = {
  // Add default props here if needed
};

Development

Building the Package

To build the Flop UI Theme package, run the following command from the root directory:

npm run build

or with yarn:

yarn build

This will create the necessary files in the dist directory.

Contributing

We welcome contributions to improve the Flop UI Theme! If you find a bug or have a feature request, please open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.