@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/stories/chart.story.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory, type TStoryData } from "@/registry/story"
+
+import { Chart } from "@/components/composed/chat/chart"
+import { wordOccurrences } from "@/registry/demos/corpus-chart-data"
+
+type TPreviewProps = TStoryData<
+  Pick<
+    ComponentProps<typeof Chart>,
+    | "type"
+    | "title"
+    | "subtitle"
+    | "badge"
+    | "reference"
+    | "data"
+    | "series"
+    | "center"
+    | "headerless"
+    | "plotHeight"
+    | "width"
+    | "height"
+    | "variant"
+    | "interactive"
+    | "loading"
+    | "showLegend"
+    | "animation"
+    | "renderer"
+  >
+>
+
+function ChartPreview(props: TPreviewProps) {
+  return <Chart {...props} />
+}
+
+export const story = defineStory({
+  Component: ChartPreview,
+  args: {
+    initial: {
+      type: "bar",
+      variant: "default",
+      interactive: true,
+      loading: false,
+      showLegend: true,
+      animation: true,
+      renderer: "canvas",
+      title: "Word occurrences by book",
+      subtitle: "Illustrative counts · selected Bible books",
+      reference: {
+        children: "Strong’s G26",
+        preview:
+          "Matched tokens grouped by Strong’s entry and Bible book. These counts are illustrative.",
+      },
+      headerless: false,
+      width: "100%",
+      height: 360,
+      data: wordOccurrences,
+      series: [
+        {
+          key: "occurrences",
+          label: "Occurrences",
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/checkbox.story.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Checkbox } from "@/components/ui/checkbox"
+
+type TPreviewProps = Pick<
+  ComponentProps<typeof Checkbox>,
+  "indeterminate" | "disabled" | "sound"
+>
+
+function CheckboxPreview(props: TPreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="">
+        <label className="flex items-center gap-2">
+          <Checkbox {...props} />
+          Include this passage
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: CheckboxPreview,
+  args: { initial: { indeterminate: false, disabled: false, sound: true } },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/code-auth-block.story.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { CodeAuthBlock } from "@/components/blocks/auth/code-auth-block"
+
+export const story = defineStory({
+  Component: CodeAuthBlock,
+  args: {
+    initial: {
+      channel: "email",
+      destination: "r•••@example.com",
+      length: 6,
+      autoSubmit: true,
+      resendSeconds: 30,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/code-block.story.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory, type TStoryData } from "@/registry/story"
+
+import { CodeBlock } from "@/components/composed/chat/code-block"
+
+type TPreviewProps = TStoryData<
+  Pick<
+    ComponentProps<typeof CodeBlock>,
+    "filename" | "code" | "diff" | "view" | "defaultView" | "keywords"
+  >
+>
+
+function CodeBlockPreview(props: TPreviewProps) {
+  return <CodeBlock {...props} />
+}
+
+export const story = defineStory({
+  Component: CodeBlockPreview,
+  args: {
+    initial: {
+      filename: "corpus.ts",
+      view: "code",
+      diff: [
+        { type: "context", text: 'const corpus = "Iliad";' },
+        { type: "remove", text: "const book = 2;" },
+        { type: "add", text: "const book = 1;" },
+      ],
+      code: 'const corpus = "Iliad";\nconst book = 1;',
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/composed-password-input.story.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import type { ComponentProps } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { PasswordInput } from "@/components/composed/password-input"
+
+type TPreviewProps = Pick<
+  ComponentProps<typeof PasswordInput>,
+  | "visibilityToggle"
+  | "showStrength"
+  | "sound"
+  | "placeholder"
+  | "disabled"
+  | "aria-label"
+>
+
+function PasswordInputPreview(props: TPreviewProps) {
+  return (
+    <div className="p-6 flex justify-center">
+      <PasswordInput {...props} className="max-w-sm w-full" />
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: PasswordInputPreview,
+  args: {
+    initial: {
+      showStrength: true,
+      visibilityToggle: true,
+      sound: true,
+      disabled: false,
+      placeholder: "Enter a password",
+      "aria-label": "Password",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/context-cards.story.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { ContextCards } from "@/components/composed/chat/context-cards"
+
+export const story = defineStory({
+  Component: ContextCards as FC<
+    Pick<ComponentProps<typeof ContextCards>, "cards" | "header" | "count">
+  >,
+  args: {
+    initial: {
+      cards: [
+        {
+          title: "Iliad 1.1",
+          meta: "Opening invocation",
+          snippet: "Sing, goddess, the anger of Achilles.",
+          file: {
+            name: "iliad.txt",
+            type: "TXT",
+          },
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/emoji-action-bar.story.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { EmojiActionBar } from "@/components/composed/action-bar/emojis"
+
+export const story = defineStory({
+  Component: EmojiActionBar as FC<
+    Pick<ComponentProps<typeof EmojiActionBar>, "hideMore">
+  >,
+  args: {
+    initial: {
+      hideMore: true,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/field.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+
+type TPreviewProps = Pick<ComponentProps<typeof Field>, "disabled" | "invalid">
+
+function FieldPreview(props: TPreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="min-w-sm">
+        <Field {...props}>
+          <FieldLabel>Manuscript title</FieldLabel>
+          <Input placeholder="Enter a title" />
+          <FieldDescription>The title shown in your corpus.</FieldDescription>
+          <FieldError match={Boolean(props.invalid)}>
+            Enter a manuscript title.
+          </FieldError>
+        </Field>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: FieldPreview,
+  args: { initial: { disabled: false, invalid: false } },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/file-icons.story.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory, type TStoryData } from "@/registry/story"
+import { FileBadgeTei } from "@/components/icons/file-badge-tei"
+
+type TPreviewProps = TStoryData<
+  Pick<ComponentProps<typeof FileBadgeTei>, "size" | "title">
+>
+
+function FileBadgeTeiPreview(props: TPreviewProps) {
+  return <FileBadgeTei {...props} />
+}
+
+export const story = defineStory({
+  Component: FileBadgeTeiPreview,
+  args: { initial: { size: 64, title: "TEI file" } },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/filter-table.story.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory, type TStoryData } from "@/registry/story"
+
+import { FilterTable } from "@/components/composed/chat/filter-table"
+
+type TPreviewProps = TStoryData<
+  Pick<
+    ComponentProps<
+      typeof FilterTable<{ id: string; status: string; passage: string }>
+    >,
+    "statuses" | "columns" | "rows" | "statusKey" | "allLabel" | "filter"
+  >
+>
+
+function FilterTablePreview(props: TPreviewProps) {
+  return <FilterTable {...props} />
+}
+
+export const story = defineStory({
+  Component: FilterTablePreview,
+  args: {
+    initial: {
+      statuses: [
+        {
+          id: "review",
+          label: "Review",
+          tone: "warning",
+        },
+        {
+          id: "done",
+          label: "Completed",
+          tone: "success",
+        },
+      ],
+      columns: [
+        {
+          key: "passage",
+          header: "Passage",
+        },
+        {
+          key: "status",
+          header: "Status",
+        },
+      ],
+      rows: [
+        {
+          id: "1",
+          passage: "Iliad 1.1",
+          status: "review",
+        },
+        {
+          id: "2",
+          passage: "Iliad 1.2",
+          status: "done",
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/flowchart.story.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Flowchart } from "@/components/composed/chat/flowchart"
+
+export const story = defineStory({
+  Component: Flowchart.Root as FC<
+    Pick<
+      ComponentProps<typeof Flowchart.Root>,
+      "height" | "zoomable" | "readOnly"
+    >
+  >,
+  args: {
+    initial: {
+      zoomable: true,
+      readOnly: false,
+      height: 500,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/forgot-password-block.story.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { ForgotPasswordBlock } from "@/components/blocks/auth/forgot-password-block"
+
+export const story = defineStory({
+  Component: ForgotPasswordBlock,
+  args: {
+    initial: {},
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/frame.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Frame, FrameFooter } from "@/components/ui/frame"
+import { Card, CardPanel } from "@/components/ui/card"
+
+type TPreviewProps = Pick<ComponentProps<typeof Frame>, "className"> & {
+  children: string
+}
+
+function FramePreview({ children, ...props }: TPreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <Frame {...props}>
+          <Card>
+            <CardPanel>{children}</CardPanel>
+          </Card>
+          <FrameFooter>Updated today</FrameFooter>
+        </Frame>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: FramePreview,
+  args: { initial: { className: "", children: "Manuscript notes" } },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/index.ts

@@ -0,0 +1,57 @@
+/**
+ * Barrel exports for component stories.
+ */
+
+export { Preview as AvatarStory } from "./avatar.story"
+export { Preview as BubbleStory } from "./bubble.story"
+export { Preview as ButtonStory } from "./button.story"
+export { Preview as CardStory } from "./card.story"
+export { Preview as CheckboxStory } from "./checkbox.story"
+export { Preview as FieldStory } from "./field.story"
+export { Preview as FileIconsStory } from "./file-icons.story"
+export { Preview as FrameStory } from "./frame.story"
+export { Preview as InputGroupStory } from "./input-group.story"
+export { Preview as InputStory } from "./input.story"
+export { Preview as LabelStory } from "./label.story"
+export { Preview as MenuCommandStory } from "./menu-command.story"
+export { Preview as OTPFieldStory } from "./otp-field.story"
+export { Preview as PasswordInputStory } from "./password-input.story"
+export { Preview as ReferenceStory } from "./reference.story"
+export { Preview as SeparatorStory } from "./separator.story"
+export { Preview as TextStory } from "./text.story"
+export { Preview as TextareaStory } from "./textarea.story"
+
+export { Preview as AttachmentStory } from "./attachment.story"
+export { Preview as ChartStory } from "./chart.story"
+export { Preview as CodeBlockStory } from "./code-block.story"
+export { Preview as ComposedPasswordInputStory } from "./composed-password-input.story"
+export { Preview as ContextCardsStory } from "./context-cards.story"
+export { Preview as EmojiActionBarStory } from "./emoji-action-bar.story"
+export { Preview as FilterTableStory } from "./filter-table.story"
+export { Preview as FlowchartStory } from "./flowchart.story"
+export { Preview as InsightCardsStory } from "./insight-cards.story"
+export { Preview as LogoStory } from "./logo.story"
+export { Preview as MarkdownStory } from "./markdown.story"
+export { Preview as RecommendationCardStory } from "./recommendation-card.story"
+export { Preview as RecordsTableStory } from "./records-table.story"
+export { Preview as ResearchAnswerStory } from "./research-answer.story"
+export { Preview as SocialProvidersStory } from "./social-providers.story"
+export { Preview as StreamingTextStory } from "./streaming-text.story"
+export { Preview as TreeStory } from "./tree.story"
+export { Preview as UserStory } from "./user.story"
+export { Preview as VerseStory } from "./verse.story"
+
+export { Preview as AuthFlowBlockStory } from "./auth-flow-block.story"
+export { Preview as ChatBlockStory } from "./base.story"
+export { Preview as CodeAuthBlockStory } from "./code-auth-block.story"
+export { Preview as ForgotPasswordBlockStory } from "./forgot-password-block.story"
+export { Preview as LinkedAccountsBlockStory } from "./linked-accounts-block.story"
+export { Preview as LoginBlockStory } from "./login-block.story"
+export { Preview as OnboardingBlockStory } from "./onboarding-block.story"
+export { Preview as PasskeyManagerBlockStory } from "./passkey-manager-block.story"
+export { Preview as PasskeySignInBlockStory } from "./passkey-sign-in-block.story"
+export { Preview as ProfileCardBlockStory } from "./profile-card-block.story"
+export { Preview as ScaffoldRootStory } from "./scaffold-root.story"
+export { Preview as ShellLayoutStory } from "./shell-layout.story"
+export { Preview as SignupBlockStory } from "./signup-block.story"
+export { Preview as UpdatePasswordBlockStory } from "./update-password-block.story"

package/src/components/stories/input-group.story.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
+
+type TPreviewProps = Pick<ComponentProps<typeof InputGroup>, "className">
+
+function InputGroupPreview(props: TPreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <InputGroup {...props}>
+          <InputGroupAddon>Corpus</InputGroupAddon>
+          <InputGroupInput aria-label="Search corpus" placeholder="Search…" />
+        </InputGroup>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: InputGroupPreview,
+  args: { initial: { className: "" } },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/input.story.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Input } from "@/components/ui/input"
+
+type TPreviewProps = Pick<
+  ComponentProps<typeof Input>,
+  "placeholder" | "size" | "disabled" | "type" | "readOnly"
+> & {
+  variant: "default" | "unstyled"
+}
+
+function InputPreview({ variant, ...props }: TPreviewProps) {
+  return (
+    <div className="flex justify-center p-6">
+      <div className="w-full max-w-sm">
+        <Input
+          {...props}
+          aria-label="Search the corpus"
+          unstyled={variant === "unstyled"}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: InputPreview,
+  args: {
+    initial: {
+      placeholder: "Search the corpus",
+      size: "default",
+      disabled: false,
+      variant: "default",
+      type: "text",
+      readOnly: false,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/insight-cards.story.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory, type TStoryData } from "@/registry/story"
+
+import {
+  InsightCards,
+  type IInsight,
+} from "@/components/composed/chat/insight-cards"
+import type { IStatProps } from "@/components/ui/chat"
+
+type TPreviewProps = TStoryData<
+  Pick<
+    ComponentProps<typeof InsightCards>,
+    "header" | "index" | "defaultIndex"
+  > & {
+    insights: (Omit<IInsight, "stats"> & {
+      stats?: Pick<IStatProps, "label" | "value" | "delta" | "tone" | "trend">[]
+    })[]
+  }
+>
+
+function InsightCardsPreview(props: TPreviewProps) {
+  return <InsightCards {...props} />
+}
+
+export const story = defineStory({
+  Component: InsightCardsPreview,
+  args: {
+    initial: {
+      insights: [
+        {
+          summary: "Iliad lemma coverage reached 79%.",
+          stats: [
+            {
+              label: "Coverage",
+              value: "79%",
+              tone: "series-1",
+            },
+          ],
+          followUp: "Which lemmas are unresolved?",
+        },
+        {
+          summary: "14 lemmas need review.",
+          allocation: {
+            label: "Flagged lemmas",
+            value: "14",
+            segments: [
+              {
+                key: "ambiguous",
+                label: "Ambiguous",
+                value: 8,
+              },
+              {
+                key: "variant",
+                label: "Variants",
+                value: 6,
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/label.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+
+type TPreviewProps = Pick<ComponentProps<typeof Label>, "sound"> & {
+  children: string
+}
+
+function LabelPreview({ children, ...props }: TPreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm space-y-2">
+        <>
+          <Label {...props} htmlFor="story-manuscript">
+            {children}
+          </Label>
+          <Input id="story-manuscript" placeholder="Enter a title" />
+        </>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: LabelPreview,
+  args: { initial: { sound: false, children: "Manuscript title" } },
+})
+
+export const Preview = story.WithControl