@soft-stech/bootsman-ui-shadcn 1.0.5-beta.4 → 1.1.0

package/src/components/ui/toast/use-toast.ts

@@ -0,0 +1,157 @@
+import { computed, ref } from 'vue'
+import type { Component, VNode } from 'vue'
+import type { ToastProps } from './BuiToast.vue'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+export type StringOrVNode = string | VNode | (() => VNode)
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: StringOrVNode
+  action?: Component
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST'
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId)) return
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+const state = ref<State>({
+  toasts: []
+})
+
+function dispatch(action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)
+      break
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map((t) =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t
+      )
+      break
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action
+
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      state.value.toasts = state.value.toasts.map((t) =>
+        t.id === toastId || toastId === undefined
+          ? {
+              ...t,
+              open: false
+            }
+          : t
+      )
+      break
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined) state.value.toasts = []
+      else state.value.toasts = state.value.toasts.filter((t) => t.id !== action.toastId)
+
+      break
+  }
+}
+
+function useToast() {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId })
+  }
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast(props: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id }
+    })
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open) dismiss()
+      }
+    }
+  })
+
+  return {
+    id,
+    dismiss,
+    update
+  }
+}
+
+export { toast, useToast }

package/src/components/ui/toggle/BuiToggle.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'radix-vue'
+import { Toggle, useForwardPropsEmits } from 'radix-vue'
+import type { VariantProps } from 'class-variance-authority'
+import { computed, useAttrs } from 'vue'
+import { toggleVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
+
+interface Props extends ToggleProps {
+  variant?: ToggleVariantProps['variant']
+  size?: ToggleVariantProps['size']
+  disabled?: boolean
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+  disabled: false,
+})
+const emits = defineEmits<ToggleEmits>()
+
+const toggleProps = computed(() => {
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  const { variant, size, disabled, ...otherProps } = props
+  return otherProps
+})
+
+const { class: className, ...rest } = useAttrs()
+const forwarded = useForwardPropsEmits(toggleProps.value, emits)
+</script>
+
+<template>
+  <Toggle
+    v-bind="{
+      ...forwarded,
+      ...rest,
+    }"
+    :class="cn(toggleVariants({ variant, size }), className ?? '')"
+    :disabled="props.disabled"
+  >
+    <slot />
+  </Toggle>
+</template>

package/src/components/ui/toggle/index.ts

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority'
+
+export { default as BuiToggle } from './BuiToggle.vue'
+
+export const toggleVariants = cva(
+  'bg-transparent inline-flex items-center justify-center rounded-md text-accent-foreground text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent/[0.16] hover:bg-accent/[0.08]', // data-[state=on]:text-accent-foreground
+  {
+    variants: {
+      variant: {
+        default: '',
+        outline: 'border border-input '
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)

package/src/components/ui/tooltip/BuiTooltip.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  TooltipRoot,
+  type TooltipRootEmits,
+  type TooltipRootProps,
+  useForwardPropsEmits
+} from 'radix-vue'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/ui/tooltip/BuiTooltipContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  TooltipContent,
+  type TooltipContentEmits,
+  type TooltipContentProps,
+  TooltipPortal,
+  useForwardPropsEmits
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<TooltipContentProps>(), {
+  sideOffset: 4
+})
+const emits = defineEmits<TooltipContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 overflow-hidden rounded-md border border-muted bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          $attrs.class ?? ''
+        )
+      "
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/ui/tooltip/BuiTooltipProvider.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/ui/tooltip/BuiTooltipTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as BuiTooltip } from './BuiTooltip.vue'
+export { default as BuiTooltipContent } from './BuiTooltipContent.vue'
+export { default as BuiTooltipTrigger } from './BuiTooltipTrigger.vue'
+export { default as BuiTooltipProvider } from './BuiTooltipProvider.vue'

package/src/histoire-setup.ts

@@ -0,0 +1 @@
+import './assets/main.css'

package/src/index.ts

@@ -0,0 +1,38 @@
+import '../src/assets/main.css'
+
+export * from './components/ui/accordion/index'
+export * from './components/ui/alert-dialog/index'
+export * from './components/ui/alert/index'
+export * from './components/ui/aspect-ratio/index'
+export * from './components/ui/avatar/index'
+export * from './components/ui/badge/index'
+export * from './components/ui/button/index'
+export * from './components/ui/calendar/index'
+export * from './components/ui/card/index'
+export * from './components/ui/checkbox/index'
+export * from './components/ui/command/index'
+export * from './components/ui/context-menu/index'
+export * from './components/ui/dialog/index'
+export * from './components/ui/dropdown-menu/index'
+export * from './components/ui/form/index'
+export * from './components/ui/hover-card/index'
+export * from './components/ui/input/index'
+export * from './components/ui/label/index'
+export * from './components/ui/pagination/index'
+export * from './components/ui/popover/index'
+export * from './components/ui/progress/index'
+export * from './components/ui/radio-group/index'
+export * from './components/ui/select/index'
+export * from './components/ui/separator/index'
+export * from './components/ui/switch/index'
+export * from './components/ui/table/index'
+export * from './components/ui/tabs/index'
+export * from './components/ui/textarea/index'
+export * from './components/ui/toast/index'
+export * from './components/ui/tooltip/index'
+export * from './components/ui/toggle/index'
+export * from './components/ui/slider/index'
+export * from './components/ui/skeleton/index'
+
+export * from './lib/utils'
+export { default as tailwind } from './tailwind-preset'

package/src/lib/utils.ts

@@ -0,0 +1,38 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { h, type FunctionalComponent } from 'vue'
+
+import { BuiButton } from '@/components/ui/button'
+import type { Column, Updater } from '@tanstack/vue-table'
+import { ArrowDownIcon, ArrowDownUpIcon, ArrowUpIcon } from 'lucide-vue-next'
+import { type Ref } from 'vue'
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
+}
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export const tableColumnSortCommon = (column: Column<any>, name: string) => {
+  let icon: FunctionalComponent
+
+  if (column.getIsSorted() === 'asc') {
+    icon = ArrowDownIcon
+  } else if (column.getIsSorted() === 'desc') {
+    icon = ArrowUpIcon
+  } else {
+    icon = ArrowDownUpIcon
+  }
+
+  return h(
+    BuiButton,
+    {
+      variant: 'none',
+      class: 'text-foreground px-0 text-base',
+      onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+    },
+    () => [name, h(icon, { class: 'ml-2 h-4 w-4 text-muted-foreground' })]
+  )
+}

package/src/tailwind-preset.ts

@@ -0,0 +1,109 @@
+import type { Config } from 'tailwindcss'
+import animate from 'tailwindcss-animate'
+
+export default {
+  darkMode: ['class'],
+
+  content: [
+    './pages/**/*.{ts,tsx,vue}',
+    './components/**/*.{ts,tsx,vue}',
+    './app/**/*.{ts,tsx,vue}',
+    './src/**/*.{ts,tsx,vue}'
+  ],
+
+  safelist: ['dark'],
+
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px'
+      }
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
+        },
+        'primary-hover': {
+          DEFAULT: 'hsl(var(--primary-hover))'
+        },
+        'primary-active': {
+          DEFAULT: 'hsl(var(--primary-active))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))'
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))'
+        }
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      },
+      boxShadow: {
+        'card-shadow': '0px 2px 19px 0px hsl(var(--card-shadow))'
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' }
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' }
+        },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' }
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' }
+        }
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out'
+      },
+      backgroundImage: {
+        logo: "url('/src/assets/logo-full.png')",
+        'logo-dark': "url('/src/assets/logo-full-dark.png')"
+      }
+    }
+  },
+  plugins: [animate]
+} satisfies Config