wip

Author: layershifter

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -13,7 +13,9 @@ import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/c
 import { babelConfig, importResolver } from 'docs/src/components/Playground/renderConfig'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
-import SourceManager, { SourceManagerRenderProps } from './SourceCodeManager'
+import SourceManager, {
+  SourceManagerRenderProps,
+} from '../ComponentSourceManager/ComponentSourceManager'
 import { ThemeInput, ThemePrepared } from 'src/themes/types'
 import { mergeThemeVariables } from '../../../../../src/lib/mergeThemes'
 import { ThemeContext } from '../../../context/theme-context'
@@ -287,20 +289,29 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   }
 
   handleCodeLanguageChange = language => () => {
-    this.props.handleCodeLanguageChange(language)
+    const { handleCodeLanguageChange, wasCodeChanged } = this.props
+
+    if (wasCodeChanged) {
+      if (confirm('Lose your changes?')) {
+        handleCodeLanguageChange(language)
+      }
+    } else {
+      handleCodeLanguageChange(language)
+    }
   }
 
   renderAPIsMenu = (): JSX.Element => {
-    const menuItems = _.map(this.props.codeAPIs, ({ active, enabled, name }, type) => (
+    const { componentAPIs, currentCodeAPI } = this.props
+    const menuItems = _.map(componentAPIs, ({ name, supported }, type) => (
       <Menu.Item
-        active={active}
+        active={currentCodeAPI === type}
         content={
           <span>
             {name}
-            {enabled && <em> (not supported)</em>}
+            {!supported && <em> (not supported)</em>}
           </span>
         }
-        disabled={!enabled}
+        disabled={!supported}
         key={type}
         onClick={this.handleCodeApiChange(type)}
       />
@@ -310,17 +321,17 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   }
 
   renderLanguagesMenu = (): JSX.Element => {
-    const { currentLanguage } = this.props
+    const { currentCodeLanguage } = this.props
 
     return (
       <Menu.Menu position="right">
         <Menu.Item
-          active={currentLanguage === 'js'}
+          active={currentCodeLanguage === 'js'}
           content="JavaScript"
           onClick={this.handleCodeLanguageChange('js')}
         />
         <Menu.Item
-          active={currentLanguage === 'ts'}
+          active={currentCodeLanguage === 'ts'}
           content="TypeScript"
           onClick={this.handleCodeLanguageChange('ts')}
         />
@@ -329,7 +340,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   }
 
   renderCodeEditorMenu = (): JSX.Element => {
-    const { canBeFormatted, handleCodeFormat, wasChanged } = this.props
+    const { canCodeBeFormatted, handleCodeFormat, wasCodeChanged } = this.props
     const { copiedCode } = this.state
 
     // TODO: !!!!
@@ -350,17 +361,17 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
         <SourceRender.Consumer>
           {({ error }) => (
             <Menu.Item
-              icon={(error && 'bug') || (canBeFormatted ? 'magic' : 'check')}
+              icon={(error && 'bug') || (canCodeBeFormatted ? 'magic' : 'check')}
               color={error ? 'red' : undefined}
               active={error}
               content="Prettier"
               onClick={handleCodeFormat}
-              style={!canBeFormatted ? disabledStyle : undefined}
+              style={!canCodeBeFormatted ? disabledStyle : undefined}
             />
           )}
         </SourceRender.Consumer>
         <Menu.Item
-          style={!wasChanged ? disabledStyle : undefined}
+          style={!wasCodeChanged ? disabledStyle : undefined}
           icon="refresh"
           content="Reset"
           onClick={this.resetSourceCode}

docs/src/components/ComponentDoc/ComponentExample/index.tsx

@@ -1,2 +1 @@
-export { codeAPIs } from './SourceCodeManager'
 export { default, ComponentExampleProps } from './ComponentExample'

docs/src/components/ComponentDoc/ComponentExamples.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 
 import { exampleGroupsContext, exampleSourcesContext } from 'docs/src/utils'
 import { Grid, List } from 'semantic-ui-react'
-import { codeAPIs } from './ComponentExample'
+import { componentAPIs } from './ComponentSourceManager'
 import ContributionPrompt from './ContributionPrompt'
 
 interface ComponentExamplesProps {
@@ -84,8 +84,8 @@ export default class ComponentExamples extends React.Component<ComponentExamples
     const examplesPattern = `\.\/${displayName}[\\w\/]*\/\\w+Example`
 
     const [shorthandExtension, normalExtension] = [
-      codeAPIs.shorthand.fileSuffix,
-      codeAPIs.children.fileSuffix,
+      componentAPIs.shorthand.fileSuffix,
+      componentAPIs.children.fileSuffix,
     ].map(pattern => `${pattern}.source.json`)
 
     const [normalRegExp, shorthandRegExp] = [normalExtension, shorthandExtension].map(

docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts renamed to docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts

@@ -1,23 +1,13 @@
+import * as _ from 'lodash'
 import * as React from 'react'
-import { exampleSourcesContext } from '../../../utils'
+
 import { ExampleSource } from '../../../types'
 import { safeFormatCode } from '../../../utils/formatCode'
-
-type SourceManagerCodeAPI = {
-  name: string
-  fileSuffix: string
-
-  active?: boolean
-  enabled?: boolean
-}
-
-type SourceManagerCodeAPIs = {
-  children: SourceManagerCodeAPI
-  shorthand: SourceManagerCodeAPI
-}
+import { componentAPIs as APIdefinitions, ComponentAPIs } from './componentAPIs'
+import getExampleSource from './getExampeSource'
 
 export type SourceManagerRenderProps = SourceManagerState & {
-  handleCodeAPIChange: (newApi: keyof SourceManagerCodeAPIs) => void
+  handleCodeAPIChange: (newApi: keyof ComponentAPIs) => void
   handleCodeChange: (newCode: string) => void
   handleCodeFormat: () => void
   handleCodeLanguageChange: (newLanguage: SourceManagerLanguage) => void
@@ -31,67 +21,76 @@ export type SourceManagerProps = {
   children: (renderProps: SourceManagerRenderProps) => React.ReactNode
 }
 
+type StateManagerComponentAPIs = ComponentAPIs<{
+  sourceCode: ExampleSource | undefined
+  supported: boolean
+}>
+
 export type SourceManagerState = {
-  currentLanguage: SourceManagerLanguage
-  currentAPI: keyof SourceManagerCodeAPIs
+  currentCodeLanguage: SourceManagerLanguage
+  currentCodeAPI: keyof ComponentAPIs
 
-  codeAPIs: SourceManagerCodeAPIs
+  componentAPIs: StateManagerComponentAPIs
   currentCode?: string
   formattedCode?: string
   originalCode?: string
 
-  canBeFormatted: boolean
-  wasChanged: boolean
-}
-
-export const codeAPIs: SourceManagerCodeAPIs = {
-  children: { name: 'Children API', fileSuffix: '' },
-  shorthand: { name: 'Shorthand API', fileSuffix: '.shorthand' },
+  canCodeBeFormatted: boolean
+  wasCodeChanged: boolean
 }
 
 export class SourceManager extends React.Component<SourceManagerProps, SourceManagerState> {
-  state = {
-    currentLanguage: 'js' as SourceManagerLanguage,
-    currentAPI: 'children' as keyof SourceManagerCodeAPIs,
-
-    codeAPIs,
-
-    canBeFormatted: false,
-    wasChanged: false,
+  constructor(props: SourceManagerProps) {
+    super(props)
+
+    const componentAPIs = _.mapValues(APIdefinitions, (definition, name: keyof ComponentAPIs) => {
+      const sourceCode = getExampleSource(props.examplePath, name)
+
+      return {
+        ...definition,
+        sourceCode,
+        supported: !!sourceCode,
+      }
+    }) as StateManagerComponentAPIs
+
+    this.state = {
+      currentCodeLanguage: 'js' as SourceManagerLanguage,
+      currentCodeAPI: _.findKey(componentAPIs, { supported: true }) as keyof ComponentAPIs,
+
+      componentAPIs,
+      canCodeBeFormatted: false,
+      wasCodeChanged: false,
+    }
   }
 
   static getDerivedStateFromProps(
     props: SourceManagerProps,
     state: SourceManagerState,
   ): Partial<SourceManagerState> {
-    const { examplePath } = props
-    const { currentAPI, currentLanguage, currentCode } = state
+    const { componentAPIs, currentCodeAPI, currentCodeLanguage, currentCode: storedCode } = state
 
-    const sourcePath = `${examplePath.replace(/^components/, '.')}${
-      codeAPIs[currentAPI].fileSuffix
-    }.source.json`
-    const sourceCode: ExampleSource = exampleSourcesContext(sourcePath)
+    const sourceCodes = componentAPIs[currentCodeAPI].sourceCode
+    const originalCode = sourceCodes[currentCodeLanguage]
 
-    const originalCode = sourceCode[currentLanguage]
-    const currentCode1 = currentCode || originalCode
+    const currentCode = storedCode || originalCode
     const formattedCode = safeFormatCode(
-      currentCode1,
-      currentLanguage === 'ts' ? 'typescript' : 'babylon',
+      currentCode,
+      currentCodeLanguage === 'ts' ? 'typescript' : 'babylon',
     )
 
     return {
       originalCode,
-      currentCode: currentCode1,
+      currentCode,
       formattedCode,
 
-      canBeFormatted: !!formattedCode ? currentCode1 !== formattedCode : false,
-      wasChanged: originalCode !== currentCode1,
+      canCodeBeFormatted: !!formattedCode ? currentCode !== formattedCode : false,
+      wasCodeChanged: originalCode !== currentCode,
     }
   }
 
-  handleCodeAPIChange = (newAPI: keyof SourceManagerCodeAPIs): void => {
+  handleCodeAPIChange = (newAPI: keyof ComponentAPIs): void => {
     this.setState({
-      currentAPI: newAPI,
+      currentCodeAPI: newAPI,
       currentCode: undefined,
     })
   }
@@ -110,7 +109,7 @@ export class SourceManager extends React.Component<SourceManagerProps, SourceMan
 
   handleLanguageChange = (newLanguage: SourceManagerLanguage): void => {
     this.setState({
-      currentLanguage: newLanguage,
+      currentCodeLanguage: newLanguage,
       currentCode: undefined,
     })
   }

docs/src/components/ComponentDoc/ComponentSourceManager/componentAPIs.ts

@@ -0,0 +1,14 @@
+export type ComponentAPI<T> = {
+  name: string
+  fileSuffix: string
+} & T
+
+export type ComponentAPIs<T = {}> = {
+  children: ComponentAPI<T>
+  shorthand: ComponentAPI<T>
+}
+
+export const componentAPIs: ComponentAPIs = {
+  children: { name: 'Children API', fileSuffix: '' },
+  shorthand: { name: 'Shorthand API', fileSuffix: '.shorthand' },
+}

docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts

@@ -0,0 +1,20 @@
+import { ExampleSource } from 'docs/src/types'
+import { exampleSourcesContext } from 'docs/src/utils'
+import { componentAPIs, ComponentAPIs } from './componentAPIs'
+
+const getExampleSource = (
+  examplePath: string,
+  componentAPI: keyof ComponentAPIs,
+): ExampleSource | undefined => {
+  const sourcePath = `${examplePath.replace(/^components/, '.')}${
+    componentAPIs[componentAPI].fileSuffix
+  }.source.json`
+
+  try {
+    return exampleSourcesContext(sourcePath)
+  } catch (e) {
+    return undefined
+  }
+}
+
+export default getExampleSource

docs/src/components/ComponentDoc/ComponentSourceManager/index.ts

@@ -0,0 +1,2 @@
+export * from './componentAPIs'
+export * from './ComponentSourceManager'