@mozaic-ds/vue/src/components/sidebar/MSidebar.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';

import DefaultStory from './stories/DefaultCase.stories.vue';
import WithExpandOnlyStory from './stories/WithExpandOnly.stories.vue';
import WithProfileInfoOnlyStory from './stories/WithProfileInfoOnly.stories.vue';
import WithSingleLevelStory from './stories/WithSingleLevel.stories.vue';
import SourceCode from './stories/DefaultCase.stories.vue?raw';
import MSidebar from './MSidebar.vue';
import MSidebarHeader from '../sidebarheader/MSidebarHeader.vue';
import MSidebarFooter from '../sidebarfooter/MSidebarFooter.vue';
import MSidebarNavItem from '../sidebarnavitem/MSidebarNavItem.vue';
import MSidebarShortcutItem from '../sidebarshortcutitem/MSidebarShortcutItem.vue';
import MSidebarShortcuts from '../sidebarshortcuts/MSidebarShortcuts.vue';
import MSidebarExpandableItem from '../sidebarexpandableitem/MSidebarExpandableItem.vue';
import { action } from 'storybook/actions';

const meta: Meta<typeof MSidebar> = {
  title: 'Structure/Sidebar',
  component: MSidebar,
  subcomponents: {
    MSidebarExpandableItem,
    MSidebarHeader,
    MSidebarFooter,
    MSidebarNavItem,
    MSidebarShortcuts,
    MSidebarShortcutItem,
  },
  tags: ['v2'],
  parameters: {
    layout: 'fullscreen',
    docs: {
      source: {
        code: SourceCode,
      },
      description: {
        component:
          'A sidebar is a vertical navigation component that provides quick access to key sections and functionalities within an application or website. It contains expandable menus, and shortcuts, allowing users to navigate efficiently while keeping the main content area uncluttered. Sidebars can be collapsible or persistent, adapting to different screen sizes and user preferences. They are commonly used in dashboards, content management systems, and productivity tools.',
      },
    },
  },
  globals: {
    backgrounds: { value: 'secondary' },
  },
  render: () => ({
    setup() {
      const handleClose = action('close');
      const handleUpdateModelValue = action('update:modelValue');
      const handleLogOut = action('log-out');

      return {
        handleClose,
        handleUpdateModelValue,
        handleLogOut,
      };
    },
    components: { DefaultStory },
    template: `
      <DefaultStory
        @close="handleClose"
        @update:model-value="handleUpdateModelValue"
        @log-out="handleLogOut"
      />
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MSidebar>;

export const Default: Story = {};

export const ExpandOnly: Story = {
  render: () => ({
    setup() {
      const handleClose = action('close');
      const handleUpdateModelValue = action('update:modelValue');
      const handleLogOut = action('log-out');

      return {
        handleClose,
        handleUpdateModelValue,
        handleLogOut,
      };
    },
    components: { WithExpandOnlyStory },
    template: `
      <WithExpandOnlyStory
        @close="handleClose"
        @update:model-value="handleUpdateModelValue"
        @log-out="handleLogOut"
      />
    `,
  }),
};

export const ProfileInfoOnly: Story = {
  render: () => ({
    setup() {
      const handleClose = action('close');
      const handleUpdateModelValue = action('update:modelValue');
      const handleLogOut = action('log-out');

      return {
        handleClose,
        handleUpdateModelValue,
        handleLogOut,
      };
    },
    components: { WithProfileInfoOnlyStory },
    template: `
      <WithProfileInfoOnlyStory
        @close="handleClose"
        @update:model-value="handleUpdateModelValue"
        @log-out="handleLogOut"
      />
    `,
  }),
};

export const SingleLevel: Story = {
  render: () => ({
    setup() {
      const handleClose = action('close');
      const handleUpdateModelValue = action('update:modelValue');
      const handleLogOut = action('log-out');

      return {
        handleClose,
        handleUpdateModelValue,
        handleLogOut,
      };
    },
    components: { WithSingleLevelStory },
    template: `
      <WithSingleLevelStory
        @close="handleClose"
        @update:model-value="handleUpdateModelValue"
        @log-out="handleLogOut"
      />
    `,
  }),
};