@soft-stech/bootsman-ui-shadcn 1.5.7 → 2.0.1

package/src/components/stories/BuiPagination.story.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import {
-  BuiPagination,
-  BuiPaginationEllipsis,
-  BuiPaginationFirst,
-  BuiPaginationLast,
-  BuiPaginationList,
-  BuiPaginationListItem,
-  BuiPaginationNext,
-  BuiPaginationPrev
-} from '@/components/ui/pagination'
-
-import { BuiButton } from '@/components/ui/button'
-</script>
-
-<template>
-  <Story title="BuiPagination" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
-    <Variant :key="`variant`" title="Pagination">
-      <BuiPagination
-        v-slot="{ page }"
-        :total="100"
-        :sibling-count="1"
-        show-edges
-        :default-page="2"
-        :itemsPerPage="10"
-        class="m-1"
-      >
-        <BuiPaginationList v-slot="{ items }" class="flex items-center gap-1">
-          <BuiPaginationFirst />
-          <BuiPaginationPrev />
-
-          <template v-for="(item, index) in items">
-            <BuiPaginationListItem
-              v-if="item.type === 'page'"
-              :key="index"
-              :value="item.value"
-              as-child
-            >
-              <BuiButton
-                class="h-10 w-10 p-0"
-                :variant="item.value === page ? 'default' : 'outline'"
-              >
-                {{ item.value }}
-              </BuiButton>
-            </BuiPaginationListItem>
-            <BuiPaginationEllipsis v-else :key="item.type" :index="index" />
-          </template>
-
-          <BuiPaginationNext />
-          <BuiPaginationLast />
-        </BuiPaginationList>
-      </BuiPagination>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiPaginationCommon.story.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { BuiPaginationCommon, type PageSize } from '@/index'
-
-import { ref } from 'vue'
-
-const pageIndex = ref(1)
-const pageSize = ref<PageSize>(10)
-</script>
-
-<template>
-  <Story title="BuiPaginationCommon" autoPropsDisabled :layout="{ type: 'grid', width: '95%' }">
-    <Variant :key="`variant`" title="Pagination">
-      <BuiPaginationCommon
-        class="float-right"
-        :total="100"
-        v-model:pageIndex="pageIndex"
-        v-model:pageSize="pageSize"
-      >
-      </BuiPaginationCommon>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiPopover.story.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import {
-  BuiButton,
-  BuiPopover,
-  BuiPopoverTrigger,
-  BuiPopoverContent,
-  BuiLabel,
-  BuiInput
-} from '@/index'
-</script>
-
-<template>
-  <Story title="BuiPopover" autoPropsDisabled>
-    <Variant :key="`variant-default`" :title="`Popover`">
-      <div class="flex justify-center pt-12">
-        <BuiPopover>
-          <BuiPopoverTrigger>
-            <BuiButton variant="outline"> Open popover </BuiButton>
-          </BuiPopoverTrigger>
-          <BuiPopoverContent class="w-80">
-            <div class="grid gap-4">
-              <div class="space-y-2">
-                <h4 class="font-medium leading-none">Dimensions</h4>
-                <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-              </div>
-              <div class="grid gap-2">
-                <div class="grid grid-cols-3 items-center gap-4">
-                  <BuiLabel for="width">Width</BuiLabel>
-                  <BuiInput id="width" type="text" default-value="100%" class="col-span-2 h-8" />
-                </div>
-                <div class="grid grid-cols-3 items-center gap-4">
-                  <BuiLabel for="maxWidth">Max. width</BuiLabel>
-                  <BuiInput
-                    id="maxWidth"
-                    type="text"
-                    default-value="300px"
-                    class="col-span-2 h-8"
-                  />
-                </div>
-                <div class="grid grid-cols-3 items-center gap-4">
-                  <BuiLabel for="height">Height</BuiLabel>
-                  <BuiInput id="height" type="text" default-value="25px" class="col-span-2 h-8" />
-                </div>
-                <div class="grid grid-cols-3 items-center gap-4">
-                  <BuiLabel for="maxHeight">Max. height</BuiLabel>
-                  <BuiInput
-                    id="maxHeight"
-                    type="text"
-                    default-value="none"
-                    class="col-span-2 h-8"
-                  />
-                </div>
-              </div>
-            </div>
-          </BuiPopoverContent>
-        </BuiPopover>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiProgress.story.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { BuiProgress, BuiSlider } from '@/index'
-
-const modelValue = ref([5])
-
-import { ref } from 'vue'
-</script>
-
-<template>
-  <Story title="BuiProgress" autoPropsDisabled :layout="{ type: 'grid', width: '33%' }">
-    <Variant title="With slider">
-      <div class="m-4">
-        <div class="mb-3">Value: {{ modelValue[0] }}</div>
-        <div class="flex flex-col gap-2">
-          <BuiProgress :model-value="modelValue[0]" class="max-w-[300px]" />
-          <BuiSlider v-model="modelValue" :max="100" :step="1" class="max-w-[300px]" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Progress">
-      <div class="m-4 flex flex-col gap-2">
-        <div class="m-4 flex flex-col gap-2">
-          <BuiProgress :model-value="0" variant="sm" />
-          <BuiProgress :model-value="1" variant="sm" />
-          <BuiProgress :model-value="50" variant="sm" />
-          <BuiProgress :model-value="99" variant="sm" />
-          <BuiProgress :model-value="100" variant="sm" />
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-          <BuiProgress :model-value="0" />
-          <BuiProgress :model-value="1" :separators="[10, 35]" />
-          <BuiProgress :model-value="50" :separators="[10, 35]" />
-          <BuiProgress :model-value="99" />
-          <BuiProgress :model-value="100" />
-        </div>
-
-        <div class="m-4 flex flex-col gap-2">
-          <BuiProgress :model-value="0" variant="lg" />
-          <BuiProgress :model-value="1" variant="lg" />
-          <BuiProgress :model-value="50" variant="lg" />
-          <BuiProgress :model-value="99" variant="lg" />
-          <BuiProgress :model-value="100" variant="lg" />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Colors">
-      <div class="m-4 flex flex-col gap-2">
-        <BuiProgress :model-value="50" class="max-w-[300px]" color="green" />
-        <BuiProgress :model-value="50" class="max-w-[300px]" color="red" />
-        <BuiProgress :model-value="50" class="max-w-[300px]" color="orange" />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiRadioGroup.story.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { BuiRadioGroup, BuiRadioGroupItem, BuiLabel } from '@/index'
-</script>
-
-<template>
-  <Story title="BuiRadioGroup" autoPropsDisabled :layout="{ type: 'grid', width: '50%' }">
-    <Variant :key="`variant`" :title="`Radio Group`">
-      <BuiRadioGroup default-value="option-one">
-        <div class="flex items-center space-x-2">
-          <BuiRadioGroupItem id="option-one" value="option-one" />
-          <BuiLabel for="option-one">Option One</BuiLabel>
-        </div>
-        <div class="flex items-center space-x-2">
-          <BuiRadioGroupItem id="option-two" value="option-two" />
-          <BuiLabel for="option-two">Option Two</BuiLabel>
-        </div>
-        <div class="flex items-center space-x-2">
-          <BuiRadioGroupItem id="option-three" value="option-three" disabled />
-          <BuiLabel for="option-three" class="opacity-50">Option Three Disabled</BuiLabel>
-        </div>
-      </BuiRadioGroup>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiScrollArea.story.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import BuiSeparator from '@/components/ui/separator/BuiSeparator.vue'
-import BuiScrollArea from '@/components/ui/scroll-area/BuiScrollArea.vue'
-
-const variant = 'default'
-
-const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
-</script>
-
-<template>
-  <Story title="BuiScrollArea" autoPropsDisabled :layout="{ type: 'grid', width: '50%' }">
-    <Variant :key="`variant`" :title="`${variant}`">
-      <div class="flex items-center p-1">
-        <BuiScrollArea class="h-72 w-48 rounded-md border">
-          <div class="p-4">
-            <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
-
-            <div v-for="tag in tags" :key="tag">
-              <div class="text-sm">
-                {{ tag }}
-              </div>
-              <BuiSeparator class="my-2" />
-            </div>
-          </div>
-        </BuiScrollArea>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiSelect.story.vue

@@ -1,109 +0,0 @@
-<script setup lang="ts">
-import {
-  BuiSelect,
-  BuiSelectContent,
-  BuiSelectGroup,
-  BuiSelectItem,
-  BuiSelectLabel,
-  BuiSelectTrigger,
-  BuiSelectValue
-} from '@/components/ui/select'
-import { BringToFrontIcon } from 'lucide-vue-next'
-import {
-  BuiForm,
-  BuiFormField,
-  BuiFormItem,
-  BuiFormControl,
-  BuiFormMessage
-} from '@/components/ui/form'
-import * as z from 'zod'
-import { toTypedSchema } from '@vee-validate/zod'
-
-const validationRules = z.object({
-  favoriteFruit: z.enum(['banana'])
-})
-const validationSchema = toTypedSchema(validationRules)
-const initialValues = {
-  favoriteFruit: 'apple'
-}
-</script>
-
-<template>
-  <Story title="BuiSelect" autoPropsDisabled>
-    <Variant title="Default">
-      <div class="flex min-h-[350px] w-full items-center justify-center p-10">
-        <BuiSelect>
-          <BuiSelectTrigger class="w-[180px]">
-            <BuiSelectValue placeholder="Select a fruit" />
-          </BuiSelectTrigger>
-          <BuiSelectContent>
-            <BuiSelectGroup>
-              <BuiSelectLabel>Fruits</BuiSelectLabel>
-              <BuiSelectItem value="apple"> Apple </BuiSelectItem>
-              <BuiSelectItem value="banana"> Banana </BuiSelectItem>
-              <BuiSelectItem value="blueberry"> Blueberry </BuiSelectItem>
-              <BuiSelectItem value="grapes"> Grapes </BuiSelectItem>
-              <BuiSelectItem value="pineapple"> Pineapple </BuiSelectItem>
-            </BuiSelectGroup>
-          </BuiSelectContent>
-        </BuiSelect>
-      </div>
-    </Variant>
-    <Variant title="Custom Icon">
-      <div class="flex min-h-[350px] w-full items-center justify-center p-10">
-        <BuiSelect>
-          <BuiSelectTrigger class="w-[180px]">
-            <BuiSelectValue placeholder="Select a fruit" />
-            <template #icon>
-              <BringToFrontIcon class="h-4 w-4 opacity-50" />
-            </template>
-          </BuiSelectTrigger>
-          <BuiSelectContent>
-            <BuiSelectGroup>
-              <BuiSelectLabel>Fruits</BuiSelectLabel>
-              <BuiSelectItem value="apple"> Apple </BuiSelectItem>
-              <BuiSelectItem value="banana"> Banana </BuiSelectItem>
-              <BuiSelectItem value="blueberry"> Blueberry </BuiSelectItem>
-              <BuiSelectItem value="grapes"> Grapes </BuiSelectItem>
-              <BuiSelectItem value="pineapple"> Pineapple </BuiSelectItem>
-            </BuiSelectGroup>
-          </BuiSelectContent>
-        </BuiSelect>
-      </div>
-    </Variant>
-    <Variant title="With validation">
-      <BuiForm
-        :validation-schema="validationSchema"
-        :initial-values="initialValues"
-        class="flex min-h-[350px] w-full flex-col items-center justify-center gap-4 p-10"
-      >
-        <BuiFormField name="favoriteFruit" v-slot="{ componentField, meta }">
-          <BuiFormItem>
-            <BuiFormControl>
-              <BuiSelect v-bind="componentField">
-                <BuiSelectTrigger
-                  class="w-[180px]"
-                  v-bind="componentField"
-                  :invalid="meta.validated && !meta.valid"
-                >
-                  <BuiSelectValue placeholder="Select a fruit" />
-                </BuiSelectTrigger>
-                <BuiSelectContent>
-                  <BuiSelectGroup>
-                    <BuiSelectLabel>Fruits</BuiSelectLabel>
-                    <BuiSelectItem value="apple"> Apple </BuiSelectItem>
-                    <BuiSelectItem value="banana"> Banana </BuiSelectItem>
-                    <BuiSelectItem value="blueberry"> Blueberry </BuiSelectItem>
-                    <BuiSelectItem value="grapes"> Grapes </BuiSelectItem>
-                    <BuiSelectItem value="pineapple"> Pineapple </BuiSelectItem>
-                  </BuiSelectGroup>
-                </BuiSelectContent>
-              </BuiSelect>
-            </BuiFormControl>
-            <BuiFormMessage />
-          </BuiFormItem>
-        </BuiFormField>
-      </BuiForm>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiSeparator.story.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import BuiSeparator from '@/components/ui/separator/BuiSeparator.vue'
-
-const variant = 'default'
-</script>
-
-<template>
-  <Story title="BuiSeparator" autoPropsDisabled :layout="{ type: 'grid', width: '50%' }">
-    <Variant :key="`variant`" :title="`Horizontal/Vertical`">
-      <div class="space-y-1">
-        <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
-        <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
-      </div>
-      <BuiSeparator class="my-4" />
-      <div class="flex h-5 items-center space-x-4 text-sm">
-        <div>Blog</div>
-        <BuiSeparator orientation="vertical" />
-        <div>Docs</div>
-        <BuiSeparator orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiSheet.story.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import BuiSheet from '@/components/ui/sheet/BuiSheet.vue'
-import BuiSheetClose from '@/components/ui/sheet/BuiSheetClose.vue'
-import BuiSheetContent from '@/components/ui/sheet/BuiSheetContent.vue'
-import BuiSheetDescription from '@/components/ui/sheet/BuiSheetDescription.vue'
-import BuiSheetFooter from '@/components/ui/sheet/BuiSheetFooter.vue'
-import BuiSheetHeader from '@/components/ui/sheet/BuiSheetHeader.vue'
-import BuiSheetTitle from '@/components/ui/sheet/BuiSheetTitle.vue'
-import BuiSheetTrigger from '@/components/ui/sheet/BuiSheetTrigger.vue'
-import BuiButton from '@/components/ui/button/BuiButton.vue'
-
-const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
-</script>
-
-<template>
-  <Story title="BuiSheet" autoPropsDisabled :layout="{ type: 'grid', width: '50%' }">
-    <Variant v-for="side in SHEET_SIDES" :key="side" :title="side">
-      <BuiSheet>
-        <BuiSheetTrigger as-child>
-          <BuiButton variant="outline"> {{ side }} </BuiButton>
-        </BuiSheetTrigger>
-        <BuiSheetContent :side="side">
-          <BuiSheetHeader>
-            <BuiSheetTitle>Bootsman</BuiSheetTitle>
-            <BuiSheetDescription> what is Bootsman? </BuiSheetDescription>
-          </BuiSheetHeader>
-          <div class="flex w-full py-4">
-            Bootsman is designed for managing kubernetes multi-clusters with a set of ready-made
-            tools for deployment, monitoring, load balancing, auto-scaling of container loads,
-            strict security policies and backup.
-          </div>
-          <BuiSheetFooter>
-            <BuiSheetClose as-child>
-              <BuiButton type="submit"> Close sheet </BuiButton>
-            </BuiSheetClose>
-          </BuiSheetFooter>
-        </BuiSheetContent>
-      </BuiSheet>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiSlider.story.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { BuiSlider } from '@/index'
-import { cn } from '@/lib/utils'
-import { ref } from 'vue'
-
-const modelValue = ref([50])
-</script>
-
-<template>
-  <Story title="BuiSlider" autoPropsDisabled :layout="{ type: 'grid', width: '50%' }">
-    <Variant title="Default">
-      <div class="m-4">
-        <div class="mb-3">Value: {{ modelValue[0] }}</div>
-
-        <BuiSlider
-          v-model="modelValue"
-          :max="100"
-          :step="1"
-          :class="cn('w-[100%]', $attrs.class ?? '')"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiStepper.story.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import BuiButton from '@/components/ui/button/BuiButton.vue'
-import BuiStepper from '@/components/ui/stepper/BuiStepper.vue'
-import BuiStepperDescription from '@/components/ui/stepper/BuiStepperDescription.vue'
-import BuiStepperItem from '@/components/ui/stepper/BuiStepperItem.vue'
-import BuiStepperSeparator from '@/components/ui/stepper/BuiStepperSeparator.vue'
-import BuiStepperTitle from '@/components/ui/stepper/BuiStepperTitle.vue'
-import BuiStepperTrigger from '@/components/ui/stepper/BuiStepperTrigger.vue'
-import { Check, Circle, Dot } from 'lucide-vue-next'
-
-const steps = [
-  {
-    step: 1,
-    title: 'Your details',
-    description: 'Provide your name and email'
-  },
-  {
-    step: 2,
-    title: 'Company details',
-    description: 'A few details about your company'
-  },
-  {
-    step: 3,
-    title: 'Invite your team',
-    description: 'Start collaborating with your team'
-  }
-]
-</script>
-
-<template>
-  <Story title="BuiStepper" autoPropsDisabled :layout="{ type: 'grid', width: '100%' }">
-    <Variant title="Horizontal">
-      <BuiStepper class="flex w-full items-start gap-2 p-10">
-        <BuiStepperItem
-          v-for="step in steps"
-          :key="step.step"
-          v-slot="{ state }"
-          class="relative flex w-full flex-col items-center justify-center"
-          :step="step.step"
-        >
-          <BuiStepperSeparator
-            v-if="step.step !== steps[steps.length - 1].step"
-            class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
-          />
-
-          <BuiStepperTrigger as-child>
-            <BuiButton
-              :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
-              class="z-10 size-10 shrink-0 rounded-full"
-              :class="[
-                state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background'
-              ]"
-            >
-              <Check v-if="state === 'completed'" class="size-5" />
-              <Circle v-if="state === 'active'" />
-              <Dot v-if="state === 'inactive'" />
-            </BuiButton>
-          </BuiStepperTrigger>
-
-          <div class="mt-5 flex flex-col items-center text-center">
-            <BuiStepperTitle
-              :class="[state !== 'active' && 'text-primary']"
-              class="text-sm font-semibold transition lg:text-base"
-            >
-              {{ step.title }}
-            </BuiStepperTitle>
-            <BuiStepperDescription
-              :class="[state !== 'active' && 'text-primary']"
-              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
-            >
-              {{ step.description }}
-            </BuiStepperDescription>
-          </div>
-        </BuiStepperItem>
-      </BuiStepper>
-    </Variant>
-
-    <Variant title="Vertical">
-      <BuiStepper
-        orientation="vertical"
-        class="mx-auto flex w-full max-w-md flex-col justify-start gap-10 p-10"
-      >
-        <BuiStepperItem
-          v-for="step in steps"
-          :key="step.step"
-          v-slot="{ state }"
-          class="relative flex w-full items-start gap-6"
-          :step="step.step"
-        >
-          <BuiStepperSeparator
-            v-if="step.step !== steps[steps.length - 1].step"
-            class="absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
-          />
-
-          <BuiStepperTrigger as-child>
-            <BuiButton
-              :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
-              class="z-10 size-10 shrink-0 rounded-full"
-              :class="[
-                state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background'
-              ]"
-            >
-              <Check v-if="state === 'completed'" class="size-5" />
-              <Circle v-if="state === 'active'" />
-              <Dot v-if="state === 'inactive'" />
-            </BuiButton>
-          </BuiStepperTrigger>
-
-          <div class="flex flex-col gap-1">
-            <BuiStepperTitle
-              :class="[state !== 'active' && 'text-primary']"
-              class="text-sm font-semibold transition lg:text-base"
-            >
-              {{ step.title }}
-            </BuiStepperTitle>
-            <BuiStepperDescription
-              :class="[state !== 'active' && 'text-primary']"
-              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
-            >
-              {{ step.description }}
-            </BuiStepperDescription>
-          </div>
-        </BuiStepperItem>
-      </BuiStepper>
-    </Variant>
-  </Story>
-</template>

package/src/components/stories/BuiSwitch.story.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import BuiSwitch from '@/components/ui/switch/BuiSwitch.vue'
-
-const variant = 'default'
-</script>
-
-<template>
-  <Story title="BuiSwitch" autoPropsDisabled :layout="{ type: 'grid', width: '33%' }">
-    <Variant :key="`variant`" :title="`${variant}`">
-      <BuiSwitch class="m-1"></BuiSwitch>
-    </Variant>
-
-    <Variant :key="`disabled-variant`" :title="`Disabled`">
-      <BuiSwitch class="m-1" disabled></BuiSwitch>
-    </Variant>
-
-    <Variant :key="`disabled-variant`" :title="`Disabled Checked`">
-      <BuiSwitch class="m-1" disabled checked></BuiSwitch>
-    </Variant>
-  </Story>
-</template>