Example Project with Storybook

A collection of React components built with Material-UI.

Installation

npm install example-project-with-storybook

Usage

First, wrap your application with the ThemeProvider:

import { ThemeProvider } from "@mui/material/styles";
import { theme } from "example-project-with-storybook";

function App() {
  return <ThemeProvider theme={theme}>{/* Your app content */}</ThemeProvider>;
}

Components

Accordion

A customizable accordion component with support for titles, subtitles, and content.

import { Accordion } from "example-project-with-storybook";

const items = [
  {
    id: "panel1",
    title: "General settings",
    subtitle: "Optional subtitle",
    content: "Content goes here",
  },
];

<Accordion items={items} />;

Button

A customizable button component.

Form

A form component with built-in validation.

FormInput

A reusable form input component.

Development

# Install dependencies
npm install

# Run Storybook locally
npm run storybook

# Build the package
npm run build

Viewing the Storybook

You can view the Storybook documentation in two ways:

1. Online: Visit the published Storybook at [your-storybook-url]

2. Locally: After installing the package, you can view the Storybook by running:

npx storybook dev -p 6006 --config-dir node_modules/example-project-with-storybook/.storybook

Then open your browser and navigate to http://localhost:6006 to view the Storybook.

License

MIT