manolis-ui 0.0.9 → 0.0.11

package/src/stories/actions/Button.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Button from "../../components/actions/ButtonComponent.vue"
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Actions/Buttons',
+  component: Button,
+  parameters: {
+    slots: {
+      default: "Button",
+    },
+  },
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    outlined: { control: 'boolean' },
+    active: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    size: { control: 'select', options: ['wide', 'tiny', 'small', 'large'] },
+    shape: {control: 'select', options: ['square', 'circle']},
+    type: {
+      control: 'select',
+      options: ['neutral', 'primary', 'secondary', 'accent', 'ghost', 'link', 'info', 'success', 'warning', 'error']
+    },
+  },
+
+  args: {
+
+    // primary: false,
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    // onClick: fn(),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+    args: {
+      type: 'primary',
+      default: 'Button',
+    },
+  };

package/src/stories/actions/Dropdown.stories.ts

@@ -0,0 +1,70 @@
+import Dropdown from '../../components/actions/dropdown.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of dropdown items with `text` and `link`.',
+    },
+    position: {
+      control: 'select',
+      options: ['left', 'right', 'bottom', 'top'],
+      description: 'Controls the position of the dropdown relative to the button.',
+    },
+    floatPosition: {
+      control: 'select',
+      options: ['start', 'end'],
+      description: 'Determines the float position (start or end).',
+    },
+    openOnHover: {
+      control: 'boolean',
+      description: 'If true, the dropdown opens on hover.',
+    },
+    forceOpen: {
+      control: 'boolean',
+      description: 'If true, the dropdown remains open.',
+    },
+  },
+} as Meta<typeof Dropdown>;
+
+const Template: StoryFn<typeof Dropdown> = (args, { slots }) => ({
+  components: { Dropdown },
+  setup() {
+    return { args, slots };
+  },
+  template: `
+    <Dropdown v-bind="args">
+      <template #default>
+        <div class="btn m-1"><button>Custom Trigger</button></div>
+      </template>
+      <template #additional>
+        <div class="p-2 text-sm">Additional Slot Content</div>
+      </template>
+    </Dropdown>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    { text: 'Item 1', link: '#' },
+    { text: 'Item 2', link: '#' },
+    { text: 'Item 3', link: '#' },
+  ],
+  position: 'bottom',
+  floatPosition: 'start',
+  openOnHover: false,
+  forceOpen: false,
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component:
+        'A dropdown component with configurable props and slots for customization. Be sure to put a button in the default slot to get the desired results!',
+    },
+  },
+};

package/src/stories/actions/Modal.stories.ts

@@ -0,0 +1,56 @@
+import Modal from '../../components/actions/modal.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/Modal',
+  component: Modal,
+  tags: ['autodocs'], // Added autodocs tag
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'center'],
+      description: 'Controls the position of the modal.',
+    },
+    withBackdrop: {
+      control: 'boolean',
+      description: 'If true, a backdrop is displayed behind the modal.',
+    },
+  },
+} as Meta<typeof Modal>;
+
+const Template: StoryFn<typeof Modal> = (args, { slots }) => ({
+  components: { Modal },
+  setup() {
+    return { args, slots };
+  },
+  template: `
+    <Modal v-bind="args">
+      <template #trigger>
+        <button class="btn">Custom Trigger</button>
+      </template>
+      <template #default>
+        <h2 class="text-xl font-bold">Modal Content</h2>
+        <p>This is an example modal.</p>
+      </template>
+      <template #actions>
+        <button class="btn btn-primary">Confirm</button>
+      </template>
+      <template #close-button>
+        <button class="btn btn-secondary">Dismiss</button>
+      </template>
+    </Modal>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  position: 'center',
+  withBackdrop: true,
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A customizable modal component with slots for trigger, content, actions, and a close button.',
+    },
+  },
+};

package/src/stories/actions/Swap.stories.ts

@@ -0,0 +1,56 @@
+import Swap from '../../components/actions/swap.vue'; // Adjust the path as per your setup
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/Swap',
+  component: Swap,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    effect: {
+      control: 'select',
+      options: ['rotate', 'flip'],
+      description: 'The effect applied to the swap component.',
+    },
+  },
+} as Meta<typeof Swap>;
+
+const Template: StoryFn<typeof Swap> = (args, { slots }) => ({
+  components: { Swap },
+  setup() {
+    return { args, slots };
+  },
+  template: `
+    <Swap v-bind="args">
+      <template #on>
+        <div class="text-green-500 font-bold">On</div>
+      </template>
+      <template #off>
+        <div class="text-red-500 font-bold">Off</div>
+      </template>
+    </Swap>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  effect: 'rotate',
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A swap component with optional effects and customizable slots for "on" and "off" states.',
+    },
+  },
+};
+
+export const FlipEffect = Template.bind({});
+FlipEffect.args = {
+  effect: 'flip',
+};
+FlipEffect.parameters = {
+  docs: {
+    description: {
+      story: 'This variant applies the "flip" effect to the swap component.',
+    },
+  },
+};

package/src/stories/actions/ThemeSwitcher.stories.ts

@@ -0,0 +1,41 @@
+import ThemeSwitcher from '../../components/actions/theme-controller.vue'; // Adjust the path as per your setup
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Actions/ThemeSwitcher',
+  component: ThemeSwitcher,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    darkTheme: {
+      control: 'text',
+      description: "Define the name of your dark theme here",
+    },
+    lightTheme: {
+      control: 'text',
+      description: "Define the name of your light theme here",
+    }
+  },
+} as Meta<typeof ThemeSwitcher>;
+
+const Template: StoryFn<typeof ThemeSwitcher> = (args) => ({
+  components: { ThemeSwitcher },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ThemeSwitcher v-bind="args" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  darkTheme: 'reserveren-dark',
+  lightTheme: 'reserveren-light',
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A theme switcher component that toggles between light and dark themes with localStorage support.',
+    },
+  },
+};

package/src/stories/data-display/accordion.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Accordion from '../../components/data-display/accordion.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: 'Data Display/Accordion',
+    component: Accordion,
+    parameters: {
+        slots: {
+        },
+    },
+    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    argTypes: {
+        name: {control: "text", type: "string"},
+        items: {control: "object"},
+        joinItems: {control: "boolean", description: "Glue every item together or seperate every item."},
+        icon: {control: "radio", options: ["arrow", "plus"]}
+    },
+
+    args: {
+        joinItems: false,
+        items: [
+            {
+                title: "item 1",
+                content: "this is some text you can adjust with a wysiwyg editor or just in plain text",
+            },
+            {
+                title: "item 2",
+                content: "this is also some text you can adjust with a <strong>wysiwyg</strong> editor or just in plain text/html",
+            }
+        ],
+    },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+    args: {
+        name: "demo-accordion",
+        joinItems: false,
+        icon: "plus",
+    },
+};

package/src/stories/data-display/avatar.stories.ts

@@ -0,0 +1,75 @@
+import Avatar from '../../components/data-display/avatar.vue'; // Adjust the path as per your setup
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Data Display/Avatar',
+  component: Avatar,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    image: {
+      control: 'text',
+      description: 'URL of the avatar image.',
+    },
+    onlineStatus: {
+      control: 'select',
+      options: ['online', 'offline', 'none'],
+      description: 'Online status of the avatar.',
+    },
+    initials: {
+        control: "text",
+        description: 'The Initials of the user'
+    }
+  },
+} as Meta<typeof Avatar>;
+
+const Template: StoryFn<typeof Avatar> = (args) => ({
+  components: { Avatar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Avatar v-bind="args" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  image: 'https://randomuser.me/api/portraits/men/32.jpg', // Example image URL
+  onlineStatus: "none",
+  initials: "JM",
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'An avatar component that displays an online/offline status based on the `online` prop.',
+    },
+  },
+};
+
+export const Online = Template.bind({});
+Online.args = {
+  image: 'https://randomuser.me/api/portraits/men/32.jpg', // Example image URL
+  onlineStatus: "online",
+  initials: "SYP",
+};
+Online.parameters = {
+  docs: {
+    description: {
+      component: 'An avatar component that displays an online/offline status based on the `online` prop.',
+    },
+  },
+};
+
+export const Offline = Template.bind({});
+Offline.args = {
+  image: 'https://randomuser.me/api/portraits/men/32.jpg', // Example image URL
+  onlineStatus: "offline",
+  initials: 'SS'
+};
+Offline.parameters = {
+  docs: {
+    description: {
+      story: 'This variant displays the avatar with an offline status.',
+    },
+  },
+};

package/src/stories/data-display/badge.stories.ts

@@ -0,0 +1,76 @@
+import Badge from '../../components/data-display/badge.vue'; // Adjust the path as per your setup
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Data Display/Badge',
+  component: Badge,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['neutral', 'primary', 'secondary', 'accent', 'ghost', 'info', 'success', 'warning', 'error'],
+      description: 'Sets the color of the badge.',
+    },
+    outline: {
+      control: 'boolean',
+      description: 'If true, the badge will have an outline style.',
+    },
+    size: {
+      control: 'select',
+      options: ['extra small', 'small', 'medium', 'large'],
+      description: 'Sets the size of the badge.',
+    },
+  },
+} as Meta<typeof Badge>;
+
+const Template: StoryFn<typeof Badge> = (args) => ({
+  components: { Badge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Badge v-bind="args">New</Badge>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  color: 'primary',
+  outline: false,
+  size: 'medium',
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A customizable badge component with different colors, sizes, and outline styles.',
+    },
+  },
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  color: 'success',
+  outline: true,
+  size: 'small',
+};
+Outlined.parameters = {
+  docs: {
+    description: {
+      story: 'This variant demonstrates a badge with the outline style enabled.',
+    },
+  },
+};
+
+export const LargeWarning = Template.bind({});
+LargeWarning.args = {
+  color: 'warning',
+  outline: false,
+  size: 'large',
+};
+LargeWarning.parameters = {
+  docs: {
+    description: {
+      story: 'This variant shows a large-sized badge with a warning color.',
+    },
+  },
+};

package/src/stories/data-display/card.stories.ts

@@ -0,0 +1,79 @@
+import Card from '../../components/data-display/card.vue'; // Adjust the path as per your setup
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Data Display/Card',
+  component: Card,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    imgUrl: {
+      control: 'text',
+      description: 'URL of the image to display on the card.',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alt text for the image.',
+    },
+    title: {
+      control: 'text',
+      description: 'Title displayed on the card.',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text for the card.',
+    },
+    outlined: {
+      control: 'boolean',
+      description: 'If true, applies an outline style to the card.',
+    },
+  },
+} as Meta<typeof Card>;
+
+const Template: StoryFn<typeof Card> = (args) => ({
+  components: { Card },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Card v-bind="args">
+      <template #details>
+        <p>This is additional content passed through the details slot.</p>
+      </template>
+      <template #actions>
+        <button class="btn btn-primary">Action Button</button>
+      </template>
+    </Card>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  imgUrl: 'https://via.placeholder.com/300x200',
+  alt: 'Placeholder image',
+  title: 'Card Title',
+  description: 'This is a description of the card.',
+  outlined: false,
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A card component that can display an image, title, description, and has an optional outlined style.',
+    },
+  },
+};
+
+export const OutlinedCard = Template.bind({});
+OutlinedCard.args = {
+  imgUrl: 'https://via.placeholder.com/300x200',
+  alt: 'Placeholder image',
+  title: 'Outlined Card Title',
+  description: 'This card has an outline style applied.',
+  outlined: true,
+};
+OutlinedCard.parameters = {
+  docs: {
+    description: {
+      story: 'This variant demonstrates a card with the outline style enabled.',
+    },
+  },
+};

package/src/stories/data-input/rating.stories.ts

@@ -0,0 +1,73 @@
+import Rating from '../../components/data-input/rating.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+  title: 'Data Input/Rating',
+  component: Rating,
+  tags: ['autodocs'], // Include autodocs tag
+  argTypes: {
+    initialRating: {
+      control: 'number',
+      description: 'The initial rating value.',
+    },
+    numberOfStars: {
+      control: 'number',
+      description: 'The total number of stars to display.',
+    },
+    halfStars: {
+      control: 'boolean',
+      description: 'If true, allows half-star ratings.',
+    },
+    isInteractive: {
+      control: 'boolean',
+      description: 'If true, allows users to interact and change the rating.',
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'The size of the star icons.',
+    },
+  },
+} as Meta<typeof Rating>;
+
+const Template: StoryFn<typeof Rating> = (args) => ({
+  components: { Rating },
+  setup() {
+    return { args };
+  },
+  template: `
+    <Rating v-bind="args" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  initialRating: 2.5,
+  numberOfStars: 5,
+  halfStars: false,
+  isInteractive: false,
+  size: 'sm',
+};
+Default.parameters = {
+  docs: {
+    description: {
+      component: 'A star rating component with options for interactivity, half-star ratings, and size customization.',
+    },
+  },
+};
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+  initialRating: 3,
+  numberOfStars: 5,
+  halfStars: false,
+  isInteractive: true,
+  size: 'xs',
+};
+Interactive.parameters = {
+  docs: {
+    description: {
+      story: 'This variant allows users to interact and change the rating.',
+    },
+  },
+};

package/src/stories/feedback/Loader.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Loader from '../../components/feedback/loader.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'feedback/Loader',
+  component: Loader,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    loading: { control: 'boolean' },
+  },
+
+  args: {
+
+    // primary: false,
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    // onClick: fn(),
+  },
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+
+export const LoadingState: Story = {
+    args: {
+      loading: true,
+    },
+  };