add storybook for plugins

.gitignore

@@ -1,2 +1,4 @@
 *.js.bak
 *.json.bak
+
+*node_modules*

storybook/source/.storybook/main.js

@@ -0,0 +1,20 @@
+
+
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-docs",
+  ],
+  "framework": {
+    "name": "@storybook/html-vite",
+    "options": {}
+  },
+  "core": {
+    "disableTelemetry": true,
+  },
+};
+export default config;

storybook/source/.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from 'storybook/manager-api';
+import { themes } from 'storybook/theming';
+
+addons.setConfig({
+  theme: {
+    ...themes.normal,
+    brandImage: './images/logo.svg',
+    brandUrl: 'https://onlyoffice.github.io/',
+  },
+});

storybook/source/.storybook/preview.js

@@ -0,0 +1,55 @@
+/** @type { import('@storybook/html-vite').Preview } */
+const preview = {
+/*  globalTypes: {
+    theme: {
+      description: 'Theme switcher',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        items: [
+          { value: 'light', icon: 'sun', title: 'light' },
+          { value: 'dark', icon: 'moon', title: 'dark' }
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },*/
+
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export const decorators = [
+  (storyFn, context) => {
+    const theme = context.globals.theme || 'light';
+    
+    // Apply the theme as a data attribute
+    document.documentElement.setAttribute('data-theme', theme);
+    
+    // Set window.Asc.plugin.theme for OnlyOffice plugin compatibility
+    if (!window.Asc) {
+      window.Asc = {};
+    }
+    if (!window.Asc.plugin) {
+      window.Asc.plugin = {};
+    }
+    window.Asc.plugin.theme = {
+      type: theme
+    };
+
+    return storyFn();
+  },
+];
+
+const link = document.createElement('link');
+link.rel = 'stylesheet';
+link.href = 'https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css';
+document.head.appendChild(link);
+
+export default preview;

storybook/source/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "onlyoffice-storybook",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "ONLYOFFICE",
+  "license": "Apache-2.0",
+  "description": "Storybook for ONLYOFFICE plugins components",
+  "devDependencies": {
+    "@storybook/addon-docs": "^9.0.6",
+    "@storybook/html-vite": "^9.0.6",
+    "storybook": "^9.0.6"
+  },
+  "overrides": {
+    "storybook": "$storybook"
+  }
+}

storybook/source/stories/Button.stories.js

@@ -0,0 +1,32 @@
+export default {
+  title: 'Components/Button',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Various styled buttons from ONLYOFFICE plugin UI.'
+      }
+    }
+  }
+};
+
+export const Default = () => `
+  <button class="btn-text-default" style="width:75px;">Button 1</button>
+`;
+Default.storyName = 'Default Button';
+
+export const Primary = () => `
+  <button class="btn-text-default submit primary" style="width:75px;">Button 2</button>
+`;
+Primary.storyName = 'Primary Button';
+
+export const Secondary = () => `
+  <button class="btn-text-default submit" style="width:75px;">Button 3</button>
+`;
+Secondary.storyName = 'Secondary Button';
+
+export const EditButton = () => `
+  <label class="for-combo">Edit button</label>
+  <div class="btn-edit" style="display: inline-block; margin-left: 10px;"></div>
+`;
+EditButton.storyName = 'Edit Button';

storybook/source/stories/Checkbox.stories.js

@@ -0,0 +1,18 @@
+export default {
+  title: 'Components/Checkbox',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Checkbox from ONLYOFFICE plugin UI.'
+      }
+    }
+  }
+};
+
+export const Basic = () => `
+  <input type="checkbox" class="form-control" style="vertical-align: middle;">
+  <label style="margin-left: 5px; vertical-align: middle;">Checkbox</label>
+`;
+
+Basic.storyName = 'Default';

storybook/source/stories/ComboBox.stories.js

@@ -0,0 +1,22 @@
+export default {
+  title: 'Components/ComboBox',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'ComboBox from ONLYOFFICE plugin UI.'
+      }
+    }
+  }
+};
+
+export const ComboBox = () => `
+  <label class="header" for="select_example">ComboBox</label>
+  <select id="select_example" class="">
+    <option value="1">Item 1</option>
+    <option value="2">Item 2</option>
+    <option value="3">Item 3</option>
+  </select>
+`;
+
+ComboBox.storyName = 'ComboBox';

storybook/source/stories/Input.stories.js

@@ -0,0 +1,32 @@
+export default {
+  title: 'Components/Input',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Various styled inputs from ONLYOFFICE plugin UI.'
+      }
+    }
+  }
+};
+
+export const Textarea = () => `
+  <textarea
+    style="height:45px;width: 100%;"
+    class="form-control"
+    placeholder="textarea control"
+  ></textarea>
+`;
+
+Textarea.storyName = 'Textarea Control';
+
+export const TextField = () => `
+  <input
+    type="text"
+    class="form-control"
+    placeholder="text field"
+    style="width: 100%; margin-bottom: 2px;"
+  >
+`;
+
+TextField.storyName = 'Text Field Control';

storybook/source/stories/Label.stories.js

@@ -0,0 +1,23 @@
+export default {
+  title: 'Components/Label',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Various styled labels from ONLYOFFICE plugin UI.'
+      }
+    }
+  }
+};
+
+export const Header = () => `
+  <label class="header">Header label</label>
+`;
+
+Header.storyName = 'Header Label';
+
+export const Link = () => `
+  <label class="link">Link label</label>
+`;
+
+Link.storyName = 'Link Label';

storybook/source/stories/Loader.stories.js

@@ -0,0 +1,51 @@
+export default {
+  title: 'Components/Loader',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Loader from ONLYOFFICE plugin UI.'
+      }
+    }
+  }
+};
+
+export const InteractiveLoader = () => {
+  setTimeout(() => {
+    const loadScript = (src) =>
+      new Promise((resolve) => {
+        if (document.querySelector(`script[src="${src}"]`)) return resolve();
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = resolve;
+        document.head.appendChild(script);
+      });
+
+    (async () => {
+      await loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js');
+      await loadScript('https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js');
+      await loadScript('https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js');
+
+      const $ = window.jQuery;
+      let loader;
+
+      $('#show-loader').on('click', function () {
+        loader && (loader.remove ? loader.remove() : $('#loader-container')[0].removeChild(loader));
+        loader = window.showLoader($('#loader-container')[0], 'Loading...');
+      });
+
+      $('#hide-loader').on('click', function () {
+        loader && (loader.remove ? loader.remove() : $('#loader-container')[0].removeChild(loader));
+        loader = undefined;
+      });
+    })();
+  }, 0);
+
+  return `
+    <div id="loader-container" class="asc-loader-container" style="margin: 10px; height: 40px; border: 1px solid #cfcfcf;"></div>
+    <button id="show-loader">Show Loader</button>
+    <button id="hide-loader">Hide Loader</button>
+  `;
+};
+
+InteractiveLoader.storyName = 'Interactive Loader';

storybook/source/stories/Separator.stories.js

@@ -0,0 +1,17 @@
+export default {
+  title: 'Components/Separator',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Separator from ONLYOFFICE plugin UI.'
+      }
+    }
+  }
+};
+
+export const Horizontal = () => `
+  <div class="separator horizontal" style="margin: 5px 0;"></div>
+`;
+
+Horizontal.storyName = 'Horizontal Separator';