@clidey/dory 0.30.0 → 0.31.0

package/src/mdx/step.tsx

@@ -0,0 +1,51 @@
+import classNames from "classnames"
+import { Children } from "preact/compat"
+
+export function Steps({ children }: { children: preact.ComponentChildren }) {
+  const steps = Children.toArray(children) as preact.ComponentChildren[];
+  return (
+    <nav aria-label="Progress" className="py-16">
+      <div className="overflow-hidden">
+        {steps.map((step, stepIdx) => {
+          const stepElement = Children.toArray(step)[0] as preact.JSX.Element;
+          return (
+            <div key={stepIdx} className={classNames(
+              {
+                "pb-10": stepIdx !== steps.length - 1,
+                "pb-2": stepIdx === steps.length - 1,
+              },
+              'relative'
+            )}>
+              <div aria-hidden="true" className="absolute top-10 left-4 h-full w-[0.5px] bg-gray-300/50 dark:bg-gray-600/50" style={{ top: '40px', height: 'calc(100% - 44px)' }} />
+              <div className="group relative flex items-start">
+                <span className="flex h-9 items-center">
+                  <span className="relative z-10 flex size-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 group-hover:border-gray-400">
+                    <span className="text-sm font-medium text-gray-500 dark:text-white">
+                      {stepIdx + 1}
+                    </span>
+                  </span>
+                </span>
+                <span className="ml-4 flex min-w-0 flex-col">
+                  <p className="text-lg font-medium text-inherit">{stepElement.props.title}</p>
+                </span>
+              </div>
+              <div className="ml-12 not-prose">
+                {stepElement.props.children}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}
+
+export function Step({
+  title: _title,
+  children
+}: {
+  title?: string;
+  children: preact.ComponentChildren
+}) {
+  return <p className='text-sm'>{children}</p>
+}

package/src/mdx/table.tsx

@@ -0,0 +1,20 @@
+import type { JSX } from 'preact/jsx-runtime';
+import {
+  Table as UXTable,
+  TableHead,
+  TableCell
+} from '@clidey/ux'
+
+export const Table = (props: JSX.IntrinsicElements['table']) => (
+  <div className="overflow-x-auto rounded-lg my-8">
+    <UXTable {...props} />
+  </div>
+);
+
+export const Th = (props: JSX.IntrinsicElements['th']) => (
+  <TableHead {...props} />
+);
+
+export const Td = (props: JSX.IntrinsicElements['td']) => (
+  <TableCell {...props} />
+);

package/src/mdx/tag.tsx

@@ -0,0 +1,53 @@
+import { Badge } from '@clidey/ux'
+import classNames from 'classnames'
+
+const valueColorMap = {
+  GET: 'default',
+  POST: 'secondary',
+  PUT: 'outline',
+  DELETE: 'destructive',
+} as const
+
+const customColorClasses = {
+  emerald: 'bg-emerald-400/10 text-emerald-500 dark:text-emerald-400 border-emerald-300 dark:border-emerald-400/30',
+  sky: 'bg-sky-400/10 text-sky-500 dark:text-sky-400 border-sky-300 dark:border-sky-400/30',
+  amber: 'bg-amber-400/10 text-amber-500 dark:text-amber-400 border-amber-300 dark:border-amber-400/30',
+  rose: 'bg-rose-50 text-red-500 dark:bg-rose-400/10 dark:text-rose-400 border-rose-200 dark:border-rose-500/20',
+  zinc: 'bg-zinc-50 text-zinc-500 dark:bg-zinc-400/10 dark:text-zinc-400 border-zinc-200 dark:border-zinc-500/20',
+}
+
+const methodColors: Record<string, keyof typeof customColorClasses> = {
+  GET: 'emerald',
+  POST: 'sky',
+  PUT: 'amber',
+  DELETE: 'rose',
+}
+
+export function Tag({
+  children,
+  variant = 'medium',
+  color,
+  className,
+}: {
+  children: string
+  variant?: 'small' | 'medium'
+  color?: keyof typeof customColorClasses
+  className?: string
+}) {
+  const colorKey = color || methodColors[children] || 'zinc'
+  const badgeVariant = valueColorMap[children as keyof typeof valueColorMap] || 'outline'
+
+  return (
+    <Badge
+      variant={badgeVariant}
+      className={classNames(
+        'font-mono text-[0.625rem]/6 font-semibold',
+        customColorClasses[colorKey],
+        variant === 'small' && 'px-1 py-0',
+        className,
+      )}
+    >
+      {children}
+    </Badge>
+  )
+}

package/src/mdx/text.tsx

@@ -0,0 +1,99 @@
+import { cn } from "@clidey/ux"
+import classNames from "classnames"
+import { useState } from "preact/hooks"
+
+
+export const h1 = function H1(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+  return <h1 className="text-4xl font-bold mb-4 mt-12" {...props} />
+}
+
+export const h2 = function H2(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className="text-3xl font-bold mb-3 mt-10" {...props} />
+}
+
+export const h3 = function H3(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className="text-2xl font-bold mb-2 mt-8" {...props} />
+}
+
+export const h4 = function H4(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+  return <h4 className="text-xl font-bold mb-2 mt-6" {...props} />
+}
+
+export const h5 = function H5(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+  return <h5 className="text-lg font-bold mb-2" {...props} />
+}
+
+export const h6 = function H6(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+  return <h6 className="text-base font-bold mb-2" {...props} />
+}
+
+export const p = function P(props: preact.JSX.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className="mb-2 inline-block" {...props} />
+}
+
+export function Row({ children, cols = 1, className }: { children: preact.ComponentChildren, cols?: number, className?: string }) {
+  return (
+    <div className={cn(`py-6 grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none`, className)} style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
+      {children}
+    </div>
+  )
+}
+
+export function Col({
+  children,
+  sticky = false,
+  rows = 1,
+  gap = 4
+}: {
+  children: preact.ComponentChildren
+  sticky?: boolean
+  rows?: number
+  gap?: number
+}) {
+  return (
+    <div
+      className={classNames("[&>:first-child]:mt-0 [&>:last-child]:mb-0", {
+        'xl:sticky xl:top-24': sticky,
+      })}
+      style={{ 
+        display: 'grid',
+        gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+        gap: `${gap * 0.25}rem`
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+
+export function Anchor({ children, href }: { children: preact.ComponentChildren, href: string }) {
+  return <a href={href} className="text-blue-500 hover:text-blue-600">{children}</a>
+}
+
+export function Image({ src, alt }: { src: string, alt: string }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <>
+      <img 
+        src={src} 
+        alt={alt} 
+        className="w-full h-auto cursor-pointer" 
+        onClick={() => setIsExpanded(true)}
+      />
+      {isExpanded && (
+        <div 
+          className="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center"
+          onClick={() => setIsExpanded(false)}
+        >
+          <img 
+            src={src} 
+            alt={alt} 
+            className="max-h-[90vh] max-w-[90vw] object-contain"
+          />
+        </div>
+      )}
+    </>
+  );
+}