feat(gnosis-vue): Add shared story meta files, update React stories, and add Vue 3 Storybook with stories

[Copilot]

Description

Extracts Storybook configuration from all React stories into shared .meta.ts files (pure TS, no JSX/framework imports), enabling both React and Vue Storybooks to consume the same title, argTypes, args, and per-story arg objects from a single source of truth.

Changes

Shared .meta.ts files — src/components/**/*.meta.ts (35 files)

• One per component family, co-located with the component
• Exports a *Meta object and named per-story arg objects
• Zero JSX, zero React/Vue imports — plain TypeScript objects only

React stories updated — src/components/**/*.stories.tsx (35 files)

• export default now spreads the imported meta and adds component:
• Per-story .args replaced with named imports from the .meta.ts

// Before
export default { title: "Components/Button", argTypes: { ... }, args: { ... } };
Primary.args = { color: "primary", children: "Primary" };

// After
import { buttonMeta, primaryArgs } from "./Button.meta";
export default { ...buttonMeta, component: Button };
Primary.args = primaryArgs;

Vue Storybook config — gnosis-vue/.storybook/

• main.ts — already present; left unchanged
• preview.ts — new; initialises veaury's createRoot for React-in-Vue rendering

Vue stories — gnosis-vue/src/stories/ (18 files)

• Alert, Avatar, Badge, Button, Checkbox, Chip, Dropdown, Input, Loader, Modal, ProgressBar, Select, Tabs, Tag, Text, Toast, ToggleSwitch, Tooltip
• Each imports shared meta from src/components/ and renders via Vue template strings with v-bind / v-model

import { buttonMeta, primaryArgs } from "../../../src/components/Button/Button.meta";

const meta: Meta<typeof Button> = { ...buttonMeta, component: Button };
export default meta;

export const Primary: Story = {
  args: primaryArgs,
  render: (args) => ({
    components: { Button },
    setup: () => ({ args }),
    template: '<Button v-bind="args">{{ args.children }}</Button>',
  }),
};

Fixes

Original prompt

Summary

Add Vue 3 Storybook setup and shared story metadata to the existing gnosis-vue/ package on the copilot/add-gnosis-vue-directory branch in the epignosis/gnosis repo (PR #629).

What to do

1. Create shared .meta.ts files for existing React components

Extract the non-JSX parts (title, argTypes, args, per-story arg objects) from existing React .stories.tsx files into new .meta.ts files next to them. These files should export plain objects with NO framework-specific code (no React, no Vue, no JSX).

Create .meta.ts files for ALL components that currently have .stories.tsx files. Look at each existing story file and extract:

• The meta config (title, argTypes, args)
• Per-story arg objects as named exports

Here are examples of the pattern to follow:

src/components/Button/Button.meta.ts — extract from src/components/Button/Button.stories.tsx:

import { colors } from "@theme/default/colors";

export const buttonMeta = {
  title: "Components/Button",
  argTypes: {
    onClick: { action: "clicked" },
    color: {
      control: {
        type: "select",
        options: ["primary", "secondary", "danger", "success", "primaryLight"],
      },
    },
  },
  args: {
    disabled: false,
    isLoading: false,
    block: false,
    noGutters: false,
    rounded: false,
    as: "button",
    underlined: false,
    active: false,
  },
};

export const primaryArgs = { color: "primary", children: "Primary" };
export const secondaryArgs = { color: "secondary", children: "Secondary" };
export const dangerArgs = { color: "danger", children: "Danger" };
export const successArgs = { color: "success", children: "Success" };
export const primaryLightArgs = {
  color: "primaryLight",
  children: "Primary light",
  style: { background: colors.primary.darker, padding: "1.25rem 1.25rem 0.25rem" },
};
export const primaryDarkerArgs = { color: "primaryDarker", children: "Primary darker" };
export const orangeArgs = { color: "orange", children: "Orange" };

src/components/FormElements/Input/Input.meta.ts — extract from src/components/FormElements/Input/Input.stories.tsx:

export const inputMeta = {
  title: "components/Form Elements/Input",
  argTypes: {
    size: {
      control: { type: "select", options: ["sm", "md", "lg"] },
    },
    status: {
      control: { type: "select", options: ["valid", "error"] },
    },
    autoFocus: {
      control: { type: "boolean" },
    },
  },
  args: {
    id: "input",
    size: "md",
    placeholder: "Your LMS username",
    label: "Username",
    inline: false,
    isClearable: false,
    status: "valid",
    className: "inputStory",
    tooltipContent: "",
    autoFocus: false,
    disabled: false,
  },
};

export const defaultArgs = {};
export const withAutoFocusArgs = { autoFocus: true };
export const disabledArgs = { disabled: true };
export const withRequiredArgs = { required: true };
export const withErrorArgs = { status: "error" };

Do this for ALL components with stories: Alert, Avatar, Badge, Breadcrumbs, Button, Card, Chip, Drawer, Dropdown, Grid, Heading, Loader, Modal, Pagination, ProgressBar, Result, Sidebar, StatusTag, Tabs, Tag, Text, Toast, Tooltip, and all FormElements (Checkbox, CheckboxGroup, Input, RadioButtonGroup, RadioGroup, Select, Textarea, ToggleSwitch).

2. Update existing React .stories.tsx files to import from .meta.ts

Update each React story file to import the meta and args from its .meta.ts file instead of defining them inline. The JSX templates stay unchanged. For example, Button.stories.tsx would change its export default to use the imported buttonMeta and each story's .args to use the imported arg objects.

3. Create Vue Storybook config files

gnosis-vue/.storybook/main.ts:

import type { StorybookConfig } from "@storybook/vue3-vite";
import veauryVitePlugins from "veaury/vite/index.js";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
  ],
  framework: {
    name: "@storybook/vue3-vite",
    options: {},
  },
  docs: {},
  async viteFinal(config) {
    const { mergeConfig } = await import("vite");
    return mergeConfig(config, {
      plugins: [veauryVitePlugins({ type: "vue" })],
    });
  },
};

export default config;

Note: This file may already exist from a previous commit. If so, keep it as-is.

gnosis-vue/.storybook/preview.ts:

import { setup } from "@storybook/vue3";
import { createRoot } from "react-dom/client";
import { setVeauryOptions } from "veaury";

setVeauryOptions({ react: { createRoot } });

export const parameters = {
  controls: { expanded: true },
};

4. Create Vue story files in gnosis-vue/src/stories/

Create Vue stories that import from the shared .meta.ts files and use Vue templates. Create stories for the key components: Button, Input, Select...

This pull request was created from Copilot chat.

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0ecc1a87aa

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Restore Drawer portal root in story metadata

The default export no longer includes the decorator that rendered <DrawerComponent.Root />, so this story no longer creates the #drawerRoot node required by Drawer's portal logic in Drawer.tsx (document.getElementById("drawerRoot")). In Storybook this means clicking “Open Drawer” does not render the drawer content at all, because the component returns null when the root element is missing.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Avoid unresolved @theme imports in shared meta

This shared meta file now imports @theme/default/colors, but it is consumed by gnosis-vue/src/stories/* under gnosis-vue/tsconfig.json, which has no paths mapping for @theme. As a result, vue-tsc --noEmit for gnosis-vue fails with TS2307 when it type-checks these imported meta files (same pattern also appears in Chip/Tag meta), breaking the package build pipeline.

Useful? React with 👍 / 👎.