feat: Add Storybook and component stories (#69)

.eslintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "sappira/react"
+  "extends": "sappira/react",
+  "rules": {
+    "import/no-named-as-default": 0
+  }
 }

.storybook/addons.js

@@ -0,0 +1,5 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { configure, addDecorator,addParameters } from '@storybook/react';
+import { withA11y } from '@storybook/addon-a11y';
+import { withKnobs } from '@storybook/addon-knobs';
+import { createGlobalStyle } from 'styled-components';
+import { ThemeProvider } from '../src';
+import theme from './theme';
+
+const GlobalStyle = createGlobalStyle`
+    @font-face {
+      font-family: "Tiempos";
+      font-weight: 500;
+      font-style: normal;
+      src: url(//cdn.heydoctor.com/fonts/TiemposHeadlineWeb-Semibold.woff2) format('woff2');
+    }
+
+    * {
+      font-family: "Avenir", sans-serif !important;
+      box-sizing: border-box;
+    }
+
+    h1, h2 {
+      font-family: "Tiempos", serif !important
+    }
+`;
+
+addParameters({
+  options: {
+    theme,
+    panelPosition: 'right'
+  },
+});
+
+addDecorator(withKnobs);
+addDecorator(withA11y);
+addDecorator(story => (
+  <ThemeProvider>
+    <>
+      <GlobalStyle />
+      {story()}
+    </>
+  </ThemeProvider>
+));
+
+// automatically import all files ending in *.stories.js
+configure(
+  [
+    require.context('../src', true, /\.stories\.mdx$/),
+    require.context('../src', true, /\.stories\.js$/),
+  ],
+  module
+);

.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<style>
+  .sidebar-subheading {
+    letter-spacing: 0 !important;
+  }
+</style>

.storybook/presets.js

@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/react/preset'];

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" />
+
+<style>
+  .sbdocs-p {
+    font-size: 18px !important;
+  }
+</style>

.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'HeyDoctor',
+  brandUrl: 'https://www.heydoctor.com',
+  brandImage: 'https://cdn.heydoctor.com/images/logos/heydoctor-wordmark-dark.svg',
+});

jest.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  setupFilesAfterEnv: ['react-testing-library/cleanup-after-each', '<rootDir>/test/setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
   testMatch: ['<rootDir>/src/**/*.spec.js'],
 };