example

apps/web/components/example.tsx

@@ -0,0 +1,97 @@
+import { Suspense, lazy } from 'react'
+import { codeToHtml } from 'shiki'
+import githubDarkDimmed from 'shiki/themes/github-dark-dimmed.mjs'
+
+const exampleComponents = import.meta.glob('../examples/**/*.tsx') as {
+  [key: string]: () => Promise<{
+    default: React.ComponentType
+  }>
+}
+
+const exampleCodes = import.meta.glob('../examples/**/*.tsx', {
+  query: '?raw',
+  import: 'default',
+}) as {
+  [key: string]: () => Promise<string>
+}
+
+export function Example({ path }: { path: string }) {
+  const fullPath = `../examples/${path}.tsx`
+
+  return (
+    <div>
+      <ExamplePreview fullPath={fullPath} />
+      <ExampleCode fullPath={fullPath} />
+    </div>
+  )
+}
+
+function ExamplePreview(props: { fullPath: string }) {
+  const loadComponent = exampleComponents[props.fullPath]
+
+  if (!loadComponent) {
+    throw new Error(`Component does not exists on [${props.fullPath}]`)
+  }
+
+  const Component = lazy(loadComponent)
+
+  return (
+    // TODO
+    <Suspense fallback="loading...">
+      <Component />
+    </Suspense>
+  )
+}
+
+function ExampleCode(props: { fullPath: string }) {
+  const loadCode = exampleCodes[props.fullPath]
+
+  if (!loadCode) {
+    throw new Error(`Component does not exists on [${props.fullPath}]`)
+  }
+
+  const Code = lazy(async () => {
+    const code = await loadCode()
+    const html = await codeToHtml(code, {
+      lang: 'tsx',
+      theme: 'github-light',
+      themes: {
+        light: 'github-light',
+        dark: githubDarkDimmed,
+        // dim: 'github-dimmed',
+      },
+      transformers: [
+        {
+          pre: (el) => {
+            el.properties.class += ' vocs_Pre'
+            return el
+          },
+          code: (el) => {
+            el.properties.class += ' vocs_Code'
+            return el
+          },
+          span: (el) => {
+            el.properties.class += ' vocs_Span'
+            return el
+          },
+        },
+      ],
+    })
+    return {
+      default: () => {
+        return (
+          <div className="vocs_CodeBlock">
+            <div className="vocs_Pre_wrapper" dangerouslySetInnerHTML={{ __html: html }} />
+          </div>
+        )
+      },
+    }
+  })
+
+  return (
+    // TODO
+    <Suspense fallback="loading...">
+      <Code />
+    </Suspense>
+  )
+}

apps/web/examples/accordion-demo.tsx

@@ -0,0 +1,29 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@dinui/react/accordion'
+
+export default function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}

apps/web/package.json

@@ -18,6 +18,7 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.3"
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7"
   }
 }

apps/web/pages/ui/accordion.mdx

@@ -1,5 +1,28 @@
 ---
 title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
 ---
 
-# Accordion
+import { Example } from '@web/components/example'
+
+<Example path="accordion-demo" />
+
+## Usage
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@dinui/react/accordion'
+```
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```

apps/web/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2022",
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": [],
+    "types": ["vite/client"],
     "module": "ESNext",
     "skipLibCheck": true,
 
@@ -14,12 +14,17 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "paths": {
+      "@web/*": ["./*"],
+      "@dinui/react/utils": ["../../packages/react-ui/utils"],
+      "@dinui/react/*": ["../../packages/react-ui/ui/*"]
+    },
 
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "exclude": ["**/*.js", "**/*.cjs", "**/*.mjs"]
+  "exclude": ["**/*.js", "**/*.cjs", "**/*.mjs", "vocs.config.ts"]
 }

apps/web/vocs.config.ts

@@ -1,7 +1,17 @@
+import { resolve } from 'path'
 import { defineConfig } from 'vocs'
 
 export default defineConfig({
   rootDir: '.',
+  vite: {
+    resolve: {
+      alias: {
+        '@web': resolve(__dirname, './'),
+        '@dinui/react/utils': resolve(__dirname, '../../packages/react-ui/utils'),
+        '@dinui/react': resolve(__dirname, '../../packages/react-ui/ui'),
+      },
+    },
+  },
   title: 'DinUI',
   sidebar: [
     {

packages/react-ui/package.json

@@ -17,10 +17,13 @@
   },
   "license": "MIT",
   "exports": {
-    "./button": {
-      "default": "./build/ui/button.jsx",
-      "import": "./build/ui/button.jsx",
-      "types": "./build/ui/button.d.ts"
+    "./accordion": {
+      "types": "./build/ui/accordion.d.ts",
+      "default": "./build/ui/accordion.jsx"
+    },
+    "./utils": {
+      "types": "./build/utils.d.ts",
+      "default": "./build/utils.jsx"
     }
   },
   "scripts": {
@@ -32,6 +35,10 @@
     "typescript": "^5.4.2"
   },
   "dependencies": {
-    "react": "^18.2.0"
+    "@radix-ui/react-accordion": "^1.1.2",
+    "clsx": "^2.1.0",
+    "react": "^18.2.0",
+    "tailwind-merge": "^2.2.2",
+    "tailwind-variants": "^0.2.1"
   }
 }

packages/react-ui/ui/accordion.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { cx } from '../utils'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+import * as React from 'react'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cx('border-b', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cx(
+        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cx('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

packages/react-ui/utils.ts

@@ -0,0 +1,6 @@
+import clsx, { type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cx(...args: ClassValue[]) {
+  return twMerge(clsx(...args))
+}