docs: use sapper/cypress for e2e testing

docs/src/routes/_error.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let status;
+  export let error = {};
+
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<div>
+  {error.message}.
+  <Link href=".">Return home</Link>
+</div>
+
+{#if process.env.NODE_ENV === 'development' && error.stack}
+  <pre>{error.stack}</pre>
+{/if}

docs/src/routes/_layout.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let segment = undefined;
+
+  import { Content } from "carbon-components-svelte";
+  import GlobalHeader from "../components/GlobalHeader.svelte";
+</script>
+
+{#if segment !== 'examples'}
+  <GlobalHeader {segment} />
+  <Content>
+    <slot />
+  </Content>
+{:else}
+  <slot />
+{/if}

docs/src/routes/about.svelte

@@ -0,0 +1,6 @@
+<h1>About</h1>
+
+<p>
+  <code>carbon-components-svelte</code>
+  is the Svelte implementation of the Carbon Design System
+</p>

docs/src/routes/components/[slug].json.js

@@ -0,0 +1,17 @@
+import components from "./_components.js";
+
+const componentsMap = new Map();
+
+components.forEach((post) => {
+  componentsMap.set(post.slug, JSON.stringify(post));
+});
+
+export function get(req, res, next) {
+  if (componentsMap.has(req.params.slug)) {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(componentsMap.get(req.params.slug));
+  } else {
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ message: "Not found" }));
+  }
+}

docs/src/routes/components/[slug].svelte

@@ -0,0 +1,38 @@
+<script context="module">
+  export async function preload({ params }) {
+    const res = await this.fetch(`components/${params.slug}.json`);
+    const data = await res.json();
+
+    if (res.status === 200) {
+      return { data };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
+</script>
+
+<script>
+  export let data = {};
+
+  import { onMount } from "svelte";
+
+  let component = undefined;
+
+  onMount(async () => {
+    try {
+      component = await import(`../examples/${data.title}.svelte`);
+    } catch (e) {
+      console.log(e);
+    }
+  });
+</script>
+
+<svelte:head>
+  <title>{data.title}</title>
+</svelte:head>
+
+<h1>{data.title}</h1>
+
+{#if component}
+  <svelte:component this={component.default} />
+{/if}

docs/src/routes/components/_components.js

@@ -0,0 +1,10 @@
+const components = [
+  {
+    title: "Button",
+  },
+].map((post) => ({
+  ...post,
+  slug: post.title.toLowerCase().replace(/\s+/g, "-"),
+}));
+
+export default components;

docs/src/routes/components/index.json.js

@@ -0,0 +1,6 @@
+import components from "./_components.js";
+
+export function get(req, res) {
+  res.writeHead(200, { "Content-Type": "application/json" });
+  res.end(JSON.stringify(components));
+}

docs/src/routes/components/index.svelte

@@ -0,0 +1,27 @@
+<script context="module">
+  export function preload() {
+    return this.fetch("components.json")
+      .then(r => r.json())
+      .then(data => ({ data }));
+  }
+</script>
+
+<script>
+  export let data = [];
+
+  import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+</script>
+
+<svelte:head>
+  <title>Components</title>
+</svelte:head>
+
+<h1>Components</h1>
+
+<UnorderedList>
+  {#each data as data, i (data.title)}
+    <ListItem>
+      <Link rel="prefetch" href="components/{data.slug}">{data.title}</Link>
+    </ListItem>
+  {/each}
+</UnorderedList>

docs/src/routes/examples/Button.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Button } from "carbon-components-svelte";
+</script>
+
+<Button kind="primary">Primary button</Button>
+<Button kind="secondary">Secondary button</Button>
+<Button kind="tertiary">Tertiary button</Button>
+<Button kind="ghost">Ghost button</Button>

docs/src/routes/examples/_layout.svelte

@@ -0,0 +1 @@
+<slot />

docs/src/routes/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import components from "./components/_components";
+  import { Link } from "carbon-components-svelte";
+</script>
+
+<h1>Welcome</h1>
+
+{#each components as component}
+  <Link href="examples/{component.title}">{component.title}</Link>
+{/each}