@swisper.ai/design-system 0.0.2 → 0.0.3

package/src/icons.stories.tsx

@@ -0,0 +1,267 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as icons from '@swisper.ai/icons';
+import { CheckIcon, CopyIcon, SearchIcon } from '@swisper.ai/icons';
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogRoot,
+  DialogTitle,
+  EmptyState,
+  EmptyStateActionRow,
+  EmptyStateDescription,
+  EmptyStateIcon,
+  EmptyStateTitle,
+  TextField,
+  Typography,
+  VisuallyHidden,
+} from '@swisper.ai/ui';
+
+import { DocsPage } from './docs/docs-section';
+
+const meta: Meta = {
+  title: 'Design System/Icons',
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+type IconComponent = React.ComponentType<{
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit';
+  className?: string;
+}>;
+
+interface IconEntry {
+  /** The export: `MapIcon`. */
+  exportName: string;
+  /** The export without its suffix, shown under the tile and matched by the search: `Map`. */
+  label: string;
+  Icon: IconComponent;
+}
+
+const ICONS: IconEntry[] = Object.entries(icons as Record<string, IconComponent>)
+  .filter(([exportName]) => exportName.endsWith('Icon'))
+  .map(([exportName, Icon]) => ({ exportName, label: exportName.replace(/Icon$/, ''), Icon }))
+  .sort((a, b) => a.label.localeCompare(b.label));
+
+const SIZES = [
+  { fontSize: 'small', px: 20 },
+  { fontSize: 'medium', px: 24 },
+  { fontSize: 'large', px: 35 },
+] as const;
+
+// Each surface with the three text colours an icon usually takes on it.
+const SURFACES = [
+  {
+    name: 'Dark surface',
+    className: 'bg-layout-background-base',
+    colors: [
+      'text-layout-foreground-base',
+      'text-layout-foreground-subtle',
+      'text-brand-primary-500',
+    ],
+  },
+  {
+    name: 'Light surface',
+    className: 'bg-layout-foreground-base',
+    colors: [
+      'text-layout-foreground-inverse',
+      'text-layout-foreground-subtle',
+      'text-brand-primary-500',
+    ],
+  },
+];
+
+const CHECKERBOARD = {
+  backgroundImage:
+    'repeating-conic-gradient(var(--color-card-background-lvl-2) 0% 25%, transparent 0% 50%)',
+  backgroundSize: '24px 24px',
+};
+
+function ImportLine({ exportName }: { exportName: string }) {
+  const [copied, setCopied] = React.useState(false);
+  const code = `import { ${exportName} } from '@swisper.ai/icons';`;
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1000);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={copy}
+      aria-label="Copy import"
+      className="flex w-full cursor-pointer items-center justify-between gap-16 rounded-[8px] bg-card-background-lvl-2 p-16 text-left focus-visible:outline-2 focus-visible:outline-offset-2"
+    >
+      <code className="min-w-0 font-ibm-plex-mono text-[13px] break-all">{code}</code>
+      {copied ? <CheckIcon fontSize="small" /> : <CopyIcon fontSize="small" />}
+      <VisuallyHidden role="status">{copied ? 'Copied' : ''}</VisuallyHidden>
+    </button>
+  );
+}
+
+function IconDetails({ exportName, Icon }: IconEntry) {
+  const previewRef = React.useRef<HTMLDivElement>(null);
+  // Flags, logos and weather icons carry their own colours and ignore the text colour.
+  const [followsTextColor, setFollowsTextColor] = React.useState(true);
+
+  React.useLayoutEffect(() => {
+    setFollowsTextColor(
+      Boolean(previewRef.current?.querySelector('[fill="currentColor"], [stroke="currentColor"]')),
+    );
+  }, [exportName]);
+
+  return (
+    <div className="space-y-24">
+      <ImportLine exportName={exportName} />
+      <div className="grid grid-cols-1 gap-24 sm:grid-cols-2">
+        <div
+          ref={previewRef}
+          className="flex aspect-square items-center justify-center rounded-[8px] text-[144px]"
+          style={CHECKERBOARD}
+        >
+          <Icon fontSize="inherit" />
+        </div>
+        <div className="space-y-24">
+          <div className="flex items-end gap-24">
+            {SIZES.map(({ fontSize, px }) => (
+              <div key={fontSize} className="flex flex-col items-center gap-8">
+                <Icon fontSize={fontSize} />
+                <Typography variant="label-xs" className="text-text-secondary">
+                  {fontSize} · {px}px
+                </Typography>
+              </div>
+            ))}
+          </div>
+          {followsTextColor ? (
+            SURFACES.map((surface) => (
+              <div key={surface.name} className="space-y-8">
+                <Typography variant="label-xs" className="text-text-secondary">
+                  {surface.name}
+                </Typography>
+                <div className={`flex gap-24 rounded-[8px] p-16 ${surface.className}`}>
+                  {surface.colors.map((color) => (
+                    <Icon key={color} className={color} />
+                  ))}
+                </div>
+              </div>
+            ))
+          ) : (
+            <Typography variant="body-small-high" className="text-text-secondary">
+              This icon keeps its own colours, so the text colour around it has no effect.
+            </Typography>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function IconBrowser() {
+  const [query, setQuery] = React.useState('');
+  // Kept after the dialog closes so its content stays in place during the exit animation.
+  const [selected, setSelected] = React.useState<IconEntry | null>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const needle = query.trim().toLowerCase();
+  const matches = ICONS.filter(({ label }) => label.toLowerCase().includes(needle));
+
+  return (
+    <DocsPage
+      title="Icons"
+      lead="Every icon in @swisper.ai/icons. Search by name, then select an icon to copy its import and see it at each size."
+    >
+      <div className="space-y-16">
+        <TextField
+          type="search"
+          size="lg"
+          aria-label="Search icons"
+          placeholder="Search icons"
+          startIcon={<SearchIcon />}
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <Typography role="status" className="text-text-secondary">
+          {needle
+            ? `${matches.length} matching ${matches.length === 1 ? 'result' : 'results'}`
+            : `${ICONS.length} icons`}
+        </Typography>
+      </div>
+
+      {matches.length === 0 ? (
+        <EmptyState>
+          <EmptyStateIcon>
+            <SearchIcon />
+          </EmptyStateIcon>
+          <EmptyStateTitle>No icons match “{query.trim()}”</EmptyStateTitle>
+          <EmptyStateDescription>Check the spelling or try a shorter word.</EmptyStateDescription>
+          <EmptyStateActionRow>
+            <Button variant="tertiary" onClick={() => setQuery('')}>
+              Clear search
+            </Button>
+          </EmptyStateActionRow>
+        </EmptyState>
+      ) : (
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(112px,1fr))] gap-8">
+          {matches.map((entry) => (
+            <button
+              key={entry.exportName}
+              type="button"
+              title={entry.label}
+              onClick={() => {
+                setSelected(entry);
+                setIsOpen(true);
+              }}
+              className="flex cursor-pointer flex-col items-center gap-8 rounded-[8px] px-8 py-16 transition-colors hover:bg-card-background-lvl-2 focus-visible:outline-2 focus-visible:outline-offset-2"
+            >
+              <entry.Icon fontSize="large" />
+              <Typography
+                variant="label-xs"
+                className="w-full truncate text-center text-text-secondary"
+              >
+                {entry.label}
+              </Typography>
+            </button>
+          ))}
+        </div>
+      )}
+
+      <DialogRoot open={isOpen} onOpenChange={setIsOpen}>
+        <Dialog className="max-w-[640px]">
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>{selected?.exportName}</DialogTitle>
+              <DialogClose />
+            </DialogHeader>
+            <DialogDescription>Select the import to copy it.</DialogDescription>
+            <DialogBody>{selected && <IconDetails {...selected} />}</DialogBody>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="tertiary">Close</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+        <DialogOverlay />
+      </DialogRoot>
+    </DocsPage>
+  );
+}
+
+export const Default: Story = {
+  // Named after the page, so the sidebar shows one entry instead of a folder with one story.
+  name: 'Icons',
+  render: () => <IconBrowser />,
+};

package/src/introduction.mdx

@@ -24,13 +24,13 @@ Echo is the design system behind Swisper. It provides styling foundations with T
       icon={<DeployedCodeIcon />}
       title="Components"
       subtitle="Explore the library of composable components"
-      storyId="components--placeholder"
+      storyId="components--default"
     />
     <LinkCard
       icon={<FormatColorIcon />}
       title="Colors"
       subtitle="See all available color tokens"
-      storyId="design-system-colors--hello-world"
+      storyId="design-system-colors--default"
     />
     <LinkCard
       icon={<LibraryIcon />}
@@ -42,7 +42,7 @@ Echo is the design system behind Swisper. It provides styling foundations with T
       icon={<DashboardIcon />}
       title="Icons"
       subtitle="Browse and search the icon set"
-      storyId="design-system-icons--placeholder"
+      storyId="design-system-icons--default"
     />
   </div>
 </Unstyled>