Platform UI component

このページの内容

Form と card
Dialog
Citation と chart

@sota/platform/ui は native app 向けの public component library です。Core token、theme、focus behavior、portal、accessibility default を継承します。Core source path や別 copy の Radix/Recharts ではなく、この entry point から import します。

Group	Exports
Action／status	`Button`、`Badge`、`Spinner`、`Skeleton`、`buttonVariants`、`badgeVariants`。
Content／layout	`Card`、`CardHeader`、`CardTitle`、`CardDescription`、`CardContent`、`CardFooter`、`Separator`、`ScrollArea`、`ScrollBar`。
Form	`FormField`、`Label`、`Input`、`Textarea`、`Checkbox`、`Switch`、`Select`、`SelectContent`、`SelectGroup`、`SelectItem`、`SelectLabel`、`SelectSeparator`、`SelectTrigger`、`SelectValue`。
Overlay	`Dialog`、`DialogClose`、`DialogContent`、`DialogDescription`、`DialogFooter`、`DialogHeader`、`DialogTitle`、`DialogTrigger`、`Popover`、`PopoverContent`、`PopoverTrigger`、`Tooltip`、`TooltipContent`、`TooltipProvider`、`TooltipTrigger`。Portal は app surface host 内に留まります。
Navigation	`Tabs`、`TabsList`、`TabsTrigger`、`TabsContent`。
Grounded prose	`CitationText` が `[n]` marker を source pill にします。
Chart	`ChartContainer`、`ChartStyle`、`ChartTooltip`、`ChartTooltipContent`、`ChartLegend`、`ChartLegendContent`、`Area`、`AreaChart`、`Bar`、`BarChart`、`Line`、`LineChart`、`Pie`、`PieChart`、`RadialBar`、`RadialBarChart`、`CartesianGrid`、`XAxis`、`YAxis`、`ChartLabel`、`ChartLabelList`、`Cell`、`Sector`、`ReferenceLine`。

Form と card#

TSX

import { useState } from 'react';
import {
  Button, Card, CardContent, CardFooter, CardHeader, CardTitle,
  FormField, Input, Switch,
} from '@sota/platform/ui';

export function DigestSettings() {
  const [email, setEmail] = useState('');
  const [enabled, setEnabled] = useState(true);
  return (
    <form onSubmit={(event) => event.preventDefault()}><Card variant="flat">
      <CardHeader><CardTitle>Weekly digest</CardTitle></CardHeader>
      <CardContent>
        <FormField id="digest-email" label="Delivery email" required>
          <Input id="digest-email" type="email" value={email}
            onChange={(event) => setEmail(event.target.value)} required />
        </FormField>
        <Switch checked={enabled} onCheckedChange={setEnabled}
          aria-label="Enable weekly digest" />
      </CardContent>
      <CardFooter><Button type="submit" disabled={!email}>Save</Button></CardFooter>
    </Card></form>
  );
}

Button variant は default、secondary、destructive、outline、link、ghost。Size は default、sm、lg、icon、icon-sm で、loading prop も使えます。

Dialog#

TSX

import {
  Button, Dialog, DialogClose, DialogContent, DialogDescription,
  DialogFooter, DialogHeader, DialogTitle, DialogTrigger,
} from '@sota/platform/ui';

export function DeleteDialog() {
  return <Dialog>
    <DialogTrigger asChild><Button variant="destructive">Delete</Button></DialogTrigger>
    <DialogContent preset="confirm" size="sm">
      <DialogHeader>
        <DialogTitle>Delete report?</DialogTitle>
        <DialogDescription>This action cannot be undone.</DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
        <Button variant="destructive">Delete</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>;
}

Preset は modal、editor、confirm、command、size は sm から xl です。DialogTitle と DialogDescription を必ず置きます。

Citation と chart#

TSX

import { CitationText } from '@sota/platform/ui';

export function AnswerWithSources() {
  return <CitationText text="Revenue grew by 12% [1]." citations={[{
    index: 1,
    url: 'https://example.com/q3',
    title: 'Q3 filing',
    snippet: 'Revenue increased twelve percent year over year.',
  }]} />;
}

TSX

import {
  Bar, BarChart, CartesianGrid, ChartContainer, ChartTooltip,
  ChartTooltipContent, XAxis, YAxis, type ChartConfig,
} from '@sota/platform/ui';

const chartConfig = {
  credits: { label: 'Credits', color: 'var(--chart-1)' },
} satisfies ChartConfig;
const data = [{ month: 'Jul', credits: 24 }, { month: 'Aug', credits: 31 }];

export function CreditChart() {
  return <ChartContainer config={chartConfig} className="min-h-48 w-full">
    <BarChart data={data}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="month" /><YAxis />
      <ChartTooltip content={<ChartTooltipContent />} />
      <Bar dataKey="credits" fill="var(--color-credits)" />
    </BarChart>
  </ChartContainer>;
}

Surface が使う primitive だけを import します。Generated declaration が install 済み Core version の exact prop reference です。