@soft-stech/bootsman-ui-shadcn 1.5.6 → 2.0.0

package/src/stories/BuiCalendar.stories.ts

@@ -0,0 +1,63 @@
+import { BuiCalendar } from '@/components/calendar'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+const meta = {
+  component: BuiCalendar,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof BuiCalendar>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: { BuiCalendar },
+    setup() {
+      const date = ref(new Date())
+      return { args, date }
+    },
+    template: `
+      <div class="flex min-h-[350px] w-full items-center justify-center p-10">
+        <BuiCalendar v-model="date" mode="dateTime" is24hr />
+      </div>
+    `
+  })
+}
+
+export const Range: Story = {
+  args: {},
+  render: (args) => ({
+    components: { BuiCalendar },
+    setup() {
+      const range = ref({
+        start: new Date(2020, 0, 6),
+        end: new Date(2020, 0, 10)
+      })
+
+      const rules = ref([
+        {
+          hours: 0,
+          minutes: 0,
+          seconds: 0,
+          milliseconds: 0
+        },
+        {
+          hours: 23,
+          minutes: 59,
+          seconds: 59,
+          milliseconds: 999
+        }
+      ])
+      return { args, range, rules }
+    },
+    template: `
+      <div class="flex min-h-[350px] w-full items-center justify-center p-10">
+        <BuiCalendar v-model.range="range" :rules="rules" />
+      </div>
+    `
+  })
+}

package/src/stories/BuiCard.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  BuiCard,
+  BuiCardContent,
+  BuiCardDescription,
+  BuiCardFooter,
+  BuiCardHeader,
+  BuiCardTitle
+} from '@/components/card'
+import BuiCardStory from './components/BuiCardStory.vue'
+
+const meta = {
+  component: BuiCard,
+  subcomponents: { BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle },
+  tags: ['autodocs'],
+  args: {
+    class: 'w-[350px]'
+  }
+} satisfies Meta<typeof BuiCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BuiCardStory },
+    setup() {
+      return { args }
+    },
+    template: `
+      <BuiCardStory v-bind="args" />
+    `
+  })
+}

package/src/stories/BuiCheckbox.stories.ts

@@ -0,0 +1,33 @@
+import { BuiCheckbox } from '@/components/checkbox'
+import { BuiLabel } from '@/components/label'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+const meta = {
+  component: BuiCheckbox,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    disabled: false
+  }
+} satisfies Meta<typeof BuiCheckbox>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: { BuiCheckbox, BuiLabel },
+    setup() {
+      const checked = ref(false)
+      return { args, checked }
+    },
+    template: `
+      <div class="flex items-center space-x-2 p-1">
+        <BuiCheckbox id="my-test-id1" v-model="checked" v-bind="args" />
+        <BuiLabel for="my-test-id1">My label</BuiLabel>
+      </div>
+    `
+  })
+}

package/src/stories/BuiCollapsible.stories.ts

@@ -0,0 +1,23 @@
+import { BuiCollapsible } from '@/components/collapsible'
+import BuiCollapsibleStory from '@/stories/components/BuiCollapsibleStory.vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta = {
+  component: BuiCollapsible,
+  // tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof BuiCollapsible>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BuiCollapsibleStory },
+    setup() {
+      return { args }
+    },
+    template: `<BuiCollapsibleStory />`
+  })
+}

package/src/stories/BuiColorPicker.stories.ts

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import BuiColorPicker from '@/components/color-picker/BuiColorPicker.vue'
+import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/popover'
+import BuiButton from '@/components/button/BuiButton.vue'
+
+const meta = {
+  component: BuiColorPicker,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'xs', 'md', 'lg', 'xl']
+    },
+    format: {
+      control: 'select',
+      options: ['hex', 'rgb', 'hsl', 'cmyk', 'lab']
+    }
+  },
+  args: {
+    disabled: false,
+    defaultValue: '#29CCFF',
+    as: 'div',
+    format: 'hex',
+    size: 'md',
+    throttle: 50
+  }
+} satisfies Meta<typeof BuiColorPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BuiColorPicker },
+    setup() {
+      return { args }
+    },
+    template: `
+      <BuiColorPicker v-bind="args" />
+    `
+  })
+}
+
+export const AsPopover: Story = {
+  name: 'As Popover',
+  decorators: [
+    () => ({ template: '<div class="flex w-full flex-row justify-center pt-4"><story/></div>' })
+  ],
+  args: {
+    size: 'md'
+  },
+  render: (args) => ({
+    components: { BuiColorPicker, BuiPopover, BuiPopoverContent, BuiPopoverTrigger, BuiButton },
+    setup() {
+      const pickedColor = ref<string>('#29CCFF')
+
+      return { args, pickedColor }
+    },
+    template: `
+      <BuiPopover>
+          <BuiPopoverTrigger>
+            <BuiButton
+              variant="outline"
+              class="flex flex-row gap-2 text-sm"
+              :style="{ color: pickedColor, borderColor: pickedColor }"
+            >
+              <span :style="{ backgroundColor: pickedColor }" class="size-3 rounded-full" />
+              <span>Pick a color</span>
+            </BuiButton>
+          </BuiPopoverTrigger>
+          <BuiPopoverContent class="w-80">
+            <div class="flex flex-col gap-4 p-4">
+              <BuiColorPicker v-model="pickedColor" v-bind="args" />
+            </div>
+          </BuiPopoverContent>
+        </BuiPopover>
+    `
+  })
+}

package/src/stories/BuiCommand.stories.ts

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-vue-next'
+import {
+  BuiCommand,
+  BuiCommandEmpty,
+  BuiCommandGroup,
+  BuiCommandInput,
+  BuiCommandItem,
+  BuiCommandList,
+  BuiCommandSeparator,
+  BuiCommandShortcut
+} from '@/components/command'
+
+const meta = {
+  component: BuiCommand,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof BuiCommand>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: {
+      BuiCommand,
+      BuiCommandEmpty,
+      BuiCommandGroup,
+      BuiCommandInput,
+      BuiCommandItem,
+      BuiCommandList,
+      BuiCommandSeparator,
+      BuiCommandShortcut,
+      Calculator,
+      Calendar,
+      CreditCard,
+      Settings,
+      Smile,
+      User
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <BuiCommand class="max-w-[450px]">
+        <BuiCommandInput placeholder="Type a command or search..." />
+        <BuiCommandList>
+          <BuiCommandEmpty>No results found.</BuiCommandEmpty>
+          <BuiCommandGroup heading="Suggestions">
+            <BuiCommandItem value="Calendar">
+              <Calendar class="mr-2 h-4 w-4" />
+              <span>Calendar</span>
+            </BuiCommandItem>
+            <BuiCommandItem value="Search Emoji">
+              <Smile class="mr-2 h-4 w-4" />
+              <span>Search Emoji</span>
+            </BuiCommandItem>
+            <BuiCommandItem value="Calculator">
+              <Calculator class="mr-2 h-4 w-4" />
+              <span>Calculator</span>
+            </BuiCommandItem>
+          </BuiCommandGroup>
+          <BuiCommandSeparator />
+          <BuiCommandGroup heading="Settings">
+            <BuiCommandItem value="Profile">
+              <User class="mr-2 h-4 w-4" />
+              <span>Profile</span>
+              <BuiCommandShortcut>⌘P</BuiCommandShortcut>
+            </BuiCommandItem>
+            <BuiCommandItem value="Billing">
+              <CreditCard class="mr-2 h-4 w-4" />
+              <span>Billing</span>
+              <BuiCommandShortcut>⌘B</BuiCommandShortcut>
+            </BuiCommandItem>
+            <BuiCommandItem value="Settings">
+              <Settings class="mr-2 h-4 w-4" />
+              <span>Settings</span>
+              <BuiCommandShortcut>⌘S</BuiCommandShortcut>
+            </BuiCommandItem>
+          </BuiCommandGroup>
+        </BuiCommandList>
+      </BuiCommand>
+    `
+  })
+}

package/src/stories/BuiContextMenu.stories.ts

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  BuiContextMenu,
+  BuiContextMenuCheckboxItem,
+  BuiContextMenuContent,
+  BuiContextMenuItem,
+  BuiContextMenuLabel,
+  BuiContextMenuRadioGroup,
+  BuiContextMenuRadioItem,
+  BuiContextMenuSeparator,
+  BuiContextMenuShortcut,
+  BuiContextMenuSub,
+  BuiContextMenuSubContent,
+  BuiContextMenuSubTrigger,
+  BuiContextMenuTrigger
+} from '@/components/context-menu'
+
+const meta = {
+  component: BuiContextMenu,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof BuiContextMenu>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: {
+      BuiContextMenu,
+      BuiContextMenuTrigger,
+      BuiContextMenuContent,
+      BuiContextMenuItem,
+      BuiContextMenuSeparator,
+      BuiContextMenuCheckboxItem,
+      BuiContextMenuRadioGroup,
+      BuiContextMenuRadioItem,
+      BuiContextMenuLabel,
+      BuiContextMenuShortcut,
+      BuiContextMenuSub,
+      BuiContextMenuSubTrigger,
+      BuiContextMenuSubContent
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="flex items-center space-x-2 p-1">
+        <BuiContextMenu>
+          <BuiContextMenuTrigger
+            class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
+          >
+            Right click here
+          </BuiContextMenuTrigger>
+          <BuiContextMenuContent class="w-64">
+            <BuiContextMenuItem inset>
+              Back
+              <BuiContextMenuShortcut>⌘[</BuiContextMenuShortcut>
+            </BuiContextMenuItem>
+            <BuiContextMenuItem inset disabled>
+              Forward
+              <BuiContextMenuShortcut>⌘]</BuiContextMenuShortcut>
+            </BuiContextMenuItem>
+            <BuiContextMenuItem inset>
+              Reload
+              <BuiContextMenuShortcut>⌘R</BuiContextMenuShortcut>
+            </BuiContextMenuItem>
+            <BuiContextMenuSub>
+              <BuiContextMenuSubTrigger inset> More Tools </BuiContextMenuSubTrigger>
+              <BuiContextMenuSubContent class="w-48">
+                <BuiContextMenuItem>
+                  Save Page As...
+                  <BuiContextMenuShortcut>⇧⌘S</BuiContextMenuShortcut>
+                </BuiContextMenuItem>
+                <BuiContextMenuItem>Create Shortcut...</BuiContextMenuItem>
+                <BuiContextMenuItem>Name Window...</BuiContextMenuItem>
+                <BuiContextMenuSeparator />
+                <BuiContextMenuItem>Developer Tools</BuiContextMenuItem>
+              </BuiContextMenuSubContent>
+            </BuiContextMenuSub>
+            <BuiContextMenuSeparator />
+            <BuiContextMenuCheckboxItem checked>
+              Show Bookmarks Bar
+              <BuiContextMenuShortcut>⌘⇧B</BuiContextMenuShortcut>
+            </BuiContextMenuCheckboxItem>
+            <BuiContextMenuCheckboxItem>Show Full URLs</BuiContextMenuCheckboxItem>
+            <BuiContextMenuSeparator />
+            <BuiContextMenuRadioGroup model-value="pedro">
+              <BuiContextMenuLabel inset> People </BuiContextMenuLabel>
+              <BuiContextMenuSeparator />
+              <BuiContextMenuRadioItem value="pedro"> Pedro Duarte </BuiContextMenuRadioItem>
+              <BuiContextMenuRadioItem value="colm"> Colm Tuite </BuiContextMenuRadioItem>
+            </BuiContextMenuRadioGroup>
+          </BuiContextMenuContent>
+        </BuiContextMenu>
+      </div>
+    `
+  })
+}

package/src/stories/BuiDataTable.stories.ts

@@ -0,0 +1,26 @@
+import { BuiDataTable } from '@/components/table'
+import BuiDataTableStory from '@/stories/components/BuiDataTableStory.vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta = {
+  // @ts-expect-error no need to describe all args, see BuiDataTableStory
+  component: BuiDataTable,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof BuiDataTable>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  // @ts-expect-error no need to describe all args, see BuiDataTableStory
+  args: {},
+  render: (args) => ({
+    components: { BuiDataTableStory },
+    setup() {
+      return { args }
+    },
+    template: `<BuiDataTableStory v-bind="args" />`
+  })
+}

package/src/stories/BuiDialog.stories.ts

@@ -0,0 +1,81 @@
+import { BuiButton } from '@/components/button'
+import {
+  BuiDialog,
+  BuiDialogContent,
+  BuiDialogDescription,
+  BuiDialogFooter,
+  BuiDialogHeader,
+  BuiDialogTitle,
+  BuiDialogTrigger
+} from '@/components/dialog'
+import { BuiInput } from '@/components/input'
+import { BuiLabel } from '@/components/label'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta = {
+  component: BuiDialog,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof BuiDialog>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: {
+      BuiDialog,
+      BuiDialogTrigger,
+      BuiDialogContent,
+      BuiDialogHeader,
+      BuiDialogTitle,
+      BuiDialogDescription,
+      BuiDialogFooter,
+      BuiButton,
+      BuiInput,
+      BuiLabel
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+       <div class="flex flex-col items-center gap-4">
+        <div>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, expedita ipsum id
+          enim similique, sed sequi aliquid, sapiente dicta blanditiis in ratione modi minus aut
+          tempora voluptatum eius ut iusto!
+        </div>
+        <div>
+          <BuiDialog>
+            <BuiDialogTrigger as-child>
+              <BuiButton variant="outline"> Edit Profile </BuiButton>
+            </BuiDialogTrigger>
+            <BuiDialogContent class="sm:max-w-[425px]">
+              <BuiDialogHeader>
+                <BuiDialogTitle>Edit profile</BuiDialogTitle>
+                <BuiDialogDescription>
+                  Make changes to your profile here. Click save when you're done.
+                </BuiDialogDescription>
+              </BuiDialogHeader>
+              <div class="grid gap-4 py-4">
+                <div class="grid grid-cols-4 items-center gap-4">
+                  <BuiLabel for="name" class="text-right"> Name </BuiLabel>
+                  <BuiInput id="name" value="Pedro Duarte" class="col-span-3" />
+                </div>
+                <div class="grid grid-cols-4 items-center gap-4">
+                  <BuiLabel for="username" class="text-right"> Username </BuiLabel>
+                  <BuiInput id="username" value="@peduarte" class="col-span-3" />
+                </div>
+              </div>
+              <BuiDialogFooter>
+                <BuiButton type="submit"> Save changes </BuiButton>
+              </BuiDialogFooter>
+            </BuiDialogContent>
+          </BuiDialog>
+        </div>
+      </div>
+    `
+  })
+}

package/src/stories/BuiDropdownMenu.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import {
+  BuiDropdownMenu,
+  BuiDropdownMenuContent,
+  BuiDropdownMenuGroup,
+  BuiDropdownMenuItem,
+  BuiDropdownMenuLabel,
+  BuiDropdownMenuPortal,
+  BuiDropdownMenuSeparator,
+  BuiDropdownMenuShortcut,
+  BuiDropdownMenuSub,
+  BuiDropdownMenuSubContent,
+  BuiDropdownMenuSubTrigger,
+  BuiDropdownMenuTrigger
+} from '@/components/dropdown-menu'
+import BuiDropdownMenuStory from './components/BuiDropdownMenuStory.vue'
+
+const meta = {
+  component: BuiDropdownMenu,
+  subcomponents: {
+    BuiDropdownMenuContent,
+    BuiDropdownMenuGroup,
+    BuiDropdownMenuItem,
+    BuiDropdownMenuLabel,
+    BuiDropdownMenuPortal,
+    BuiDropdownMenuSeparator,
+    BuiDropdownMenuShortcut,
+    BuiDropdownMenuSub,
+    BuiDropdownMenuSubContent,
+    BuiDropdownMenuSubTrigger,
+    BuiDropdownMenuTrigger
+  },
+  tags: ['autodocs'],
+  args: {}
+} satisfies Meta<typeof BuiDropdownMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BuiDropdownMenuStory },
+    setup() {
+      return { args }
+    },
+    template: `
+      <BuiDropdownMenuStory v-bind="args" />
+    `
+  })
+}

package/src/stories/BuiForm.stories.ts

@@ -0,0 +1,52 @@
+import { BuiForm } from '@/components/form'
+import LoginForm from '@/stories/components/LoginForm.vue'
+import LoginFormHook from '@/stories/components/LoginFormHook.vue'
+import UseBuiField from '@/stories/components/UseBuiField.vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta = {
+  component: BuiForm,
+  argTypes: {},
+  args: {}
+} satisfies Meta<typeof BuiForm>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const FormComponent: Story = {
+  render: (args) => ({
+    components: { LoginForm },
+    setup() {
+      return { args }
+    },
+    template: `
+      <LoginForm  />
+    `
+  })
+}
+
+export const useBuiFormHook: Story = {
+  name: 'useBuiFormHook',
+  render: (args) => ({
+    components: { LoginFormHook },
+    setup() {
+      return { args }
+    },
+    template: `
+      <LoginFormHook  />
+    `
+  })
+}
+
+export const useBuiField: Story = {
+  name: 'useBuiField',
+  render: (args) => ({
+    components: { UseBuiField },
+    setup() {
+      return { args }
+    },
+    template: `
+      <UseBuiField  />
+    `
+  })
+}

package/src/stories/BuiHealth.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref, computed } from 'vue'
+import BuiHealth from '@/components/health/BuiHealth.vue'
+import BuiSlider from '@/components/slider/BuiSlider.vue'
+
+const meta = {
+  component: BuiHealth,
+  decorators: [() => ({ template: '<div class="flex flex-col gap-2"><story/></div>' })],
+  tags: ['autodocs'],
+  args: {
+    class: 'max-w-[300px]'
+  }
+} satisfies Meta<typeof BuiHealth>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BuiHealth, BuiSlider },
+    setup() {
+      const h1 = ref<number[]>([1])
+      const h2 = ref<number[]>([3])
+      const h3 = ref<number[]>([1])
+
+      const health1 = computed(() => {
+        return [
+          { id: 'Running', class: 'bg-green-500 after:bg-green-500', count: h1.value[0] },
+          { id: 'Info', class: 'bg-yellow-500 after:bg-yellow-500', count: h2.value[0] },
+          { id: 'Error', class: 'bg-red-500 after:bg-red-500', count: h3.value[0] }
+        ]
+      })
+
+      return { args, h1, h2, h3, health1 }
+    },
+    template: `
+      <BuiHealth :model-value="health1" v-bind="args" />
+
+      {{ h1[0] }}
+      <BuiSlider v-model="h1" :step="1" :max="50" class="max-w-[300px]" />
+
+      {{ h2[0] }}
+      <BuiSlider v-model="h2" :step="1" :max="50" class="max-w-[300px]" />
+
+      {{ h3[0] }}
+      <BuiSlider v-model="h3" :step="1" :max="50" class="max-w-[300px]" />
+    `
+  })
+}