@polymarbot/nuxt-layer-shadcn-ui 0.1.0

package/app/components/ui/Markdown/types.ts

@@ -0,0 +1,3 @@
+export interface MarkdownProps {
+  hideTitle?: boolean
+}

package/app/components/ui/Modal/index.stories.ts

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from '../Button/index.vue'
+import Input from '../Input/index.vue'
+import Modal from './index.vue'
+
+const meta = {
+  title: 'UI/Modal',
+  component: Modal,
+  argTypes: {
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    confirmDisabled: { control: 'boolean' },
+    showCancel: { control: 'boolean' },
+    showClose: { control: 'boolean' },
+    hideHeader: { control: 'boolean' },
+    hideFooter: { control: 'boolean' },
+    alignCenter: { control: 'boolean' },
+  },
+  args: {
+    loading: false,
+    disabled: false,
+    confirmDisabled: false,
+    showCancel: false,
+    showClose: true,
+    hideHeader: false,
+    hideFooter: false,
+    alignCenter: false,
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Modal, Button, Input },
+    setup () {
+      const controlled = ref(false)
+      const withDescription = ref(false)
+      const typeInfo = ref(false)
+      const typeSuccess = ref(false)
+      const typeHelp = ref(false)
+      const typeWarn = ref(false)
+      const typeDanger = ref(false)
+      const scrollable = ref(false)
+      return { args, controlled, withDescription, typeInfo, typeSuccess, typeHelp, typeWarn, typeDanger, scrollable }
+    },
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Button @click="controlled = true">Open Modal</Button>
+          <Modal
+            v-model:visible="controlled"
+            v-bind="args"
+            title="Modal Title"
+            confirmText="OK"
+            cancelText="Cancel"
+          >
+            <p>This is the modal content.</p>
+            <Input class="mt-4" placeholder="Try interacting with this input" />
+          </Modal>
+        </section>
+
+        <!-- With Description -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Description</h3>
+          <Button @click="withDescription = true">Open Modal</Button>
+          <Modal
+            v-model:visible="withDescription"
+            title="Delete Project"
+            description="This will permanently remove the project and all its data. This action cannot be undone."
+            showCancel
+            confirmVariant="destructive"
+            confirmText="Delete"
+          >
+            <p>Are you sure you want to continue?</p>
+          </Modal>
+        </section>
+
+        <!-- Scrollable Content -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Scrollable Content</h3>
+          <Button @click="scrollable = true">Open Modal</Button>
+          <Modal v-model:visible="scrollable" title="Terms of Service" showCancel confirmText="Accept">
+            <div class="space-y-4">
+              <p v-for="i in 20" :key="i">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+              </p>
+            </div>
+          </Modal>
+        </section>
+
+        <!-- With Type -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Type</h3>
+          <div class="flex gap-2">
+            <Button variant="outline" @click="typeInfo = true">Info</Button>
+            <Button variant="outline" @click="typeSuccess = true">Success</Button>
+            <Button variant="outline" @click="typeHelp = true">Help</Button>
+            <Button variant="outline" @click="typeWarn = true">Warn</Button>
+            <Button variant="outline" @click="typeDanger = true">Danger</Button>
+          </div>
+          <Modal v-model:visible="typeInfo" title="Information" type="info" showCancel>
+            <p>Your session will expire in 5 minutes.</p>
+          </Modal>
+          <Modal v-model:visible="typeSuccess" title="Success" type="success">
+            <p>Your payment has been processed successfully.</p>
+          </Modal>
+          <Modal v-model:visible="typeHelp" title="Help" type="help" showCancel>
+            <p>Need assistance? Check our documentation or contact support.</p>
+          </Modal>
+          <Modal v-model:visible="typeWarn" title="Warning" type="warn" showCancel confirmVariant="destructive">
+            <p>This operation may affect your existing data.</p>
+          </Modal>
+          <Modal v-model:visible="typeDanger" title="Delete Account" type="danger" showCancel confirmVariant="destructive" confirmText="Delete">
+            <p>All data will be permanently removed. This action cannot be undone.</p>
+          </Modal>
+        </section>
+      </div>
+    `,
+  }),
+}

package/app/components/ui/Modal/index.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/dialog'
+import type { ModalProps } from './types'
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  showClose: true,
+  title: undefined,
+  description: undefined,
+  confirmText: undefined,
+  cancelText: undefined,
+  content: undefined,
+  confirmVariant: 'default',
+  cancelVariant: 'outline',
+  type: undefined,
+  class: undefined,
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'open': []
+  'close': []
+  'closed': []
+  'confirm': []
+  'cancel': []
+}>()
+
+const { t } = useI18n()
+
+const resolvedConfirmText = computed(
+  () => props.confirmText ?? t('common.actions.confirm'),
+)
+const resolvedCancelText = computed(
+  () => props.cancelText ?? t('common.actions.cancel'),
+)
+
+const dialogOpen = computed({
+  get: () => props.visible ?? false,
+  set: (value: boolean) => {
+    if (!value && props.visible && !props.loading) {
+      onCancel()
+    }
+  },
+})
+
+watch(() => props.visible, visible => {
+  if (visible) emit('open')
+  else emit('close')
+})
+
+function onConfirm () {
+  emit('confirm')
+  emit('update:visible', false)
+}
+
+function onCancel () {
+  emit('cancel')
+  emit('update:visible', false)
+}
+
+const contentClass = computed(() =>
+  cn(
+    'gap-0 py-0',
+    props.alignCenter && 'text-center',
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <Dialog v-model:open="dialogOpen">
+    <DialogContent
+      :class="contentClass"
+      :showCloseButton="false"
+      @pointerDownOutside.prevent
+      @closeAutoFocus="emit('closed')"
+    >
+      <!-- Header -->
+      <DialogHeader
+        v-if="!hideHeader && (!!title || !!description || !!$slots.header)"
+        :class="cn('pt-5', alignCenter && 'items-center')"
+      >
+        <DialogTitle>
+          <slot name="header">
+            {{ title }}
+          </slot>
+        </DialogTitle>
+        <DialogDescription v-if="description">
+          {{ description }}
+        </DialogDescription>
+        <DialogDescription
+          v-else
+          class="sr-only"
+        />
+      </DialogHeader>
+
+      <!-- A11y fallback: DialogTitle/DialogDescription required by reka-ui -->
+      <template v-else>
+        <DialogTitle class="sr-only">
+          {{ title }}
+        </DialogTitle>
+        <DialogDescription class="sr-only" />
+      </template>
+
+      <!-- Content -->
+      <ScrollArea
+        fadeMask
+        class="my-5 max-h-[60vh]"
+      >
+        <ModalContent
+          :type="type"
+          :content="content"
+          :inert="loading || disabled || undefined"
+          :class="[ loading || disabled ? 'opacity-50' : undefined ]"
+          class="p-1"
+        >
+          <slot />
+        </ModalContent>
+      </ScrollArea>
+
+      <!-- Footer -->
+      <DialogFooter
+        v-if="!hideFooter"
+        class="pb-5"
+      >
+        <slot name="footer">
+          <!-- Left side slot -->
+          <div class="min-w-0 flex-1">
+            <slot name="footerLeft" />
+          </div>
+
+          <!-- Right side buttons -->
+          <div
+            class="flex shrink-0 gap-4"
+            :class="[ alignCenter ? 'justify-center' : 'justify-end' ]"
+          >
+            <Button
+              v-if="showCancel"
+              class="min-w-32"
+              :variant="cancelVariant"
+              :disabled="loading"
+              @click="onCancel"
+            >
+              {{ resolvedCancelText }}
+            </Button>
+            <Button
+              :class="showCancel ? 'min-w-32' : 'min-w-48'"
+              :variant="confirmVariant"
+              :loading="loading"
+              :disabled="disabled || confirmDisabled"
+              @click="onConfirm"
+            >
+              {{ resolvedConfirmText }}
+            </Button>
+          </div>
+        </slot>
+      </DialogFooter>
+
+      <DialogClose
+        v-if="showClose"
+        :disabled="loading"
+        class="
+          absolute top-3 right-3 flex size-8 items-center justify-center
+          rounded-full text-muted-foreground ring-offset-background transition
+          hover:bg-accent/50 hover:text-foreground
+          focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden
+          disabled:pointer-events-none disabled:opacity-50
+        "
+      >
+        <Icon name="x" />
+        <span class="sr-only">
+          {{ t('common.actions.close') }}
+        </span>
+      </DialogClose>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<style>
+/* Translucent blur backdrop. DialogOverlay is rendered inside DialogPortal
+   (outside component scope), so use a non-scoped style. */
+[data-slot='dialog-overlay'] {
+  z-index: 200;
+  background-color: rgba(252, 252, 252, 0.3);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+.dark [data-slot='dialog-overlay'] {
+  background-color: rgba(25, 25, 25, 0.3);
+}
+/* Raise above layout header (z-100) so the dialog covers it. */
+[data-slot='dialog-content'] {
+  z-index: 200;
+}
+</style>

package/app/components/ui/Modal/types.ts

@@ -0,0 +1,23 @@
+import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import type { ModalContentProps } from '../ModalContent/types'
+
+export interface ModalProps {
+  visible?: boolean
+  loading?: boolean
+  disabled?: boolean
+  confirmDisabled?: boolean
+  showCancel?: boolean
+  showClose?: boolean
+  hideHeader?: boolean
+  hideFooter?: boolean
+  alignCenter?: boolean
+  title?: string
+  description?: string
+  content?: ModalContentProps['content']
+  confirmText?: string
+  cancelText?: string
+  confirmVariant?: ButtonVariants['variant']
+  cancelVariant?: ButtonVariants['variant']
+  type?: ModalContentProps['type']
+  class?: ClassValue
+}

package/app/components/ui/ModalContent/index.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ModalContent from './index.vue'
+
+const meta = {
+  title: 'UI/ModalContent',
+  component: ModalContent,
+} satisfies Meta<typeof ModalContent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { ModalContent },
+    template: `
+      <div class="space-y-4 max-w-md">
+        <!-- Types -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Types</h3>
+          <div class="space-y-4">
+            <ModalContent type="default" content="This is a default message." />
+            <ModalContent type="success" content="Operation completed successfully." />
+            <ModalContent type="info" content="Your changes have been saved." />
+            <ModalContent type="help" content="Need help? Check the documentation." />
+            <ModalContent type="warn" content="This operation will affect all users." />
+            <ModalContent type="danger" content="Are you sure you want to delete this item? This action cannot be undone." />
+          </div>
+        </section>
+
+        <!-- Custom Icon -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Custom Icon</h3>
+          <div class="space-y-4">
+            <ModalContent icon="shield-alert" content="Your session is about to expire." />
+            <ModalContent type="warn" icon="shield-alert" content="Security warning: unusual login detected." />
+          </div>
+        </section>
+
+        <!-- Multiline Text -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Multiline Text</h3>
+          <ModalContent type="warn" content="Warning: This operation will affect all users.\nPlease review the changes before proceeding." />
+        </section>
+      </div>
+    `,
+  }),
+}

package/app/components/ui/ModalContent/index.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { isVNode } from 'vue'
+import type { ModalContentProps, ModalContentType } from './types'
+
+const typeIconNameMap: Partial<Record<ModalContentType, string>> = {
+  success: 'circle-check',
+  info: 'info',
+  help: 'circle-question-mark',
+  warn: 'triangle-alert',
+  danger: 'circle-alert',
+  error: 'circle-x',
+}
+
+const typeIconClasses: Record<ModalContentType, string> = {
+  default: 'text-primary',
+  success: 'text-success',
+  info: 'text-info',
+  help: 'text-help',
+  warn: 'text-warn',
+  danger: 'text-destructive',
+  error: 'text-destructive',
+}
+
+const props = withDefaults(defineProps<ModalContentProps>(), {
+  type: undefined,
+  icon: undefined,
+  content: undefined,
+})
+
+const iconName = computed(() => {
+  if (props.icon) return props.icon
+  if (props.type) return typeIconNameMap[props.type]
+  return undefined
+})
+
+const iconClass = computed(() =>
+  cn('size-8 shrink-0', props.type && typeIconClasses[props.type]),
+)
+
+// Check if content is HTMLElement
+function isHTMLElement (value: unknown): value is HTMLElement {
+  return value instanceof HTMLElement
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center gap-4">
+    <!-- Icon -->
+    <Icon
+      v-if="iconName"
+      :name="iconName"
+      :class="iconClass"
+    />
+    <!-- Content -->
+    <div class="flex-1">
+      <!-- VNode: render directly -->
+      <component
+        :is="content"
+        v-if="isVNode(content)"
+      />
+      <!-- HTMLElement: mount via ref -->
+      <div
+        v-else-if="isHTMLElement(content)"
+        ref="elementContainer"
+      >
+        <component :is="() => content" />
+      </div>
+      <!-- String: render as text with whitespace preserved -->
+      <span
+        v-else-if="content"
+        class="whitespace-pre-wrap"
+      >
+        {{ content }}
+      </span>
+      <!-- Fallback to slot -->
+      <slot v-else />
+    </div>
+  </div>
+</template>

package/app/components/ui/ModalContent/types.ts

@@ -0,0 +1,9 @@
+import type { VNode } from 'vue'
+
+export type ModalContentType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger' | 'error'
+
+export interface ModalContentProps {
+  type?: ModalContentType
+  icon?: string
+  content?: string | VNode | HTMLElement
+}

package/app/components/ui/PageCard/index.stories.ts

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from '../Button/index.vue'
+import WebLink from '../WebLink/index.vue'
+import PageCard from './index.vue'
+
+const meta = {
+  title: 'UI/PageCard',
+  component: PageCard,
+  argTypes: {
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+    loading: { control: 'boolean' },
+    ready: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    variant: { control: 'inline-radio', options: [ 'paper', 'card' ]},
+  },
+  args: {
+    title: 'Settings',
+    subtitle: '',
+    loading: false,
+    ready: true,
+    disabled: false,
+    variant: 'paper',
+  },
+} satisfies Meta<typeof PageCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { PageCard, Button, WebLink },
+    setup: () => ({ args }),
+    template: `
+      <div class="space-y-10 max-w-2xl">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <PageCard v-bind="args">
+            <p>Page card content goes here.</p>
+          </PageCard>
+        </section>
+
+        <!-- With Back Button -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Back Button</h3>
+          <PageCard title="Edit Profile" :back="{ action: () => {} }">
+            <p>A page card with a back button in the header.</p>
+          </PageCard>
+        </section>
+
+        <!-- Back + Subtitle -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Back + Subtitle</h3>
+          <PageCard title="Bot Details" subtitle="View and edit your bot configuration." :back="{ action: () => {} }">
+            <p>Back button combined with title and subtitle.</p>
+          </PageCard>
+        </section>
+
+        <!-- With Actions -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Actions</h3>
+          <PageCard title="API Keys">
+            <template #actions>
+              <Button variant="outline" size="sm">Export</Button>
+              <Button size="sm">Create</Button>
+            </template>
+            <p>Action buttons rendered on the right side of the title.</p>
+          </PageCard>
+        </section>
+
+        <!-- Actions + Subtitle + Back -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Actions + Subtitle + Back</h3>
+          <PageCard
+            title="Developer Settings"
+            subtitle="Manage API keys and webhooks for your organization."
+            :back="{ action: () => {} }"
+          >
+            <template #actions>
+              <WebLink href="#" target="_blank" class="text-sm">Docs</WebLink>
+              <WebLink href="#" target="_blank" class="text-sm">API Reference</WebLink>
+            </template>
+            <p>Back button, title, subtitle, and trailing action slot working together.</p>
+          </PageCard>
+        </section>
+
+        <!-- Card Variant -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Card Variant</h3>
+          <PageCard title="Profile" subtitle="Rounded corners and a visible border." variant="card">
+            <p>Use variant="card" for widget-style panels; default "paper" is edge-to-edge.</p>
+          </PageCard>
+        </section>
+
+        <!-- No Title -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">No Title</h3>
+          <PageCard>
+            <p>A page card without a title — just content.</p>
+          </PageCard>
+        </section>
+      </div>
+    `,
+  }),
+}