@tanstack/create 0.68.1 → 0.68.3

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",
-  },
-};

package/src/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/src/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/src/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/src/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/src/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"
-  }
-}