Organizes, themes and adds typography stories (#578)

Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

amundsen_application/static/.storybook/amundsenTheme.js

+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#9c9bff', // indigo30
+  colorSecondary: '#665aff', // indigo60
+
+  // UI
+  appBg: '#fcfcff', // gray0
+  appContentBg: '#cacad9', // gray20
+  appBorderColor: '#63637b', // gray60
+  appBorderRadius: 4,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: '"Menlo-Bold", monospace',
+
+  // Text colors
+  textColor: '#292936', // gray100
+  textInverseColor: '#fcfcff', // gray0
+
+  // Toolbar default and active colors
+  barTextColor: '#dcdcff', // indigo10
+  barSelectedColor: '#292936', // gray100
+  barBg: '#665aff', // indigo60
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: "Amundsen's Storybook",
+  brandUrl: 'https://amundsen.lyft.net/',
+  brandImage:
+    'https://raw.githubusercontent.com/lyft/amundsen/master/docs/img/logos/amundsen_logo_on_light.svg?sanitize=true',
+});

amundsen_application/static/.storybook/manager.ts

+import { addons } from '@storybook/addons';
+
+import amundsenTheme from './amundsenTheme';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  sidebarAnimations: true,
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: amundsenTheme,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  showRoots: false,
+});

amundsen_application/static/.storybook/preview.ts

+import anysort from 'anysort';
+import { addParameters } from '@storybook/react';
+
 import '../css/styles.scss';
+
+const categoriesOrder = [
+  'Overview/Introduction',
+  'Attributes/**',
+  'Components/**',
+];
+
+addParameters({
+  options: {
+    showRoots: true,
+    storySort: (previous, next) => {
+      const [previousStory, previousMeta] = previous;
+      const [nextStory, nextMeta] = next;
+
+      return anysort(previousMeta.kind, nextMeta.kind, categoriesOrder);
+    },
+  },
+});

amundsen_application/static/js/components/common/Flag/Flag.story.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Flag, { CaseType } from '.';
 
 export default {
-  title: 'Flags',
+  title: 'Components/Flags',
   component: Flag,
 };
 

amundsen_application/static/js/stories/typography.story.tsx

+import React from 'react';
+
+export default {
+  title: 'Attributes/Typography',
+};
+
+export const Typography = () => {
+  return (
+    <>
+      <h1>Headings</h1>
+      <hr />
+      <h1>Raw h1</h1>
+      <h2>Raw h2</h2>
+      <h3>Raw h3</h3>
+      <h4>Raw h4</h4>
+      <h5>Raw h5</h5>
+      <h6>Raw h6</h6>
+      <hr />
+      <h1 className="h1">Heading with .h1</h1>
+      <h2 className="h2">Heading with .h2</h2>
+      <h3 className="h3">Heading with .h3</h3>
+      <h4 className="h4">Heading with .h4</h4>
+      <h5 className="h5">Heading with .h5</h5>
+      <h6 className="h6">Heading with .h6</h6>
+      <hr />
+      <h1 className="title-1">Heading with .title-1</h1>
+      <h1 className="title-2">Heading with .title-2</h1>
+      <h1 className="title-3">Heading with .title-3</h1>
+      <h1 className="subtitle-1">Heading with .subtitle-1</h1>
+      <h1 className="subtitle-2">Heading with .subtitle-2</h1>
+      <h1 className="subtitle-3">Heading with .subtitle-3</h1>
+    </>
+  );
+};
+
+Typography.story = {
+  name: 'Headings',
+};
+
+export const Body = () => {
+  return (
+    <>
+      <h1>Body</h1>
+      <hr />
+      <p>Raw p</p>
+      <hr />
+      <p className="body-1">Paragraph with .body-1</p>
+      <p className="body-2">Paragraph with .body-2</p>
+      <p className="body-3">Paragraph with .body-3</p>
+      <p className="body-secondary-3">Paragraph with .body-secondary-3</p>
+      <p className="body-placeholder">Paragraph with .body-placeholder</p>
+      <p className="body-link">Paragraph with .body-link</p>
+      <p className="caption">Paragraph with .caption</p>
+      <p className="column-name">Paragraph with .column-name</p>
+      <p className="resource-type">Paragraph with .resource-type</p>
+      <p className="helper-text">Paragraph with .helper-text</p>
+      <p className="text-placeholder">Paragraph with .text-placeholder</p>
+      <p className="text-secondary">Paragraph with .text-secondary</p>
+      <p className="text-primary">Paragraph with .text-primary</p>
+    </>
+  );
+};
+
+Body.story = {
+  name: 'Body Text',
+};

amundsen_application/static/js/stories/welcome.story.tsx

 import React from 'react';
-import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
 
 export default {
-  title: 'Welcome',
+  title: 'Overview/Introduction',
   component: Welcome,
 };
 
-// Don't put other stories in this folder, unless they're meta (i.e. about
-// storybook itself). Storybook components for normal components should be
-// put in the same folder as the component itself.
-
-export const ToAmundsen = () => {
+export const Introduction = () => {
   return (
     <>
       <h1>Welcome to Amundsen's Component Library!</h1>
@@ -42,7 +37,3 @@ export const ToAmundsen = () => {
     </>
   );
 };
-
-ToAmundsen.story = {
-  name: 'to Amundsen Component Library',
-};

amundsen_application/static/package.json

@@ -55,6 +55,7 @@
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
+    "@storybook/theming": "^6.0.6",
     "@types/enzyme": "^3.10.5",
     "@types/jasmine-matchers": "^0.2.32",
     "@types/jest": "^24.9.1",
@@ -66,6 +67,7 @@
     "@typescript-eslint/eslint-plugin": "^3.9.0",
     "@typescript-eslint/eslint-plugin-tslint": "^3.1.0",
     "@typescript-eslint/parser": "^3.1.0",
+    "anysort": "^2.0.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.1.0",
     "bootstrap-sass": "^3.4.1",