This Storybook project showcases and documents the UI components used in ONLYOFFICE plugins. It provides an interactive environment for developers to explore, test, and understand the available components and their various states.

Components

The following components are documented in this Storybook:

Button - Various styled buttons including default, primary, secondary, and edit buttons
Checkbox - Checkbox controls with different states
ComboBox - Dropdown selection components
Input - Text inputs and textarea controls
Label - Text labels for form elements
Loader - Loading indicators and spinners
Separator - Visual dividers and separators

Getting Started

Prerequisites

Node.js (version 14 or higher)
npm or yarn package manager

Installation

Clone the repository:

git clone https://github.com/ONLYOFFICE/onlyoffice.github.io.git
cd onlyoffice.github.io/storybook

Navigate to the source directory:

cd source

Install dependencies:

npm install

Development

To start the Storybook development server:

npm run storybook

This will start Storybook on http://localhost:6006 where you can view and interact with all components.

Building

To build the static Storybook for production:

npm run build-storybook

This will generate a static build in the ../static directory, which can be deployed to any web server.

Project Structure

storybook/
├── source/
│   ├── package.json          # Project dependencies and scripts
│   ├── images/              # Image assets
│   │   └── logo.svg
│   └── stories/             # Component stories
│       ├── Button.stories.js
│       ├── Checkbox.stories.js
│       ├── ComboBox.stories.js
│       ├── Input.stories.js
│       ├── Label.stories.js
│       ├── Loader.stories.js
│       └── Separator.stories.js
└── static/                  # Built Storybook files
    ├── index.html
    ├── assets/
    └── sb-*/               # Storybook runtime files

Writing Stories

Stories are written in JavaScript and follow the Component Story Format (CSF). Each story file exports:

A default export with component metadata
Named exports for each story variant

Example story structure:

export default {
  title: 'Components/ComponentName',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Description of the component.'
      }
    }
  }
};

export const Default = () => `
  <div class="component-class">Component HTML</div>
`;
Default.storyName = 'Default State';

Contributing

Fork the repository
Create a feature branch (git checkout -b feature/new-component)
Add your component story in the source/stories/ directory
Test your changes locally with npm run storybook
Commit your changes (git commit -am 'Add new component story')
Push to the branch (git push origin feature/new-component)
Create a Pull Request

Adding New Components

To add a new component story:

Create a new .stories.js file in the source/stories/ directory
Follow the existing naming convention: ComponentName.stories.js
Include comprehensive examples showing different states and variations
Add appropriate documentation and descriptions
Test the component in the Storybook interface

License

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

Support

For questions and support regarding ONLYOFFICE plugins and components, please visit:

README.md

ONLYOFFICE Storybook

Overview