@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/file-tree/file-tree.tsx

@@ -0,0 +1,163 @@
+import { ChevronsDownUp, ChevronsUpDown, Search } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { cn } from '../../lib/utils'
+import { FileTreeNodeComponent } from './file-tree-node'
+import type { FileTreeNode, FileTreeProps } from './file-tree-types'
+
+function filterNodes(nodes: readonly FileTreeNode[], query: string): FileTreeNode[] {
+  const q = query.toLowerCase()
+  const result: FileTreeNode[] = []
+
+  for (const node of nodes) {
+    if (node.name.toLowerCase().includes(q)) {
+      result.push(node)
+    } else if (node.type === 'directory' && node.children) {
+      const filteredChildren = filterNodes(node.children, query)
+      if (filteredChildren.length > 0) {
+        result.push({
+          ...node,
+          children: filteredChildren,
+        })
+      }
+    }
+  }
+
+  return result
+}
+
+function getAllDirectoryIds(nodes: readonly FileTreeNode[]): string[] {
+  const ids: string[] = []
+  for (const node of nodes) {
+    if (node.type === 'directory') {
+      ids.push(node.id)
+      if (node.children) {
+        ids.push(...getAllDirectoryIds(node.children))
+      }
+    }
+  }
+  return ids
+}
+
+export function FileTree({
+  allowCreate = false,
+  allowDelete = false,
+  ariaLabel = 'File and workspace tree',
+  className,
+  defaultExpandedIds = [],
+  emptyMessage = 'No files found',
+  nodes,
+  onCreateFile,
+  onCreateFolder,
+  onDeleteNode,
+  onExpandChange,
+  onSelectNode,
+  renderNodeActions,
+  searchPlaceholder = 'Filter files...',
+  selectedNodeId,
+  showFilter = true,
+}: FileTreeProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set(defaultExpandedIds))
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const allDirIds = useMemo(() => getAllDirectoryIds(nodes), [nodes])
+
+  const filteredNodes = useMemo(() => {
+    if (!searchQuery.trim()) return nodes
+    return filterNodes(nodes, searchQuery.trim())
+  }, [nodes, searchQuery])
+
+  function handleToggleExpand(node: FileTreeNode) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      const isExpanding = !next.has(node.id)
+      if (isExpanding) {
+        next.add(node.id)
+      } else {
+        next.delete(node.id)
+      }
+      onExpandChange?.(node, isExpanding)
+      return next
+    })
+  }
+
+  function handleExpandAll() {
+    setExpandedIds(new Set(allDirIds))
+  }
+
+  function handleCollapseAll() {
+    setExpandedIds(new Set())
+  }
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(
+        'flex flex-col rounded-2xl border border-border/80 bg-card p-2 text-card-foreground shadow-2xs',
+        className,
+      )}
+      role="tree"
+    >
+      {showFilter && (
+        <div className="mb-2 flex items-center justify-between gap-1.5 border-b border-border/40 pb-2 px-1">
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground/60" />
+            <input
+              aria-label="Filter tree nodes"
+              className="h-8 w-full rounded-lg border border-border/60 bg-muted/40 pl-8 pr-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:border-ring focus:bg-background focus:outline-none focus:ring-2 focus:ring-ring/30"
+              placeholder={searchPlaceholder}
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          <div className="flex items-center gap-0.5">
+            <button
+              aria-label="Expand all folders"
+              className="rounded p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+              title="Expand all"
+              type="button"
+              onClick={handleExpandAll}
+            >
+              <ChevronsUpDown className="size-3.5" />
+            </button>
+            <button
+              aria-label="Collapse all folders"
+              className="rounded p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+              title="Collapse all"
+              type="button"
+              onClick={handleCollapseAll}
+            >
+              <ChevronsDownUp className="size-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-y-auto min-h-24">
+        {filteredNodes.length > 0 ? (
+          filteredNodes.map((node) => (
+            <FileTreeNodeComponent
+              allowCreate={allowCreate}
+              allowDelete={allowDelete}
+              expandedIds={searchQuery.trim() ? new Set(allDirIds) : expandedIds}
+              key={node.id}
+              node={node}
+              onCreateFile={onCreateFile}
+              onCreateFolder={onCreateFolder}
+              onDeleteNode={onDeleteNode}
+              onSelectNode={onSelectNode}
+              onToggleExpand={handleToggleExpand}
+              renderActions={renderNodeActions}
+              selectedNodeId={selectedNodeId}
+            />
+          ))
+        ) : (
+          <div className="flex items-center justify-center py-6 text-xs text-muted-foreground">
+            {emptyMessage}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/blocks/file-tree/index.ts

@@ -0,0 +1,5 @@
+export { FileTree } from './file-tree'
+export { FileTreeNodeComponent } from './file-tree-node'
+export { FileTypeIcon, getFileExtension } from './file-icons'
+export type { FileTreeNode, FileTreeProps } from './file-tree-types'
+export type { FileTreeNodeProps } from './file-tree-node'

package/src/blocks/filter-builder/filter-builder.tsx

@@ -0,0 +1,169 @@
+import { Filter, Plus, RotateCcw } from 'lucide-react'
+import { Button } from '../../components/button'
+import { cn } from '../../lib/utils'
+import { FilterRow } from './filter-row'
+import type { FilterBuilderProps, FilterCombinator, FilterRule } from './filter-types'
+
+export function FilterBuilder({
+  allowClear = true,
+  ariaLabel = 'Filter builder',
+  className,
+  emptyMessage = 'No filter conditions applied. Add a rule to filter records.',
+  fields,
+  filter,
+  maxRules = 10,
+  onApply,
+  onChange,
+  onClear,
+  title = 'Filter rules',
+}: FilterBuilderProps) {
+  function handleAddRule() {
+    if (filter.rules.length >= maxRules || fields.length === 0) return
+    const defaultField = fields[0]
+    const defaultOp =
+      defaultField.type === 'number'
+        ? 'equals'
+        : defaultField.type === 'select'
+          ? 'equals'
+          : defaultField.type === 'date'
+            ? 'equals'
+            : 'contains'
+
+    const newRule: FilterRule = {
+      fieldId: defaultField.id,
+      id: `rule-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`,
+      operator: defaultOp,
+      value: '',
+    }
+
+    onChange({
+      ...filter,
+      rules: [...filter.rules, newRule],
+    })
+  }
+
+  function handleUpdateRule(updatedRule: FilterRule) {
+    onChange({
+      ...filter,
+      rules: filter.rules.map((r) => (r.id === updatedRule.id ? updatedRule : r)),
+    })
+  }
+
+  function handleDeleteRule(ruleId: string) {
+    onChange({
+      ...filter,
+      rules: filter.rules.filter((r) => r.id !== ruleId),
+    })
+  }
+
+  function handleCombinatorToggle(combinator: FilterCombinator) {
+    onChange({
+      ...filter,
+      combinator,
+    })
+  }
+
+  function handleClear() {
+    onChange({
+      ...filter,
+      rules: [],
+    })
+    onClear?.()
+  }
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(
+        'flex flex-col gap-3.5 rounded-2xl border border-border/80 bg-card p-4 text-card-foreground shadow-2xs',
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border/40 pb-3">
+        <div className="flex items-center gap-2">
+          <Filter className="size-4 text-muted-foreground" />
+          <h4 className="text-sm font-semibold tracking-tight text-foreground">{title}</h4>
+          <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+            {filter.rules.length}
+            {maxRules ? ` / ${maxRules}` : ''}
+          </span>
+        </div>
+
+        {filter.rules.length > 1 && (
+          <div className="flex items-center rounded-lg border border-border/80 bg-muted/40 p-0.5">
+            <button
+              className={cn(
+                'rounded-md px-2.5 py-1 text-xs font-semibold transition-all',
+                filter.combinator === 'AND'
+                  ? 'bg-background text-foreground shadow-2xs'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+              type="button"
+              onClick={() => handleCombinatorToggle('AND')}
+            >
+              Match ALL (AND)
+            </button>
+            <button
+              className={cn(
+                'rounded-md px-2.5 py-1 text-xs font-semibold transition-all',
+                filter.combinator === 'OR'
+                  ? 'bg-background text-foreground shadow-2xs'
+                  : 'text-muted-foreground hover:text-foreground',
+              )}
+              type="button"
+              onClick={() => handleCombinatorToggle('OR')}
+            >
+              Match ANY (OR)
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Rules list */}
+      <div className="flex flex-col gap-2 min-h-16">
+        {filter.rules.map((rule) => (
+          <FilterRow
+            fields={fields}
+            key={rule.id}
+            onDelete={handleDeleteRule}
+            onUpdate={handleUpdateRule}
+            rule={rule}
+          />
+        ))}
+
+        {filter.rules.length === 0 && (
+          <div className="flex items-center justify-center rounded-xl border border-dashed border-border/60 py-6 text-center text-xs text-muted-foreground">
+            {emptyMessage}
+          </div>
+        )}
+      </div>
+
+      {/* Footer controls */}
+      <div className="flex flex-wrap items-center justify-between gap-2 border-t border-border/40 pt-3">
+        <Button
+          disabled={filter.rules.length >= maxRules}
+          size="sm"
+          variant="outline"
+          onClick={handleAddRule}
+        >
+          <Plus className="size-3.5" /> Add condition
+        </Button>
+
+        <div className="flex items-center gap-2">
+          {allowClear && filter.rules.length > 0 && (
+            <Button size="sm" variant="ghost" onClick={handleClear}>
+              <RotateCcw className="size-3.5" /> Clear
+            </Button>
+          )}
+
+          {onApply && (
+            <Button size="sm" variant="default" onClick={() => onApply(filter)}>
+              Apply filter
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/blocks/filter-builder/filter-row.tsx

@@ -0,0 +1,164 @@
+import { Trash2 } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import type { FilterFieldDefinition, FilterOperator, FilterRule } from './filter-types'
+
+const operatorsByType: Record<string, { label: string; value: FilterOperator }[]> = {
+  text: [
+    { label: 'contains', value: 'contains' },
+    { label: 'does not contain', value: 'not_contains' },
+    { label: 'equals', value: 'equals' },
+    { label: 'starts with', value: 'starts_with' },
+    { label: 'ends with', value: 'ends_with' },
+    { label: 'is empty', value: 'is_empty' },
+    { label: 'is not empty', value: 'is_not_empty' },
+  ],
+  number: [
+    { label: '=', value: 'equals' },
+    { label: '≠', value: 'not_equals' },
+    { label: '>', value: 'greater_than' },
+    { label: '<', value: 'less_than' },
+    { label: '≥', value: 'greater_or_equal' },
+    { label: '≤', value: 'less_or_equal' },
+    { label: 'between', value: 'between' },
+  ],
+  date: [
+    { label: 'is on', value: 'equals' },
+    { label: 'is after', value: 'greater_than' },
+    { label: 'is before', value: 'less_than' },
+    { label: 'between', value: 'between' },
+  ],
+  select: [
+    { label: 'is', value: 'equals' },
+    { label: 'is not', value: 'not_equals' },
+  ],
+  boolean: [
+    { label: 'is true', value: 'is_true' },
+    { label: 'is false', value: 'is_false' },
+  ],
+}
+
+export function FilterRow({
+  fields,
+  onDelete,
+  onUpdate,
+  rule,
+}: {
+  fields: readonly FilterFieldDefinition[]
+  onDelete: (id: string) => void
+  onUpdate: (updated: FilterRule) => void
+  rule: FilterRule
+}) {
+  const currentField = fields.find((f) => f.id === rule.fieldId) || fields[0]
+  const fieldType = currentField?.type || 'text'
+  const operators = operatorsByType[fieldType] || operatorsByType.text
+
+  const isUnaryOperator =
+    rule.operator === 'is_empty' ||
+    rule.operator === 'is_not_empty' ||
+    rule.operator === 'is_true' ||
+    rule.operator === 'is_false'
+
+  const isBetween = rule.operator === 'between'
+
+  function handleFieldChange(newFieldId: string) {
+    const newField = fields.find((f) => f.id === newFieldId)
+    const newType = newField?.type || 'text'
+    const defaultOp = operatorsByType[newType]?.[0]?.value || 'contains'
+    onUpdate({
+      ...rule,
+      fieldId: newFieldId,
+      operator: defaultOp,
+      value: '',
+      valueTo: '',
+    })
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-xl border border-border/60 bg-background/50 p-2.5 transition-colors hover:border-border">
+      {/* Field selector */}
+      <select
+        aria-label="Filter field"
+        className="h-8.5 rounded-lg border border-border/80 bg-background px-2.5 text-xs font-medium text-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
+        value={rule.fieldId}
+        onChange={(e) => handleFieldChange(e.target.value)}
+      >
+        {fields.map((f) => (
+          <option key={f.id} value={f.id}>
+            {f.label}
+          </option>
+        ))}
+      </select>
+
+      {/* Operator selector */}
+      <select
+        aria-label="Filter operator"
+        className="h-8.5 rounded-lg border border-border/80 bg-background px-2.5 text-xs font-medium text-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
+        value={rule.operator}
+        onChange={(e) => onUpdate({ ...rule, operator: e.target.value as FilterOperator })}
+      >
+        {operators.map((op) => (
+          <option key={op.value} value={op.value}>
+            {op.label}
+          </option>
+        ))}
+      </select>
+
+      {/* Dynamic value input */}
+      {!isUnaryOperator && (
+        <div className="flex flex-1 items-center gap-2 min-w-36">
+          {fieldType === 'select' && currentField.options ? (
+            <select
+              aria-label="Filter value"
+              className="h-8.5 w-full rounded-lg border border-border/80 bg-background px-2.5 text-xs text-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
+              value={String(rule.value ?? '')}
+              onChange={(e) => onUpdate({ ...rule, value: e.target.value })}
+            >
+              <option value="">Select an option...</option>
+              {currentField.options.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          ) : (
+            <input
+              aria-label="Filter value"
+              className={cn(
+                'h-8.5 w-full rounded-lg border border-border/80 bg-background px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30',
+                isBetween && 'w-1/2',
+              )}
+              placeholder={currentField?.placeholder || 'Enter value...'}
+              type={fieldType === 'number' ? 'number' : fieldType === 'date' ? 'date' : 'text'}
+              value={String(rule.value ?? '')}
+              onChange={(e) => onUpdate({ ...rule, value: e.target.value })}
+            />
+          )}
+
+          {isBetween && (
+            <>
+              <span className="text-xs text-muted-foreground">and</span>
+              <input
+                aria-label="Filter value to"
+                className="h-8.5 w-1/2 rounded-lg border border-border/80 bg-background px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/30"
+                placeholder="To..."
+                type={fieldType === 'number' ? 'number' : fieldType === 'date' ? 'date' : 'text'}
+                value={String(rule.valueTo ?? '')}
+                onChange={(e) => onUpdate({ ...rule, valueTo: e.target.value })}
+              />
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Delete button */}
+      <button
+        aria-label="Remove filter rule"
+        className="size-8.5 shrink-0 rounded-lg p-2 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        type="button"
+        onClick={() => onDelete(rule.id)}
+      >
+        <Trash2 className="size-4" />
+      </button>
+    </div>
+  )
+}

package/src/blocks/filter-builder/filter-types.ts

@@ -0,0 +1,61 @@
+export type FilterFieldType = 'text' | 'number' | 'date' | 'select' | 'boolean'
+
+export type FilterOperator =
+  | 'equals'
+  | 'not_equals'
+  | 'contains'
+  | 'not_contains'
+  | 'starts_with'
+  | 'ends_with'
+  | 'greater_than'
+  | 'less_than'
+  | 'greater_or_equal'
+  | 'less_or_equal'
+  | 'between'
+  | 'is_true'
+  | 'is_false'
+  | 'is_empty'
+  | 'is_not_empty'
+  | 'in'
+
+export interface FilterFieldOption {
+  label: string
+  value: string
+}
+
+export interface FilterFieldDefinition {
+  id: string
+  label: string
+  options?: readonly FilterFieldOption[]
+  placeholder?: string
+  type: FilterFieldType
+}
+
+export interface FilterRule {
+  fieldId: string
+  id: string
+  operator: FilterOperator
+  value?: unknown
+  valueTo?: unknown
+}
+
+export type FilterCombinator = 'AND' | 'OR'
+
+export interface FilterGroup {
+  combinator: FilterCombinator
+  rules: readonly FilterRule[]
+}
+
+export interface FilterBuilderProps {
+  allowClear?: boolean
+  ariaLabel?: string
+  className?: string
+  emptyMessage?: string
+  fields: readonly FilterFieldDefinition[]
+  filter: FilterGroup
+  maxRules?: number
+  onApply?: (filter: FilterGroup) => void
+  onChange: (filter: FilterGroup) => void
+  onClear?: () => void
+  title?: string
+}

package/src/blocks/filter-builder/index.ts

@@ -0,0 +1,12 @@
+export { FilterBuilder } from './filter-builder'
+export { FilterRow } from './filter-row'
+export type {
+  FilterBuilderProps,
+  FilterCombinator,
+  FilterFieldDefinition,
+  FilterFieldOption,
+  FilterFieldType,
+  FilterGroup,
+  FilterOperator,
+  FilterRule,
+} from './filter-types'

package/src/blocks/footer/footer-types.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+
+export type FooterLink = {
+  readonly badge?: string
+  readonly href: string
+  readonly label: string
+}
+
+export type FooterColumn = {
+  readonly links: readonly FooterLink[]
+  readonly title: string
+}
+
+export type SiteFooterProps = {
+  readonly brand: {
+    readonly description?: string
+    readonly logo?: ReactNode
+    readonly title: string
+  }
+  readonly className?: string
+  readonly columns?: readonly FooterColumn[]
+  readonly copyright?: string
+  readonly newsletter?: {
+    readonly description?: string
+    readonly onSubscribe?: (email: string) => void
+    readonly placeholder?: string
+    readonly title?: string
+  }
+  readonly paymentBadges?: readonly string[]
+  readonly socialLinks?: readonly {
+    readonly href: string
+    readonly icon: ReactNode
+    readonly label: string
+  }[]
+}

package/src/blocks/footer/index.ts

@@ -0,0 +1,2 @@
+export * from './site-footer'
+export * from './footer-types'