From b97c88c2b023febc3eb1ebe7ea3e56a174488d4e 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/Layouts.ts              |  83 +++++++++++++
 .../playroom/snippets/VisualComponents.ts     |  62 ++++++++++
 .../playroom/snippets/index.ts                |  16 +++
 .../playroom/snippets/snippet.d.ts            |   5 +
 9 files changed, 365 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/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/Layouts.ts b/packages/orbit-components/playroom/snippets/Layouts.ts
new file mode 100644
index 0000000000..f0601fea52
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/Layouts.ts
@@ -0,0 +1,83 @@
+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>
+`;
+
+export default [
+  {
+    group: "CalloutBanner",
+    code: calloutBanner,
+  },
+  {
+    group: "Drawer",
+    code: drawer,
+  },
+  {
+    group: "HorizontalScroll",
+    code: horizontalScroll,
+  },
+];
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..83e4d89bfc
--- /dev/null
+++ b/packages/orbit-components/playroom/snippets/index.ts
@@ -0,0 +1,16 @@
+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";
+
+const snippets: Snippet[] = [
+  ...Accordion,
+  ...BasicComponents,
+  ...Card,
+  ...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;
+}