@backmatter/studio 0.0.8 → 0.0.9

package/src/pages/UiKitPage.tsx

@@ -1,331 +0,0 @@
-// packages/studio/src/pages/UiKitPage.tsx
-import { useState } from "react";
-import * as stylex from "@stylexjs/stylex";
-import { StatusBar, StatusItem } from "../chrome/StatusBar";
-import { colors, radius, space, type } from "../styles/tokens.stylex";
-import { useTheme } from "../theme/ThemeProvider";
-import { BackLink } from "../ui/BackLink";
-import { Button, ButtonLink } from "../ui/Button";
-import { Field } from "../ui/Field";
-import { Input, Select, Textarea } from "../ui/Input";
-import { List, ListRow } from "../ui/ListRow";
-import { PageHeader, Panel, Stack } from "../ui/Page";
-import { Text } from "../ui/Text";
-
-const VARIANTS = ["primary", "secondary", "ghost", "danger"] as const;
-
-export function UiKitPage() {
-  const { preference, resolved, setPreference } = useTheme();
-  const [locale, setLocale] = useState("en");
-
-  return (
-    <div {...stylex.props(styles.page)}>
-      <header {...stylex.props(styles.top)}>
-        <div>
-          <Text as="p" size="xs" tone="muted" weight="semibold">
-            DEV ONLY · /__ui
-          </Text>
-          <Text as="h1" size="display" weight="semibold">
-            UI kit
-          </Text>
-          <Text tone="muted" size="sm">
-            StyleX + Base UI primitives. Theme is {preference} (resolved{" "}
-            {resolved}
-            ).
-          </Text>
-          <div {...stylex.props(styles.back)}>
-            <BackLink to="/">← Back to app</BackLink>
-          </div>
-        </div>
-        <div {...stylex.props(styles.themeRow)}>
-          <Button
-            variant={preference === "system" ? "primary" : "secondary"}
-            onClick={() => setPreference("system")}
-          >
-            System
-          </Button>
-          <Button
-            variant={preference === "light" ? "primary" : "secondary"}
-            onClick={() => setPreference("light")}
-          >
-            Light
-          </Button>
-          <Button
-            variant={preference === "dark" ? "primary" : "secondary"}
-            onClick={() => setPreference("dark")}
-          >
-            Dark
-          </Button>
-        </div>
-      </header>
-
-      <Stack gap="lg">
-        <section {...stylex.props(styles.section)}>
-          <SectionTitle>Buttons</SectionTitle>
-          <Panel>
-            <Stack gap="md">
-              {VARIANTS.map((variant) => (
-                <Row key={variant} label={variant}>
-                  <Button variant={variant}>{variant}</Button>
-                  <Button variant={variant} disabled>
-                    disabled
-                  </Button>
-                  <ButtonLink variant={variant} to="/__ui">
-                    link
-                  </ButtonLink>
-                </Row>
-              ))}
-            </Stack>
-          </Panel>
-        </section>
-
-        <section {...stylex.props(styles.section)}>
-          <SectionTitle>Fields</SectionTitle>
-          <Panel>
-            <Stack>
-              <Field label="Text" hint="Functional note under the field.">
-                <Input
-                  defaultValue="Ada Lovelace"
-                  autoComplete="off"
-                  spellCheck={false}
-                />
-              </Field>
-              <Field label="Disabled">
-                <Input defaultValue="Locked" disabled />
-              </Field>
-              <Field label="Select">
-                <Select
-                  aria-label="Locale"
-                  value={locale}
-                  onValueChange={(next) => setLocale(next ?? "en")}
-                  options={[
-                    { value: "en", label: "English (en)" },
-                    { value: "da", label: "Dansk (da)" },
-                  ]}
-                />
-              </Field>
-              <Field label="Body (mono)">
-                <Textarea
-                  mono
-                  rows={4}
-                  defaultValue={"---\ntitle: Hello\n---\n\nParagraph."}
-                />
-              </Field>
-            </Stack>
-          </Panel>
-        </section>
-
-        <section {...stylex.props(styles.section)}>
-          <SectionTitle>Text</SectionTitle>
-          <Panel>
-            <Stack gap="sm">
-              <Text size="display" weight="semibold">
-                Display · 20px
-              </Text>
-              <Text size="xl" weight="semibold">
-                Title · 16px
-              </Text>
-              <Text size="lg" weight="medium">
-                Heading · 14px
-              </Text>
-              <Text>Body · 13px</Text>
-              <Text size="sm" tone="muted">
-                Muted · 12px
-              </Text>
-              <Text size="xs" tone="muted" weight="semibold">
-                OVERLINE
-              </Text>
-              <Text tone="danger">Danger</Text>
-              <Text tone="success">Success</Text>
-              <Text mono size="sm">
-                Geist Mono / content/en/blog/hello.mdx
-              </Text>
-            </Stack>
-          </Panel>
-        </section>
-
-        <section {...stylex.props(styles.section)}>
-          <SectionTitle>List + page chrome</SectionTitle>
-          <Panel>
-            <PageHeader
-              kicker={<BackLink to="/__ui">← Kit</BackLink>}
-              title="Documents"
-              description="Sample page header with action."
-              action={<Button>New</Button>}
-            />
-            <List>
-              <ListRow
-                to="/__ui"
-                title="hello-world"
-                meta="en"
-                trailing="modified"
-              />
-              <ListRow
-                to="/__ui"
-                title="about"
-                meta="da"
-                trailing="new"
-              />
-            </List>
-          </Panel>
-        </section>
-
-        <section {...stylex.props(styles.section)}>
-          <SectionTitle>Top bar</SectionTitle>
-          <Panel>
-            <div {...stylex.props(styles.statusWrap)}>
-              <StatusBar>
-                <StatusItem>main</StatusItem>
-                <StatusItem>2 uncommitted</StatusItem>
-              </StatusBar>
-              <StatusBar>
-                <StatusItem>feat/sale</StatusItem>
-                <StatusItem>Unsaved</StatusItem>
-              </StatusBar>
-              <StatusBar>
-                <StatusItem tone="danger">Save failed</StatusItem>
-              </StatusBar>
-            </div>
-          </Panel>
-        </section>
-
-        <section {...stylex.props(styles.section)}>
-          <SectionTitle>Surfaces</SectionTitle>
-          <div {...stylex.props(styles.swatches)}>
-            <Swatch label="bgApp" fill={styles.bgApp} />
-            <Swatch label="bgSidebar" fill={styles.bgSidebar} />
-            <Swatch label="bgSurface" fill={styles.bgSurface} />
-            <Swatch label="accent" fill={styles.accent} />
-            <Swatch label="danger" fill={styles.dangerFill} />
-            <Swatch label="success" fill={styles.successFill} />
-          </div>
-        </section>
-      </Stack>
-    </div>
-  );
-}
-
-function SectionTitle({ children }: { children: string }) {
-  return (
-    <Text as="h2" size="xs" tone="muted" weight="semibold">
-      {children}
-    </Text>
-  );
-}
-
-function Row({
-  label,
-  children,
-}: {
-  label: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div {...stylex.props(styles.row)}>
-      <span {...stylex.props(styles.rowLabel)}>{label}</span>
-      <div {...stylex.props(styles.rowItems)}>{children}</div>
-    </div>
-  );
-}
-
-function Swatch({
-  label,
-  fill,
-}: {
-  label: string;
-  fill: stylex.StyleXStyles;
-}) {
-  return (
-    <div {...stylex.props(styles.swatch)}>
-      <div {...stylex.props(styles.chip, fill)} />
-      <Text size="xs" tone="muted" mono>
-        {label}
-      </Text>
-    </div>
-  );
-}
-
-const styles = stylex.create({
-  page: {
-    minHeight: "100dvh",
-    maxWidth: "880px",
-    marginInline: "auto",
-    paddingInline: space.xxl,
-    paddingBlock: space.xxl,
-  },
-  section: {
-    display: "flex",
-    flexDirection: "column",
-    gap: space.sm,
-  },
-  top: {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: space.lg,
-    marginBottom: space.xxl,
-  },
-  back: {
-    marginTop: space.md,
-  },
-  themeRow: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: space.sm,
-  },
-  row: {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: space.lg,
-  },
-  rowLabel: {
-    width: "88px",
-    flexShrink: 0,
-    fontSize: type.xs,
-    fontWeight: 600,
-    letterSpacing: "0.04em",
-    textTransform: "uppercase",
-    color: colors.textMuted,
-  },
-  rowItems: {
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center",
-    gap: space.sm,
-  },
-  statusWrap: {
-    display: "flex",
-    flexDirection: "column",
-    gap: space.md,
-    overflow: "hidden",
-    borderRadius: radius.md,
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: colors.border,
-  },
-  swatches: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
-    gap: space.md,
-  },
-  swatch: {
-    display: "flex",
-    flexDirection: "column",
-    gap: space.sm,
-  },
-  chip: {
-    height: "40px",
-    borderRadius: radius.md,
-    borderWidth: 1,
-    borderStyle: "solid",
-    borderColor: colors.border,
-  },
-  bgApp: { backgroundColor: colors.bgApp },
-  bgSidebar: { backgroundColor: colors.bgSidebar },
-  bgSurface: { backgroundColor: colors.bgSurface },
-  accent: { backgroundColor: colors.accent },
-  dangerFill: { backgroundColor: colors.danger },
-  successFill: { backgroundColor: colors.success },
-});