From e5fddd8c3d1b9ea0c55271743baa509f8492efce Mon Sep 17 00:00:00 2001 From: olfedias Date: Wed, 19 Dec 2018 13:02:15 +0100 Subject: [PATCH 01/12] docs(Examples): separate contexts, use sources to render dedicated examples --- .../ComponentExample/SourceCodeManager.ts | 6 ++-- .../ComponentDoc/ComponentExamples.tsx | 24 +++++++------- docs/src/components/ExternalExampleLayout.tsx | 32 +++++++++++++++---- docs/src/utils/exampleContext.ts | 11 ------- docs/src/utils/exampleContexts.ts | 13 ++++++++ docs/src/utils/exampleKebabNameToFilename.ts | 15 --------- .../utils/exampleKebabNameToSourceFilename.ts | 15 +++++++++ docs/src/utils/index.tsx | 4 +-- 8 files changed, 71 insertions(+), 49 deletions(-) delete mode 100644 docs/src/utils/exampleContext.ts create mode 100644 docs/src/utils/exampleContexts.ts delete mode 100644 docs/src/utils/exampleKebabNameToFilename.ts create mode 100644 docs/src/utils/exampleKebabNameToSourceFilename.ts diff --git a/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts b/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts index 3545893e2d..e0ff8f8c31 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts +++ b/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts @@ -1,3 +1,5 @@ +import { exampleSourcesContext } from '../../../utils' + interface SourceCodeData { path: string code: string @@ -84,9 +86,9 @@ class SourceCodeManager { private safeRequire = (path: string): string | undefined => { try { - const filename = `${path.replace(/^components\//, '')}.source.json` + const filename = `${path.replace(/^components\//, './')}.source.json` - return require(`!docs/src/exampleSources/${filename}`).js + return exampleSourcesContext(filename).js } catch (e) { return undefined } diff --git a/docs/src/components/ComponentDoc/ComponentExamples.tsx b/docs/src/components/ComponentDoc/ComponentExamples.tsx index 0c8231e9e1..b880b5bc68 100644 --- a/docs/src/components/ComponentDoc/ComponentExamples.tsx +++ b/docs/src/components/ComponentDoc/ComponentExamples.tsx @@ -2,7 +2,7 @@ import * as _ from 'lodash' import PropTypes from 'prop-types' import * as React from 'react' -import { exampleContext } from 'docs/src/utils' +import { exampleGroupsContext, exampleSourcesContext } from 'docs/src/utils' import { Grid, List } from 'semantic-ui-react' import { examplePathPatterns } from './ComponentExample' import ContributionPrompt from './ContributionPrompt' @@ -30,23 +30,22 @@ export default class ComponentExamples extends React.Component { const { displayName } = this.props - const allPaths = exampleContext.keys() // rule #1 - const indexPath = _.find(allPaths, path => + const indexPath = _.find(exampleGroupsContext.keys(), path => new RegExp(`\/${displayName}\/index\.tsx$`).test(path), ) if (!indexPath) { return null } - const ExamplesElement = React.createElement(exampleContext(indexPath).default) as any + const ExamplesElement = React.createElement(exampleGroupsContext(indexPath).default) as any if (!ExamplesElement) { return null } // rules #2 and #3 - const missingPaths = this.testExamplesStructure(displayName, allPaths) + const missingPaths = this.testExamplesStructure(displayName, exampleSourcesContext.keys()) return missingPaths && missingPaths.length ? (
{this.renderMissingShorthandExamples(missingPaths)} {ExamplesElement} @@ -82,23 +81,24 @@ export default class ComponentExamples extends React.Component `${pattern}.tsx`) + ].map(pattern => `${pattern}.source.json`) + const [normalRegExp, shorthandRegExp] = [normalExtension, shorthandExtension].map( extension => new RegExp(`${examplesPattern}\\w*${extension}$`), ) - const allExamplesPaths = allPaths.filter(path => allExamplesRegExp.test(path)) - const expectedShorthandExamples = allExamplesPaths + const expectedShorthandExamples = allPaths .filter(path => normalRegExp.test(path)) .map(path => path.replace(normalExtension, shorthandExtension)) - const actualShorthandExamples = allExamplesPaths.filter(path => shorthandRegExp.test(path)) + const actualShorthandExamples = allPaths.filter(path => shorthandRegExp.test(path)) - return _.difference(expectedShorthandExamples, actualShorthandExamples) + return _.difference(expectedShorthandExamples, actualShorthandExamples).map(exampleFile => + exampleFile.replace(/\.source\.json$/, '.tsx'), + ) } } diff --git a/docs/src/components/ExternalExampleLayout.tsx b/docs/src/components/ExternalExampleLayout.tsx index 082b9e8f84..7e33e1590f 100644 --- a/docs/src/components/ExternalExampleLayout.tsx +++ b/docs/src/components/ExternalExampleLayout.tsx @@ -1,11 +1,14 @@ import * as _ from 'lodash/fp' import PropTypes from 'prop-types' import * as React from 'react' +import SourceRender from 'react-source-render' -import { exampleContext, exampleKebabNameToFilename, parseExamplePath } from 'docs/src/utils' +import { ExampleSource } from 'docs/src/types' +import { exampleSourcesContext, exampleKebabNameToFilename, parseExamplePath } from 'docs/src/utils' import PageNotFound from '../views/PageNotFound' +import { babelConfig, importResolver } from './Playground/renderConfig' -const examplePaths = exampleContext.keys() +const examplePaths = exampleSourcesContext.keys() const ExternalExampleLayout: any = props => { const { exampleName } = props.match.params @@ -17,11 +20,26 @@ const ExternalExampleLayout: any = props => { }, examplePaths) if (!examplePath) return - - const ExampleComponent = exampleContext(examplePath).default - if (!ExampleComponent) return - - return + const exampleSource: ExampleSource = exampleSourcesContext(examplePath) + + return ( + + + {({ element, error }) => ( + <> + {element} + {/* This block allows to see issues with examples as visual regressions. */} + {error &&
{error.toString()}
} + + )} + + + ) } ExternalExampleLayout.propTypes = { diff --git a/docs/src/utils/exampleContext.ts b/docs/src/utils/exampleContext.ts deleted file mode 100644 index 2f1a1f991c..0000000000 --- a/docs/src/utils/exampleContext.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Get the Webpack Context for all doc site examples. - */ - -const exampleContext = require.context( - 'docs/src/examples/', - true, - /(\w+Example(\w|\.)*|index)\.tsx$/, -) - -export default exampleContext diff --git a/docs/src/utils/exampleContexts.ts b/docs/src/utils/exampleContexts.ts new file mode 100644 index 0000000000..7181812ff4 --- /dev/null +++ b/docs/src/utils/exampleContexts.ts @@ -0,0 +1,13 @@ +/** + * Get the Webpack Context for doc site example groups. + */ +export const exampleGroupsContext = require.context('docs/src/examples/', true, /index.tsx$/) + +/** + * Get the Webpack Context for doc site example sources. + */ +export const exampleSourcesContext = require.context( + 'docs/src/exampleSources/', + true, + /.source.json$/, +) diff --git a/docs/src/utils/exampleKebabNameToFilename.ts b/docs/src/utils/exampleKebabNameToFilename.ts deleted file mode 100644 index bd9e67889c..0000000000 --- a/docs/src/utils/exampleKebabNameToFilename.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as _ from 'lodash/fp' - -/** - * Converts kebab-cased-example-name back into the original filename. - * @param {string} exampleKebabName - */ -const exampleKebabNameToFilename = exampleKebabName => { - // button-example => ButtonExample.tsx - // button-example-shorthand => ButtonExample.shorthand.tsx - return `${_.startCase(exampleKebabName) - .replace(/ /g, '') - .replace(/Shorthand$/, '.shorthand')}.tsx` -} - -export default exampleKebabNameToFilename diff --git a/docs/src/utils/exampleKebabNameToSourceFilename.ts b/docs/src/utils/exampleKebabNameToSourceFilename.ts new file mode 100644 index 0000000000..caccfb667b --- /dev/null +++ b/docs/src/utils/exampleKebabNameToSourceFilename.ts @@ -0,0 +1,15 @@ +import * as _ from 'lodash/fp' + +/** + * Converts kebab-cased-example-name back into the original filename. + * @param {string} exampleKebabName + */ +const exampleKebabNameToSourceFilename = exampleKebabName => { + // button-example => ButtonExample.source.json + // button-example-shorthand => ButtonExample.shorthand.source.json + return `${_.startCase(exampleKebabName) + .replace(/ /g, '') + .replace(/Shorthand$/, '.shorthand')}.source.json` +} + +export default exampleKebabNameToSourceFilename diff --git a/docs/src/utils/index.tsx b/docs/src/utils/index.tsx index 5e8a3dcf88..b1a938c532 100644 --- a/docs/src/utils/index.tsx +++ b/docs/src/utils/index.tsx @@ -1,7 +1,7 @@ export { default as componentInfoContext } from './componentInfoContext' export { default as componentInfoShape } from './componentInfoShape' -export { default as exampleContext } from './exampleContext' -export { default as exampleKebabNameToFilename } from './exampleKebabNameToFilename' +export { exampleGroupsContext, exampleSourcesContext } from './exampleContexts' +export { default as exampleKebabNameToFilename } from './exampleKebabNameToSourceFilename' export { default as examplePathToHash } from './examplePathToHash' export { default as getComponentGroup } from './getComponentGroup' export { default as getComponentPathname } from './getComponentPathname' From 77c4ee0586996e5b6761923c7d9327efe2fb375b Mon Sep 17 00:00:00 2001 From: olfedias Date: Wed, 19 Dec 2018 18:43:15 +0100 Subject: [PATCH 02/12] docs(Examples): refactor SourceManager, add toggle for languages --- .../ComponentExample/ComponentExample.tsx | 212 +++++++----------- .../ComponentExample/SourceCodeManager.ts | 166 ++++++++------ .../ComponentDoc/ComponentExample/index.tsx | 2 +- .../ComponentDoc/ComponentExamples.tsx | 8 +- docs/src/index.ejs | 4 + docs/src/utils/formatCode.ts | 10 +- 6 files changed, 203 insertions(+), 199 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index 339dba46de..6b67d8c368 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -13,15 +13,15 @@ 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 ContributionPrompt from '../ContributionPrompt' -import SourceCodeManager, { SourceCodeType } from './SourceCodeManager' +import SourceManager, { SourceManagerRenderProps } from './SourceCodeManager' import { ThemeInput, ThemePrepared } from 'src/themes/types' import { mergeThemeVariables } from '../../../../../src/lib/mergeThemes' import { ThemeContext } from '../../../context/theme-context' import CodeSnippet from '../../CodeSnippet' -import formatCode from '../../../utils/formatCode' -export interface ComponentExampleProps extends RouteComponentProps { +export interface ComponentExampleProps + extends RouteComponentProps, + SourceManagerRenderProps { title: React.ReactNode description?: React.ReactNode examplePath: string @@ -34,7 +34,6 @@ interface ComponentExampleState { componentVariables: Object handleMouseLeave: () => void handleMouseMove: () => void - sourceCode: string showCode: boolean showRtl: boolean showTransparent: boolean @@ -48,11 +47,6 @@ const childrenStyle: React.CSSProperties = { maxWidth: pxToRem(500), } -const codeTypeApiButtonLabels: { [key in SourceCodeType]: string } = { - normal: 'Children API', - shorthand: 'Shorthand API', -} - const disabledStyle = { opacity: 0.5, pointerEvents: 'none' } /** @@ -60,7 +54,6 @@ const disabledStyle = { opacity: 0.5, pointerEvents: 'none' } * Allows toggling the the raw `code` code block. */ class ComponentExample extends React.Component { - sourceCodeMgr: SourceCodeManager anchorName: string kebabExamplePath: string KnobsComponent: any @@ -71,7 +64,6 @@ class ComponentExample extends React.Component { - copyToClipboard(this.state.sourceCode) + copySourceCode = () => { + copyToClipboard(this.props.currentCode) + this.setState({ copiedCode: true }) setTimeout(() => this.setState({ copiedCode: false }), 1000) } - resetJSX = () => { - if (this.sourceCodeMgr.originalCodeHasChanged && confirm('Lose your changes?')) { - this.sourceCodeMgr.resetToOriginalCode() - this.updateAndRenderSourceCode() + resetSourceCode = () => { + if (confirm('Lose your changes?')) { + this.props.handleCodeReset() } } @@ -239,16 +229,6 @@ class ComponentExample extends React.Component _.includes(knobsContext.keys(), this.getKnobsFilename()) - renderExampleFromCode = (): JSX.Element => { - const { sourceCode } = this.state - - if (sourceCode == null) { - return this.renderMissingExample() - } - - return {({ element }) => element} - } - renderElement = (element: React.ReactElement) => { const { examplePath } = this.props const { showRtl, componentVariables, themeName } = this.state @@ -269,16 +249,6 @@ class ComponentExample extends React.Component { - const missingExamplePath = `./docs/src/examples/${this.sourceCodeMgr.currentPath}.tsx` - return ( - - Looks like we're need an example file at: -

{missingExamplePath}

- - ) - } - handleKnobChange = knobs => { this.setState(prevState => ({ knobs: { @@ -312,85 +282,58 @@ class ComponentExample extends React.Component this.props.examplePath.split('/')[1] - handleChangeCode = (sourceCode: string) => { - this.sourceCodeMgr.currentCode = sourceCode - this.updateAndRenderSourceCode() + handleCodeApiChange = apiType => () => { + this.props.handleCodeAPIChange(apiType) } - updateAndRenderSourceCode = () => { - this.setState({ sourceCode: this.sourceCodeMgr.currentCode }) + handleCodeLanguageChange = language => () => { + this.props.handleCodeLanguageChange(language) } - setApiCodeType = (codeType: SourceCodeType) => { - this.sourceCodeMgr.codeType = codeType - this.updateAndRenderSourceCode() - } - - renderApiCodeMenu = (): JSX.Element => { - const { sourceCode } = this.state - const lineCount = sourceCode && sourceCode.match(/^/gm)!.length - - const menuItems = [SourceCodeType.shorthand, SourceCodeType.normal].map(codeType => { - // we disable the menu button for Children API in case we don't have the example for it - const disabled = - codeType === SourceCodeType.normal && !this.sourceCodeMgr.isCodeValidForType(codeType) - - return { - active: this.sourceCodeMgr.codeType === codeType, - disabled, - key: codeType, - onClick: this.setApiCodeType.bind(this, codeType), - content: ( + renderAPIsMenu = (): JSX.Element => { + const menuItems = _.map(this.props.codeAPIs, ({ active, enabled, name }, type) => ( + - {codeTypeApiButtonLabels[codeType]} - {disabled && (not supported)} + {name} + {enabled && (not supported)} - ), - } - }) - - return ( - // match code editor background and gutter size and colors -
-
9 ? 41 : 34}px solid ${EDITOR_GUTTER_COLOR}`, - paddingBottom: '1rem', - } as React.CSSProperties - } - > - -
-
- ) - } - - canBePrettified = () => { - const { sourceCode } = this.state + } + disabled={!enabled} + key={type} + onClick={this.handleCodeApiChange(type)} + /> + )) - try { - return sourceCode !== formatCode(sourceCode) - } catch (err) { - return false - } + return {menuItems} } - handleFormat = () => { - const { sourceCode } = this.state + renderLanguagesMenu = (): JSX.Element => { + const { currentLanguage } = this.props - this.handleChangeCode(formatCode(sourceCode)) + return ( + + + + + ) } renderCodeEditorMenu = (): JSX.Element => { + const { canBeFormatted, handleCodeFormat, wasChanged } = this.props const { copiedCode } = this.state - const { originalCodeHasChanged, currentPath } = this.sourceCodeMgr - const codeEditorStyle: React.CSSProperties = { - position: 'absolute', - margin: 0, - top: '2px', - right: '0.5rem', - } + + // TODO: !!!! + const currentPath = '' // get component name from file path: // elements/Button/Types/ButtonButtonExample @@ -403,30 +346,30 @@ class ComponentExample extends React.Component + {({ error }) => ( )} { - const { showCode, sourceCode } = this.state + const { currentCode = '', handleCodeChange } = this.props + const { showCode } = this.state - if (!showCode) return null + const lineCount = currentCode.match(/^/gm)!.length - return ( -
- {this.renderApiCodeMenu()} + return showCode ? ( + // match code editor background and gutter size and colors +
+
9 ? 41 : 34}px solid ${EDITOR_GUTTER_COLOR}`, + paddingBottom: '2.6rem', + } as React.CSSProperties + } + > + + {this.renderAPIsMenu()} + {this.renderLanguagesMenu()} + -
{this.renderCodeEditorMenu()} -
+ +
- ) + ) : null } renderError = () => { @@ -549,7 +505,7 @@ class ComponentExample extends React.Component - {this.renderExampleFromCode()} + {({ element }) => element} ) }} @@ -668,7 +624,11 @@ class ComponentExample extends React.Component ( - {({ themeName }) => } + {({ themeName }) => ( + + {codeProps => } + + )} ) diff --git a/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts b/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts index e0ff8f8c31..5aeef7e3ae 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts +++ b/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts @@ -1,98 +1,130 @@ +import * as React from 'react' import { exampleSourcesContext } from '../../../utils' +import { ExampleSource } from '../../../types' +import { safeFormatCode } from '../../../utils/formatCode' -interface SourceCodeData { - path: string - code: string - originalCode: string +type SourceManagerCodeAPI = { + name: string + fileSuffix: string + + active?: boolean + enabled?: boolean } -export enum SourceCodeType { - normal = 'normal', - shorthand = 'shorthand', +type SourceManagerCodeAPIs = { + children: SourceManagerCodeAPI + shorthand: SourceManagerCodeAPI } -export const examplePathPatterns: { [key in SourceCodeType]: string } = { - normal: '', - shorthand: '.shorthand', +export type SourceManagerRenderProps = SourceManagerState & { + handleCodeAPIChange: (newApi: keyof SourceManagerCodeAPIs) => void + handleCodeChange: (newCode: string) => void + handleCodeFormat: () => void + handleCodeLanguageChange: (newLanguage: SourceManagerLanguage) => void + handleCodeReset: () => void } -class SourceCodeManager { - private readonly data: { [key in SourceCodeType]: SourceCodeData } = { - normal: {} as SourceCodeData, - shorthand: {} as SourceCodeData, - } +export type SourceManagerLanguage = 'js' | 'ts' - public codeType: SourceCodeType +export type SourceManagerProps = { + examplePath: string + children: (renderProps: SourceManagerRenderProps) => React.ReactNode +} - constructor(private sourceCodePath: string) { - const prioritizedCodeTypes = [SourceCodeType.shorthand, SourceCodeType.normal] // order is relevant - prioritizedCodeTypes.forEach(sourceCodeType => { - this.setDataForCodeType(sourceCodeType) - }) +export type SourceManagerState = { + currentLanguage: SourceManagerLanguage + currentAPI: keyof SourceManagerCodeAPIs - this.codeType = - prioritizedCodeTypes.find(codeType => this.isCodeValidForType(codeType)) || - SourceCodeType.shorthand - } + codeAPIs: SourceManagerCodeAPIs + currentCode?: string + formattedCode?: string + originalCode?: string - public set currentCode(currentCode: string) { - this.currentCodeData.code = currentCode - } + canBeFormatted: boolean + wasChanged: boolean +} - public get currentCode(): string { - return this.currentCodeData.code - } +export const codeAPIs: SourceManagerCodeAPIs = { + children: { name: 'Children API', fileSuffix: '' }, + shorthand: { name: 'Shorthand API', fileSuffix: '.shorthand' }, +} - public get currentPath(): string { - return this.currentCodeData.path - } +export class SourceManager extends React.Component { + state = { + currentLanguage: 'js' as SourceManagerLanguage, + currentAPI: 'children' as keyof SourceManagerCodeAPIs, - public get originalCodeHasChanged(): boolean { - return this.currentCodeData.code !== this.currentCodeData.originalCode - } + codeAPIs, - public isCodeValidForType(codeType: SourceCodeType): boolean { - return this.data[codeType].code != null + canBeFormatted: false, + wasChanged: false, } - public resetToOriginalCode(): void { - this.currentCodeData.code = this.currentCodeData.originalCode + static getDerivedStateFromProps( + props: SourceManagerProps, + state: SourceManagerState, + ): Partial { + const { examplePath } = props + const { currentAPI, currentLanguage, currentCode } = state + + const sourcePath = `${examplePath.replace(/^components/, '.')}${ + codeAPIs[currentAPI].fileSuffix + }.source.json` + const sourceCode: ExampleSource = exampleSourcesContext(sourcePath) + + const originalCode = sourceCode[currentLanguage] + const currentCode1 = currentCode || originalCode + const formattedCode = safeFormatCode( + currentCode1, + currentLanguage === 'ts' ? 'typescript' : 'babylon', + ) + + return { + originalCode, + currentCode: currentCode1, + formattedCode, + + canBeFormatted: !!formattedCode ? currentCode1 !== formattedCode : false, + wasChanged: originalCode !== currentCode1, + } } - private get currentCodeData(): SourceCodeData { - return this.data[this.codeType] + handleCodeAPIChange = (newAPI: keyof SourceManagerCodeAPIs): void => { + this.setState({ + currentAPI: newAPI, + currentCode: undefined, + }) } - private set currentCodeData(codeData: SourceCodeData) { - this.data[this.codeType] = codeData + handleCodeChange = (newCode: string): void => { + this.setState({ currentCode: newCode }) } - private setDataForCodeType(sourceCodeType: SourceCodeType): void { - const path = this.sourceCodePath + examplePathPatterns[sourceCodeType] - const code = this.safeRequire(path) - - if (!code) { - // Returning as there are no examples provided for this type - // - e.g. there is no children API example for component - return - } + handleCodeFormat = (): void => { + this.setState(prevState => ({ currentCode: prevState.formattedCode })) + } - this.data[sourceCodeType] = { - path, - code, - originalCode: code, - } + handleCodeReset = (): void => { + this.setState({ currentCode: undefined }) } - private safeRequire = (path: string): string | undefined => { - try { - const filename = `${path.replace(/^components\//, './')}.source.json` + handleLanguageChange = (newLanguage: SourceManagerLanguage): void => { + this.setState({ + currentLanguage: newLanguage, + currentCode: undefined, + }) + } - return exampleSourcesContext(filename).js - } catch (e) { - return undefined - } + render() { + return this.props.children({ + ...this.state, + handleCodeAPIChange: this.handleCodeAPIChange, + handleCodeChange: this.handleCodeChange, + handleCodeFormat: this.handleCodeFormat, + handleCodeReset: this.handleCodeReset, + handleCodeLanguageChange: this.handleLanguageChange, + }) } } -export default SourceCodeManager +export default SourceManager diff --git a/docs/src/components/ComponentDoc/ComponentExample/index.tsx b/docs/src/components/ComponentDoc/ComponentExample/index.tsx index 188402ef1f..0655df16dc 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/index.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/index.tsx @@ -1,2 +1,2 @@ -export { examplePathPatterns } from './SourceCodeManager' +export { codeAPIs } from './SourceCodeManager' export { default, ComponentExampleProps } from './ComponentExample' diff --git a/docs/src/components/ComponentDoc/ComponentExamples.tsx b/docs/src/components/ComponentDoc/ComponentExamples.tsx index b880b5bc68..77a0c7a206 100644 --- a/docs/src/components/ComponentDoc/ComponentExamples.tsx +++ b/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 { examplePathPatterns } from './ComponentExample' +import { codeAPIs } from './ComponentExample' import ContributionPrompt from './ContributionPrompt' interface ComponentExamplesProps { @@ -83,9 +83,9 @@ export default class ComponentExamples extends React.Component `${pattern}.source.json`) const [normalRegExp, shorthandRegExp] = [normalExtension, shorthandExtension].map( diff --git a/docs/src/index.ejs b/docs/src/index.ejs index 5b1776b6da..508a790d46 100644 --- a/docs/src/index.ejs +++ b/docs/src/index.ejs @@ -39,6 +39,10 @@ crossOrigin="anonymous" src="https://unpkg.com/prettier@<%= htmlWebpackPlugin.options.versions.prettier %>/parser-html.js" > + diff --git a/docs/src/utils/formatCode.ts b/docs/src/utils/formatCode.ts index 0c87458b26..f22078ef41 100644 --- a/docs/src/utils/formatCode.ts +++ b/docs/src/utils/formatCode.ts @@ -8,7 +8,7 @@ delete prettierConfig.overrides // Please use this function directly and don't reexport it in utils. // https://github.com/prettier/prettier/issues/4959 -const formatCode = (code, parser = 'babylon') => { +const formatCode = (code: string, parser = 'babylon') => { if (!code) return '' const formatted = prettier.format(code, { @@ -21,4 +21,12 @@ const formatCode = (code, parser = 'babylon') => { return formatted.replace(/^; { + try { + return formatCode(code, parser) + } catch (e) {} + + return undefined +} + export default formatCode From 06c53bd6715684d26845c069f3d0772772016c9b Mon Sep 17 00:00:00 2001 From: olfedias Date: Thu, 20 Dec 2018 11:10:34 +0100 Subject: [PATCH 03/12] wip --- .../ComponentExample/ComponentExample.tsx | 37 ++++--- .../ComponentDoc/ComponentExample/index.tsx | 1 - .../ComponentDoc/ComponentExamples.tsx | 6 +- .../ComponentSourceManager.ts} | 97 +++++++++---------- .../ComponentSourceManager/componentAPIs.ts | 14 +++ .../ComponentSourceManager/getExampeSource.ts | 20 ++++ .../ComponentSourceManager/index.ts | 2 + 7 files changed, 111 insertions(+), 66 deletions(-) rename docs/src/components/ComponentDoc/{ComponentExample/SourceCodeManager.ts => ComponentSourceManager/ComponentSourceManager.ts} (51%) create mode 100644 docs/src/components/ComponentDoc/ComponentSourceManager/componentAPIs.ts create mode 100644 docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts create mode 100644 docs/src/components/ComponentDoc/ComponentSourceManager/index.ts diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index 6b67d8c368..71f12d7c67 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/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 () => { - 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) => ( {name} - {enabled && (not supported)} + {!supported && (not supported)} } - disabled={!enabled} + disabled={!supported} key={type} onClick={this.handleCodeApiChange(type)} /> @@ -310,17 +321,17 @@ class ComponentExample extends React.Component { - const { currentLanguage } = this.props + const { currentCodeLanguage } = this.props return ( @@ -329,7 +340,7 @@ class ComponentExample extends React.Component { - 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 {({ error }) => ( )} `${pattern}.source.json`) const [normalRegExp, shorthandRegExp] = [normalExtension, shorthandExtension].map( diff --git a/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts similarity index 51% rename from docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts rename to docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts index 5aeef7e3ae..e896b929f0 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts +++ b/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 { - 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 { - 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 { this.setState({ - currentLanguage: newLanguage, + currentCodeLanguage: newLanguage, currentCode: undefined, }) } diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/componentAPIs.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/componentAPIs.ts new file mode 100644 index 0000000000..2d8a8a01a3 --- /dev/null +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/componentAPIs.ts @@ -0,0 +1,14 @@ +export type ComponentAPI = { + name: string + fileSuffix: string +} & T + +export type ComponentAPIs = { + children: ComponentAPI + shorthand: ComponentAPI +} + +export const componentAPIs: ComponentAPIs = { + children: { name: 'Children API', fileSuffix: '' }, + shorthand: { name: 'Shorthand API', fileSuffix: '.shorthand' }, +} diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/getExampeSource.ts new file mode 100644 index 0000000000..c8a2fb00fa --- /dev/null +++ b/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 diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts new file mode 100644 index 0000000000..2edcf13069 --- /dev/null +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts @@ -0,0 +1,2 @@ +export * from './componentAPIs' +export * from './ComponentSourceManager' From 80e9f211af1e392ff0d5d1eac25e986e5934d85b Mon Sep 17 00:00:00 2001 From: olfedias Date: Thu, 20 Dec 2018 12:43:54 +0100 Subject: [PATCH 04/12] complete TODOs --- .../ComponentExample/ComponentExample.tsx | 28 +++++------ .../ComponentSourceManager.ts | 47 +++++++++++-------- 2 files changed, 39 insertions(+), 36 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index 71f12d7c67..27096c9a4b 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -13,8 +13,8 @@ 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, +import ComponentSourceManager, { + ComponentSourceManagerRenderProps, } from '../ComponentSourceManager/ComponentSourceManager' import { ThemeInput, ThemePrepared } from 'src/themes/types' import { mergeThemeVariables } from '../../../../../src/lib/mergeThemes' @@ -23,7 +23,7 @@ import CodeSnippet from '../../CodeSnippet' export interface ComponentExampleProps extends RouteComponentProps, - SourceManagerRenderProps { + ComponentSourceManagerRenderProps { title: React.ReactNode description?: React.ReactNode examplePath: string @@ -340,19 +340,16 @@ class ComponentExample extends React.Component { - const { canCodeBeFormatted, handleCodeFormat, wasCodeChanged } = this.props + const { currentCodePath, canCodeBeFormatted, handleCodeFormat, wasCodeChanged } = this.props const { copiedCode } = this.state - // TODO: !!!! - const currentPath = '' - // get component name from file path: // elements/Button/Types/ButtonButtonExample - const pathParts = currentPath.split(__PATH_SEP__) + const pathParts = currentCodePath.split(__PATH_SEP__) const filename = pathParts[pathParts.length - 1] const ghEditHref = [ - `${constants.repoURL}/edit/master/docs/src/examples/${currentPath}.tsx`, + `${constants.repoURL}/edit/master/docs/src/examples/${currentCodePath}.tsx`, `?message=docs(${filename}): your description`, ].join('') @@ -363,7 +360,7 @@ class ComponentExample extends React.Component ( {({ themeName }) => ( - + {codeProps => } - + )} ) diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts index e896b929f0..f0857dbcdc 100644 --- a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts @@ -6,31 +6,32 @@ import { safeFormatCode } from '../../../utils/formatCode' import { componentAPIs as APIdefinitions, ComponentAPIs } from './componentAPIs' import getExampleSource from './getExampeSource' -export type SourceManagerRenderProps = SourceManagerState & { +export type ComponentSourceManagerRenderProps = ComponentSourceManagerState & { handleCodeAPIChange: (newApi: keyof ComponentAPIs) => void handleCodeChange: (newCode: string) => void handleCodeFormat: () => void - handleCodeLanguageChange: (newLanguage: SourceManagerLanguage) => void + handleCodeLanguageChange: (newLanguage: ComponentSourceManagerLanguage) => void handleCodeReset: () => void } -export type SourceManagerLanguage = 'js' | 'ts' +export type ComponentSourceManagerLanguage = 'js' | 'ts' -export type SourceManagerProps = { +export type ComponentSourceManagerProps = { examplePath: string - children: (renderProps: SourceManagerRenderProps) => React.ReactNode + children: (renderProps: ComponentSourceManagerRenderProps) => React.ReactNode } -type StateManagerComponentAPIs = ComponentAPIs<{ +type ComponentSourceManagerAPIs = ComponentAPIs<{ sourceCode: ExampleSource | undefined supported: boolean }> -export type SourceManagerState = { - currentCodeLanguage: SourceManagerLanguage +export type ComponentSourceManagerState = { + currentCodeLanguage: ComponentSourceManagerLanguage currentCodeAPI: keyof ComponentAPIs + currentCodePath: string - componentAPIs: StateManagerComponentAPIs + componentAPIs: ComponentSourceManagerAPIs currentCode?: string formattedCode?: string originalCode?: string @@ -39,8 +40,11 @@ export type SourceManagerState = { wasCodeChanged: boolean } -export class SourceManager extends React.Component { - constructor(props: SourceManagerProps) { +export class ComponentSourceManager extends React.Component< + ComponentSourceManagerProps, + ComponentSourceManagerState +> { + constructor(props: ComponentSourceManagerProps) { super(props) const componentAPIs = _.mapValues(APIdefinitions, (definition, name: keyof ComponentAPIs) => { @@ -51,11 +55,12 @@ export class SourceManager extends React.Component { + props: ComponentSourceManagerProps, + state: ComponentSourceManagerState, + ): Partial { + const { examplePath } = props const { componentAPIs, currentCodeAPI, currentCodeLanguage, currentCode: storedCode } = state const sourceCodes = componentAPIs[currentCodeAPI].sourceCode @@ -78,10 +84,13 @@ export class SourceManager extends React.Component { + handleLanguageChange = (newLanguage: ComponentSourceManagerLanguage): void => { this.setState({ currentCodeLanguage: newLanguage, currentCode: undefined, @@ -126,4 +135,4 @@ export class SourceManager extends React.Component Date: Wed, 2 Jan 2019 14:10:11 +0200 Subject: [PATCH 05/12] fix broken code after merge --- docs/src/components/ComponentDoc/ComponentExamples.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExamples.tsx b/docs/src/components/ComponentDoc/ComponentExamples.tsx index eb7b3e4418..b2ca6b019d 100644 --- a/docs/src/components/ComponentDoc/ComponentExamples.tsx +++ b/docs/src/components/ComponentDoc/ComponentExamples.tsx @@ -83,8 +83,8 @@ export default class ComponentExamples extends React.Component `${pattern}.source.json`) const [normalRegExp, shorthandRegExp] = [normalExtension, shorthandExtension].map( From 837e000e227094553f92b7cbd30d2f5a3e78ebda Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 2 Jan 2019 15:02:35 +0200 Subject: [PATCH 06/12] style improvements --- .../ComponentExample/ComponentExample.tsx | 2 +- .../ComponentSourceManager.ts | 20 +++++++++---------- .../ComponentSourceManager/index.ts | 2 +- docs/src/utils/formatCode.ts | 8 -------- 4 files changed, 12 insertions(+), 20 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index 8ed462bd29..00d6d29d07 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -15,7 +15,7 @@ import ComponentControls from '../ComponentControls' import ComponentExampleTitle from './ComponentExampleTitle' import ComponentSourceManager, { ComponentSourceManagerRenderProps, -} from '../ComponentSourceManager/ComponentSourceManager' +} from '../ComponentSourceManager' import { ThemeInput, ThemePrepared } from 'src/themes/types' import { mergeThemeVariables } from '../../../../../src/lib/mergeThemes' import { ThemeContext } from '../../../context/theme-context' diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts index f0857dbcdc..9c0d0c5507 100644 --- a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts @@ -1,8 +1,8 @@ import * as _ from 'lodash' import * as React from 'react' -import { ExampleSource } from '../../../types' -import { safeFormatCode } from '../../../utils/formatCode' +import { ExampleSource } from 'docs/src/types' +import formatCode from 'docs/src/utils/formatCode' import { componentAPIs as APIdefinitions, ComponentAPIs } from './componentAPIs' import getExampleSource from './getExampeSource' @@ -40,7 +40,7 @@ export type ComponentSourceManagerState = { wasCodeChanged: boolean } -export class ComponentSourceManager extends React.Component< +export default class ComponentSourceManager extends React.Component< ComponentSourceManagerProps, ComponentSourceManagerState > { @@ -79,13 +79,15 @@ export class ComponentSourceManager extends React.Component< const originalCode = sourceCodes[currentCodeLanguage] const currentCode = storedCode || originalCode - const formattedCode = safeFormatCode( - currentCode, - currentCodeLanguage === 'ts' ? 'typescript' : 'babylon', - ) - const currentCodePath = examplePath + componentAPIs[currentCodeAPI].fileSuffix + const codeParser = currentCodeLanguage === 'ts' ? 'typescript' : 'babylon' + let formattedCode + + try { + formattedCode = formatCode(currentCode, codeParser) + } catch (e) {} + return { currentCode, currentCodePath, @@ -134,5 +136,3 @@ export class ComponentSourceManager extends React.Component< }) } } - -export default ComponentSourceManager diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts index 2edcf13069..bfe6fe6171 100644 --- a/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/index.ts @@ -1,2 +1,2 @@ export * from './componentAPIs' -export * from './ComponentSourceManager' +export { default, ComponentSourceManagerRenderProps } from './ComponentSourceManager' diff --git a/docs/src/utils/formatCode.ts b/docs/src/utils/formatCode.ts index f22078ef41..6b5bd0cef7 100644 --- a/docs/src/utils/formatCode.ts +++ b/docs/src/utils/formatCode.ts @@ -21,12 +21,4 @@ const formatCode = (code: string, parser = 'babylon') => { return formatted.replace(/^; { - try { - return formatCode(code, parser) - } catch (e) {} - - return undefined -} - export default formatCode From 7374dff09a85d3c5e217b7ab98ecde0a20c0abab Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 3 Jan 2019 11:17:12 +0200 Subject: [PATCH 07/12] add changelog entries --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33b08528ac..2a8eced25e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,6 +46,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Documentation - Add more accessibility descriptions to components and behaviors @jurokapsiar ([#648](https://github.com/stardust-ui/react/pull/648)) +- Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) +- Fix broken switch to Children API when an example is not present @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17) From 6ad214163858b19c1fb831d0122e78d02711ac07 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 9 Jan 2019 17:55:24 +0200 Subject: [PATCH 08/12] move to correct CHANGELOG section --- CHANGELOG.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77d725e331..0e99aaf7aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix positioning of `Popup` with changable content @layershifter ([#678](https://github.com/stardust-ui/react/pull/678)) - Fix default props in `Accordion` and `Dropdown` components @layershifter ([#675](https://github.com/stardust-ui/react/pull/675)) +### Documentation +- Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) +- Fix broken switch to Children API when an example is not present @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) + ## [v0.16.0](https://github.com/stardust-ui/react/tree/v0.16.0) (2019-01-07) [Compare changes](https://github.com/stardust-ui/react/compare/v0.15.0...v0.16.0) @@ -62,8 +66,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Documentation - Add more accessibility descriptions to components and behaviors @jurokapsiar ([#648](https://github.com/stardust-ui/react/pull/648)) -- Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) -- Fix broken switch to Children API when an example is not present @layershifter ([#650](https://github.com/stardust-ui/react/pull/650)) ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17) From c7213aae6619924be83538554f825396e0836b96 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 9 Jan 2019 18:41:46 +0200 Subject: [PATCH 09/12] use shorthand api as default --- .../ComponentSourceManager/ComponentSourceManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts index 9c0d0c5507..bc453a8529 100644 --- a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts @@ -59,7 +59,7 @@ export default class ComponentSourceManager extends React.Component< this.state = { currentCodeLanguage: 'js' as ComponentSourceManagerLanguage, - currentCodeAPI: _.findKey(componentAPIs, { supported: true }) as keyof ComponentAPIs, + currentCodeAPI: _.findLastKey(componentAPIs, { supported: true }) as keyof ComponentAPIs, currentCodePath: '', componentAPIs, From 5e9c978ae0f4c5d0cc7ee4d767f299832829bffe Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 9 Jan 2019 18:47:22 +0200 Subject: [PATCH 10/12] rename constant --- .../ComponentSourceManager/ComponentSourceManager.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts index bc453a8529..c418070072 100644 --- a/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts +++ b/docs/src/components/ComponentDoc/ComponentSourceManager/ComponentSourceManager.ts @@ -81,11 +81,11 @@ export default class ComponentSourceManager extends React.Component< const currentCode = storedCode || originalCode const currentCodePath = examplePath + componentAPIs[currentCodeAPI].fileSuffix - const codeParser = currentCodeLanguage === 'ts' ? 'typescript' : 'babylon' + const prettierParser = currentCodeLanguage === 'ts' ? 'typescript' : 'babylon' let formattedCode try { - formattedCode = formatCode(currentCode, codeParser) + formattedCode = formatCode(currentCode, prettierParser) } catch (e) {} return { From 7852b8b8748e77801da1e60ba5ab89fa1368c031 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 9 Jan 2019 18:55:59 +0200 Subject: [PATCH 11/12] disable edit to JS examples --- .../ComponentExample/ComponentExample.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index 00d6d29d07..cb700efb21 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -341,7 +341,13 @@ class ComponentExample extends React.Component { - const { currentCodePath, canCodeBeFormatted, handleCodeFormat, wasCodeChanged } = this.props + const { + currentCodeLanguage, + currentCodePath, + canCodeBeFormatted, + handleCodeFormat, + wasCodeChanged, + } = this.props const { copiedCode } = this.state // get component name from file path: @@ -380,13 +386,15 @@ class ComponentExample extends React.Component - + {currentCodeLanguage === 'ts' && ( + + )}
) } From 9f7558eef19117eeebe865cac17583ae43806442 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 9 Jan 2019 19:12:40 +0200 Subject: [PATCH 12/12] rename to renderSourceCode --- .../ComponentDoc/ComponentExample/ComponentExample.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx index cb700efb21..0429ee7fd8 100644 --- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx +++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx @@ -399,7 +399,7 @@ class ComponentExample extends React.Component { + renderSourceCode = () => { const { currentCode = '', handleCodeChange } = this.props const { showCode } = this.state @@ -623,7 +623,7 @@ class ComponentExample extends React.Component - {this.renderJSX()} + {this.renderSourceCode()} {this.renderError()} {this.renderHTML()} {this.renderVariables()}