From 10b7c3e4476625e30334d0ca58ca004e58584cc1 Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Thu, 16 Jan 2025 17:34:00 +0100
Subject: [PATCH] chore: add playroom snippets

---
 packages/orbit-components/playroom.config.js  |   2 +-
 .../orbit-components/playroom/snippets.ts     |  39 --
 .../playroom/snippets/Accordion.ts            |  56 +++
 .../playroom/snippets/BasicComponents.ts      | 110 ++++++
 .../playroom/snippets/Card.ts                 |  32 ++
 .../playroom/snippets/Inputs.ts               | 157 ++++++++
 .../playroom/snippets/Layouts.ts              | 347 ++++++++++++++++++
 .../playroom/snippets/VisualComponents.ts     |  62 ++++
 .../playroom/snippets/index.ts                |  18 +
 .../playroom/snippets/snippet.d.ts            |   5 +
 10 files changed, 788 insertions(+), 40 deletions(-)
 delete mode 100644 packages/orbit-components/playroom/snippets.ts
 create mode 100644 packages/orbit-components/playroom/snippets/Accordion.ts
 create mode 100644 packages/orbit-components/playroom/snippets/BasicComponents.ts
 create mode 100644 packages/orbit-components/playroom/snippets/Card.ts
 create mode 100644 packages/orbit-components/playroom/snippets/Inputs.ts
 create mode 100644 packages/orbit-components/playroom/snippets/Layouts.ts
 create mode 100644 packages/orbit-components/playroom/snippets/VisualComponents.ts
 create mode 100644 packages/orbit-components/playroom/snippets/index.ts
 create mode 100644 packages/orbit-components/playroom/snippets/snippet.d.ts

diff --git a/packages/orbit-components/playroom.config.js b/packages/orbit-components/playroom.config.js
index 4679ef6138..0e03ff28bf 100644
--- a/packages/orbit-components/playroom.config.js
+++ b/packages/orbit-components/playroom.config.js
@@ -6,7 +6,7 @@ module.exports = {
   components: require.resolve("./playroomComponents.tsx"),
   outputPath: "./.playroom/playroom",
   frameComponent: "./playroom/FrameComponent.tsx",
-  snippets: "./playroom/snippets.ts",
+  snippets: "./playroom/snippets/index.ts",
   scope: "./playroom/scope.ts",
   port: 9000,
   openBrowser: false,
diff --git a/packages/orbit-components/playroom/snippets.ts b/packages/orbit-components/playroom/snippets.ts
deleted file mode 100644
index c287ae2ff2..0000000000
--- a/packages/orbit-components/playroom/snippets.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-interface Snippet {
-  group: string;
-  name: string;
-  code: string;
-}
-
-const snippets: Snippet[] = [
-  {
-    group: "Basic Components",
-    name: "Button Primary",
-    code: `<Button>Click me</Button>`,
-  },
-  {
-    group: "Basic Components",
-    name: "Alert Info",
-    code: `<Alert type="info">This is an informational message</Alert>`,
-  },
-  {
-    group: "Forms",
-    name: "Input Field",
-    code: `<InputField label="Username" placeholder="Enter your username" />`,
-  },
-  {
-    group: "Layout",
-    name: "Card with Content",
-    code: `
-<Card>
-  <CardSection>
-    <Stack>
-      <Heading type="title3">Card Title</Heading>
-      <Text>This is some content inside a card.</Text>
-      <Button>Learn More</Button>
-    </Stack>
-  </CardSection>
-</Card>`,
-  },
-];
-
-export default snippets;
diff --git a/packages/orbit-components/playroom/snippets/Accordion.ts b/packages/orbit-components/playroom/snippets/Accordion.ts
new file mode 100644
index 0000000000..a6adac5013
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/Accordion.ts
@@ -0,0 +1,56 @@
+const utils = `const [expandedSection, setExpandedSection] = React.useState("accordion-section-0");`;
+
+const code = `
+<>
+  {/* For the example to work as expected, you should also import the Accordion Utils before the return. */}
+
+  <Accordion expandedSection={expandedSection} onExpand={id => setExpandedSection(String(id))}>
+    <AccordionSection
+      id="accordion-section-0"
+      header={
+        <Stack spacing="300">
+          <Text type="primary">This is a header label</Text>
+          <Text size="small">This is a header label</Text>
+        </Stack>
+      }
+    >
+      <Text type="primary">This is a content text</Text>
+    </AccordionSection>
+    <AccordionSection
+      id="accordion-section-1"
+      header={
+        <Stack spacing="300">
+          <Text type="primary">This is a header label</Text>
+          <Text size="small">This is a header label</Text>
+        </Stack>
+      }
+    >
+      <Text type="primary">This is a content text</Text>
+    </AccordionSection>
+    <AccordionSection
+      id="accordion-section-2"
+      header={
+        <Stack spacing="300">
+          <Text type="primary">This is a header label</Text>
+          <Text size="small">This is a header label</Text>
+        </Stack>
+      }
+    >
+      <Text type="primary">This is a content text</Text>
+    </AccordionSection>
+  </Accordion>
+</>
+`;
+
+export default [
+  {
+    group: "Accordion",
+    name: "Basic Accordion",
+    code,
+  },
+  {
+    group: "Accordion",
+    name: "Utils",
+    code: utils,
+  },
+];
diff --git a/packages/orbit-components/playroom/snippets/BasicComponents.ts b/packages/orbit-components/playroom/snippets/BasicComponents.ts
new file mode 100644
index 0000000000..5af07a68b6
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/BasicComponents.ts
@@ -0,0 +1,110 @@
+const alert = `<Alert title="The title" type="info" icon>The message.</Alert>`;
+
+const button = `<Button type="primary">Primary Button</Button>`;
+
+const badge = `<Badge type="info">Content</Badge>`;
+
+const buttonLink = `<ButtonLink type="primary">ButtonLink</ButtonLink>`;
+
+const badgeList = `
+<BadgeList>
+  <BadgeListItem icon={<Icons.KiwicomGuarantee />}>
+    You're departing from a different place
+  </BadgeListItem>
+  <BadgeListItem icon={<Icons.KiwicomGuarantee />} type="info" size="normal">
+    You must collect and recheck your baggage
+  </BadgeListItem>
+</BadgeList>
+`;
+
+const breadcrumbs = `
+<Breadcrumbs>
+  <BreadcrumbsItem>Kiwi.com</BreadcrumbsItem>
+  <BreadcrumbsItem>1. Level</BreadcrumbsItem>
+  <BreadcrumbsItem>2. Level</BreadcrumbsItem>
+  <BreadcrumbsItem>3. Level</BreadcrumbsItem>
+</Breadcrumbs>
+`;
+
+const buttonGroup = `
+<ButtonGroup>
+  <Button>Button</Button>
+  <Button iconLeft={<Icons.ChevronDown />}/>
+</ButtonGroup>
+`;
+
+const checkbox = `<Checkbox label="Checkbox label" info="Additional information" />`;
+
+const choiceGroup = `
+<ChoiceGroup label="Choice group">
+  <Radio label="Option one" value="one" />
+  <Radio label="Option two" value="two" />
+  <Radio label="Option three" value="three" />
+</ChoiceGroup>`;
+
+const collapse = `<Collapse label="Title"><Text>Collapsed content</Text></Collapse>`;
+
+const coupon = `<Coupon>CODE</Coupon>`;
+
+const dialog = `
+<Dialog 
+  title="Log out"
+  description="Are you sure you want to log out now?" 
+  primaryAction={<Button type="critical">Log out</Button>}/>`;
+
+const heading = `<Heading as="h1" type="title1">Heading</Heading>`;
+
+export default [
+  {
+    group: "Alert",
+    code: alert,
+  },
+  {
+    group: "Button",
+    code: button,
+  },
+  {
+    group: "ButtonLink",
+    code: buttonLink,
+  },
+  {
+    group: "ButtonGroup",
+    code: buttonGroup,
+  },
+  {
+    group: "Badge",
+    code: badge,
+  },
+  {
+    group: "BadgeList",
+    code: badgeList,
+  },
+  {
+    group: "Breadcrumbs",
+    code: breadcrumbs,
+  },
+  {
+    group: "Checkbox",
+    code: checkbox,
+  },
+  {
+    group: "ChoiceGroup",
+    code: choiceGroup,
+  },
+  {
+    group: "Collapse",
+    code: collapse,
+  },
+  {
+    group: "Coupon",
+    code: coupon,
+  },
+  {
+    group: "Dialog",
+    code: dialog,
+  },
+  {
+    group: "Heading",
+    code: heading,
+  },
+];
diff --git a/packages/orbit-components/playroom/snippets/Card.ts b/packages/orbit-components/playroom/snippets/Card.ts
new file mode 100644
index 0000000000..733dc2792b
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/Card.ts
@@ -0,0 +1,32 @@
+const basic = `<Card description="This is description of the card" title="Card title"/>`;
+
+const expandable = `
+<Card description="This card has expandable sections" title="Card Expandable">
+  <CardSection
+    title="Exapandable Section"
+    description="Section Description"
+    expandable
+  >
+    Section content
+  </CardSection>
+  <CardSection
+    title="Non exapandable Section"
+    description="Section Description"
+  >
+    Section content
+  </CardSection>
+</Card>
+`;
+
+export default [
+  {
+    group: "Card",
+    name: "Basic Card",
+    code: basic,
+  },
+  {
+    group: "Card",
+    name: "Expandable Card",
+    code: expandable,
+  },
+];
diff --git a/packages/orbit-components/playroom/snippets/Inputs.ts b/packages/orbit-components/playroom/snippets/Inputs.ts
new file mode 100644
index 0000000000..ca230473c7
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/Inputs.ts
@@ -0,0 +1,157 @@
+const basic = `<InputField label="Label" placeholder="Placeholder" />`;
+
+const withError = `
+<div className="pt-500">
+  <InputField
+    inlineLabel
+    error="Please fill out as you have on your passport"
+    placeholder="Placeholder"
+    prefix={<Icons.Search />}
+    suffix={<ButtonLink compact iconLeft={<Icons.Visibility />} size="normal"/>}
+  />
+</div>`;
+
+const inputFile = `
+<div className="pt-500">
+  <InputFile help="Supported files: PNG, JPG, PDF" label="Label" />
+</div>`;
+
+const inputGroup = `
+<InputGroup
+  flex={[
+    '0 0 60px',
+    '1 1 100%',
+    '0 0 90px'
+  ]}
+  label="Date of birth"
+>
+  <InputField
+    placeholder="DD"
+  />
+  <Select
+    label="Month of birth"
+    options={[
+      {
+        label: 'January',
+        value: 'January'
+      },
+      {
+        label: 'February',
+        value: 'February'
+      },
+      {
+        label: 'March',
+        value: 'March'
+      },
+      {
+        label: 'April',
+        value: 'April'
+      },
+      {
+        label: 'May',
+        value: 'May'
+      },
+      {
+        label: 'June',
+        value: 'June'
+      },
+      {
+        label: 'July',
+        value: 'July'
+      },
+      {
+        label: 'August',
+        value: 'August'
+      },
+      {
+        label: 'September',
+        value: 'September'
+      },
+      {
+        label: 'October',
+        value: 'October'
+      },
+      {
+        label: 'November',
+        value: 'November'
+      },
+      {
+        label: 'December',
+        value: 'December'
+      }
+    ]}
+    placeholder="Month"
+    value="January"
+  />
+  <InputField placeholder="YYYY" />
+</InputGroup>
+`;
+
+const inputSelect = `
+<InputSelect
+  emptyState="No results found."
+  maxHeight="400px"
+  options={[
+    {
+      group: 'Popular',
+      prefix: <CountryFlag code="eu" />,
+      title: 'Euro',
+      value: 'EUR'
+    },
+    {
+      group: 'Popular',
+      prefix: <CountryFlag code="us" />,
+      title: 'US Dollar',
+      value: 'USD'
+    },
+    {
+      group: 'Popular',
+      prefix: <CountryFlag code="gb" />,
+      title: 'Pound Sterling',
+      value: 'GBP'
+    },
+    {
+      prefix: <CountryFlag code="au" />,
+      title: 'Australian Dollar',
+      value: 'AUD'
+    },
+    {
+      prefix: <CountryFlag code="br" />,
+      title: 'Brazilian Real',
+      value: 'BRL'
+    },
+    {
+      prefix: <CountryFlag code="cz" />,
+      title: 'Czech Koruna',
+      value: 'CZK'
+    }
+  ]}
+  placeholder="Select currency"
+  showAll
+/>
+`;
+
+export default [
+  {
+    group: "InputField",
+    name: "Basic InputField",
+    code: basic,
+  },
+  {
+    group: "InputField",
+    name: "InputField with Error",
+    code: withError,
+  },
+  {
+    group: "InputFile",
+    code: inputFile,
+  },
+  {
+    group: "InputGroup",
+    code: inputGroup,
+  },
+  {
+    group: "InputSelect",
+    code: inputSelect,
+  },
+];
diff --git a/packages/orbit-components/playroom/snippets/Layouts.ts b/packages/orbit-components/playroom/snippets/Layouts.ts
new file mode 100644
index 0000000000..271c66cb73
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/Layouts.ts
@@ -0,0 +1,347 @@
+const calloutBanner = `
+<CallOutBanner
+  actions={<Button iconRight={<Icons.NewWindow />} size="small" type="secondary">Find a Room</Button>}
+  description="Select your accommodation from more than a million properties worldwide."
+  illustration={<Illustration name="Accommodation" size="small"/>}
+  title="Rooms in Warsaw"
+>
+  <List type="secondary">
+    <ListItem icon={<Icons.Check color="success" />}>
+      Up to 50% off.
+    </ListItem>
+    <ListItem icon={<Icons.Check color="success" />}>
+      From 3-star budget to 5-star luxury.
+    </ListItem>
+  </List>
+</CallOutBanner>
+`;
+
+const drawer = `
+<Drawer title="Drawer title" position="right" width="320px">
+  <Collapse label="Links list" initialExpanded>
+    <LinkList indent>
+      <TextLink type="secondary">
+        Link 1
+      </TextLink>
+      <TextLink type="secondary">
+        Link 2
+      </TextLink>
+      <TextLink type="secondary">
+        Link 3
+      </TextLink>
+    </LinkList>
+  </Collapse>
+  <LinkList>
+    <TextLink type="secondary">
+      Sign out
+    </TextLink>
+  </LinkList>
+</Drawer>
+`;
+
+const horizontalScroll = `
+<HorizontalScroll arrows>
+  {Array(...Array(10)).map((_, key) => (
+    <Box
+      key={key}
+      display="flex"
+      justify="center"
+      minWidth="150px"
+      background="cloudLight"
+      height="full"
+    >
+      <Text size="large" weight="bold" as="div">
+        <div
+          style={{
+            height: "50px",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      </Text>
+    </Box>
+  ))}
+  )}
+</HorizontalScroll>
+`;
+
+const itinerary = `
+<Itinerary>
+  <ItineraryStatus label="This part is new" type="success">
+    <ItinerarySegment
+      banner={
+        <Stack>
+          <ItinerarySegmentBanner>
+            <ItineraryBadgeList>
+              <ItineraryBadgeListItem
+                icon={<Icons.StarFull />}
+                type="warning"
+              >
+                Hidden city hack: This itinerary finishes in New York
+                (United States), but you’ll get off during the
+                layover.
+              </ItineraryBadgeListItem>
+              <ItineraryBadgeListItem icon={<Icons.Visa />}>
+                Check travel document requirements for all
+                destinations, including passport, visa and COVID-19
+                documents.
+              </ItineraryBadgeListItem>
+              <ItineraryBadgeListItem
+                icon={<Icons.BaggageCheckedNone />}
+              >
+                You can’t bring checked baggage.
+              </ItineraryBadgeListItem>
+            </ItineraryBadgeList>
+          </ItinerarySegmentBanner>
+        </Stack>
+      }
+    >
+      <ItinerarySegmentStop
+        city="Prague"
+        date="Wed, 15.6"
+        station="Václav Haivel Airport Prague (PRG)"
+        time="16:20"
+      />
+      <ItinerarySegmentDetail
+        content={[
+          {
+            items: [
+              {
+                icon: <Icons.Airplane size="small" />,
+                name: "Carrier",
+                value: "HiFly",
+              },
+              {
+                icon: <Icons.InformationCircle size="small" />,
+                name: "Connection number",
+                value: "TP 8345",
+              },
+            ],
+            title: "Connection Info",
+          },
+          {
+            items: [
+              {
+                icon: <Icons.Seat size="small" />,
+                name: "Seat pitch",
+                value: "76cm",
+              },
+              {
+                icon: <Icons.Seat size="small" />,
+                name: "Seat width",
+                value: "43cm",
+              },
+              {
+                icon: <Icons.Seat size="small" />,
+                name: "Seat recline",
+                value: "7cm",
+              },
+              {
+                icon: <Icons.Entertainment size="small" />,
+                name: "Audio & video on demand",
+                value: "No",
+              },
+              {
+                icon: <Icons.PowerPlug size="small" />,
+                name: "In-seat power",
+                value: "No",
+              },
+              {
+                icon: <Icons.Wifi size="small" />,
+                name: "Wi-Fi on board",
+                value: "No",
+              },
+            ],
+            title: "Seating Info",
+          },
+        ]}
+        duration="2h 10m"
+        summary={
+          <Badge carriers={[{ code: "5K", name: "HiFly" }]}>
+            HiFly
+          </Badge>
+        }
+      />
+      <ItinerarySegmentStop
+        city="Frankfurt"
+        date="Wed, 15.6"
+        hidden
+        station="Frankfurt International Airport (FRA)"
+        time="18:30"
+      />
+      <ItinerarySegmentStop
+        city="New York"
+        station="John F. Kennedy International Airport (JFK)"
+      />
+    </ItinerarySegment>
+  </ItineraryStatus>
+</Itinerary>
+`;
+
+const modal = `
+<Modal fixedFooter>
+  <ModalHeader
+    description="Select a flight below to see the menu (where available)"
+    illustration={<Illustration name="BaggageDrop" size="small" />}
+    title="Enjoy something to eat while you fly"
+  />
+  <ModalSection suppressed>
+    <Stack>
+      <Text uppercase weight="bold">
+        Outbound
+      </Text>
+      <Card>
+        <CardSection
+          actions={
+            <Button size="small" type="secondary">
+              Edit
+            </Button>
+          }
+          expandable
+          noSeparator
+          title={
+            <Stack
+              align="center"
+              direction="row"
+              justify="between"
+              spacing="200"
+            >
+              <Stack spacing="100">
+                <Text size="small" type="secondary">
+                  Sat, Mar 31 Trip length: 1h55m
+                </Text>
+                <Stack align="center" direction="row" spacing="100">
+                  <Text weight="bold">London LHR</Text>
+                  <Icons.FlightDirect size="small" />
+                  <Text weight="bold">Prague PRG</Text>
+                </Stack>
+              </Stack>
+            </Stack>
+          }
+        />
+        <CardSection
+          actions={
+            <Button size="small" type="secondary">
+              Edit
+            </Button>
+          }
+          expandable
+          title={
+            <Stack
+              align="center"
+              direction="row"
+              justify="between"
+              spacing="200"
+            >
+              <Stack spacing="100">
+                <Text size="small" type="secondary">
+                  Sat, Mar 31 Trip length: 1h55m
+                </Text>
+                <Stack align="center" direction="row" spacing="100">
+                  <Text weight="bold">London LHR</Text>
+                  <Icons.FlightDirect size="small" />
+                  <Text weight="bold">Prague PRG</Text>
+                </Stack>
+              </Stack>
+            </Stack>
+          }
+        />
+      </Card>
+    </Stack>
+  </ModalSection>
+  <ModalSection>
+    <Stack>
+      <Text uppercase weight="bold">
+        INBOUND
+      </Text>
+      <Card>
+        <CardSection
+          actions={
+            <Button size="small" type="secondary">
+              Edit
+            </Button>
+          }
+          expandable
+          title={
+            <Stack
+              align="center"
+              direction="row"
+              justify="between"
+              spacing="200"
+            >
+              <Stack spacing="100">
+                <Text size="small" type="secondary">
+                  Sat, Mar 31 Trip length: 1h55m
+                </Text>
+                <Stack align="center" direction="row" spacing="100">
+                  <Text weight="bold">London LHR</Text>
+                  <Icons.FlightDirect size="small" />
+                  <Text weight="bold">Prague PRG</Text>
+                </Stack>
+              </Stack>
+            </Stack>
+          }
+        />
+        <CardSection
+          actions={
+            <Button size="small" type="secondary">
+              Edit
+            </Button>
+          }
+          expandable
+          title={
+            <Stack
+              align="center"
+              direction="row"
+              justify="between"
+              spacing="200"
+            >
+              <Stack spacing="100">
+                <Text size="small" type="secondary">
+                  Sat, Mar 31 Trip length: 1h55m
+                </Text>
+                <Stack align="center" direction="row" spacing="100">
+                  <Text weight="bold">London LHR</Text>
+                  <Icons.FlightDirect size="small" />
+                  <Text weight="bold">Prague PRG</Text>
+                </Stack>
+              </Stack>
+            </Stack>
+          }
+        />
+      </Card>
+    </Stack>
+  </ModalSection>
+  <ModalFooter flex={["0 0 auto", "1 1 100%"]}>
+    <Button iconLeft={<Icons.ChevronBackward />} type="secondary">
+      Back
+    </Button>
+    <Button fullWidth>Proceed to Payment (23.98€)</Button>
+  </ModalFooter>
+</Modal>
+`;
+
+export default [
+  {
+    group: "CalloutBanner",
+    code: calloutBanner,
+  },
+  {
+    group: "Drawer",
+    code: drawer,
+  },
+  {
+    group: "HorizontalScroll",
+    code: horizontalScroll,
+  },
+  {
+    group: "Itinerary",
+    code: itinerary,
+  },
+  {
+    group: "Modal",
+    code: modal,
+  },
+];
diff --git a/packages/orbit-components/playroom/snippets/VisualComponents.ts b/packages/orbit-components/playroom/snippets/VisualComponents.ts
new file mode 100644
index 0000000000..bb37f4f4af
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/VisualComponents.ts
@@ -0,0 +1,62 @@
+const airportIllustration = `<AirportIllustration name="PRGSmartPass"/>`;
+
+const countryFlag = `<CountryFlag code="cz" name="Czech Republic" />`;
+
+const carrierLogo = `
+<CarrierLogo
+  carriers={[
+    {
+      code: 'FR',
+      name: 'Ryanair'
+    },
+    {
+      code: '3K',
+      name: 'Jetstar Asia'
+    },
+    {
+      code: 'V7',
+      name: 'Volotea'
+    },
+    {
+      code: 'TP',
+      name: 'TAP Air Portugal'
+    }
+  ]}
+  inlineStacked
+  rounded
+  size="large"
+/>
+`;
+
+const featureIcon = `<FeatureIcon name="TicketFlexi" />`;
+
+const icon = `<Icons.Airplane />`;
+
+const illustration = `<Illustration name="Accommodation" size="small"/>`;
+
+export default [
+  {
+    group: "Airport Illustration",
+    code: airportIllustration,
+  },
+  {
+    group: "Carrier Logo",
+    code: carrierLogo,
+  },
+  {
+    group: "Country Flag",
+    code: countryFlag,
+  },
+  {
+    group: "Feature Icon",
+    code: featureIcon,
+  },
+  {
+    group: "Icon",
+    code: icon,
+  },
+  {
+    group: "Illustration",
+    code: illustration,
+  },
+];
diff --git a/packages/orbit-components/playroom/snippets/index.ts b/packages/orbit-components/playroom/snippets/index.ts
new file mode 100644
index 0000000000..0242453459
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/index.ts
@@ -0,0 +1,18 @@
+import type { Snippet } from "./snippet";
+import Accordion from "./Accordion";
+import VisualComponents from "./VisualComponents";
+import BasicComponents from "./BasicComponents";
+import Layouts from "./Layouts";
+import Card from "./Card";
+import Inputs from "./Inputs";
+
+const snippets: Snippet[] = [
+  ...Accordion,
+  ...BasicComponents,
+  ...Card,
+  ...Inputs,
+  ...Layouts,
+  ...VisualComponents,
+].sort((a, b) => a.group.localeCompare(b.group));
+
+export default snippets;
diff --git a/packages/orbit-components/playroom/snippets/snippet.d.ts b/packages/orbit-components/playroom/snippets/snippet.d.ts
new file mode 100644
index 0000000000..a62de7b2f9
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/snippet.d.ts
@@ -0,0 +1,5 @@
+export interface Snippet {
+  group: string;
+  name?: string;
+  code: string;
+}