Flop-ui-theme NPM

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
};