feat: syntahighlighter and markdown code format

ui/block-components/package.json

@@ -37,7 +37,6 @@
     "global": "^4.3.2",
     "js-string-escape": "^1.0.1",
     "polished": "^3.4.4",
-    "prism-react-renderer": "^1.0.2",
     "qs": "^6.9.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",

ui/block-components/src/StorySource/TaggedSource.tsx

@@ -8,7 +8,7 @@ import {
 } from '@component-controls/specification';
 import { Styled } from 'theme-ui';
 import { transparentize } from 'polished';
-import { Source, SourceProps } from '../Source';
+import { Source, SourceProps } from '@component-controls/components';
 
 interface ArgumentLocations {
   name: string;
@@ -73,7 +73,7 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
         return (
           <Styled.pre
             className={`${className}`}
-            style={{ ...style, padding: '26px 10px 10px', margin: 0 }}
+            style={{ ...style, padding: '16px 10px 10px', margin: 0 }}
           >
             {tokens.map((line, i: number) => (
               <div {...getLineProps({ line, key: i })}>

ui/block-components/src/index.ts

@@ -1,3 +1,2 @@
 export * from './ControlsTable';
 export * from './StorySource';
-export * from './Source';

ui/block-components/tsconfig.json

@@ -8,6 +8,6 @@
     "types": ["node", "jest"],
     "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
   },
-  "include": ["src/**/*", "src/typings.d.ts"],
+  "include": ["src/**/*", "src/typings.d.ts", "../components/Source"],
   "exclude": ["node_modules/**"]
 }

ui/blocks/src/ComponentSource/ComponentSource.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 import { ActionItem } from '@component-controls/components';
+import { useControlsContext, StoryInputProps } from '../BlocksContext';
 import {
+  ThemeContext,
   Source as SourceBlock,
   SourceProps,
-} from '@component-controls/block-components';
-import { useControlsContext, StoryInputProps } from '../BlocksContext';
-import { ThemeContext } from '@component-controls/components';
+} from '@component-controls/components';
 import { repositoryActions } from '../utils/repositoryActions';
 
 export type ComponentSourceProps = StoryInputProps & SourceProps;

ui/blocks/src/StorySource/StorySource.tsx

@@ -3,8 +3,8 @@ import {
   StorySource as BaseStorySource,
   StorySourceProps as BaseStorySourceProps,
 } from '@component-controls/block-components';
-import { useControlsContext, StoryInputProps } from '../BlocksContext';
 import { ThemeContext } from '@component-controls/components';
+import { useControlsContext, StoryInputProps } from '../BlocksContext';
 import { repositoryActions } from '../utils/repositoryActions';
 
 export type StorySourceProps = StoryInputProps & BaseStorySourceProps;

ui/components/package.json

@@ -29,9 +29,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@mdx-js/react": "^1.5.7",
     "@primer/octicons-react": "^9.5.0",
+    "copy-to-clipboard": "^3.2.1",
     "markdown-to-jsx": "^6.11.0",
+    "prism-react-renderer": "^1.0.2",
     "react": "^16.8.3",
     "react-animate-height": "^2.0.20",
     "react-dom": "^16.8.3",

ui/components/src/Markdown/Markdown.stories.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import { Markdown } from './Markdown';
+import { ThemeProvider } from '../ThemeContext';
 
 export default {
   title: 'Components/Markdown',
   component: Markdown,
 };
 
 export const simple = () => (
-  <Markdown>{`
+  <ThemeProvider>
+    <Markdown>{`
 # Header H1
 ## Header H2
 ### Header H3
 #### Header H4
 ##### Header H5
 
 some text 
+
+\`@theme-ui\`    
 `}</Markdown>
+  </ThemeProvider>
 );

ui/components/src/Markdown/Markdown.tsx

@@ -1,14 +1,28 @@
 /* eslint-disable react/display-name */
 import React, { FC } from 'react';
-import MarkdownToJSX from 'markdown-to-jsx';
-import { MDXProvider, Components } from '@mdx-js/react';
+import MarkdownToJSX, { MarkdownOptions } from 'markdown-to-jsx';
+import { SyntaxHighlighter } from '../SyntaxHighlighter';
 
 export interface MarkdownProps {
   children: string;
-  components?: Components;
+  components?: MarkdownOptions['overrides'];
 }
+
+const defaultComponents: MarkdownOptions['overrides'] = {
+  code: SyntaxHighlighter,
+};
+
+/**
+ * MDX display component that works at run time
+ * uses `markdown-to-jsx` to compile MDX
+ */
 export const Markdown: FC<MarkdownProps> = ({ children, components }) => (
-  <MDXProvider components={components}>
-    <MarkdownToJSX>{children}</MarkdownToJSX>
-  </MDXProvider>
+  <MarkdownToJSX
+    options={{
+      forceBlock: true,
+      overrides: { ...defaultComponents, ...components },
+    }}
+  >
+    {children}
+  </MarkdownToJSX>
 );

ui/block-components/src/Source/Source.stories.tsx → ui/components/src/Source/Source.stories.tsx

@@ -3,7 +3,7 @@ import shadesOfPurple from 'prism-react-renderer/themes/shadesOfPurple';
 import { Source, SourceProps } from './Source';
 
 export default {
-  title: 'Blocks/Components/Source',
+  title: 'Components/Source',
   component: Source,
 };
 

ui/components/src/Source/Source.tsx

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+/* eslint react/jsx-key: 0 */
+import { jsx } from 'theme-ui';
+import React, { FC, MouseEvent } from 'react';
+import copy from 'copy-to-clipboard';
+import {
+  SyntaxHighlighter,
+  SyntaxHighlighterProps,
+} from '../SyntaxHighlighter';
+import { BlockContainer, BlockContainerProps } from '../BlockContainer';
+
+export type SourceProps = SyntaxHighlighterProps & BlockContainerProps;
+/**
+ * Source component used to display source code
+ *
+ */
+export const Source: FC<SourceProps> = ({
+  children = '',
+  actions,
+  title,
+  as = 'div',
+  ...props
+}) => {
+  const [copied, setCopied] = React.useState(false);
+  const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setCopied(true);
+    copy(children as string);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+
+  const actionsItems = Array.isArray(actions) ? [...actions] : [];
+
+  actionsItems.push({ title: copied ? 'copied' : 'copy', onClick: onCopy });
+  return (
+    <BlockContainer actions={actionsItems} title={title}>
+      <SyntaxHighlighter
+        as={as}
+        {...props}
+        style={{
+          padding: '16px 10px 10px',
+          display: 'block',
+        }}
+      >
+        {children}
+      </SyntaxHighlighter>
+    </BlockContainer>
+  );
+};

ui/components/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import shadesOfPurple from 'prism-react-renderer/themes/shadesOfPurple';
+import { SyntaxHighlighter, SyntaxHighlighterProps } from './SyntaxHighlighter';
+
+export default {
+  title: 'Components/SyntaxHighlighter',
+  component: SyntaxHighlighter,
+};
+
+const source = `import { Button } from 'theme-ui';`;
+export const simpleSource = ({ children, dark }: SyntaxHighlighterProps) => {
+  return <SyntaxHighlighter dark={dark}>{children}</SyntaxHighlighter>;
+};
+
+simpleSource.story = {
+  parameters: {
+    controls: {
+      children: {
+        type: 'text',
+        rows: 10,
+        value: source,
+        data: null,
+      },
+      dark: { type: 'boolean' },
+    },
+  },
+};
+
+export const theme = () => (
+  <SyntaxHighlighter theme={shadesOfPurple}>{source}</SyntaxHighlighter>
+);

ui/block-components/src/Source/Source.tsx → ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
 import { jsx } from 'theme-ui';
-import React, { FC, MouseEvent } from 'react';
-import { Styled } from 'theme-ui';
-import copy from 'copy-to-clipboard';
+import React, { FC } from 'react';
+import { Styled, Box } from 'theme-ui';
 import Highlight, {
   defaultProps,
   PrismTheme,
@@ -12,18 +11,13 @@ import Highlight, {
 import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
 import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
 
-import {
-  BlockContainer,
-  BlockContainerProps,
-} from '@component-controls/components';
-
 type RenderProps = Parameters<Highlight['props']['children']>[0];
 
-export interface SourceOwnProps {
+export interface SyntaxHighlighterProps {
   /**
-   * source code to display
+   * source code to be displayed
    */
-  children?: string;
+  children: React.ReactNode;
   /**
    * optional theme provided to the component
    */
@@ -43,61 +37,68 @@ export interface SourceOwnProps {
    * used to specify a "dark" color theme - applcable only if no custom theme prop is provided
    */
   dark?: boolean;
+
+  /**
+   * css styles for the container
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * syntax container as element
+   */
+  as?: React.ElementType;
 }
 
-export type SourceProps = SourceOwnProps & BlockContainerProps;
 /**
- * Source component used to display source code
- *
+ * Syntax highlighter component
  */
-export const Source: FC<SourceProps> = ({
+export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
   children = '',
   language = 'jsx',
   theme: customTheme,
   renderFn,
-  actions,
   dark = false,
-  title,
+  style: propStyle,
+  as = 'span',
 }) => {
-  const [copied, setCopied] = React.useState(false);
-  const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setCopied(true);
-    copy(children);
-    window.setTimeout(() => setCopied(false), 1500);
-  };
-
-  const actionsItems = Array.isArray(actions) ? [...actions] : [];
+  if (typeof children !== 'string') {
+    console.error(
+      'Invalid children roperty passed to Source: must be a string',
+    );
+  }
 
-  actionsItems.push({ title: copied ? 'copied' : 'copy', onClick: onCopy });
   const theme = customTheme ? customTheme : dark ? duotoneDark : duotoneLight;
   const renderProps =
     typeof renderFn === 'function'
       ? (props: RenderProps) => renderFn(props, { theme })
       : ({ className, style, tokens, getLineProps, getTokenProps }: any) => (
           <Styled.pre
             className={`${className}`}
-            style={{ ...style, padding: '26px 10px 10px', margin: 0 }}
+            style={{
+              ...style,
+              padding: '3px 5px',
+              display: 'inline',
+              margin: 0,
+              ...propStyle,
+            }}
           >
             {tokens.map((line: string[], i: number) => (
-              <div {...getLineProps({ line, key: i })}>
+              <Box as={as} {...getLineProps({ line, key: i })}>
                 {line.map((token, key) => (
                   <span
                     {...getTokenProps({ token, key })}
                     sx={{ display: 'inline-block' }}
                   />
                 ))}
-              </div>
+              </Box>
             ))}
           </Styled.pre>
         );
   const props = { ...defaultProps, theme };
 
   return (
-    <BlockContainer actions={actionsItems} title={title}>
-      <Highlight {...props} code={children} language={language}>
-        {renderProps}
-      </Highlight>
-    </BlockContainer>
+    <Highlight {...props} code={children as string} language={language}>
+      {renderProps}
+    </Highlight>
   );
 };

ui/components/src/SyntaxHighlighter/index.ts

@@ -0,0 +1 @@
+export * from './SyntaxHighlighter';

ui/components/src/index.ts

@@ -5,6 +5,7 @@ export * from './ExternalLink';
 export * from './FlexContainer';
 export * from './Markdown';
 export * from './Popover';
+export * from './Source';
 export * from './Subtitle';
 export * from './Tabs';
 export * from './ThemeContext';