@tanstack/create 0.68.2 → 0.68.3

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-export interface RadioOption {
-  value: string
-  label: string
-}
-
-export interface RadioGroupProps {
-  label: string
-  name: string
-  options: RadioOption[]
-  value?: string
-  onChange?: (value: string) => void
-  className?: string
-}
-
-export const RadioGroup: React.FC<RadioGroupProps> = ({
-  label,
-  name,
-  options,
-  value,
-  onChange,
-  className = '',
-}) => {
-  return (
-    <div className={`flex flex-col gap-3 ${className}`}>
-      <label className="text-sm font-medium text-[var(--sea-ink)]">
-        {label}
-      </label>
-      <div className="flex gap-4">
-        {options.map((option) => (
-          <label
-            key={option.value}
-            className="flex items-center gap-2 cursor-pointer group"
-          >
-            <input
-              type="radio"
-              name={name}
-              value={option.value}
-              checked={value === option.value}
-              onChange={(e) => onChange?.(e.target.value)}
-              className="h-4 w-4 cursor-pointer accent-[var(--lagoon-deep)]"
-            />
-            <span className="demo-muted text-sm transition-colors group-hover:text-[var(--sea-ink)]">
-              {option.label}
-            </span>
-          </label>
-        ))}
-      </div>
-    </div>
-  )
-}

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.ts

@@ -1,55 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Slider } from "./slider";
-
-const meta = {
-  title: "Form/Slider",
-  component: Slider,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Volume",
-    id: "volume",
-    value: 50,
-  },
-};
-
-export const Skill: Story = {
-  args: {
-    label: "Plays Guitar",
-    id: "guitar",
-    value: 75,
-    min: 0,
-    max: 100,
-  },
-};
-
-export const NoValue: Story = {
-  args: {
-    label: "Experience Level",
-    id: "experience",
-    value: 30,
-    showValue: false,
-  },
-};
-
-export const CustomRange: Story = {
-  args: {
-    label: "Custom Range",
-    id: "custom-range",
-    value: 5,
-    min: 1,
-    max: 20,
-    step: 1,
-  },
-};

package/dist/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-
-export interface SliderProps {
-  label: string
-  id: string
-  value?: number
-  onChange?: (value: number) => void
-  min?: number
-  max?: number
-  step?: number
-  showValue?: boolean
-  className?: string
-}
-
-export const Slider: React.FC<SliderProps> = ({
-  label,
-  id,
-  value = 0,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  showValue = true,
-  className = '',
-}) => {
-  return (
-    <div className={`flex flex-col gap-2 ${className}`}>
-      <div className="flex justify-between items-center">
-        <label
-          htmlFor={id}
-          className="text-sm font-medium text-[var(--sea-ink)]"
-        >
-          {label}
-        </label>
-        {showValue && (
-          <span className="min-w-12 text-right text-sm font-semibold text-[var(--lagoon-deep)]">
-            {value}
-          </span>
-        )}
-      </div>
-      <input
-        type="range"
-        id={id}
-        value={value}
-        onChange={(e) => onChange?.(Number(e.target.value))}
-        min={min}
-        max={max}
-        step={step}
-        className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-[var(--chip-bg)] accent-[var(--lagoon-deep)]"
-      />
-      <div className="demo-muted flex justify-between text-xs">
-        <span>{min}</span>
-        <span>{max}</span>
-      </div>
-    </div>
-  )
-}

package/dist/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx

@@ -1,93 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { useState } from 'react'
-
-import { Dialog } from '#/components/storybook/dialog'
-import { Input } from '#/components/storybook/input'
-import { RadioGroup } from '#/components/storybook/radio-group'
-import { Slider } from '#/components/storybook/slider'
-import { Button } from '#/components/storybook/button'
-
-export const Route = createFileRoute('/demo/storybook')({
-  component: StorybookDemo,
-})
-
-function StorybookDemo() {
-  const [firstName, setFirstName] = useState('')
-  const [lastName, setLastName] = useState('')
-  const [employmentType, setEmploymentType] = useState('full-time')
-  const [coffeeCups, setCoffeeCups] = useState(3)
-
-  const handleSubmit = () => {}
-
-  const handleReset = () => {
-    setFirstName('')
-    setLastName('')
-    setEmploymentType('full-time')
-    setCoffeeCups(3)
-  }
-
-  return (
-    <main className="demo-page demo-center">
-      <div className="w-full max-w-2xl">
-        <Dialog
-          title="Employee Information Form"
-          footer={
-            <div className="flex gap-3 justify-end">
-              <Button variant="secondary" size="medium" onClick={handleReset}>
-                Reset
-              </Button>
-              <Button
-                variant="primary"
-                size="medium"
-                type="submit"
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </div>
-          }
-        >
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <Input
-              label="First Name"
-              id="firstName"
-              value={firstName}
-              onChange={setFirstName}
-              placeholder="John"
-              required
-            />
-
-            <Input
-              label="Last Name"
-              id="lastName"
-              value={lastName}
-              onChange={setLastName}
-              placeholder="Doe"
-              required
-            />
-
-            <RadioGroup
-              label="Employment Type"
-              name="employmentType"
-              options={[
-                { value: 'full-time', label: 'Full Time' },
-                { value: 'part-time', label: 'Part Time' },
-              ]}
-              value={employmentType}
-              onChange={setEmploymentType}
-            />
-
-            <Slider
-              label="Coffee Cups Per Day"
-              id="coffeeCups"
-              value={coffeeCups}
-              onChange={setCoffeeCups}
-              min={0}
-              max={10}
-            />
-          </form>
-        </Dialog>
-      </div>
-    </main>
-  )
-}

package/dist/frameworks/react/add-ons/storybook/package.json

@@ -1,10 +0,0 @@
-{
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@storybook/react-vite": "^10.2.15",
-    "storybook": "^10.2.15"
-  }
-}

package/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts

@@ -1,17 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  async viteFinal(config) {
-    const { default: tailwindcss } = await import("@tailwindcss/vite");
-    config.plugins = config.plugins || [];
-    config.plugins.push(tailwindcss());
-    return config;
-  },
-};
-export default config;

package/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts

@@ -1,15 +0,0 @@
-import type { Preview } from "@storybook/react-vite";
-import "../src/styles.css";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Button } from "./button";
-
-const meta = {
-  title: "Form/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    variant: "primary",
-    children: "Primary Button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary Button",
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    variant: "danger",
-    children: "Delete Account",
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "small",
-    children: "Small Button",
-  },
-};
-
-export const Medium: Story = {
-  args: {
-    size: "medium",
-    children: "Medium Button",
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: "large",
-    children: "Large Button",
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    variant: "primary",
-    children: "Disabled Button",
-    disabled: true,
-  },
-};

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-export interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'danger'
-  size?: 'small' | 'medium' | 'large'
-  children: React.ReactNode
-  onClick?: () => void
-  disabled?: boolean
-  type?: 'button' | 'submit' | 'reset'
-  className?: string
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  variant = 'primary',
-  size = 'medium',
-  children,
-  onClick,
-  disabled = false,
-  type = 'button',
-  className = '',
-}) => {
-  const baseStyles =
-    'demo-button disabled:opacity-50 disabled:cursor-not-allowed'
-
-  const variantStyles = {
-    primary: '',
-    secondary: 'demo-button-secondary',
-    danger: 'demo-button-danger',
-  }
-
-  const sizeStyles = {
-    small: 'px-3 py-1.5 text-sm',
-    medium: 'px-4 py-2 text-base',
-    large: 'px-6 py-3 text-lg',
-  }
-
-  return (
-    <button
-      type={type}
-      onClick={onClick}
-      disabled={disabled}
-      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
-    >
-      {children}
-    </button>
-  )
-}

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Dialog } from "./dialog";
-import { Button } from "./button";
-
-const meta = {
-  title: "Form/Dialog",
-  component: Dialog,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: "User Profile",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          This is a simple dialog component with a title and content area.
-        </p>
-      </div>
-    ),
-  },
-};
-
-export const WithFooter: Story = {
-  args: {
-    title: "Confirm Action",
-    children: (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          Are you sure you want to proceed with this action?
-        </p>
-      </div>
-    ),
-    footer: (
-      <div className="flex gap-3 justify-end">
-        <Button variant="secondary" size="medium">
-          Cancel
-        </Button>
-        <Button variant="primary" size="medium">
-          Confirm
-        </Button>
-      </div>
-    ),
-  },
-};
-
-export const Form: Story = {
-  args: {
-    title: "Create Account",
-    children: (
-      <div className="space-y-4 min-w-80">
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-            Email
-          </label>
-          <input
-            type="email"
-            placeholder="you@example.com"
-            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-          />
-        </div>
-        <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-gray-700 dark:text-gray-200">
-            Password
-          </label>
-          <input
-            type="password"
-            placeholder="••••••••"
-            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-          />
-        </div>
-      </div>
-    ),
-    footer: (
-      <div className="flex gap-3 justify-end">
-        <Button variant="secondary" size="medium">
-          Cancel
-        </Button>
-        <Button variant="primary" size="medium">
-          Create Account
-        </Button>
-      </div>
-    ),
-  },
-};

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-
-export interface DialogProps {
-  title: string
-  children: React.ReactNode
-  footer?: React.ReactNode
-  className?: string
-}
-
-export const Dialog: React.FC<DialogProps> = ({
-  title,
-  children,
-  footer,
-  className = '',
-}) => {
-  return (
-    <div className={`demo-panel overflow-hidden p-0 ${className}`}>
-      <div className="border-b border-[var(--line)] px-6 py-4">
-        <h2 className="demo-section-title">{title}</h2>
-      </div>
-      <div className="px-6 py-6">{children}</div>
-      {footer && (
-        <div className="border-t border-[var(--line)] bg-[var(--chip-bg)] px-6 py-4">
-          {footer}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts

@@ -1,14 +0,0 @@
-export { Input } from "./input";
-export type { InputProps } from "./input";
-
-export { RadioGroup } from "./radio-group";
-export type { RadioGroupProps, RadioOption } from "./radio-group";
-
-export { Slider } from "./slider";
-export type { SliderProps } from "./slider";
-
-export { Dialog } from "./dialog";
-export type { DialogProps } from "./dialog";
-
-export { Button } from "./button";
-export type { ButtonProps } from "./button";

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { Input } from "./input";
-
-const meta = {
-  title: "Form/Input",
-  component: Input,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Email Address",
-    id: "email",
-    placeholder: "Enter your email",
-  },
-};
-
-export const Required: Story = {
-  args: {
-    label: "First Name",
-    id: "firstName",
-    placeholder: "John",
-    required: true,
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    label: "Last Name",
-    id: "lastName",
-    value: "Doe",
-    placeholder: "Enter last name",
-  },
-};

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-
-export interface InputProps {
-  label: string
-  id: string
-  value?: string
-  onChange?: (value: string) => void
-  placeholder?: string
-  required?: boolean
-  className?: string
-}
-
-export const Input: React.FC<InputProps> = ({
-  label,
-  id,
-  value = '',
-  onChange,
-  placeholder,
-  required = false,
-  className = '',
-}) => {
-  return (
-    <div className={`flex flex-col gap-2 ${className}`}>
-      <label htmlFor={id} className="text-sm font-medium text-[var(--sea-ink)]">
-        {label}
-        {required && <span className="text-red-500 ml-1">*</span>}
-      </label>
-      <input
-        type="text"
-        id={id}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-        placeholder={placeholder}
-        required={required}
-        className="demo-input"
-      />
-    </div>
-  )
-}

package/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-
-import { RadioGroup } from "./radio-group";
-
-const meta = {
-  title: "Form/RadioGroup",
-  component: RadioGroup,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  args: { onChange: fn() },
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    label: "Employment Type",
-    name: "employmentType",
-    options: [
-      { value: "full-time", label: "Full Time" },
-      { value: "part-time", label: "Part Time" },
-    ],
-  },
-};
-
-export const Selected: Story = {
-  args: {
-    label: "Employment Type",
-    name: "employmentType",
-    options: [
-      { value: "full-time", label: "Full Time" },
-      { value: "part-time", label: "Part Time" },
-    ],
-    value: "full-time",
-  },
-};
-
-export const MultipleOptions: Story = {
-  args: {
-    label: "Subscription Plan",
-    name: "plan",
-    options: [
-      { value: "basic", label: "Basic" },
-      { value: "pro", label: "Pro" },
-      { value: "enterprise", label: "Enterprise" },
-    ],
-    value: "pro",
-  },
-};