@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/spreadsheet/parser.ts

@@ -0,0 +1,307 @@
+export type AST =
+  | AST_Numeric
+  | AST_String
+  | AST_Unary
+  | AST_Binary
+  | AST_Compare
+  | AST_Reference
+  | AST_Range
+  | AST_Function
+export type AST_Numeric = { t: 'num'; v: number }
+export type AST_String = { t: 'str'; v: string }
+export type AST_Unary = { t: 'un'; op: '+' | '-'; expr: AST }
+export type AST_Binary = { t: 'bin'; op: '+' | '-' | '*' | '/' | '^'; left: AST; right: AST }
+export type AST_Compare = { t: 'cmp'; op: '=' | '<>' | '<' | '<=' | '>' | '>='; left: AST; right: AST }
+export type AST_Reference = { t: 'ref'; ref: RefSpec }
+export type AST_Range = { t: 'range'; a: RefSpec; b: RefSpec }
+export type AST_Function = { t: 'fun'; name: 'IF' | 'IFERROR' | 'SUM'; args: AST[] }
+
+export type RefSpec = {
+  relR: number
+  relC: number
+  absR: number | null
+  absC: number | null
+}
+
+export class R1C1Parser {
+  s: string
+  i = 0
+
+  constructor(input: string) {
+    this.s = input.trim()
+  }
+
+  peek() {
+    return this.s[this.i]
+  }
+
+  next() {
+    return this.s[this.i++]
+  }
+
+  eof() {
+    return this.i >= this.s.length
+  }
+
+  skipWS() {
+    while (!this.eof() && /\s/.test(this.peek())) {
+      this.i++
+    }
+  }
+
+  // Entry: allow optional leading '='
+  parse(): AST {
+    this.skipWS()
+    if (this.peek() === '=') {
+      this.next()
+    }
+    this.skipWS()
+    const expr = this.parseComparison()
+    this.skipWS()
+    return expr
+  }
+
+  // comparison: addSub (comp addSub)?
+  parseComparison(): AST {
+    const left = this.parseAddSub()
+    this.skipWS()
+    const ops = ['<=', '>=', '<>', '=', '<', '>'] as const
+    for (const op of ops) {
+      if (this.s.startsWith(op, this.i)) {
+        this.i += op.length
+        const right = this.parseAddSub()
+        return { t: 'cmp', op, left, right }
+      }
+    }
+    return left
+  }
+
+  // add/sub
+  parseAddSub(): AST {
+    let node = this.parseMulDiv()
+    this.skipWS()
+    while (true) {
+      const ch = this.peek()
+      if (ch === '+' || ch === '-') {
+        this.next()
+        const rhs = this.parseMulDiv()
+        node = { t: 'bin', op: ch, left: node, right: rhs }
+        this.skipWS()
+      } else {
+        break
+      }
+    }
+    return node
+  }
+
+  // mul/div
+  parseMulDiv(): AST {
+    let node = this.parsePower()
+    this.skipWS()
+    while (true) {
+      const ch = this.peek()
+      if (ch === '*' || ch === '/') {
+        this.next()
+        const rhs = this.parsePower()
+        node = { t: 'bin', op: ch, left: node, right: rhs }
+        this.skipWS()
+      } else {
+        break
+      }
+    }
+    return node
+  }
+
+  // power (right-assoc)
+  parsePower(): AST {
+    const left = this.parseUnary()
+    this.skipWS()
+    if (this.peek() === '^') {
+      this.next()
+      const right = this.parsePower()
+      return { t: 'bin', op: '^', left, right }
+    }
+    return left
+  }
+
+  // unary +/-
+  parseUnary(): AST {
+    this.skipWS()
+    const ch = this.peek()
+    if (ch === '+' || ch === '-') {
+      this.next()
+      const expr = this.parseUnary()
+      return { t: 'un', op: ch, expr }
+    }
+    return this.parsePrimary()
+  }
+
+  // primary: number | string | ref(:ref)? | func(...) | (expr)
+  parsePrimary(): AST {
+    this.skipWS()
+    const ch = this.peek()
+
+    // Parentheses
+    if (ch === '(') {
+      this.next()
+      const e = this.parseComparison()
+      this.skipWS()
+      if (this.next() !== ')') {
+        throw new Error("Missing ')'")
+      }
+      return e
+    }
+
+    // String literal "..."
+    if (ch === '"') {
+      this.next()
+      let out = ''
+      while (!this.eof() && this.peek() !== '"') {
+        out += this.next()
+      }
+      if (this.next() !== '"') {
+        throw new Error('Unclosed string')
+      }
+      return { t: 'str', v: out }
+    }
+
+    // Number (with optional % suffix)
+    if (/[0-9.]/.test(ch)) {
+      const start = this.i
+      while (!this.eof() && /[0-9.]/.test(this.peek())) {
+        this.next()
+      }
+      let num = Number.parseFloat(this.s.slice(start, this.i))
+      if (this.peek() === '%') {
+        this.next()
+        num = num / 100
+      }
+      return { t: 'num', v: num }
+    }
+
+    // Function? (IF, SUM)
+    if (/[A-Z]/.test(ch)) {
+      // Lookahead for IF( or SUM( ; otherwise might be ref starting with R
+      const ident = this.readIdent()
+      if ((ident === 'IF' || ident === 'IFERROR' || ident === 'SUM') && this.peek() === '(') {
+        this.next() // '('
+        const args: AST[] = []
+        while (true) {
+          this.skipWS()
+          if (this.peek() === ')') {
+            this.next()
+            break
+          }
+          // Accept comma or semicolon separators
+          const arg = this.parseComparison()
+          args.push(arg)
+          this.skipWS()
+          if (this.peek() === ',' || this.peek() === ';') {
+            this.next()
+            continue
+          }
+          if (this.peek() === ')') {
+            this.next()
+            break
+          }
+          // if not separator or ')', it's a syntax error
+          throw new Error("Expected ',' or ')' in function call")
+        }
+        return { t: 'fun', name: ident, args }
+      }
+      // If ident was 'R', fall through to reference parsing (we already consumed it)
+      this.i -= ident.length // rewind to start of identifier for reference parse below
+    }
+
+    // Reference or Range (R...C...[:R...C...])
+    if (ch === 'R') {
+      const a = this.readRef()
+      this.skipWS()
+      if (this.peek() === ':') {
+        this.next()
+        const b = this.readRef()
+        return { t: 'range', a, b }
+      }
+      return { t: 'ref', ref: a }
+    }
+
+    throw new Error('Unexpected token at: ' + this.s.slice(this.i, this.i + 10))
+  }
+
+  readIdent(): string {
+    const start = this.i
+    while (!this.eof() && /[A-Z_]/.test(this.peek())) {
+      this.next()
+    }
+    return this.s.slice(start, this.i)
+  }
+
+  readSignedIntInBrackets(): number {
+    if (this.next() !== '[') {
+      throw new Error("Expected '['")
+    }
+    const start = this.i
+    if (this.peek() === '+' || this.peek() === '-') {
+      this.next()
+    }
+    while (!this.eof() && /[0-9]/.test(this.peek())) {
+      this.next()
+    }
+    const n = Number.parseInt(this.s.slice(start, this.i), 10)
+    if (this.next() !== ']') {
+      throw new Error("Expected ']'")
+    }
+    if (Number.isNaN(n)) {
+      throw new TypeError('Bad integer')
+    }
+    return n
+  }
+
+  // R[dr]?C[dc]? ; also tolerate absolute RnCm
+  readRef(): RefSpec {
+    if (this.next() !== 'R') {
+      throw new Error("Expected 'R'")
+    }
+
+    let relR = 0,
+      relC = 0,
+      absR: number | null = null,
+      absC: number | null = null
+
+    if (this.peek() === '[') {
+      relR = this.readSignedIntInBrackets()
+    } else {
+      // absolute row digits or nothing (meaning current row)
+      const start = this.i
+
+      while (!this.eof() && /[0-9]/.test(this.peek())) {
+        this.next()
+      }
+
+      if (this.i > start) {
+        // 0-based
+        absR = Number.parseInt(this.s.slice(start, this.i), 10) - 1
+      }
+    }
+
+    if (this.next() !== 'C') {
+      throw new Error("Expected 'C'")
+    }
+
+    if (this.peek() === '[') {
+      relC = this.readSignedIntInBrackets()
+    } else {
+      const start = this.i
+
+      while (!this.eof() && /[0-9]/.test(this.peek())) {
+        this.next()
+      }
+
+      if (this.i > start) {
+        absC = Number.parseInt(this.s.slice(start, this.i), 10) - 1
+      }
+    }
+
+    return { relR, relC, absR, absC }
+  }
+}

package/dist/frontend-core/template/src/components/ui/spreadsheet/types.ts

@@ -0,0 +1,69 @@
+import { Color } from '@lib/color'
+
+export type Model = {
+  rows: number
+  cols: number
+  colWidths?: number[]
+  rowHeights?: number[]
+  merged?: MergeRange[]
+  cells: Cell[]
+}
+
+export type MergeRange = { r0: number; c0: number; r1: number; c1: number }
+
+export type CellValue = string | number | null
+
+export type HorizontalAlign = 'left' | 'center' | 'right'
+export type VerticalAlign = 'top' | 'center' | 'bottom'
+export type Cell = {
+  r: number
+  c: number
+  value: CellValue
+  rowSpan?: number
+  colSpan?: number
+  formula?: string // e.g. "=SUM(R[-1]C[-1]:R[-1]C[1])"
+  binding?: Binding | null
+
+  fmt?: {
+    /** Raw Excel-like format string, e.g. 0.0%;(0.0%);"--" */
+    numberFormat?: string
+    normalized?: NormalizedFormat
+  }
+
+  align?: {
+    horizontal: HorizontalAlign | null
+    vertical: VerticalAlign | null
+    wrapText?: boolean
+  }
+
+  font?: {
+    name?: string
+    size?: number
+    bold?: boolean
+    italic?: boolean
+    underline?: boolean
+    color?: Color
+  }
+
+  fill?: { color?: Color }
+
+  borders?: {
+    top?: { style?: 'solid' | 'dashed' | 'dotted'; color?: Color } | null
+    right?: { style?: 'solid' | 'dashed' | 'dotted'; color?: Color } | null
+    bottom?: { style?: 'solid' | 'dashed' | 'dotted'; color?: Color } | null
+    left?: { style?: 'solid' | 'dashed' | 'dotted'; color?: Color } | null
+  }
+}
+
+export type NormalizedFormat = {
+  kind?: 'text' | 'decimal' | 'percent' | 'currency'
+  decimals?: number
+  useGrouping?: boolean
+  negativeStyle?: 'minus' | 'parentheses'
+  zeroPlaceholder?: string
+  currency?: string
+}
+
+export type Binding = { kind: 'block'; name: string; rOff?: number; cOff?: number }
+
+export type DataBlocks = Record<string, CellValue | CellValue[] | CellValue[][]>

package/dist/frontend-core/template/src/components/ui/switch/switch.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+import { Switch } from './switch'
+import { Label } from '@components/ui/label/label'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    disabled: false,
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <div className="flex items-center space-x-2">
+        <Switch id="airplane-mode" disabled={args.disabled} />
+        <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      </div>
+    </div>
+  ),
+}

package/dist/frontend-core/template/src/components/ui/switch/switch.tsx

@@ -0,0 +1,28 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/dist/frontend-core/template/src/components/ui/tabs/tabs.stories.tsx

@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, screen } from 'storybook/test'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
+
+// Create a wrapper component for Storybook that accepts our custom args
+const TabsStory = (args: TabStoryArgs) => {
+  return <div>Tabs Story Container</div> // Not used directly, stories use render function
+}
+
+const meta = {
+  title: 'Tabs',
+  component: TabsStory,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variantTabsList: {
+      control: 'select',
+      options: ['default', 'protocol'],
+    },
+    variantTabsTrigger: {
+      control: 'select',
+      options: ['default', 'protocol'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+    },
+  },
+  args: {
+    variantTabsList: 'default',
+    variantTabsTrigger: 'default',
+    size: 'default',
+  },
+} satisfies Meta<TabStoryArgs>
+
+export default meta
+
+interface TabStoryArgs {
+  variantTabsList?: 'default' | 'protocol'
+  variantTabsTrigger?: 'default' | 'protocol'
+  size?: 'default' | 'sm' | 'lg'
+}
+
+type Story = StoryObj<TabStoryArgs>
+
+export const Default: Story = {
+  render: (args) => (
+    <Tabs className="w-[400px]">
+      <TabsList variant={args.variantTabsList} className="grid grid-cols-3 w-full" size={args.size}>
+        <TabsTrigger variant={args.variantTabsTrigger} value="example1" className="cursor-pointer">
+          Example 1
+        </TabsTrigger>
+        <TabsTrigger variant={args.variantTabsTrigger} value="example2" className="cursor-pointer">
+          Example 2
+        </TabsTrigger>
+        <TabsTrigger variant={args.variantTabsTrigger} value="example3" className="cursor-pointer">
+          Example 3
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="example1">
+        <div className="p-4 rounded-lg border mt-2">Example Content 1</div>
+      </TabsContent>
+      <TabsContent value="example2">
+        <div className="p-4 rounded-lg border mt-2">Example Content 2</div>
+      </TabsContent>
+      <TabsContent value="example3">
+        <div className="p-4 rounded-lg border mt-2">Example Content 3</div>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 mt-8 space-x-10">
+      <Tabs>
+        <TabsList variant="default" size="default">
+          <TabsTrigger variant="default" value="small" className="cursor-pointer w-[100px]">
+            default
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="small">
+          <div className="p-4 rounded-lg border mt-2">Content</div>
+        </TabsContent>
+      </Tabs>
+      <Tabs>
+        <TabsList variant="protocol" size="default">
+          <TabsTrigger variant="default" value="default" className="cursor-pointer w-[100px]">
+            TabsList protocol
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="default">
+          <div className="p-4 rounded-lg border mt-2">Content</div>
+        </TabsContent>
+      </Tabs>
+      <Tabs>
+        <TabsList variant="protocol" size="default">
+          <TabsTrigger variant="protocol" value="large" className="cursor-pointer w-[100px]">
+            TabsList & -Trigger protocol
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="large">
+          <div className="p-4 rounded-lg border mt-2">Content</div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 mt-8">
+      <Tabs>
+        <TabsList variant="default" size="sm">
+          <TabsTrigger variant="default" value="small" className="cursor-pointer w-[100px]">
+            sm
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="small">
+          <div className="p-4 rounded-lg border mt-2">Small Size Content</div>
+        </TabsContent>
+      </Tabs>
+      <Tabs>
+        <TabsList variant="default" size="default">
+          <TabsTrigger variant="default" value="default" className="cursor-pointer w-[100px]">
+            default
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="default">
+          <div className="p-4 rounded-lg border mt-2">Default Size Content</div>
+        </TabsContent>
+      </Tabs>
+      <Tabs>
+        <TabsList variant="default" size="lg">
+          <TabsTrigger variant="default" value="large" className="cursor-pointer w-[100px]">
+            lg
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="large">
+          <div className="p-4 rounded-lg border mt-2">Large Size Content</div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1" className="w-[400px]">
+      <TabsList className="grid grid-cols-2 w-full">
+        <TabsTrigger value="tab1" className="cursor-pointer">
+          Available
+        </TabsTrigger>
+        <TabsTrigger value="tab2" className="cursor-pointer" disabled>
+          Disabled
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab1">
+        <div className="p-4 rounded-lg border border mt-2">This tab is available.</div>
+      </TabsContent>
+      <TabsContent value="tab2">
+        <div className="p-4 rounded-lg border border mt-2">This content won't be accessible.</div>
+      </TabsContent>
+    </Tabs>
+  ),
+}
+
+export const InteractiveTest: Story = {
+  render: () => (
+    <Tabs defaultValue="example1" className="w-[400px]">
+      <TabsList variant="default" className="grid grid-cols-3 w-full">
+        <TabsTrigger value="example1" className="cursor-pointer" data-testid="tab-example1">
+          Example 1
+        </TabsTrigger>
+        <TabsTrigger value="example2" className="cursor-pointer" data-testid="tab-example2">
+          Example 2
+        </TabsTrigger>
+        <TabsTrigger value="example3" className="cursor-pointer">
+          Example 3
+        </TabsTrigger>
+      </TabsList>
+      <TabsContent value="example1">
+        <div className="p-4 rounded-lg border mt-2" data-testid="example1-content">
+          Example Content 1
+        </div>
+      </TabsContent>
+      <TabsContent value="example2">
+        <div className="p-4 rounded-lg border mt-2" data-testid="example2-content">
+          Example Content 2
+        </div>
+      </TabsContent>
+      <TabsContent value="example3">
+        <div className="p-4 rounded-lg border mt-2">Example Content 3</div>
+      </TabsContent>
+    </Tabs>
+  ),
+  play: async () => {
+    const example1Tab = screen.getByTestId('tab-example1')
+    const accountContent = screen.getByTestId('example1-content')
+    const example2Tab = screen.getByTestId('tab-example2')
+
+    await expect(example1Tab).toHaveAttribute('data-state', 'active')
+    await expect(accountContent).toBeVisible()
+
+    await userEvent.click(example2Tab)
+
+    await expect(example2Tab).toHaveAttribute('data-state', 'active')
+    await expect(example1Tab).toHaveAttribute('data-state', 'inactive')
+
+    const passwordContent = screen.getByTestId('example2-content')
+    await expect(passwordContent).toBeVisible()
+  },
+}