Merge pull request #107 from IBM/refactor

feat(palimpsest): add initial component documentation

palimpsest/package.json

@@ -16,6 +16,8 @@
     "clipboard-copy": "^3.1.0",
     "copy-webpack-plugin": "^5.0.5",
     "css-loader": "^3.2.0",
+    "file-loader": "^5.0.2",
+    "fuse.js": "^3.4.6",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.13.0",
@@ -25,7 +27,7 @@
     "style-loader": "^1.0.0",
     "svelte": "^3.12.1",
     "svelte-loader": "2.13.6",
-    "svelte-routing": "^1.4.0",
+    "svelte-spa-router": "^2.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0"

palimpsest/src/App.svelte

@@ -1,50 +1,37 @@
 <script>
-  import { Router, Link, Route } from 'svelte-routing';
+  import ComponentLayout from './components/ComponentLayout.svelte';
-  import copy from 'clipboard-copy';
+  import ComponentSearch from './containers/ComponentSearch.svelte';
-  import { Search, Link as CarbonLink, CodeSnippet } from 'carbon-components-svelte';
+  import Header from './containers/Header.svelte';
-  import ThemePicker from './components/ThemePicker.svelte';
+  import Logo from './assets/logo.png';
-
+  import Router from 'svelte-spa-router';
-  let value = '';
-
-  $: code = `
-    search component "${value}"
-  `.trim();
 </script>
 
 <style>
+  nav {
+    position: fixed;
+    top: 2.5rem;
+    left: 0;
+    width: 14rem;
+    height: calc(100% - 2.5rem);
+    background-color: var(--cds-ui-01);
+  }
+
   header {
-    display: flex;
+    margin-top: 2.5rem;
-    align-items: baseline;
+    padding-left: 16rem;
-    justify-content: space-between;
-    height: 2.5rem;
-    padding: 0 1rem;
   }
 </style>
 
-<Router>
+<Router routes={{ '/c/:name': ComponentLayout }} />
-  <nav>
-    <Link to="/">Home</Link>
-    <Link to="about">About</Link>
-  </nav>
-  <div>
-    <Route path="about" component={ThemePicker} />
-    <Route path="/">Home</Route>
-  </div>
-</Router>
 
-<header>
+<Header />
-  <CarbonLink href="https://github.com/IBM/carbon-components-svelte">GitHub</CarbonLink>
+
-  <div>
+<nav>
-    <ThemePicker />
+  <ComponentSearch />
+</nav>
+
+<header class="bx--grid">
+  <div class="bx--row">
+    <img src={Logo} alt="Logo" style="width: 4rem;" />
   </div>
 </header>
-
-<div style="width: 16rem">
-  <Search id="search-components" labelText="Components" small bind:value />
-</div>
-
-<CodeSnippet
-  on:click={() => {
-    copy(code);
-  }}
-  {code} />

palimpsest/src/components/ComponentLayout.svelte

@@ -0,0 +1,49 @@
+<script>
+  export let params = {};
+
+  import { Tabs, Tab } from 'carbon-components-svelte';
+  import CodeSnippet from './carbon-components/CodeSnippet.svelte';
+
+  const registry = {
+    CodeSnippet
+  };
+
+  let selected = 0;
+</script>
+
+<style>
+  main {
+    margin-top: 2.5rem;
+    padding-top: 3rem;
+  }
+
+  header {
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  h1 {
+    margin-bottom: 1.5rem;
+  }
+
+  .bx--grid {
+    padding-left: 16rem;
+  }
+</style>
+
+<main>
+  <div class="bx--grid">
+    <header class="bx--row">
+      <div class="bx--col">
+        <h1>{params.name}</h1>
+      </div>
+      <Tabs type="container" bind:selected>
+        <Tab label="Overview" />
+        <Tab label="API" />
+        <Tab label="Kitchen Sink" />
+      </Tabs>
+    </header>
+  </div>
+  <section class="bx--grid">
+    <svelte:component this={registry[params.name]} {selected} />
+  </section>
+</main>

palimpsest/src/components/ThemePicker.svelte

@@ -1,14 +1,14 @@
 <script>
   import { Select, SelectItem } from 'carbon-components-svelte';
 
-  let selected = 'white';
+  let selected = 'g100';
 
   $: {
     document.documentElement.setAttribute('carbon-theme', selected);
   }
 </script>
 
-<Select inline labelText="Select Carbon Theme" bind:selected>
+<Select inline labelText="Theme" bind:selected>
   <SelectItem value="white" text="White (light)" />
   <SelectItem value="g10" text="Gray 10 (light)" />
   <SelectItem value="g90" text="Gray 90 (dark)" />

palimpsest/src/components/carbon-components/CodeSnippet.svelte

@@ -0,0 +1,64 @@
+<script>
+  export let selected = 0;
+
+  import copy from 'clipboard-copy';
+  import {
+    ToggleSmall,
+    CodeSnippet,
+    FormGroup,
+    RadioButtonGroup,
+    RadioButton
+  } from 'carbon-components-svelte';
+
+  $: code = `
+    <CodeSnippet />
+  `.trim();
+
+  $: props = {
+    light: false,
+    type: 'single'
+  };
+</script>
+
+<style>
+  .bx--row {
+    background-color: var(--cds-ui-01);
+  }
+
+  .wrapper {
+    background-color: var(--cds-ui-background);
+    border-left: 1px solid var(--cds-ui-03);
+    border-right: 1px solid var(--cds-ui-03);
+    border-bottom: 1px solid var(--cds-ui-03);
+    flex: 1;
+    display: inline-flex;
+    min-height: 11.5rem;
+    padding: 2.5rem 0.9375rem;
+  }
+</style>
+
+{#if selected === 0}
+  <div class="bx--row">
+    <div class="wrapper">
+      <div>
+        <CodeSnippet {...props} on:click={() => copy(code)} {code} />
+      </div>
+    </div>
+  </div>
+
+  <div class="bx--row">
+    <div class="bx--col">
+      <h4 style="padding: 1rem 0;">Props</h4>
+      <FormGroup legendText="Light variant (light)">
+        <ToggleSmall id="toggle-light" bind:toggled={props.light} />
+      </FormGroup>
+      <FormGroup legendText="Type (type)">
+        <RadioButtonGroup orientation="vertical" legend="Group Legend" bind:selected={props.type}>
+          <RadioButton value="inline" id="inline" labelText="inline" />
+          <RadioButton value="single" id="single" labelText="single" />
+          <RadioButton value="multi" id="multi" labelText="multi" />
+        </RadioButtonGroup>
+      </FormGroup>
+    </div>
+  </div>
+{/if}

palimpsest/src/containers/ComponentSearch.svelte

@@ -0,0 +1,66 @@
+<script>
+  import { link, location } from 'svelte-spa-router';
+  import { Search } from 'carbon-components-svelte';
+  import Fuse from 'fuse.js';
+  import components from '../data/component-registry';
+
+  const fuse = new Fuse(components, { shouldSort: false, keys: ['name'] });
+
+  let value = '';
+
+  $: results = value.length > 1 ? fuse.search(value) : components;
+</script>
+
+<style>
+  ul {
+    padding: 0.5rem 0;
+  }
+
+  li {
+    display: flex;
+  }
+
+  .bx--link {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0.375rem 1rem;
+    color: var(--cds-text-01);
+    text-decoration: none;
+  }
+
+  .bx--link:focus {
+    z-index: 1;
+  }
+
+  .bx--link:hover {
+    background-color: var(--cds-ui-03);
+    color: var(--cds-text-01);
+  }
+
+  .bx--link.current {
+    background-color: var(--cds-ui-03);
+    font-weight: 600;
+  }
+
+  .bx--link.current:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0.25rem;
+    height: 100%;
+    background-color: var(--cds-interactive-01);
+  }
+</style>
+
+<Search small id="search-components" labelText="Components" bind:value />
+<ul>
+  {#each results as { name }, i (name)}
+    <li>
+      <a class="bx--link" class:current={$location === `/c/${name}`} href={`/c/${name}`} use:link>
+        {name}
+      </a>
+    </li>
+  {/each}
+</ul>

palimpsest/src/containers/Header.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { Link } from 'carbon-components-svelte';
+  import ThemePicker from '../components/ThemePicker.svelte';
+</script>
+
+<style>
+  header {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 1rem;
+    background-color: var(--cds-ui-01);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  nav {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .bx--link {
+    font-size: 1rem;
+    color: var(--cds-text-01);
+  }
+
+  .version {
+    font-size: 0.75rem;
+    color: var(--cds-text-02);
+    margin-left: 0.5rem;
+    margin-right: 1.5rem;
+  }
+</style>
+
+<header>
+  <nav>
+    <a class="bx--link" href="/">
+      Carbon Components
+      <strong>Svelte</strong>
+    </a>
+    <span class="version">v0.2.1</span>
+    <Link href="https://github.com/IBM/carbon-components-svelte">GitHub</Link>
+  </nav>
+  <div>
+    <ThemePicker />
+  </div>
+</header>

palimpsest/src/data/component-registry.js

@@ -0,0 +1,8 @@
+const components = [
+  { name: 'CodeSnippet' },
+  { name: 'DataTable' },
+  { name: 'Dropdown' },
+  { name: 'MultiSelect' }
+];
+
+export default components;

palimpsest/src/style.scss

@@ -34,8 +34,4 @@ $css--plex: true;
 @import 'carbon-components/scss/globals/scss/_css--helpers.scss';
 @import 'carbon-components/scss/globals/scss/_css--body.scss';
 @import 'carbon-components/scss/globals/grid/_grid.scss';
-
+@import 'carbon-components/scss/globals/scss/styles.scss';
-@import 'carbon-components/scss/components/search/_search.scss';
-@import 'carbon-components/scss/components/select/_select.scss';
-@import 'carbon-components/scss/components/copy-button/_copy-button.scss';
-@import 'carbon-components/scss/components/code-snippet/_code-snippet.scss';

palimpsest/webpack.config.js

@@ -41,6 +41,10 @@ module.exports = {
           },
           'sass-loader'
         ]
+      },
+      {
+        test: /\.(png|jpe?g|svg)$/i,
+        use: [{ loader: 'file-loader' }]
       }
     ]
   },

palimpsest/yarn.lock

@@ -1479,7 +1479,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001012, caniuse-lite@^1.0.30001015:
   integrity sha512-EDnZyOJ6eYh6lHmCvCdHAFbfV4KJ9lSdfv4h/ppEhrU/Yudkl7jujwMZ1we6RX7DXqBfT04pVMQ4J+1wcTlsKA==
 
 carbon-components-svelte@../:
-  version "0.1.0"
+  version "0.2.1"
   dependencies:
     carbon-icons-svelte "^10.8.2"
     flatpickr "^4.6.3"
@@ -2683,6 +2683,14 @@ figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
   integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
 
+file-loader@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/file-loader/-/file-loader-5.0.2.tgz#7f3d8b4ac85a5e8df61338cfec95d7405f971caa"
+  integrity sha512-QMiQ+WBkGLejKe81HU8SZ9PovsU/5uaLo0JdTCEXOYv7i7jfAjHZi1tcwp9tSASJPOmmHZtbdCervFmXMH/Dcg==
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.5.0"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -2852,6 +2860,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+fuse.js@^3.4.6:
+  version "3.4.6"
+  resolved "https://registry.npmjs.org/fuse.js/-/fuse.js-3.4.6.tgz#545c3411fed88bf2e27c457cab6e73e7af697a45"
+  integrity sha512-H6aJY4UpLFwxj1+5nAvufom5b2BT2v45P1MkPvdGIK8fWjQx/7o6tTT1+ALV0yawQvbmvCF0ufl2et8eJ7v7Cg==
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -5451,6 +5464,11 @@ regexp.prototype.flags@^1.2.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpu-core@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
@@ -5690,7 +5708,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.6.0:
+schema-utils@^2.0.1, schema-utils@^2.1.0, schema-utils@^2.5.0, schema-utils@^2.6.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.1.tgz#eb78f0b945c7bcfa2082b3565e8db3548011dc4f"
   integrity sha512-0WXHDs1VDJyo+Zqs9TKLKyD/h7yDpHUhEFsM2CzkICFdoX1av+GBq/J2xRTFfsQO5kBfhZzANf2VcIm84jqDbg==
@@ -6252,10 +6270,12 @@ svelte-loader@2.13.6:
     loader-utils "^1.1.0"
     svelte-dev-helper "^1.1.9"
 
-svelte-routing@^1.4.0:
+svelte-spa-router@^2.0.0:
-  version "1.4.0"
+  version "2.0.0"
-  resolved "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.4.0.tgz#09285f3c7b19f509dfb1289fbc1235b348aa7d80"
+  resolved "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-2.0.0.tgz#704e0d2a72e43f146b0c4ba67f8c6fd695132ec9"
-  integrity sha512-09ypn0/vD2PcuyZEEocUHFgi7kvLOxSoUUuJZ4j3p4Y4sT/kMIWtHIRpnLdsr8bQ+sGo77sbEkO+av6yd1RjPg==
+  integrity sha512-cIzRfHisJ87IzI9gyufkEXwaXT5hJrejMa3ryeClIzGLC2LzmKECfBhbitmYJ8gDfkto9tfZVXGvgQ9i7lmxXA==
+  dependencies:
+    regexparam "^1.3.0"
 
 svelte@^3.12.1:
   version "3.16.7"