feat: source stories

core/editors/src/blocks/Source/Source.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Source, SourceProps, themes } from './Source';
+
+export default {
+  title: 'Components/Source',
+  component: Source,
+};
+
+export const simpleSource = ({ language, children, theme }: SourceProps) => {
+  return (
+    <Source language={language} theme={theme}>
+      {children}
+    </Source>
+  );
+};
+
+const languages: string[] = [
+  'markup',
+  'bash',
+  'clike',
+  'c',
+  'cpp',
+  'css',
+  'javascript',
+  'jsx',
+  'coffeescript',
+  'actionscript',
+  'css-extr',
+  'diff',
+  'git',
+  'go',
+  'graphql',
+  'handlebars',
+  'json',
+  'less',
+  'makefile',
+  'markdown',
+  'objectivec',
+  'ocaml',
+  'python',
+  'reason',
+  'sass',
+  'scss',
+  'sql',
+  'stylus',
+  'tsx',
+  'typescript',
+  'wasm',
+  'yaml',
+];
+
+simpleSource.story = {
+  parameters: {
+    controls: {
+      language: { type: 'options', options: languages, value: 'jsx' },
+      children: {
+        type: 'text',
+        rows: 10,
+        value: `
+export const sample = () => {
+  const [state, setState] = React.useState(false);
+  return (
+    <BooleanEditor
+      name="prop"
+      onChange={(name, newVal) => setState(newVal)}
+      prop={{ type: ControlTypes.BOOLEAN, value: state }}
+    />
+  );
+};      
+      `,
+      },
+      theme: { type: 'options', options: Object.keys(themes) },
+    },
+  },
+};

core/editors/src/blocks/Source/Source.tsx

@@ -21,8 +21,20 @@ import copy from 'copy-to-clipboard';
 import { ActionBar } from '../../components/ActionBar/ActionBar';
 import { BlockContainer } from '../BlockContainer/BlockContainer';
 
-const themes: {
-  [key: string]: PrismTheme;
+export type ThemeType =
+  | 'nightowl-light'
+  | 'nightowl'
+  | 'github'
+  | 'vs-dark'
+  | 'oceanic-next'
+  | 'palenight'
+  | 'ultramin'
+  | 'duotone-light'
+  | 'duotone-dark'
+  | 'dracula'
+  | 'shades-of-purple';
+export const themes: {
+  [key in ThemeType]: PrismTheme;
 } = {
   'nightowl-light': nightOwlLight,
   nightowl,
@@ -39,21 +51,30 @@ const themes: {
 export interface SourceProps {
   children?: string;
   language?: Language;
+  /**
+   * prism theme passed from parent
+   * if the theme is selected in the parent, the Source
+   * componnet will not have a thmme selection option
+   */
+  theme?: ThemeType;
 }
 
 export const Source: FC<SourceProps> = ({
   children = '',
   language = 'jsx',
+  theme: parentTheme,
 }) => {
-  const [themeName, setThemeName] = React.useState<string>('nightowl-light');
+  const [themeName, setThemeName] = React.useState<ThemeType>(
+    parentTheme || 'nightowl-light',
+  );
   let prismTheme = themes[themeName] || defaultProps.theme;
   const [copied, setCopied] = React.useState(false);
 
   const onRotateTheme = () => {
     const themeKeys = Object.keys(themes);
     const themeIdx = themeKeys.indexOf(themeName);
     const newIdx = themeIdx >= themeKeys.length - 1 ? 0 : themeIdx + 1;
-    setThemeName(themeKeys[newIdx]);
+    setThemeName(themeKeys[newIdx] as ThemeType);
   };
 
   const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
@@ -62,12 +83,18 @@ export const Source: FC<SourceProps> = ({
     copy(children);
     window.setTimeout(() => setCopied(false), 1500);
   };
+
+  const actions = [];
+  if (parentTheme === undefined) {
+    actions.push({ title: themeName, onClick: onRotateTheme });
+  }
+  actions.push({ title: copied ? 'Copied' : 'Copy', onClick: onCopy });
   return (
     <BlockContainer>
       <Highlight
         {...defaultProps}
         theme={prismTheme}
-        code={typeof children === 'string' ? children.trim() : ''}
+        code={typeof children === 'string' ? children : ''}
         language={language}
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
@@ -88,12 +115,7 @@ export const Source: FC<SourceProps> = ({
           </Styled.pre>
         )}
       </Highlight>
-      <ActionBar
-        actionItems={[
-          { title: themeName, onClick: onRotateTheme },
-          { title: copied ? 'Copied' : 'Copy', onClick: onCopy },
-        ]}
-      />
+      <ActionBar actionItems={actions} />
     </BlockContainer>
   );
 };

core/editors/src/editors/OptionsEditor/utils.ts

@@ -42,13 +42,19 @@ export const normalizeOptions = (
     entries = options.reduce((acc: NormalizedOptions, o) => {
       return [...acc, findLabelOption(null, o)];
     }, []) as NormalizedOptions;
-  } else {
+  } else if (typeof options === 'object') {
     entries = Object.keys(options).reduce(
       (acc: NormalizedOptions, key: string) => {
         return [...acc, findLabelOption(key, options[key])];
       },
       [],
     );
+  } else {
+    console.error('invalid options parameter passed to controls');
+    return {
+      entries: [],
+      selected: [],
+    };
   }
   const selected = entries
     .filter(option => {

integrations/storybook/src/blocks/ControlsEditorsTable.tsx

@@ -55,7 +55,7 @@ const ControlsEditorsTableBlock: FC<ControlsEditorsTableProps> = ({
                 }
               }
             };
-      if (!story || controls.disable) {
+      if (!story || !controls || controls.disable) {
         return null;
       }