fix(storybook): updating storybook to mdx (#164)

.storybook/components/ExternalLink.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { defaultTheme } from '@manifest-ui/themes';
+import { styled } from '@manifest-ui/styled';
+
+const StyledLink = styled('a')({
+  color:  defaultTheme.colors.primary[500],
+  fontSize: 'inherit',
+  fontWeight: defaultTheme.fontWeights.normal,
+  letterSpacing: defaultTheme.letterSpacings.normal,
+  textDecoration: 'none',
+  transitionDuration: defaultTheme.transitions.duration.base,
+  transitionProperty: defaultTheme.transitions.property.colors,
+
+  '&:hover:not(&:focus)': {
+    color: defaultTheme.colors.primary[600],
+  },
+});
+
+const ExternalLink = props => {
+  return <StyledLink rel="nofollow,noopener,noreferrer" target="_blank" {...props} />
+}
+
+export default ExternalLink;

.storybook/components/Props.js

@@ -5,4 +5,4 @@ import {
 
 Props.defaultProps = { ...Props.defaultProps, story: PRIMARY_STORY };
 
-export default Props;
+export default Props;

.storybook/components/Sources.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { defaultTheme } from '@manifest-ui/themes';
+import ExternalLink from './ExternalLink';
+import { styled } from '@manifest-ui/styled';
+
+const StyledList = styled('p')({
+  color: defaultTheme.colors.emphasis.secondary,
+  fontSize: defaultTheme.fontSizes.small,
+  lineHeight: defaultTheme.fontSizes.medium,
+  m: 0,
+  py: defaultTheme.space[4],
+});
+
+const Sources = props => {
+  const { github, npm } = props;
+
+  return (
+    <StyledList>
+      <ExternalLink
+        href={`https://www.github.com/project44/manifest-ui/tree/main/packages/${github}`}
+        target="_blank"
+      >
+        View Source
+      </ExternalLink>
+      {' '}
+      {'|'}
+      {' '}
+      <ExternalLink
+        href={`https://www.npmjs.com/package/${npm}`}
+        target="_blank"
+      >
+        View on NPM
+      </ExternalLink>
+    </StyledList>
+  )
+}
+
+export default Sources;

.storybook/components/Story.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Canvas, Story as StorybookStory } from '@storybook/addon-docs';
 
 const Story = (props) => (
@@ -6,4 +7,4 @@ const Story = (props) => (
   </Canvas>
 );
 
-export default Story;
+export default Story;

.storybook/components/index.js

@@ -1,4 +1,6 @@
+export { default as ExternalLink } from './ExternalLink';
 export { default as Props } from './Props';
+export { default as Sources } from './Sources';
 export { default as Story } from './Story';
 
-export { Meta } from '@storybook/addon-docs';
+export { ArgsTable, Meta } from '@storybook/addon-docs';

.storybook/main.js

@@ -3,13 +3,10 @@ const path = require('path');
 const toPath = _path => path.join(process.cwd(), _path);
 
 module.exports = {
-  stories: ['../packages/Welcome.stories.tsx', '../packages/**/*.stories.@(js|ts|tsx)'],
+  stories: ['../packages/**/*.stories.mdx', '../docs/**/*.stories.mdx'],
   addons: [
-    '@storybook/addon-storysource',
-    '@storybook/addon-controls',
-    '@storybook/addon-actions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-viewport'
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y'
   ],
   features: {
     postcss: false,
@@ -31,4 +28,4 @@ module.exports = {
       },
     };
   },
-};
+};

.storybook/manager.js

@@ -1,10 +1,4 @@
 import { addons } from '@storybook/addons';
 import theme from './theme.js';
 
-addons.setConfig({
-  isFullscreen: false,
-  showPanel: true,
-  panelPosition: 'bottom',
-  isToolshown: true,
-  theme: theme,
-});
+addons.setConfig({ theme });

.storybook/preview-head.html

@@ -0,0 +1,50 @@
+<style type="text/css">
+  .sbdocs-wrapper .sbdocs-h1 {
+    font-size: 2rem;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    line-height: 2.5rem;
+    margin-bottom: 0;
+    padding-bottom: 16px;
+  }
+
+  .sbdocs-wrapper .sbdocs-h2 {
+    font-weight: 400;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+  }
+
+
+  .sbdocs-wrapper .sbdocs-h2:first-of-type {
+    padding-top: 24px;
+  }
+
+  .sbdocs-wrapper .sbdocs-h3 {
+    font-weight: 400;
+    margin-bottom: 0;
+    padding-bottom: 8px;
+  }
+
+  .sbdocs-wrapper .sbdocs-preview {
+    border: 1px solid #D5D7D9;
+    border-radius: 4px;
+    box-shadow: none;
+    margin: 24px 0 32px;
+  }
+
+  .sbdocs-wrapper .docblock-source {
+    border: 1px solid #D5D7D9;
+    border-radius: 4px;
+    box-shadow: none;
+    margin: 24px 0 32px;
+  }
+
+  .docblock-argstable-head th, .docblock-argstable-body td {
+    border-bottom: 1px solid #D5D7D9 !important;
+  }
+
+  .docblock-argstable .docblock-argstable-body {
+    border: none !important;
+    box-shadow: none !important;
+  }
+</style>

.storybook/preview.tsx

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
 import { Provider } from '@manifest-ui/provider';
 import { Story } from '@storybook/react';
+import theme from './theme';
 
 export const decorators = [
   (StoryFn: Story) => (
@@ -10,14 +11,19 @@ export const decorators = [
   ),
 ];
 
-
 export const parameters = {
-  viewMode: 'story',
   actions: { argTypesRegex: '^on.*' },
+  docs: {
+    theme,
+    container: DocsContainer,
+    page: DocsPage,
+  },
   options: {
     storySort: {
       method: 'alphabetical',
       order: ['Welcome', 'Components'],
     },
   },
+  previewTabs: { 'storybook/docs/panel': { index: -1 } },
+  viewMode: 'docs',
 };

.storybook/theme.js

@@ -3,7 +3,7 @@ import { defaultTheme } from '@manifest-ui/themes';
 
 const blue = defaultTheme.colors.primary[500];
 const white = defaultTheme.colors.white;
-const black = defaultTheme.colors.black;
+const text = defaultTheme.colors.emphasis.primary;
 
 export default create({
   base: 'light',
@@ -22,20 +22,20 @@ export default create({
   fontCode: defaultTheme.fonts.mono,
 
   // Text colors
-  textColor: black,
+  textColor: text,
   textInverseColor: white,
 
   // Toolbar default and active colors
-  barTextColor: black,
+  barTextColor: text,
   barSelectedColor: blue,
 
   // Form colors
   inputBorder: white,
-  inputTextColor: black,
+  inputTextColor: text,
   inputBorderRadius: defaultTheme.radii.medium,
 
   //branding
   brandTitle: 'Manifest UI',
   brandUrl: 'https://p44design.systems',
   brandImage: 'manifest.png',
-});
+});

docs/Welcome.stories.mdx

@@ -0,0 +1,19 @@
+import { ExternalLink, Meta } from '../.storybook/components';
+
+<Meta title="Welcome" />
+
+<p style={{ fontWeight: 500, letterSpacing: '0.04em', lineHeight: '16px', margin: 0 }}>
+  THE PROJECT44 DESIGN SYSTEM
+</p>
+
+# Welcome to Manifest UI
+
+<p style={{ margin: 0 }}>
+  This is the developer Storybook of Manifest UI. Here you can interact with the system components
+  directly.
+</p>
+
+<p style={{ margin: 0 }}>
+  To learn more about how to use components, usage, and design guidelines head over to the{' '}
+  <ExternalLink href="https://p44design.systems">Design Systems Website</ExternalLink>.
+</p>

package.json

@@ -60,15 +60,12 @@
     "@commitlint/config-conventional": "^16.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@storybook/addon-a11y": "^6.4.14",
-    "@storybook/addon-actions": "^6.4.14",
-    "@storybook/addon-controls": "^6.4.14",
-    "@storybook/addon-docs": "^6.4.14",
-    "@storybook/addon-storysource": "^6.4.14",
-    "@storybook/addon-viewport": "^6.4.14",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.4.14",
-    "@storybook/source-loader": "^6.4.14",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/theming": "^6.4.19",
     "@testing-library/dom": "^8.11.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",