feat: source component props

ccontrols · Feb 27, 2020 · 7dfe0ca · 7dfe0ca
1 parent d8a8231
commit 7dfe0ca
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 60 deletions.
diff --git a/blocks/core/src/ActionBar/ActionBar.tsx b/blocks/core/src/ActionBar/ActionBar.tsx
@@ -67,18 +67,19 @@ export interface ActionItem {
 
 export interface ActionBarProps {
   actionItems: ActionItem[];
-  zIndex?: number;
 }
 
 export const ActionBar: FunctionComponent<ActionBarProps> = ({
   actionItems,
-  zIndex,
   ...props
 }) => (
-  <Container zIndex={zIndex} {...props}>
+  <Container {...props}>
     {actionItems.map(({ title, onClick, disabled }, index: number) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <ActionButton key={index} onClick={onClick} disabled={disabled}>
+      <ActionButton
+        key={`${typeof title === 'string' ? title : 'item'}_${index}`}
+        onClick={onClick}
+        disabled={disabled}
+      >
         {title}
       </ActionButton>
     ))}

diff --git a/blocks/core/src/Source/Source.stories.tsx b/blocks/core/src/Source/Source.stories.tsx
@@ -6,8 +6,8 @@ export default {
   component: Source,
 };
 
-export const simpleSource = ({ language, source }: SourceProps) => {
-  return <Source language={language} source={source} />;
+export const simpleSource = ({ language, source, dark }: SourceProps) => {
+  return <Source language={language} source={source} dark={dark} />;
 };
 
 const languages: string[] = [
@@ -49,6 +49,7 @@ simpleSource.story = {
   parameters: {
     controls: {
       language: { type: 'options', options: languages, value: 'jsx' },
+      dark: { type: 'boolean' },
       source: {
         type: 'text',
         rows: 10,

diff --git a/blocks/core/src/Source/Source.tsx b/blocks/core/src/Source/Source.tsx
@@ -1,27 +1,72 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
 import { jsx } from 'theme-ui';
-import React from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { Styled } from 'theme-ui';
+import copy from 'copy-to-clipboard';
 import Highlight, {
   defaultProps,
   PrismTheme,
   Language,
 } from 'prism-react-renderer';
+import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
+import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
+
+import { BlockContainer } from '../BlockContainer';
+import { ActionBar, ActionItem } from '../ActionBar';
 
 export interface SourceProps {
+  /**
+   * source code to display
+   */
   source: string;
+  /**
+   * optional theme provided to the component
+   */
   theme?: PrismTheme;
+  /**
+   * code lnguage used, by default "jsx"
+   */
   language?: Language;
+  /**
+   * custom function to render the source code
+   */
   children?: (props: any) => React.ReactNode;
+  /**
+   * additional actions provided to the component
+   */
+  actions?: ActionItem[];
+  /**
+   * used to specify a "dark" color theme - applcable only if no custom theme prop is provided
+   */
+  dark?: boolean;
 }
-export const Source: React.FC<SourceProps> = ({
+
+/**
+ * Source component used to display source code
+ *
+ */
+export const Source: FC<SourceProps> = ({
   source = '',
   language = 'jsx',
   theme,
   children,
+  actions,
+  dark = false,
 }) => {
-  console.log(source);
+  const [copied, setCopied] = React.useState(false);
+
+  const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setCopied(true);
+    copy(source);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+
+  const actionsItems = actions || [];
+
+  actionsItems.push({ title: copied ? 'copied' : 'copy', onClick: onCopy });
+
   const renderProps =
     typeof children === 'function'
       ? children
@@ -42,12 +87,19 @@ export const Source: React.FC<SourceProps> = ({
             ))}
           </Styled.pre>
         );
+  const props = { ...defaultProps };
   if (theme) {
-    defaultProps.theme = theme;
+    props.theme = theme;
+  } else {
+    props.theme = dark ? duotoneDark : duotoneLight;
   }
+
   return (
-    <Highlight {...defaultProps} code={source} language={language}>
-      {renderProps}
-    </Highlight>
+    <BlockContainer>
+      <Highlight {...props} code={source} language={language}>
+        {renderProps}
+      </Highlight>
+      <ActionBar actionItems={actionsItems} />
+    </BlockContainer>
   );
 };
diff --git a/blocks/core/src/StorySource/StorySource.tsx b/blocks/core/src/StorySource/StorySource.tsx
@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { StoryArguments } from '@component-controls/specification';
 import { LoadedComponentControls } from '@component-controls/core';
 import { defaultProps, Language, PrismTheme } from 'prism-react-renderer';
@@ -14,9 +14,6 @@ import palenight from 'prism-react-renderer/themes/palenight';
 import shadesOfPurple from 'prism-react-renderer/themes/shadesOfPurple';
 import ultramin from 'prism-react-renderer/themes/ultramin';
 import vsDark from 'prism-react-renderer/themes/vsDark';
-import copy from 'copy-to-clipboard';
-import { ActionBar } from '../ActionBar';
-import { BlockContainer } from '../BlockContainer';
 import { mergeControlValues } from './argument-utils';
 import { TaggedSource } from './TaggedSource';
 export type ThemeType =
@@ -98,7 +95,6 @@ export const StorySource: FC<StorySourceProps> = ({
   const [showFileSource, setShowFileSource] = React.useState<boolean>(false);
 
   let prismTheme = themes[themeName] || defaultProps.theme;
-  const [copied, setCopied] = React.useState(false);
 
   const onRotateTheme = () => {
     const themeKeys = Object.keys(themes);
@@ -117,13 +113,6 @@ export const StorySource: FC<StorySourceProps> = ({
     );
   const onShowFileSource = () => setShowFileSource(!showFileSource);
 
-  const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setCopied(true);
-    copy(children);
-    window.setTimeout(() => setCopied(false), 1500);
-  };
-
   const actions = [];
   if (fileSource) {
     actions.push({
@@ -138,8 +127,6 @@ export const StorySource: FC<StorySourceProps> = ({
     actions.push({ title: viewStyle, onClick: onMergeValues });
   }
 
-  actions.push({ title: copied ? 'copied' : 'copy', onClick: onCopy });
-
   let source: string;
   if (!showFileSource) {
     let code = typeof children === 'string' ? children : '';
@@ -151,14 +138,12 @@ export const StorySource: FC<StorySourceProps> = ({
     source = fileSource || '';
   }
   return (
-    <BlockContainer>
-      <TaggedSource
-        args={viewStyle === 'tags' && !showFileSource ? args : undefined}
-        source={source}
-        theme={prismTheme}
-        language={language}
-      />
-      <ActionBar actionItems={actions} />
-    </BlockContainer>
+    <TaggedSource
+      args={viewStyle === 'tags' && !showFileSource ? args : undefined}
+      source={source}
+      theme={prismTheme}
+      language={language}
+      actions={actions}
+    />
   );
 };
diff --git a/blocks/core/src/StorySource/TaggedSource.tsx b/blocks/core/src/StorySource/TaggedSource.tsx
@@ -8,11 +8,7 @@ import {
 } from '@component-controls/specification';
 import { Styled } from 'theme-ui';
 import { transparentize } from 'polished';
-import Highlight, {
-  defaultProps,
-  PrismTheme,
-  Language,
-} from 'prism-react-renderer';
+import { Source, SourceProps } from '../Source';
 
 interface ArgumentLocations {
   name: string;
@@ -40,17 +36,14 @@ const getArgumentsLocations = (args: StoryArguments): ArgumentLocations[] => {
   }, []);
 };
 
-export interface TaggedSourceProps {
+export type TaggedSourceProps = SourceProps & {
   args?: StoryArguments;
-  source: string;
-  theme: PrismTheme;
-  language: Language;
-}
+};
+
 export const TaggedSource: React.FC<TaggedSourceProps> = ({
   args,
   theme,
-  source,
-  language,
+  ...rest
 }) => {
   const tags: (ArgumentLocations & { color?: string })[] | undefined = args
     ? getArgumentsLocations(args)
@@ -64,12 +57,7 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
     });
   }
   return (
-    <Highlight
-      {...defaultProps}
-      theme={theme}
-      code={source}
-      language={language}
-    >
+    <Source theme={theme} {...rest}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <Styled.pre
           className={`${className}`}
@@ -136,6 +124,6 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
           ))}
         </Styled.pre>
       )}
-    </Highlight>
+    </Source>
   );
 };
diff --git a/integrations/storybook/src/blocks/BlockContext.tsx b/integrations/storybook/src/blocks/BlockContext.tsx
@@ -102,7 +102,6 @@ export const useControlsContext = ({
   const myStory: Story = myStoryStore && myStoryStore.stories[previewId];
   const kindTitle = myStory.kind;
   const kind = kindTitle ? myStoryStore.kinds[kindTitle] : undefined;
-  console.log(kind.component);
   const source: string | undefined = myStory ? myStory.source : undefined;
   return {
     api,

diff --git a/integrations/storybook/src/blocks/ImportSource.tsx b/integrations/storybook/src/blocks/ImportSource.tsx
@@ -9,12 +9,10 @@ export type SourceProps = ControlsContextInputProps & {
 };
 
 export const ImportSource: FC<SourceProps> = ({ id, name }) => {
-  const all = useControlsContext({
+  const { component } = useControlsContext({
     id,
     name,
   });
-  const { component } = all;
-  console.log(all);
   return (
     <ThemeProvider>
       <SourceBlock