Add docs to storybook (#35)

.storybook/manager.js

@@ -1,6 +1,8 @@
 // .storybook/manager.js
 
 import { addons } from '@storybook/addons'
+import { themes } from '@storybook/theming'
+import theme from './theme'
 
 addons.setConfig({
   isFullscreen: false,
@@ -10,7 +12,7 @@ addons.setConfig({
   sidebarAnimations: true,
   enableShortcuts: true,
   isToolshown: true,
-  theme: undefined,
+  theme: theme,
   selectedPanel: undefined,
   initialActive: 'sidebar',
   sidebar: {

.storybook/preview-head.html

@@ -1 +1,3 @@
-<link rel="stylesheet" href="styles.css" />
+<link rel="stylesheet" href="prism.css" />
+<link rel="stylesheet" href="stories.css" />
+<link rel="stylesheet" href="docs.css" />

.storybook/preview.js

@@ -1 +1,14 @@
-export const parameters = {}
+import { themes } from '@storybook/theming'
+import theme from './theme'
+
+// or global addParameters
+export const parameters = {
+  docs: {
+    theme: theme,
+  },
+  previewTabs: {
+    'storybook/docs/panel': {
+      hidden: true,
+    },
+  },
+}

.storybook/theme.js

@@ -0,0 +1,16 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  base: 'light',
+  colorPrimary: '#24292f',
+  colorSecondary: '#0969da',
+  fontCode:
+    'ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace',
+  textColor: '#24292f',
+  barTextColor: '#24292f',
+  barSelectedColor: '#24292f',
+  // brandTitle: 'SplitType',
+  // brandImage: '',
+  // brandUrl: '',
+  // brandTarget: '_self',
+})

__stories__/01-basic.stories.js

@@ -8,11 +8,6 @@ const { words, chars } = count(children)
 export default {
   title: 'Tests/Basic',
   argTypes: { ...baseArgTypes },
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
 }
 
 const Template = getTemplate({ children })

__stories__/assets/docs.css

@@ -0,0 +1,77 @@
+@import 'variables.css';
+
+body {
+  font-size: var(--font-body) !important;
+}
+
+#docs-root .sbdocs {
+  font-size: var(--font-size);
+}
+.sbdocs-content > *:first-child {
+  margin-top: 0 !important;
+}
+
+#docs-root .sbdocs-h1,
+#docs-root .sbdocs-h2,
+#docs-root .sbdocs-h3,
+#docs-root .sbdocs-h4,
+#docs-root .sbdocs-h5,
+#docs-root .sbdocs-h5 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+#docs-root .sbdocs-h1 {
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+
+#docs-root .sbdocs-h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--color-border-muted);
+}
+
+#docs-root .sbdocs-h3 {
+  font-size: 1.25em;
+}
+
+#docs-root .sbdocs-h4 {
+  font-size: 1em;
+}
+
+/* Top level wrapper for documentation pages  */
+#docs-root .sbdocs.sbdocs-wrapper {
+  padding: 2rem 20px;
+}
+
+/* Inline code styles */
+#docs-root code {
+  font-family: var(--font-mono);
+  color: inherit;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: var(--code-font-size);
+  background-color: var(--color-canvas-subtle);
+  border-radius: 6px;
+  -webkit-font-smoothing: auto !important;
+}
+
+/* Code block container */
+#docs-root .docblock-source {
+  margin-top: 0;
+  margin-bottom: 16px;
+  box-shadow: none;
+  background-color: var(--color-canvas-subtle);
+  border: none;
+  font-size: var(--font-size);
+}
+
+/* Code block  */
+#docs-root pre.prismjs {
+  font-size: var(--code-font-size);
+  -webkit-font-smoothing: auto !important;
+}

__stories__/assets/prism.css

@@ -0,0 +1,203 @@
+/* PrismJS 1.28.0
+https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript&plugins=highlight-keywords */
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #000;
+  background: 0 0;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*='language-'] {
+  position: relative;
+  margin: 0.5em 0;
+  overflow: visible;
+  padding: 1px;
+}
+pre[class*='language-'] > code {
+  position: relative;
+  z-index: 1;
+  border-left: 10px solid #358ccb;
+  box-shadow: -1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf;
+  background-color: #fdfdfd;
+  background-image: linear-gradient(
+    transparent 50%,
+    rgba(69, 142, 209, 0.04) 50%
+  );
+  background-size: 3em 3em;
+  background-origin: content-box;
+  background-attachment: local;
+}
+code[class*='language-'] {
+  max-height: inherit;
+  height: inherit;
+  padding: 0 1em;
+  display: block;
+  overflow: auto;
+}
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background-color: #fdfdfd;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-bottom: 1em;
+}
+:not(pre) > code[class*='language-'] {
+  position: relative;
+  padding: 0.2em;
+  border-radius: 0.3em;
+  color: #c92c2c;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: inline;
+  white-space: normal;
+}
+pre[class*='language-']:after,
+pre[class*='language-']:before {
+  content: '';
+  display: block;
+  position: absolute;
+  bottom: 0.75em;
+  left: 0.18em;
+  width: 40%;
+  height: 20%;
+  max-height: 13em;
+  box-shadow: 0 13px 8px #979797;
+  -webkit-transform: rotate(-2deg);
+  -moz-transform: rotate(-2deg);
+  -ms-transform: rotate(-2deg);
+  -o-transform: rotate(-2deg);
+  transform: rotate(-2deg);
+}
+pre[class*='language-']:after {
+  right: 0.75em;
+  left: auto;
+  -webkit-transform: rotate(2deg);
+  -moz-transform: rotate(2deg);
+  -ms-transform: rotate(2deg);
+  -o-transform: rotate(2deg);
+  transform: rotate(2deg);
+}
+#docs-root .token.block-comment,
+#docs-root .token.cdata,
+#docs-root .token.comment,
+#docs-root .token.doctype,
+#docs-root .token.prolog {
+  font-style: normal;
+  color: #7d8b99;
+}
+#docs-root .token.punctuation {
+  color: #5f6364;
+}
+#docs-root .token.boolean,
+#docs-root .token.constant,
+#docs-root .token.deleted,
+#docs-root .token.function-name,
+#docs-root .token.number,
+#docs-root .token.symbol {
+  color: #c92c2c;
+}
+
+#docs-root .token.builtin,
+#docs-root .token.char,
+#docs-root .token.inserted,
+#docs-root .token.selector,
+#docs-root .token.string,
+#docs-root .token.tag.attr-value,
+#docs-root .token.regex,
+#docs-root .token.important {
+  color: #0a3069;
+}
+
+#docs-root .token.entity,
+#docs-root .token.url {
+  color: #a67f59;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+#docs-root .token.variable,
+#docs-root .token.class-name {
+  color: #953800;
+}
+
+#docs-root .token.tag {
+  color: #116329;
+}
+#docs-root .token.atrule,
+#docs-root .token.attr-value,
+#docs-root .token.keyword,
+#docs-root .token.operator {
+  color: #cf222e;
+}
+#docs-root .token.module #docs-root .token.method,
+#docs-root .token.property-access,
+#docs-root .token.function {
+  color: #8250df;
+}
+
+#docs-root .token.attr-name,
+#docs-root .token.number,
+#docs-root .token.property {
+  color: #0550ae;
+}
+
+#docs-root .language-css .token.string,
+#docs-root .style .token.string {
+  color: #a67f59;
+  background: rgba(255, 255, 255, 0.5);
+}
+#docs-root .token.important {
+  font-weight: 400;
+}
+#docs-root .token.bold {
+  font-weight: 700;
+}
+#docs-root .token.italic {
+  font-style: italic;
+}
+#docs-root .token.entity {
+  cursor: help;
+}
+#docs-root .token.namespace {
+  opacity: 0.7;
+}
+@media screen and (max-width: 767px) {
+  pre[class*='language-']:after,
+  pre[class*='language-']:before {
+    bottom: 14px;
+    box-shadow: none;
+  }
+}
+pre[class*='language-'].line-numbers.line-numbers {
+  padding-left: 0;
+}
+pre[class*='language-'].line-numbers.line-numbers code {
+  padding-left: 3.8em;
+}
+pre[class*='language-'].line-numbers.line-numbers .line-numbers-rows {
+  left: 0;
+}
+pre[class*='language-'][data-line] {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+}
+pre[data-line] code {
+  position: relative;
+  padding-left: 4em;
+}
+pre .line-highlight {
+  margin-top: 0;
+}