From 46fc74a8942f0e14d458b1dc152d393ccc74b3fe Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 7 Nov 2018 11:15:10 +0100 Subject: [PATCH 01/13] -added commonPropTypes const used in the Button component --- src/components/Button/Button.tsx | 11 ++--------- src/lib/UIComponent.tsx | 13 +++++++++++++ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 042f4672e9..4f31728bef 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -17,6 +17,7 @@ import { } from '../../../types/utils' import ButtonGroup from './ButtonGroup' import isFromKeyboard from '../../lib/isFromKeyboard' +import { commonPropTypes } from '../../lib/UIComponent' export interface ButtonProps { as?: any @@ -59,9 +60,7 @@ class Button extends UIComponent, ButtonState> { public static className = 'ui-button' public static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - + ...commonPropTypes, /** * Button content for childrenApi * @docSiteIgnore @@ -126,12 +125,6 @@ class Button extends UIComponent, ButtonState> { * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. */ renderIcon: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } public static defaultProps = { diff --git a/src/lib/UIComponent.tsx b/src/lib/UIComponent.tsx index a7ee4edf51..e5cb9a7927 100644 --- a/src/lib/UIComponent.tsx +++ b/src/lib/UIComponent.tsx @@ -1,8 +1,21 @@ import * as React from 'react' +import * as PropTypes from 'prop-types' import * as _ from 'lodash' import renderComponent, { RenderResultConfig } from './renderComponent' import { AccessibilityActionHandlers } from './accessibility/types' import { FocusZone } from './accessibility/FocusZone' +import { customPropTypes } from './index' + +export const commonPropTypes = { + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** Additional CSS styles to apply to the component instance. */ + styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + + /** Override for theme site variables to allow modifications of component styling via themes. */ + variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), +} class UIComponent extends React.Component { private readonly childClass = this.constructor as typeof UIComponent From 6cd04e50b3c34acf0cec162e7f979601c4673e09 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 8 Nov 2018 17:15:23 +0100 Subject: [PATCH 02/13] -wip replacing react-docgen with react-docgen-typescript --- build/gulp/plugins/util/getComponentInfo.ts | 36 ++++++++++--------- .../ComponentPropFunctionSignature.tsx | 2 +- package.json | 1 + src/components/Button/Button.tsx | 31 +++++++++++----- src/lib/UIComponent.tsx | 23 ++++++------ yarn.lock | 5 +++ 6 files changed, 59 insertions(+), 39 deletions(-) diff --git a/build/gulp/plugins/util/getComponentInfo.ts b/build/gulp/plugins/util/getComponentInfo.ts index 5bd675efd1..b0ab01f50b 100644 --- a/build/gulp/plugins/util/getComponentInfo.ts +++ b/build/gulp/plugins/util/getComponentInfo.ts @@ -1,18 +1,19 @@ import * as _ from 'lodash' import * as path from 'path' -import { defaultHandlers, parse } from 'react-docgen' +// import { defaultHandlers, parse } from 'react-docgen' import * as fs from 'fs' -import * as ts from 'typescript' +// import * as ts from 'typescript' import parseDefaultValue from './parseDefaultValue' import parseDocblock from './parseDocblock' -import parserCustomHandler from './parserCustomHandler' +// import parserCustomHandler from './parserCustomHandler' import parseType from './parseType' -import findExportedComponentDefinitions from './findExportedComponentDefinitions' +// import findExportedComponentDefinitions from './findExportedComponentDefinitions' +import * as reactDocgenTypescript from 'react-docgen-typescript' const getComponentInfo = filepath => { const absPath = path.resolve(process.cwd(), filepath) - const contents = fs.readFileSync(absPath).toString() + // const contents = fs.readFileSync(absPath).toString() const dir = path.dirname(absPath) const dirname = path.basename(dir) const filename = path.basename(absPath) @@ -22,18 +23,21 @@ const getComponentInfo = filepath => { // "element" for "src/elements/Button/Button.js" const componentType = path.basename(path.dirname(dir)).replace(/s$/, '') - const text = ts.transpile(contents, { - jsx: ts.JsxEmit.React, - target: ts.ScriptTarget.Latest, - module: ts.ModuleKind.CommonJS, - allowSyntheticDefaultImports: true, - }) + // const text = ts.transpile(contents, { + // jsx: ts.JsxEmit.React, + // target: ts.ScriptTarget.Latest, + // module: ts.ModuleKind.CommonJS, + // allowSyntheticDefaultImports: true, + // }) // start with react-docgen info - const components = parse(text, findExportedComponentDefinitions, [ - ...defaultHandlers, - parserCustomHandler, - ]) + // const components = parse(text, findExportedComponentDefinitions, [ + // // createImportHandler, + // ...defaultHandlers, + // parserCustomHandler, + // ]) + const components = reactDocgenTypescript.withDefaultConfig().parse(absPath) + if (!components.length) { throw new Error(`Could not find a component definition in "${filepath}".`) } @@ -45,7 +49,7 @@ const getComponentInfo = filepath => { ].join(' '), ) } - const info = components[0] + const info: any = components[0] // remove keys we don't use delete info.methods diff --git a/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx b/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx index 0d46cdcb8e..4d480949fa 100644 --- a/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx +++ b/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx @@ -20,7 +20,7 @@ const rowStyle: any = { flexDirection: 'row', } -const getTagType = tag => (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name) +const getTagType = tag => (tag.type ? (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name) : '') const ComponentPropFunctionSignature: any = ({ name, tags }) => { const params = _.filter(tags, { title: 'param' }) diff --git a/package.json b/package.json index 6bb1aa099a..63adcd3c39 100644 --- a/package.json +++ b/package.json @@ -91,6 +91,7 @@ "lodash": "^4.17.10", "prop-types": "^15.6.1", "react-custom-scrollbars": "^4.2.1", + "react-docgen-typescript": "^1.12.0", "react-fela": "^7.2.0", "react-popper": "^1.0.2", "what-input": "^5.1.2" diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 4f31728bef..8af9475984 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -11,21 +11,16 @@ import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { ComponentEventHandler, Extendable, - ReactChildren, ShorthandRenderFunction, ShorthandValue, } from '../../../types/utils' import ButtonGroup from './ButtonGroup' import isFromKeyboard from '../../lib/isFromKeyboard' -import { commonPropTypes } from '../../lib/UIComponent' +import { UIComponentProps } from '../../lib/UIComponent' -export interface ButtonProps { +export interface ButtonProps extends UIComponentProps { + /** An element type to render as (string or function). */ as?: any - accessibility?: Accessibility - children?: ReactChildren - circular?: boolean - className?: string - disabled?: boolean content?: ShorthandValue fluid?: boolean icon?: ShorthandValue @@ -34,9 +29,19 @@ export interface ButtonProps { onClick?: ComponentEventHandler onFocus?: ComponentEventHandler primary?: boolean + + /** + * A custom render function the icon slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderIcon?: ShorthandRenderFunction + text?: boolean secondary?: boolean + /** Additional CSS styles to apply to the component instance. */ styles?: ComponentSlotStyle variables?: ComponentVariablesInput } @@ -60,7 +65,15 @@ class Button extends UIComponent, ButtonState> { public static className = 'ui-button' public static propTypes = { - ...commonPropTypes, + /** An element type to render as (string or function). */ + as: customPropTypes.as, + + /** Additional CSS styles to apply to the component instance. */ + styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + + /** Override for theme site variables to allow modifications of component styling via themes. */ + variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + /** * Button content for childrenApi * @docSiteIgnore diff --git a/src/lib/UIComponent.tsx b/src/lib/UIComponent.tsx index e5cb9a7927..71e97b45d4 100644 --- a/src/lib/UIComponent.tsx +++ b/src/lib/UIComponent.tsx @@ -1,20 +1,17 @@ import * as React from 'react' -import * as PropTypes from 'prop-types' import * as _ from 'lodash' import renderComponent, { RenderResultConfig } from './renderComponent' -import { AccessibilityActionHandlers } from './accessibility/types' +import { AccessibilityActionHandlers, Accessibility } from './accessibility/types' import { FocusZone } from './accessibility/FocusZone' -import { customPropTypes } from './index' - -export const commonPropTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), +import { ReactChildren } from '../../types/utils' + +export interface UIComponentProps { + accessibility?: Accessibility + children?: ReactChildren + /** Some description for circular */ + circular?: boolean + className?: string + disabled?: boolean } class UIComponent extends React.Component { diff --git a/yarn.lock b/yarn.lock index 27980d5403..103bdcbd28 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7546,6 +7546,11 @@ react-custom-scrollbars@^4.2.1: prop-types "^15.5.10" raf "^3.1.0" +react-docgen-typescript@^1.12.0: + version "1.12.0" + resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.12.0.tgz#be25d3604e05676f05a1248952f8d5823d7a216a" + integrity sha512-EAb2W5UNTTR75zTWm8bbn9iQmh+W/9DvnCazIdzDb+TnzvpcxEFCjRia+Rhpkx4FRRS3AYyJrw5Ar3zX51gJfQ== + react-docgen@^2.17.0: version "2.21.0" resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.21.0.tgz#e8f9caf50e15510096616850771f243fadbb9d7d" From 3c7beae3fc8666cc8fac7ae046c8902001d0478b Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 9 Nov 2018 15:57:47 +0100 Subject: [PATCH 03/13] -wip examples of usage --- src/components/Accordion/Accordion.tsx | 8 +- src/components/Button/Button.tsx | 108 +++++++++++-------------- src/components/Segment/Segment.tsx | 18 +---- src/components/Slot/Slot.tsx | 18 +---- src/components/Status/Status.tsx | 46 ++++------- src/components/Text/Text.tsx | 58 ++++++------- src/lib/UIComponent.tsx | 21 +++-- 7 files changed, 106 insertions(+), 171 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 1b5a472329..4b3fc42631 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -7,7 +7,6 @@ import AccordionTitle from './AccordionTitle' import AccordionContent from './AccordionContent' import { defaultBehavior } from '../../lib/accessibility' import { Accessibility } from '../../lib/accessibility/types' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { ComponentEventHandler, Extendable, @@ -15,11 +14,10 @@ import { ShorthandRenderFunction, ShorthandValue, } from '../../../types/utils' +import { UIComponentProps } from '../../lib/UIComponent' -export interface AccordionProps { - as?: any +export interface AccordionProps extends UIComponentProps { activeIndex?: number[] | number - className?: string children?: ReactChildren defaultActiveIndex?: number[] | number exclusive?: boolean @@ -31,8 +29,6 @@ export interface AccordionProps { renderContent?: ShorthandRenderFunction renderTitle?: ShorthandRenderFunction accessibility?: Accessibility - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 8af9475984..9b05b286b5 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -7,27 +7,63 @@ import Icon from '../Icon/Icon' import Slot from '../Slot/Slot' import { buttonBehavior } from '../../lib/accessibility' import { Accessibility } from '../../lib/accessibility/types' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { ComponentEventHandler, Extendable, ShorthandRenderFunction, ShorthandValue, + ReactChildren, } from '../../../types/utils' import ButtonGroup from './ButtonGroup' import isFromKeyboard from '../../lib/isFromKeyboard' import { UIComponentProps } from '../../lib/UIComponent' -export interface ButtonProps extends UIComponentProps { - /** An element type to render as (string or function). */ - as?: any +export interface ButtonProps extends UIComponentProps { + /** Accessibility behavior if overridden by the user. */ + accessibility?: Accessibility + + /** + * Button content for childrenApi + * @docSiteIgnore + */ + children?: ReactChildren + + /** A button can appear circular. */ + circular?: boolean + + /** Shorthand for primary content. */ content?: ShorthandValue + + /** A button can show it is currently unable to be interacted with. */ + disabled?: boolean + + /** A button can take the width of its container. */ fluid?: boolean + + /** Button can have an icon. */ icon?: ShorthandValue + + /** A button may indicate that it has only icon. */ iconOnly?: boolean + + /** An icon button can format an Icon to appear before or after the button */ iconPosition?: 'before' | 'after' + + /** + * Called after user's click. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ onClick?: ComponentEventHandler + + /** + * Called after user's focus. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ onFocus?: ComponentEventHandler + + /** A button can be formatted to show different levels of emphasis. */ primary?: boolean /** @@ -39,11 +75,11 @@ export interface ButtonProps extends UIComponentProps { */ renderIcon?: ShorthandRenderFunction + /** A button can be formatted to show only text in order to indicate some less-pronounced actions. */ text?: boolean + + /** A button can be formatted to show different levels of emphasis. */ secondary?: boolean - /** Additional CSS styles to apply to the component instance. */ - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } export interface ButtonState { @@ -65,79 +101,25 @@ class Button extends UIComponent, ButtonState> { public static className = 'ui-button' public static propTypes = { - /** An element type to render as (string or function). */ as: customPropTypes.as, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** - * Button content for childrenApi - * @docSiteIgnore - */ children: PropTypes.node, - - /** A button can appear circular. */ circular: PropTypes.bool, - - /** Additional CSS class name(s) to apply. */ className: PropTypes.string, - - /** A button can show it is currently unable to be interacted with. */ disabled: PropTypes.bool, - - /** Shorthand for primary content. */ content: customPropTypes.contentShorthand, - - /** A button can take the width of its container. */ fluid: PropTypes.bool, - - /** Button can have an icon. */ icon: customPropTypes.itemShorthand, - - /** A button may indicate that it has only icon. */ iconOnly: PropTypes.bool, - - /** An icon button can format an Icon to appear before or after the button */ iconPosition: PropTypes.oneOf(['before', 'after']), - - /** - * Called after user's click. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onClick: PropTypes.func, - - /** - * Called after user's focus. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onFocus: PropTypes.func, - - /** A button can be formatted to show different levels of emphasis. */ primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]), - - /** A button can be formatted to show only text in order to indicate some less-pronounced actions. */ text: PropTypes.bool, - - /** A button can be formatted to show different levels of emphasis. */ secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]), - - /** Accessibility behavior if overridden by the user. */ accessibility: PropTypes.func, - - /** - * A custom render function the icon slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderIcon: PropTypes.func, + styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } public static defaultProps = { diff --git a/src/components/Segment/Segment.tsx b/src/components/Segment/Segment.tsx index bb6d4309b4..4c2ea6a5ef 100644 --- a/src/components/Segment/Segment.tsx +++ b/src/components/Segment/Segment.tsx @@ -2,14 +2,11 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import { customPropTypes, UIComponent, childrenExist } from '../../lib' import { Extendable } from '../../../types/utils' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' +import { UIComponentProps } from '../../lib/UIComponent' -export interface SegmentProps { - as?: any - className?: string +export interface SegmentProps extends UIComponentProps { + /** Shorthand for primary content. */ content?: any - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -21,19 +18,10 @@ class Segment extends UIComponent, any> { static displayName = 'Segment' static propTypes = { - /** An element type to render as (string or function). */ as: customPropTypes.as, - - /** Additional CSS class name(s) to apply. */ className: PropTypes.string, - - /** Shorthand for primary content. */ content: PropTypes.any, - - /** Additional CSS styles to apply to the component instance. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } diff --git a/src/components/Slot/Slot.tsx b/src/components/Slot/Slot.tsx index b7840c9bcf..e892907b83 100644 --- a/src/components/Slot/Slot.tsx +++ b/src/components/Slot/Slot.tsx @@ -8,14 +8,11 @@ import { createShorthand, } from '../../lib' import { Extendable, MapValueToProps, Props } from '../../../types/utils' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' +import { UIComponentProps } from '../../lib/UIComponent' -export interface SlotProps { - as?: any - className?: string +export interface SlotProps extends UIComponentProps { + /** Shorthand for primary content. */ content?: any - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } export const createSlotFactory = (as: any, mapValueToProps: MapValueToProps) => ( @@ -35,19 +32,10 @@ class Slot extends UIComponent, any> { static displayName = 'Slot' static propTypes = { - /** An element type to render as (string or function). */ as: customPropTypes.as, - - /** Additional CSS class name(s) to apply. */ className: PropTypes.string, - - /** Shorthand for primary content. */ content: PropTypes.any, - - /** Additional CSS styles to apply to the component instance. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index f54dcb36b3..f44f2356cb 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -3,19 +3,30 @@ import * as React from 'react' import { Icon } from '../../' import { customPropTypes, UIComponent, createShorthandFactory } from '../../lib' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' +import { UIComponentProps } from '../../lib/UIComponent' -export interface StatusProps { - as?: any - className?: string +export interface StatusProps extends UIComponentProps { + /** A custom color. */ color?: string + + /** Shorthand for the icon, to provide customizing status */ icon?: ShorthandValue + + /** + * A custom render function the icon slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderIcon?: ShorthandRenderFunction + + /** Size multiplier */ size?: number + + /** The pre-defined state values which can be consumed directly. */ state?: 'success' | 'info' | 'warning' | 'error' | 'unknown' - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -29,37 +40,14 @@ class Status extends UIComponent, any> { static displayName = 'Status' static propTypes = { - /** An element type to render as (string or function). */ as: customPropTypes.as, - - /** Additional CSS class name(s) to apply. */ className: PropTypes.string, - - /** A custom color. */ color: PropTypes.string, - - /** Shorthand for the icon, to provide customizing status */ icon: customPropTypes.itemShorthand, - - /** - * A custom render function the icon slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderIcon: PropTypes.func, - - /** Size multiplier */ size: PropTypes.number, - - /** The pre-defined state values which can be consumed directly. */ state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']), - - /** Additional CSS styles to apply to the component instance. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 2dfd1d0b0a..1322215a93 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -4,25 +4,42 @@ import * as React from 'react' import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' import { Extendable } from '../../../types/utils' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { Sizes } from '../../lib/enums' +import { UIComponentProps } from '../../lib/UIComponent' -export interface TextProps { - as?: any +export interface TextProps extends UIComponentProps { + /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */ atMention?: boolean | 'me' - className?: string + + /** Shorthand for primary content. */ content?: any + + /** Set as disabled Text component */ disabled?: boolean + + /** Set as error Text component */ error?: boolean + + /** The text can appear more important and draw user's attention */ important?: boolean + + /** The size for the Text component */ size?: Sizes + + /** The weight for the Text component */ weight?: 'light' | 'semilight' | 'regular' | 'semibold' | 'bold' + + /** Set as success Text component */ success?: boolean + + /** The text can signify a temporary state */ temporary?: boolean + + /** Set as timestamp Text component */ timestamp?: boolean + + /** Truncates text as needed */ truncated?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -39,49 +56,20 @@ class Text extends UIComponent, any> { static displayName = 'Text' static propTypes = { - /** Change the default element type of the Text component */ as: customPropTypes.as, - - /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */ atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]), - - /** Additional CSS class name(s) to apply. */ className: PropTypes.string, - - /** Shorthand for primary content. */ content: customPropTypes.contentShorthand, - - /** Set as disabled Text component */ disabled: PropTypes.bool, - - /** Set as error Text component */ error: PropTypes.bool, - - /** The text can appear more important and draw user's attention */ important: PropTypes.bool, - - /** The size for the Text component */ size: PropTypes.oneOf(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest']), - - /** The weight for the Text component */ weight: PropTypes.oneOf(['light', 'semilight', 'regular', 'semibold', 'bold']), - - /** Set as success Text component */ success: PropTypes.bool, - - /** The text can signify a temporary state */ temporary: PropTypes.bool, - - /** Set as timestamp Text component */ timestamp: PropTypes.bool, - - /** Truncates text as needed */ truncated: PropTypes.bool, - - /** Additional CSS styles to apply to the component instance. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } diff --git a/src/lib/UIComponent.tsx b/src/lib/UIComponent.tsx index 71e97b45d4..933fd5594d 100644 --- a/src/lib/UIComponent.tsx +++ b/src/lib/UIComponent.tsx @@ -1,17 +1,22 @@ import * as React from 'react' import * as _ from 'lodash' import renderComponent, { RenderResultConfig } from './renderComponent' -import { AccessibilityActionHandlers, Accessibility } from './accessibility/types' +import { AccessibilityActionHandlers } from './accessibility/types' import { FocusZone } from './accessibility/FocusZone' -import { ReactChildren } from '../../types/utils' +import { ComponentVariablesInput, ComponentSlotStyle } from '../themes/types' -export interface UIComponentProps { - accessibility?: Accessibility - children?: ReactChildren - /** Some description for circular */ - circular?: boolean +export interface UIComponentProps { + /** An element type to render as (string or function). */ + as?: any + + /** Additional CSS class name(s) to apply. */ className?: string - disabled?: boolean + + /** Additional CSS styles to apply to the component instance. */ + styles?: ComponentSlotStyle + + /** Override for theme site variables to allow modifications of component styling via themes. */ + variables?: ComponentVariablesInput } class UIComponent extends React.Component { From 196a2734239ee986a2024d71cf26d79f626ced79 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 9 Nov 2018 16:27:22 +0100 Subject: [PATCH 04/13] -added example usage of default value for non primitive types --- src/components/Button/Button.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 9b05b286b5..27dcfb1e6d 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -19,7 +19,10 @@ import isFromKeyboard from '../../lib/isFromKeyboard' import { UIComponentProps } from '../../lib/UIComponent' export interface ButtonProps extends UIComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default buttonBehavior + */ accessibility?: Accessibility /** From 21b3c30d2f92c4663e1a5eff7a18bd27b30e7a2e Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 9 Nov 2018 17:26:49 +0100 Subject: [PATCH 05/13] -clean up --- .../util/findExportedComponentDefinitions.ts | 162 ------------------ build/gulp/plugins/util/getComponentInfo.ts | 19 +- build/gulp/plugins/util/index.ts | 1 - build/gulp/plugins/util/isUIComponentClass.ts | 50 ------ .../gulp/plugins/util/parserCustomHandler.ts | 51 ------ package.json | 1 - yarn.lock | 43 +---- 7 files changed, 2 insertions(+), 325 deletions(-) delete mode 100644 build/gulp/plugins/util/findExportedComponentDefinitions.ts delete mode 100644 build/gulp/plugins/util/isUIComponentClass.ts delete mode 100644 build/gulp/plugins/util/parserCustomHandler.ts diff --git a/build/gulp/plugins/util/findExportedComponentDefinitions.ts b/build/gulp/plugins/util/findExportedComponentDefinitions.ts deleted file mode 100644 index 40dfd13fcf..0000000000 --- a/build/gulp/plugins/util/findExportedComponentDefinitions.ts +++ /dev/null @@ -1,162 +0,0 @@ -import { utils } from 'react-docgen' -import isUIComponentClass from './isUIComponentClass' - -const { - isExportsOrModuleAssignment, - isReactComponentClass, - isReactCreateClassCall, - isStatelessComponent, - normalizeClassDefinition, - resolveExportDeclaration, - resolveToValue, - resolveHOC, -} = utils - -const interopRequireDefault = obj => { - return obj && obj.__esModule ? obj : { default: obj } -} - -const isExportsOrModuleAssignment2 = interopRequireDefault(isExportsOrModuleAssignment) -const isReactComponentClass2 = interopRequireDefault(isReactComponentClass) -const isReactCreateClassCall2 = interopRequireDefault(isReactCreateClassCall) -const isStatelessComponent2 = interopRequireDefault(isStatelessComponent) -const normalizeClassDefinition2 = interopRequireDefault(normalizeClassDefinition) -const resolveExportDeclaration2 = interopRequireDefault(resolveExportDeclaration) -const resolveToValue2 = interopRequireDefault(resolveToValue) -const resolveHOC2 = interopRequireDefault(resolveHOC) - -/* - * Copyright (c) 2015, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - * - * - */ - -function ignore() { - return false -} - -function resolveDefinition(definition, types) { - if (isUIComponentClass(definition) || isReactComponentClass2.default(definition)) { - normalizeClassDefinition2.default(definition) - return definition - } - if (isReactCreateClassCall2.default(definition)) { - // return argument - const resolvedPath = resolveToValue2.default(definition.get('arguments', 0)) - if (types.ObjectExpression.check(resolvedPath.node)) { - return resolvedPath - } - } else if (isStatelessComponent2.default(definition)) { - return definition - } - return null -} - -function isComponentDefinition(path) { - return ( - isUIComponentClass(path) || - isReactCreateClassCall2.default(path) || - isReactComponentClass2.default(path) || - isStatelessComponent2.default(path) - ) -} - -/** - * Given an AST, this function tries to find the exported component definitions. - * - * The component definitions are either the ObjectExpression passed to - * `React.createClass` or a `class` definition extending `React.Component` or - * having a `render()` method. - * - * If a definition is part of the following statements, it is considered to be - * exported: - * - * modules.exports = Definition; - * exports.foo = Definition; - * export default Definition; - * export const Definition = ...; - */ -function findExportedComponentDefinitions(ast, recast) { - const types = recast.types.namedTypes - const components: any[] = [] - - function exportDeclaration(path) { - const definitions = resolveExportDeclaration2 - .default(path, types) - .reduce((acc, definition) => { - if (isComponentDefinition(definition)) { - acc.push(definition) - } else { - const resolved = resolveToValue2.default(resolveHOC2.default(definition)) - if (isComponentDefinition(resolved)) { - acc.push(resolved) - } - } - return acc - }, []) - .map(definition => { - return resolveDefinition(definition, types) - }) - - if (definitions.length === 0) { - return false - } - definitions.forEach(definition => { - if (definition && components.indexOf(definition) === -1) { - components.push(definition) - } - }) - return false - } - - recast.visit(ast, { - visitFunctionDeclaration: ignore, - visitFunctionExpression: ignore, - visitClassDeclaration: ignore, - visitClassExpression: ignore, - visitIfStatement: ignore, - visitWithStatement: ignore, - visitSwitchStatement: ignore, - visitCatchCause: ignore, - visitWhileStatement: ignore, - visitDoWhileStatement: ignore, - visitForStatement: ignore, - visitForInStatement: ignore, - - visitExportDeclaration: exportDeclaration, - visitExportNamedDeclaration: exportDeclaration, - visitExportDefaultDeclaration: exportDeclaration, - - visitAssignmentExpression: function visitAssignmentExpression(pathParam) { - let path = pathParam - // Ignore anything that is not `exports.X = ...;` or - // `module.exports = ...;` - if (!isExportsOrModuleAssignment2.default(path)) { - return false - } - // Resolve the value of the right hand side. It should resolve to a call - // expression, something like React.createClass - path = resolveToValue2.default(path.get('right')) - if (!isComponentDefinition(path)) { - path = resolveToValue2.default((resolveHOC2.default && resolveHOC2.default(path)) || path) - if (!isComponentDefinition(path)) { - return false - } - } - const definition = resolveDefinition(path, types) - if (definition && components.indexOf(definition) === -1) { - components.push(definition) - } - return false - }, - }) - - return components -} - -export default findExportedComponentDefinitions diff --git a/build/gulp/plugins/util/getComponentInfo.ts b/build/gulp/plugins/util/getComponentInfo.ts index b0ab01f50b..d12be9e211 100644 --- a/build/gulp/plugins/util/getComponentInfo.ts +++ b/build/gulp/plugins/util/getComponentInfo.ts @@ -1,19 +1,14 @@ import * as _ from 'lodash' import * as path from 'path' -// import { defaultHandlers, parse } from 'react-docgen' import * as fs from 'fs' -// import * as ts from 'typescript' import parseDefaultValue from './parseDefaultValue' import parseDocblock from './parseDocblock' -// import parserCustomHandler from './parserCustomHandler' import parseType from './parseType' -// import findExportedComponentDefinitions from './findExportedComponentDefinitions' import * as reactDocgenTypescript from 'react-docgen-typescript' const getComponentInfo = filepath => { const absPath = path.resolve(process.cwd(), filepath) - // const contents = fs.readFileSync(absPath).toString() const dir = path.dirname(absPath) const dirname = path.basename(dir) const filename = path.basename(absPath) @@ -23,19 +18,7 @@ const getComponentInfo = filepath => { // "element" for "src/elements/Button/Button.js" const componentType = path.basename(path.dirname(dir)).replace(/s$/, '') - // const text = ts.transpile(contents, { - // jsx: ts.JsxEmit.React, - // target: ts.ScriptTarget.Latest, - // module: ts.ModuleKind.CommonJS, - // allowSyntheticDefaultImports: true, - // }) - - // start with react-docgen info - // const components = parse(text, findExportedComponentDefinitions, [ - // // createImportHandler, - // ...defaultHandlers, - // parserCustomHandler, - // ]) + // start with react-docgen-typescript info const components = reactDocgenTypescript.withDefaultConfig().parse(absPath) if (!components.length) { diff --git a/build/gulp/plugins/util/index.ts b/build/gulp/plugins/util/index.ts index ce7001f4d7..6f001dfdcc 100644 --- a/build/gulp/plugins/util/index.ts +++ b/build/gulp/plugins/util/index.ts @@ -2,5 +2,4 @@ export { default as getComponentInfo } from './getComponentInfo' export { default as parseDefaultValue } from './parseDefaultValue' export { default as parseDocblock } from './parseDocblock' export { default as parseDocSection } from './parseDocSection' -export { default as parserCustomHandler } from './parserCustomHandler' export { default as parseType } from './parseType' diff --git a/build/gulp/plugins/util/isUIComponentClass.ts b/build/gulp/plugins/util/isUIComponentClass.ts deleted file mode 100644 index 6d65adbcb5..0000000000 --- a/build/gulp/plugins/util/isUIComponentClass.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { utils } from 'react-docgen' -import * as recast from 'recast' - -const { match, resolveToValue } = utils - -const interopRequireDefault = obj => { - return obj && obj.__esModule ? obj : { default: obj } -} - -const match2 = interopRequireDefault(match) -const resolveToValue2 = interopRequireDefault(resolveToValue) - -const types = recast.types.namedTypes - -const isRenderComponentMethod = node => { - const isProperty = node.type === 'ClassProperty' - return ( - (types.MethodDefinition.check(node) || isProperty) && - !node.computed && - !node.static && - (node.kind === '' || node.kind === 'method' || isProperty) && - node.key.name === 'renderComponent' - ) -} - -/** - * Returns `true` if the path represents a class definition which either - * extends the UIComponent class or implements a `renderComponent()` method. - */ -const isUIComponentClass = path => { - const node = path.node - if (!types.ClassDeclaration.check(node) && !types.ClassExpression.check(node)) { - return false - } - - // renderComponent method - if (node.body.body.some(isRenderComponentMethod)) { - return true - } - // extends UIComponent? - if (!node.superClass) { - return false - } - - const superClass = resolveToValue2.default(path.get('superClass')) - - return !!(superClass && match2.default(superClass.node, { property: { name: 'UIComponent' } })) -} - -export default isUIComponentClass diff --git a/build/gulp/plugins/util/parserCustomHandler.ts b/build/gulp/plugins/util/parserCustomHandler.ts deleted file mode 100644 index 615c54dea7..0000000000 --- a/build/gulp/plugins/util/parserCustomHandler.ts +++ /dev/null @@ -1,51 +0,0 @@ -import * as _ from 'lodash' -import * as recast from 'recast' -import { utils } from 'react-docgen' - -const { namedTypes } = recast.types -const { getMemberValuePath, getPropertyName, resolveToValue } = utils - -const getObjectName = path => `${_.get(path, 'object.name')}.${_.get(path, 'property.name')}` - -const getArgumentValue = path => { - if (namedTypes.Identifier.check(path)) return path.name - if (namedTypes.MemberExpression.check(path)) return getObjectName(path) - - throw new Error('Unsupported value') -} - -const amendPropTypes = (documentation, path) => { - if (!namedTypes.ObjectExpression.check(path.node)) return - - path.get('properties').each(propertyPath => { - const propertyName = getPropertyName(propertyPath) - const propDescriptor = documentation.getPropDescriptor(propertyName) - const valuePath = propertyPath.get('value') - - if (!namedTypes.CallExpression.check(valuePath.node)) return - - const argumentPath = valuePath.get('arguments').value[0] - - const calleePath = valuePath.get('callee').node - const objectName = getObjectName(calleePath) - - if (objectName === 'customPropTypes.onlyProp' || objectName === 'customPropTypes.suggest') { - propDescriptor.type = { - name: 'enum', - value: getArgumentValue(argumentPath), - } - } - }) -} - -const parserCustomHandler = (documentation, path) => { - let propTypesPath = getMemberValuePath(path, 'propTypes') - if (!propTypesPath) return - - propTypesPath = resolveToValue(propTypesPath) - if (!propTypesPath) return - - amendPropTypes(documentation, propTypesPath) -} - -export default parserCustomHandler diff --git a/package.json b/package.json index 63adcd3c39..558b900df2 100644 --- a/package.json +++ b/package.json @@ -145,7 +145,6 @@ "raw-loader": "^0.5.1", "react": "^16.0.0", "react-ace": "^5.1.2", - "react-docgen": "^2.17.0", "react-document-title": "^2.0.3", "react-dom": "^16.0.0", "react-hot-loader": "^4.1.3", diff --git a/yarn.lock b/yarn.lock index 103bdcbd28..116ca8266f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -587,11 +587,6 @@ assign-symbols@^1.0.0: resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367" integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c= -ast-types@0.10.1: - version "0.10.1" - resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.1.tgz#f52fca9715579a14f841d67d7f8d25432ab6a3dd" - integrity sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ== - ast-types@0.11.5: version "0.11.5" resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.5.tgz#9890825d660c03c28339f315e9fa0a360e31ec28" @@ -888,11 +883,6 @@ babylon@^6.18.0: resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ== -babylon@~5.8.3: - version "5.8.38" - resolved "https://registry.yarnpkg.com/babylon/-/babylon-5.8.38.tgz#ec9b120b11bf6ccd4173a18bf217e60b79859ffd" - integrity sha1-7JsSCxG/bM1Bc6GL8hfmC3mFn/0= - bach@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880" @@ -1812,7 +1802,7 @@ core-js@^1.0.0: resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY= -core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.7: +core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7: version "2.5.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e" integrity sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw== @@ -6430,13 +6420,6 @@ no-case@^2.2.0: dependencies: lower-case "^1.1.1" -node-dir@^0.1.10: - version "0.1.17" - resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5" - integrity sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU= - dependencies: - minimatch "^3.0.2" - node-fetch@^1.0.1: version "1.7.3" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" @@ -7551,19 +7534,6 @@ react-docgen-typescript@^1.12.0: resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-1.12.0.tgz#be25d3604e05676f05a1248952f8d5823d7a216a" integrity sha512-EAb2W5UNTTR75zTWm8bbn9iQmh+W/9DvnCazIdzDb+TnzvpcxEFCjRia+Rhpkx4FRRS3AYyJrw5Ar3zX51gJfQ== -react-docgen@^2.17.0: - version "2.21.0" - resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.21.0.tgz#e8f9caf50e15510096616850771f243fadbb9d7d" - integrity sha512-8xNPTrmvHLGNfqlsCYPdXmSkagP1njI5unP3t8WrjTJ4/5hHuP5nb3XH69CnF67HPV5zTkPoafcRBDGSQO6S6A== - dependencies: - async "^2.1.4" - babel-runtime "^6.9.2" - babylon "~5.8.3" - commander "^2.9.0" - doctrine "^2.0.0" - node-dir "^0.1.10" - recast "^0.12.6" - react-document-title@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/react-document-title/-/react-document-title-2.0.3.tgz#bbf922a0d71412fc948245e4283b2412df70f2b9" @@ -7772,17 +7742,6 @@ realpath-native@^1.0.0: dependencies: util.promisify "^1.0.0" -recast@^0.12.6: - version "0.12.9" - resolved "https://registry.yarnpkg.com/recast/-/recast-0.12.9.tgz#e8e52bdb9691af462ccbd7c15d5a5113647a15f1" - integrity sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A== - dependencies: - ast-types "0.10.1" - core-js "^2.4.1" - esprima "~4.0.0" - private "~0.1.5" - source-map "~0.6.1" - recast@^0.15.1: version "0.15.1" resolved "https://registry.yarnpkg.com/recast/-/recast-0.15.1.tgz#65bd45e69653c06a082bb339ab9c59162332fe6f" From 35fc398cead28e19e245258da6c8978f28e0877e Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 9 Nov 2018 17:31:22 +0100 Subject: [PATCH 06/13] -moving comments on the Accordion from prop types to interface prop --- src/components/Accordion/Accordion.tsx | 77 ++++++++++---------------- 1 file changed, 30 insertions(+), 47 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 4b3fc42631..7a49fd1a8c 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -17,17 +17,47 @@ import { import { UIComponentProps } from '../../lib/UIComponent' export interface AccordionProps extends UIComponentProps { + /** Index of the currently active panel. */ activeIndex?: number[] | number + + /** + * Used to set content when using childrenApi - internal only + * @docSiteIgnore + */ children?: ReactChildren + + /** Initial activeIndex value. */ defaultActiveIndex?: number[] | number + + /** Only allow one panel open at a time. */ exclusive?: boolean + + /** + * Called when a panel title is clicked. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All item props. + */ onTitleClick?: ComponentEventHandler + + /** Shorthand array of props for Accordion. */ panels?: { content: ShorthandValue title: ShorthandValue }[] + + /** + * A custom render iterator for rendering each Accordion panel content. + * The default component, props, and children are available for each panel content. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderContent?: ShorthandRenderFunction renderTitle?: ShorthandRenderFunction + + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility } @@ -40,42 +70,19 @@ class Accordion extends AutoControlledComponent, any> static className = 'ui-accordion' static propTypes = { - /** An element type to render as (string or function). */ as: customPropTypes.as, - - /** Index of the currently active panel. */ activeIndex: customPropTypes.every([ customPropTypes.disallow(['children']), PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), ]), - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ className: PropTypes.string, - - /** Initial activeIndex value. */ defaultActiveIndex: customPropTypes.every([ customPropTypes.disallow(['children']), PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), ]), - - /** Only allow one panel open at a time. */ exclusive: PropTypes.bool, - - /** - * Called when a panel title is clicked. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All item props. - */ onTitleClick: customPropTypes.every([customPropTypes.disallow(['children']), PropTypes.func]), - - /** Shorthand array of props for Accordion. */ panels: customPropTypes.every([ customPropTypes.disallow(['children']), PropTypes.arrayOf( @@ -85,34 +92,10 @@ class Accordion extends AutoControlledComponent, any> }), ), ]), - - /** Accessibility behavior if overridden by the user. */ accessibility: PropTypes.func, - - /** - * A custom render iterator for rendering each Accordion panel title. - * The default component, props, and children are available for each panel title. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderTitle: PropTypes.func, - - /** - * A custom render iterator for rendering each Accordion panel content. - * The default component, props, and children are available for each panel content. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderContent: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } From 6231d66d08d573498b6ad98fc456fd677b51652b Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 9 Nov 2018 17:59:35 +0100 Subject: [PATCH 07/13] -removing recast -moving react-docgen-typescript to devDependencies --- package.json | 3 +-- yarn.lock | 19 ++----------------- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 09a7e3ccec..202d736b14 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,6 @@ "lodash": "^4.17.10", "prop-types": "^15.6.1", "react-custom-scrollbars": "^4.2.1", - "react-docgen-typescript": "^1.12.0", "react-fela": "^7.2.0", "react-popper": "^1.0.2", "what-input": "^5.1.2" @@ -145,13 +144,13 @@ "raw-loader": "^0.5.1", "react": "^16.0.0", "react-ace": "^5.1.2", + "react-docgen-typescript": "^1.12.0", "react-document-title": "^2.0.3", "react-dom": "^16.0.0", "react-hot-loader": "^4.1.3", "react-router": "^4.1.2", "react-router-dom": "^4.1.2", "react-test-renderer": "^16.0.0", - "recast": "^0.15.1", "rimraf": "^2.6.1", "satisfied": "^1.1.1", "screener-runner": "^0.10.7", diff --git a/yarn.lock b/yarn.lock index 116ca8266f..ea568d39b4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -587,11 +587,6 @@ assign-symbols@^1.0.0: resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367" integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c= -ast-types@0.11.5: - version "0.11.5" - resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.5.tgz#9890825d660c03c28339f315e9fa0a360e31ec28" - integrity sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw== - astral-regex@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9" @@ -2671,7 +2666,7 @@ esprima@^3.1.3: resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633" integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM= -esprima@^4.0.0, esprima@~4.0.0: +esprima@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804" integrity sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw== @@ -7266,7 +7261,7 @@ pretty-hrtime@^1.0.0: resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= -private@^0.1.8, private@~0.1.5: +private@^0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg== @@ -7742,16 +7737,6 @@ realpath-native@^1.0.0: dependencies: util.promisify "^1.0.0" -recast@^0.15.1: - version "0.15.1" - resolved "https://registry.yarnpkg.com/recast/-/recast-0.15.1.tgz#65bd45e69653c06a082bb339ab9c59162332fe6f" - integrity sha512-Q2TQyDveVn1ZGyFJlb6nPyu/ojkX+xtFSMSucO2L+yWVulqXhRtA6KyvJy860APaWBsKrTz2BMnGtYu6++35ow== - dependencies: - ast-types "0.11.5" - esprima "~4.0.0" - private "~0.1.5" - source-map "~0.6.1" - rechoir@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384" From 08dbd0b2d91627bb1eb9c56598d51875016b2d86 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 12 Nov 2018 17:37:33 +0100 Subject: [PATCH 08/13] -extracting common prop interfaces and prop types --- src/components/Accordion/Accordion.tsx | 19 ++++--------- src/components/Button/Button.tsx | 37 +++++++++++++------------- src/components/Segment/Segment.tsx | 18 +++++-------- src/components/Slot/Slot.tsx | 36 ++++++++++++------------- src/components/Status/Status.tsx | 8 +++--- src/components/Text/Text.tsx | 31 ++++++++++++--------- src/lib/UIComponent.tsx | 15 ----------- src/lib/commonPropInterfaces.ts | 31 +++++++++++++++++++++ src/lib/commonPropTypes.ts | 21 +++++++++++++++ 9 files changed, 121 insertions(+), 95 deletions(-) create mode 100644 src/lib/commonPropInterfaces.ts create mode 100644 src/lib/commonPropTypes.ts diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 7a49fd1a8c..eb8378f218 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -10,22 +10,16 @@ import { Accessibility } from '../../lib/accessibility/types' import { ComponentEventHandler, Extendable, - ReactChildren, ShorthandRenderFunction, ShorthandValue, } from '../../../types/utils' -import { UIComponentProps } from '../../lib/UIComponent' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface AccordionProps extends UIComponentProps { +export interface AccordionProps extends UIComponentProps, ChildrenComponentProps { /** Index of the currently active panel. */ activeIndex?: number[] | number - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children?: ReactChildren - /** Initial activeIndex value. */ defaultActiveIndex?: number[] | number @@ -70,13 +64,12 @@ class Accordion extends AutoControlledComponent, any> static className = 'ui-accordion' static propTypes = { - as: customPropTypes.as, + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, activeIndex: customPropTypes.every([ customPropTypes.disallow(['children']), PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), ]), - children: PropTypes.node, - className: PropTypes.string, defaultActiveIndex: customPropTypes.every([ customPropTypes.disallow(['children']), PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), @@ -95,8 +88,6 @@ class Accordion extends AutoControlledComponent, any> accessibility: PropTypes.func, renderTitle: PropTypes.func, renderContent: PropTypes.func, - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } public static defaultProps = { diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 27dcfb1e6d..d66291e39c 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -12,31 +12,33 @@ import { Extendable, ShorthandRenderFunction, ShorthandValue, - ReactChildren, } from '../../../types/utils' import ButtonGroup from './ButtonGroup' import isFromKeyboard from '../../lib/isFromKeyboard' -import { UIComponentProps } from '../../lib/UIComponent' - -export interface ButtonProps extends UIComponentProps { +import { + UIComponentProps, + ContentComponentProps, + ChildrenComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface ButtonProps + extends UIComponentProps, + ContentComponentProps, + ChildrenComponentProps { /** * Accessibility behavior if overridden by the user. * @default buttonBehavior */ accessibility?: Accessibility - /** - * Button content for childrenApi - * @docSiteIgnore - */ - children?: ReactChildren - /** A button can appear circular. */ circular?: boolean - /** Shorthand for primary content. */ - content?: ShorthandValue - /** A button can show it is currently unable to be interacted with. */ disabled?: boolean @@ -104,12 +106,11 @@ class Button extends UIComponent, ButtonState> { public static className = 'ui-button' public static propTypes = { - as: customPropTypes.as, - children: PropTypes.node, + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, circular: PropTypes.bool, - className: PropTypes.string, disabled: PropTypes.bool, - content: customPropTypes.contentShorthand, fluid: PropTypes.bool, icon: customPropTypes.itemShorthand, iconOnly: PropTypes.bool, @@ -121,8 +122,6 @@ class Button extends UIComponent, ButtonState> { secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]), accessibility: PropTypes.func, renderIcon: PropTypes.func, - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } public static defaultProps = { diff --git a/src/components/Segment/Segment.tsx b/src/components/Segment/Segment.tsx index 4c2ea6a5ef..4d1d518985 100644 --- a/src/components/Segment/Segment.tsx +++ b/src/components/Segment/Segment.tsx @@ -1,13 +1,10 @@ import * as React from 'react' -import * as PropTypes from 'prop-types' -import { customPropTypes, UIComponent, childrenExist } from '../../lib' +import { UIComponent, childrenExist } from '../../lib' import { Extendable } from '../../../types/utils' -import { UIComponentProps } from '../../lib/UIComponent' +import { UIComponentProps, ContentComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, contentComponentPropsTypes } from '../../lib/commonPropTypes' -export interface SegmentProps extends UIComponentProps { - /** Shorthand for primary content. */ - content?: any -} +export interface SegmentProps extends UIComponentProps, ContentComponentProps {} /** * A segment is used to create a grouping of related content. @@ -18,11 +15,8 @@ class Segment extends UIComponent, any> { static displayName = 'Segment' static propTypes = { - as: customPropTypes.as, - className: PropTypes.string, - content: PropTypes.any, - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + ...commonUIComponentPropTypes, + ...contentComponentPropsTypes, } static defaultProps = { diff --git a/src/components/Slot/Slot.tsx b/src/components/Slot/Slot.tsx index e892907b83..2a1cf5d242 100644 --- a/src/components/Slot/Slot.tsx +++ b/src/components/Slot/Slot.tsx @@ -1,19 +1,21 @@ import * as React from 'react' -import * as PropTypes from 'prop-types' -import { - customPropTypes, - UIComponent, - childrenExist, - RenderResultConfig, - createShorthand, -} from '../../lib' +import { UIComponent, childrenExist, RenderResultConfig, createShorthand } from '../../lib' import { Extendable, MapValueToProps, Props } from '../../../types/utils' -import { UIComponentProps } from '../../lib/UIComponent' +import { + UIComponentProps, + ContentComponentProps, + ChildrenComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + contentComponentPropsTypes, + childrenComponentPropTypes, +} from '../../lib/commonPropTypes' -export interface SlotProps extends UIComponentProps { - /** Shorthand for primary content. */ - content?: any -} +export interface SlotProps + extends UIComponentProps, + ContentComponentProps, + ChildrenComponentProps {} export const createSlotFactory = (as: any, mapValueToProps: MapValueToProps) => ( val, @@ -32,11 +34,9 @@ class Slot extends UIComponent, any> { static displayName = 'Slot' static propTypes = { - as: customPropTypes.as, - className: PropTypes.string, - content: PropTypes.any, - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + ...commonUIComponentPropTypes, + ...contentComponentPropsTypes, + ...childrenComponentPropTypes, } static defaultProps = { diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx index f44f2356cb..12b0ec435d 100644 --- a/src/components/Status/Status.tsx +++ b/src/components/Status/Status.tsx @@ -4,7 +4,8 @@ import { Icon } from '../../' import { customPropTypes, UIComponent, createShorthandFactory } from '../../lib' import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' -import { UIComponentProps } from '../../lib/UIComponent' +import { UIComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' export interface StatusProps extends UIComponentProps { /** A custom color. */ @@ -40,15 +41,12 @@ class Status extends UIComponent, any> { static displayName = 'Status' static propTypes = { - as: customPropTypes.as, - className: PropTypes.string, + ...commonUIComponentPropTypes, color: PropTypes.string, icon: customPropTypes.itemShorthand, renderIcon: PropTypes.func, size: PropTypes.number, state: PropTypes.oneOf(['success', 'info', 'warning', 'error', 'unknown']), - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index f225d3408a..9d52b8a922 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -1,18 +1,27 @@ import * as PropTypes from 'prop-types' import * as React from 'react' -import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' +import { childrenExist, createShorthandFactory, UIComponent } from '../../lib' import { Extendable } from '../../../types/utils' -import { UIComponentProps } from '../../lib/UIComponent' - -export interface TextProps extends UIComponentProps { +import { + UIComponentProps, + ContentComponentProps, + ChildrenComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface TextProps + extends UIComponentProps, + ContentComponentProps, + ChildrenComponentProps { /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */ atMention?: boolean | 'me' - /** Shorthand for primary content. */ - content?: any - /** Set as disabled Text component */ disabled?: boolean @@ -55,10 +64,10 @@ class Text extends UIComponent, any> { static displayName = 'Text' static propTypes = { - as: customPropTypes.as, atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]), - className: PropTypes.string, - content: customPropTypes.contentShorthand, + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, disabled: PropTypes.bool, error: PropTypes.bool, important: PropTypes.bool, @@ -68,8 +77,6 @@ class Text extends UIComponent, any> { temporary: PropTypes.bool, timestamp: PropTypes.bool, truncated: PropTypes.bool, - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/lib/UIComponent.tsx b/src/lib/UIComponent.tsx index 933fd5594d..a7ee4edf51 100644 --- a/src/lib/UIComponent.tsx +++ b/src/lib/UIComponent.tsx @@ -3,21 +3,6 @@ import * as _ from 'lodash' import renderComponent, { RenderResultConfig } from './renderComponent' import { AccessibilityActionHandlers } from './accessibility/types' import { FocusZone } from './accessibility/FocusZone' -import { ComponentVariablesInput, ComponentSlotStyle } from '../themes/types' - -export interface UIComponentProps { - /** An element type to render as (string or function). */ - as?: any - - /** Additional CSS class name(s) to apply. */ - className?: string - - /** Additional CSS styles to apply to the component instance. */ - styles?: ComponentSlotStyle - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables?: ComponentVariablesInput -} class UIComponent extends React.Component { private readonly childClass = this.constructor as typeof UIComponent diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts new file mode 100644 index 0000000000..4e40d79783 --- /dev/null +++ b/src/lib/commonPropInterfaces.ts @@ -0,0 +1,31 @@ +import { ComponentVariablesInput, ComponentSlotStyle } from '../themes/types' +import { ShorthandValue, ReactChildren } from '../../types/utils' + +export interface StyledComponentProps { + /** Additional CSS styles to apply to the component instance. */ + styles?: ComponentSlotStyle + + /** Override for theme site variables to allow modifications of component styling via themes. */ + variables?: ComponentVariablesInput +} + +export interface UIComponentProps extends StyledComponentProps { + /** An element type to render as (string or function). */ + as?: any + + /** Additional CSS class name(s) to apply. */ + className?: string +} + +export interface ContentComponentProps { + /** Shorthand for primary content. */ + content?: ShorthandValue +} + +export interface ChildrenComponentProps { + /** + * Button content for childrenApi + * @docSiteIgnore + */ + children?: ReactChildren +} diff --git a/src/lib/commonPropTypes.ts b/src/lib/commonPropTypes.ts new file mode 100644 index 0000000000..b82542e688 --- /dev/null +++ b/src/lib/commonPropTypes.ts @@ -0,0 +1,21 @@ +import * as PropTypes from 'prop-types' +import { customPropTypes } from './index' + +export const styledComponentPropTypes = { + styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), +} + +export const commonUIComponentPropTypes = { + ...styledComponentPropTypes, + as: customPropTypes.as, + className: PropTypes.string, +} + +export const contentComponentPropsTypes = { + content: customPropTypes.contentShorthand, +} + +export const childrenComponentPropTypes = { + children: PropTypes.node, +} From 1c872e0f2161a54ba0a8db3a62b8d12999b46325 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 13 Nov 2018 16:53:17 +0100 Subject: [PATCH 09/13] -converting some other component's props interfaces --- src/components/Accordion/AccordionContent.tsx | 57 ++++--- src/components/Accordion/AccordionTitle.tsx | 63 ++++---- src/components/Attachment/Attachment.tsx | 127 +++++++--------- src/components/Avatar/Avatar.tsx | 92 +++++------ src/components/Button/ButtonGroup.tsx | 86 +++++------ src/components/Chat/Chat.tsx | 61 +++----- src/components/Chat/ChatItem.tsx | 62 +++----- src/components/Chat/ChatMessage.tsx | 137 ++++++++--------- src/components/Divider/Divider.tsx | 65 ++++---- src/components/Form/Form.tsx | 85 +++++------ src/components/Form/FormField.tsx | 115 ++++++-------- src/components/Grid/Grid.tsx | 49 ++---- src/components/Header/Header.tsx | 75 ++++----- src/components/Header/HeaderDescription.tsx | 53 +++---- src/components/Icon/Icon.tsx | 55 +++---- src/components/Image/Image.tsx | 41 ++--- src/components/Input/Input.tsx | 143 ++++++++---------- 17 files changed, 552 insertions(+), 814 deletions(-) diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx index ea3c015355..22b57a6d07 100644 --- a/src/components/Accordion/AccordionContent.tsx +++ b/src/components/Accordion/AccordionContent.tsx @@ -1,15 +1,32 @@ import * as PropTypes from 'prop-types' import * as React from 'react' -import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import { Extendable, ReactChildren, ComponentEventHandler } from '../../../types/utils' +import { childrenExist, createShorthandFactory, UIComponent } from '../../lib' +import { Extendable, ComponentEventHandler } from '../../../types/utils' +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' -export interface AccordionContentProps { - as?: any +export interface AccordionContentProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** Whether or not the content is visible. */ active?: boolean - children?: ReactChildren - className?: string - content?: React.ReactNode + + /** + * Called on click. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ onClick?: ComponentEventHandler } @@ -24,30 +41,10 @@ class AccordionContent extends UIComponent, an static className = 'ui-accordion__content' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Whether or not the content is visible. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, active: PropTypes.bool, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ - content: customPropTypes.contentShorthand, - - /** - * Called on click. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onClick: PropTypes.func, } diff --git a/src/components/Accordion/AccordionTitle.tsx b/src/components/Accordion/AccordionTitle.tsx index d8286c0f2e..4d29770a6f 100644 --- a/src/components/Accordion/AccordionTitle.tsx +++ b/src/components/Accordion/AccordionTitle.tsx @@ -2,16 +2,35 @@ import * as _ from 'lodash' import * as PropTypes from 'prop-types' import * as React from 'react' -import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import { Extendable, ReactChildren, ComponentEventHandler } from '../../../types/utils' - -export interface AccordionTitleProps { - as?: any +import { childrenExist, createShorthandFactory, UIComponent } from '../../lib' +import { Extendable, ComponentEventHandler } from '../../../types/utils' +import { + UIComponentProps, + ContentComponentProps, + ChildrenComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface AccordionTitleProps + extends UIComponentProps, + ContentComponentProps, + ChildrenComponentProps { + /** Whether or not the title is in the open state. */ active?: boolean - children?: ReactChildren - className?: string - content?: React.ReactNode + + /** AccordionTitle index inside Accordion. */ index?: string | number + + /** + * Called on click. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ onClick?: ComponentEventHandler } @@ -26,33 +45,11 @@ class AccordionTitle extends UIComponent, any> { static className = 'ui-accordion__title' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Whether or not the title is in the open state. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, active: PropTypes.bool, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ - content: customPropTypes.contentShorthand, - - /** AccordionTitle index inside Accordion. */ index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - - /** - * Called on click. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onClick: PropTypes.func, } diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx index 85aac7e63f..98ed1e43c2 100644 --- a/src/components/Attachment/Attachment.tsx +++ b/src/components/Attachment/Attachment.tsx @@ -4,27 +4,75 @@ import * as React from 'react' import { UIComponent, customPropTypes, createShorthandFactory, createHTMLDivision } from '../../lib' import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import Icon from '../Icon/Icon' import Button from '../Button/Button' import Text from '../Text/Text' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export type AttachmentProps = { +export interface AttachmentProps extends UIComponentProps, ChildrenComponentProps { + /** Button shorthand for the action slot. */ action?: ShorthandValue + + /** An Attachment can be styled to indicate possible user interaction. */ actionable?: boolean - as?: any - children?: React.ReactChildren + + /** A string describing the attachment. */ description?: ShorthandValue + + /** The name of the attachment. */ header?: ShorthandValue + + /** Shorthand for the icon. */ icon?: ShorthandValue + + /** Value indicating percent complete. */ progress?: string | number + + /** + * A custom render function the action slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderAction?: ShorthandRenderFunction + + /** + * A custom render function the description slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderDescription?: ShorthandRenderFunction + + /** + * A custom render function the header slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderHeader?: ShorthandRenderFunction + + /** + * A custom render function the icon slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderIcon?: ShorthandRenderFunction + + /** + * A custom render function the progress slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderProgress?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -38,82 +86,19 @@ class Attachment extends UIComponent, any> { static displayName = 'Attachment' static propTypes = { - /** Button shorthand for the action slot. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, action: customPropTypes.itemShorthand, - - /** An Attachment can be styled to indicate possible user interaction. */ actionable: PropTypes.bool, - - /** An element type to render as. */ - as: customPropTypes.as, - - /** Define your own children. - * @docSiteIgnore - */ - children: PropTypes.node, - - /** A string describing the attachment. */ description: customPropTypes.itemShorthand, - - /** The name of the attachment. */ header: customPropTypes.itemShorthand, - - /** Shorthand for the icon. */ icon: customPropTypes.itemShorthand, - - /** Value indicating percent complete. */ progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - - /** - * A custom render function the action slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderAction: PropTypes.func, - - /** - * A custom render function the description slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderDescription: PropTypes.func, - - /** - * A custom render function the header slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderHeader: PropTypes.func, - - /** - * A custom render function the icon slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderIcon: PropTypes.func, - - /** - * A custom render function the progress slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderProgress: PropTypes.func, - - /** Custom styles to be applied to the component. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Custom variables to be applied to the component. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } renderComponent({ ElementType, classes, rest, styles, variables }) { diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index e9107f4c4d..8acb0aa749 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -3,23 +3,55 @@ import * as React from 'react' import { Image, Label, Status } from '../../' import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import { ComponentSlotStyle, ComponentVariablesInput } from '../../themes/types' import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' +import { UIComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' -export interface AvatarProps { - as?: any - className?: string +export interface AvatarProps extends UIComponentProps { + /** Shorthand for the image. */ image?: ShorthandValue + + /** Shorthand for the label. */ label?: ShorthandValue + + /** The name used for displaying the initials of the avatar if the image is not provided. */ name?: string + + /** + * A custom render function the image slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderImage?: ShorthandRenderFunction + + /** + * A custom render function the label slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderLabel?: ShorthandRenderFunction + + /** + * A custom render function the status slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderStatus?: ShorthandRenderFunction + + /** Size multiplier. */ size?: number + + /** Shorthand for the status of the user. */ status?: ShorthandValue + + /** Custom method for generating the initials from the name property, shown in the avatar if there is no image provided. */ getInitials?: (name: string) => string - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -33,62 +65,16 @@ class Avatar extends UIComponent, any> { static displayName = 'Avatar' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** The name used for displaying the initials of the avatar if the image is not provided. */ + ...commonUIComponentPropTypes, name: PropTypes.string, - - /** Shorthand for the image. */ image: customPropTypes.itemShorthand, - - /** Shorthand for the label. */ label: customPropTypes.itemShorthand, - - /** Size multiplier. */ size: PropTypes.number, - - /** Shorthand for the status of the user. */ status: customPropTypes.itemShorthand, - - /** Custom method for generating the initials from the name property, shown in the avatar if there is no image provided. */ getInitials: PropTypes.func, - - /** - * A custom render function the image slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderImage: PropTypes.func, - - /** - * A custom render function the label slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderLabel: PropTypes.func, - - /** - * A custom render function the status slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderStatus: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Button/ButtonGroup.tsx b/src/components/Button/ButtonGroup.tsx index c1c378c24b..ef68002f27 100644 --- a/src/components/Button/ButtonGroup.tsx +++ b/src/components/Button/ButtonGroup.tsx @@ -3,27 +3,45 @@ import * as React from 'react' import * as _ from 'lodash' import { UIComponent, childrenExist, customPropTypes } from '../../lib' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' -import { - Extendable, - ReactChildren, - ShorthandRenderFunction, - ShorthandValue, -} from '../../../types/utils' +import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' import Button from './Button' import { buttonGroupBehavior } from '../../lib/accessibility' import { Accessibility } from '../../lib/accessibility/types' - -export interface ButtonGroupProps { - as?: any +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface ButtonGroupProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** + * Accessibility behavior if overridden by the user. + */ + accessibility?: Accessibility + + /** The buttons contained inside the ButtonGroup. */ buttons?: ShorthandValue[] - children?: ReactChildren + + /** The buttons inside group can appear circular. */ circular?: boolean - className?: string - content?: React.ReactNode + + /** + * A custom render iterator for rendering each of the Button.Group buttons. + * The default component, props, and children are available for each button. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderButton?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -35,45 +53,13 @@ class ButtonGroup extends UIComponent, any> { public static className = 'ui-buttons' public static propTypes = { - /** Accessibility behavior if overridden by the user. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** The buttons contained inside the ButtonGroup. */ buttons: customPropTypes.collectionShorthand, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** The buttons inside group can appear circular. */ circular: PropTypes.bool, - - /** Shorthand for primary content. */ - content: customPropTypes.contentShorthand, - - /** - * A custom render iterator for rendering each of the Button.Group buttons. - * The default component, props, and children are available for each button. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderButton: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } public static defaultProps = { diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 5cb3cdc6ee..8db16fd846 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -5,25 +5,28 @@ import * as React from 'react' import { childrenExist, customPropTypes, UIComponent } from '../../lib' import ChatItem from './ChatItem' import ChatMessage from './ChatMessage' -import { ComponentSlotStyle, ComponentVariablesInput } from '../../themes/types' -import { - Extendable, - ReactChildren, - ShorthandValue, - ShorthandRenderFunction, -} from '../../../types/utils' +import { Extendable, ShorthandValue, ShorthandRenderFunction } from '../../../types/utils' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' import { chatBehavior } from '../../lib/accessibility' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface ChatProps { +export interface ChatProps extends UIComponentProps, ChildrenComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any - className?: string - children?: ReactChildren + + /** Shorthand array of the items inside the chat. */ items?: ShorthandValue[] + + /** + * A custom render iterator for rendering each of the Chat items. + * The default component, props, and children are available for each item. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderItem?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -35,39 +38,11 @@ class Chat extends UIComponent, any> { static displayName = 'Chat' static propTypes = { - /** Accessibility behavior if overridden by the user. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Shorthand array of the items inside the chat. */ items: PropTypes.arrayOf(customPropTypes.itemShorthand), - - /** - * A custom render iterator for rendering each of the Chat items. - * The default component, props, and children are available for each item. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderItem: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { accessibility: chatBehavior as Accessibility, as: 'ul' } diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index 5086242514..ade91f3e72 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -1,25 +1,25 @@ import * as React from 'react' import * as PropTypes from 'prop-types' -import { - childrenExist, - createShorthandFactory, - customPropTypes, - RenderResultConfig, - UIComponent, -} from '../../lib' +import { childrenExist, createShorthandFactory, RenderResultConfig, UIComponent } from '../../lib' import Slot from '../Slot/Slot' -import { ComponentSlotStyle, ComponentVariablesInput } from '../../themes/types' -import { Extendable, ReactChildren, ShorthandRenderFunction } from '../../../types/utils' - -export interface ChatItemProps { - as?: any - content?: React.ReactNode - children?: ReactChildren - className?: string +import { Extendable, ShorthandRenderFunction } from '../../../types/utils' +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface ChatItemProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { renderContent?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -33,32 +33,10 @@ class ChatItem extends UIComponent, any> { static displayName = 'ChatItem' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Child content. */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for the primary content. */ - content: PropTypes.node, - - /** - * A custom render function the content slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, renderContent: PropTypes.func, - - /** Custom styles to be applied for component. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Custom variables to be applied for component. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index acead5f639..6f0e8fed77 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -10,40 +10,82 @@ import { UIComponent, } from '../../lib' import { - ComponentSlotStyle, ComponentVariablesInput, ComponentSlotClasses, ComponentSlotStylesInput, } from '../../themes/types' -import { - Extendable, - ReactChildren, - ShorthandRenderFunction, - ShorthandValue, -} from '../../../types/utils' +import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' import Avatar from '../Avatar/Avatar' import { chatMessageBehavior } from '../../lib/accessibility' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' import Layout from '../Layout/Layout' import Text from '../Text/Text' import Slot from '../Slot/Slot' - -export interface ChatMessageProps { +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface ChatMessageProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any + + /** Author of the message. */ author?: ShorthandValue + + /** Chat messages can have an avatar. */ avatar?: ShorthandValue - children?: ReactChildren - className?: string - content?: any + + /** Indicates whether message belongs to the current user. */ mine?: boolean + + /** + * A custom render function the author slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderAuthor?: ShorthandRenderFunction + + /** + * A custom render function the avatar slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderAvatar?: ShorthandRenderFunction + + /** + * A custom render function the content slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderContent?: ShorthandRenderFunction + + /** + * A custom render function the timestamp slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderTimestamp?: ShorthandRenderFunction - styles?: ComponentSlotStyle + + /** Timestamp of the message. */ timestamp?: ShorthandValue - variables?: ComponentVariablesInput } /** @@ -57,77 +99,18 @@ class ChatMessage extends UIComponent, any> { static displayName = 'ChatMessage' static propTypes = { - /** Accessibility behavior if overridden by the user. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Author of the message. */ author: customPropTypes.itemShorthand, - - /** Chat messages can have an avatar. */ avatar: customPropTypes.itemShorthand, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for the primary content. */ - content: PropTypes.any, - - /** Indicates whether message belongs to the current user. */ mine: PropTypes.bool, - - /** - * A custom render function the author slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderAuthor: PropTypes.func, - - /** - * A custom render function the avatar slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderAvatar: PropTypes.func, - - /** - * A custom render function the content slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderContent: PropTypes.func, - - /** - * A custom render function the timestamp slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderTimestamp: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Timestamp of the message. */ timestamp: customPropTypes.itemShorthand, - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index b8a4f90c46..8a211288c4 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -1,21 +1,34 @@ import * as React from 'react' import * as PropTypes from 'prop-types' -import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' -import { Extendable, ReactChildren } from '../../../types/utils' - -export interface DividerProps { - as?: any - children?: ReactChildren - className?: string - content?: React.ReactNode +import { childrenExist, createShorthandFactory, UIComponent } from '../../lib' +import { Extendable } from '../../../types/utils' +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface DividerProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** A divider can be fitted, without any space above or below it. */ fitted?: boolean + + /** Size multiplier (default 0) * */ size?: number + + /** A Divider can be formatted to show different levels of emphasis. */ type?: 'primary' | 'secondary' + + /** A divider can appear more important and draw the user's attention. */ important?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -29,37 +42,13 @@ class Divider extends UIComponent, any> { static className = 'ui-divider' static propTypes = { - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ - content: customPropTypes.contentShorthand, - - /** A divider can be fitted, without any space above or below it. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, fitted: PropTypes.bool, - - /** Size multiplier (default 0) * */ size: PropTypes.number, - - /** A Divider can be formatted to show different levels of emphasis. */ type: PropTypes.oneOf(['primary', 'secondary']), - - /** A divider can appear more important and draw the user's attention. */ important: PropTypes.bool, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index b6b2b4d687..9a43bbc7ad 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -3,27 +3,50 @@ import * as React from 'react' import * as _ from 'lodash' import { UIComponent, childrenExist, customPropTypes } from '../../lib' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { ComponentEventHandler, Extendable, - ReactChildren, ShorthandValue, ShorthandRenderFunction, } from '../../../types/utils' import FormField from './FormField' - -export interface FormProps { +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface FormProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** The HTML form action. */ action?: string - as?: any - children?: ReactChildren - className?: string - content?: ShorthandValue + + /** Shorthand array of props for the Form.Fields inside the Form. */ fields?: ShorthandValue[] + + /** + * The HTML form submit handler. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ onSubmit?: ComponentEventHandler + + /** + * A custom render iterator for rendering each of the Form fields. + * The default component, props, and children are available for each field. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderField?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -39,49 +62,13 @@ class Form extends UIComponent, any> { public static className = 'ui-form' public static propTypes = { - /** The HTML form action. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, action: PropTypes.string, - - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Form content for childrenApi. - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ - content: customPropTypes.contentShorthand, - - /** Shorthand array of props for the Form.Fields inside the Form. */ fields: customPropTypes.collectionShorthand, - - /** - * The HTML form submit handler. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onSubmit: PropTypes.func, - - /** - * A custom render iterator for rendering each of the Form fields. - * The default component, props, and children are available for each field. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderField: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } public static defaultProps = { diff --git a/src/components/Form/FormField.tsx b/src/components/Form/FormField.tsx index 6b4334b227..393ae24cc1 100644 --- a/src/components/Form/FormField.tsx +++ b/src/components/Form/FormField.tsx @@ -2,34 +2,64 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { UIComponent, customPropTypes, childrenExist, createShorthandFactory } from '../../lib' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' -import { - Extendable, - ReactChildren, - ShorthandValue, - ShorthandRenderFunction, -} from '../../../types/utils' +import { Extendable, ShorthandValue, ShorthandRenderFunction } from '../../../types/utils' import Text from '../Text/Text' import { default as Slot } from '../Slot/Slot' import Input from '../Input/Input' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface FormFieldProps { - as?: any - children?: ReactChildren - className?: string +export interface FormFieldProps extends UIComponentProps, ChildrenComponentProps { + /** A control for the form field. */ control?: ShorthandValue + + /** The HTML input id. This will be set on the control element and will be use for linking it with the label for correct accessibility. */ id?: string + + /** A field can have its label next to instead of above it. */ inline?: boolean + + /** A label for the form field. */ label?: ShorthandValue + + /** Text message that will be displayed below the control (can be used for error, warning, success messages). */ message?: ShorthandValue + + /** The HTML input name. */ name?: string + + /** + * A custom render function for the control slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderControl?: ShorthandRenderFunction + + /** + * A custom render function for the label slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderLabel?: ShorthandRenderFunction + + /** + * A custom render function for the message slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderMessage?: ShorthandRenderFunction + + /** A field can show that input is mandatory. */ required?: boolean - styles?: ComponentSlotStyle + + /** The HTML input type. */ type?: string - variables?: ComponentVariablesInput } /** @@ -43,74 +73,19 @@ class FormField extends UIComponent, any> { static create: Function public static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * FormField content for childrenApi. - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** A control for the form field. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, control: customPropTypes.itemShorthand, - - /** The HTML input id. This will be set on the control element and will be use for linking it with the label for correct accessibility. */ id: PropTypes.string, - - /** A field can have its label next to instead of above it. */ inline: PropTypes.bool, - - /** A label for the form field. */ label: customPropTypes.itemShorthand, - - /** Text message that will be displayed below the control (can be used for error, warning, success messages). */ message: customPropTypes.itemShorthand, - - /** The HTML input name. */ name: PropTypes.string, - - /** - * A custom render function for the control slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderControl: PropTypes.func, - - /** - * A custom render function for the label slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderLabel: PropTypes.func, - - /** - * A custom render function for the message slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderMessage: PropTypes.func, - - /** A field can show that input is mandatory. */ required: PropTypes.bool, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** The HTML input type. */ type: PropTypes.string, - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } public static defaultProps = { diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index fda261965e..dbabc6c296 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -1,23 +1,25 @@ import * as PropTypes from 'prop-types' import * as React from 'react' import { UIComponent, childrenExist, customPropTypes, RenderResultConfig } from '../../lib' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' -import { Extendable, ShorthandValue, ReactChildren } from '../../../types/utils' +import { Extendable, ShorthandValue } from '../../../types/utils' import { Accessibility } from '../../lib/accessibility/types' import { defaultBehavior } from '../../lib/accessibility' - +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' import ReactNode = React.ReactNode -export interface GridProps { - as?: any +export interface GridProps extends UIComponentProps, ChildrenComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - className?: string - children?: ReactChildren + + /** The columns of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */ columns?: string | number + + /** Shorthand for primary content. */ content?: ShorthandValue | ShorthandValue[] + + /** The rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */ rows?: string | number - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -31,22 +33,10 @@ class Grid extends UIComponent, any> { public static className = 'ui-grid' public static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** The columns of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + accessibility: PropTypes.func, columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - - /** Shorthand for primary content. */ content: customPropTypes.every([ customPropTypes.disallow(['children']), PropTypes.oneOfType([ @@ -54,18 +44,7 @@ class Grid extends UIComponent, any> { customPropTypes.itemShorthand, ]), ]), - - /** The rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */ rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Accessibility behavior if overridden by the user. */ - accessibility: PropTypes.func, } public static defaultProps: GridProps = { diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 65e4ecd193..77d5430b11 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -3,24 +3,36 @@ import * as React from 'react' import { childrenExist, customPropTypes, UIComponent } from '../../lib' import HeaderDescription from './HeaderDescription' +import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' import { - Extendable, - ReactChildren, - ShorthandRenderFunction, - ShorthandValue, -} from '../../../types/utils' -import { ComponentSlotStyle, ComponentVariablesInput } from '../../themes/types' - -export interface HeaderProps { - as?: any - children?: ReactChildren - className?: string - content?: React.ReactNode + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface HeaderProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** Shorthand for Header.Description. */ description?: ShorthandValue + + /** Align header content. */ textAlign?: 'left' | 'center' | 'right' | 'justified' + + /** + * A custom render function the description slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderDescription?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -39,41 +51,12 @@ class Header extends UIComponent, any> { static displayName = 'Header' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ - content: customPropTypes.contentShorthand, - - /** Shorthand for Header.Description. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, description: customPropTypes.itemShorthand, - - /** Align header content. */ textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justified']), - - /** - * A custom render function the description slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderDescription: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Header/HeaderDescription.tsx b/src/components/Header/HeaderDescription.tsx index e76ad8a30c..331180d6d5 100644 --- a/src/components/Header/HeaderDescription.tsx +++ b/src/components/Header/HeaderDescription.tsx @@ -1,18 +1,22 @@ -import * as PropTypes from 'prop-types' import * as React from 'react' -import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' -import { Extendable, ReactChildren } from '../../../types/utils' - -export interface HeaderDescriptionProps { - as?: any - children?: ReactChildren - className?: string - content?: React.ReactNode - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput -} +import { childrenExist, createShorthandFactory, UIComponent } from '../../lib' +import { Extendable } from '../../../types/utils' +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface HeaderDescriptionProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps {} /** * A header's description provides more detailed information. @@ -25,26 +29,9 @@ class HeaderDescription extends UIComponent, static displayName = 'HeaderDescription' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ - content: customPropTypes.contentShorthand, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, } static defaultProps = { diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 83c101ad2e..172634d7ed 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -1,11 +1,13 @@ import * as React from 'react' import * as PropTypes from 'prop-types' -import { callable, customPropTypes, UIComponent, createShorthandFactory } from '../../lib' +import { callable, UIComponent, createShorthandFactory } from '../../lib' import { iconBehavior } from '../../lib/accessibility/' import { Accessibility } from '../../lib/accessibility/types' -import { ComponentSlotStyle, ComponentVariablesInput, SvgIconSpec } from '../../themes/types' +import { SvgIconSpec } from '../../themes/types' import { Extendable } from '../../../types/utils' +import { UIComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' export type IconXSpacing = 'none' | 'before' | 'after' | 'both' export type IconSize = @@ -19,18 +21,27 @@ export type IconSize = | 'huge' | 'massive' -export interface IconProps { - as?: any +export interface IconProps extends UIComponentProps { + /** Accessibility behavior if overriden by the user. */ + accessibility?: Accessibility + + /** Icon can appear with rectangular border. */ bordered?: boolean + + /** Icon can appear as circular. */ circular?: boolean - className?: string + + /** An icon can show it is currently unable to be interacted with. */ disabled?: boolean + + /** Name of the icon. */ name?: string + + /** Size of the icon. */ size?: IconSize + + /** Adds space to the before, after or on both sides of the icon, or removes the default space around the icon ('none' value) */ xSpacing?: IconXSpacing - accessibility?: Accessibility - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -44,25 +55,12 @@ class Icon extends UIComponent, any> { static displayName = 'Icon' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Icon can appear with rectangular border. */ + ...commonUIComponentPropTypes, + accessibility: PropTypes.func, bordered: PropTypes.bool, - - /** Icon can appear as circular. */ circular: PropTypes.bool, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** An icon can show it is currently unable to be interacted with. */ disabled: PropTypes.bool, - - /** Name of the icon. */ name: PropTypes.string, - - /** Size of the icon. */ size: PropTypes.oneOf([ 'micro', 'mini', @@ -74,18 +72,7 @@ class Icon extends UIComponent, any> { 'huge', 'massive', ]), - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Adds space to the before, after or on both sides of the icon, or removes the default space around the icon ('none' value) */ xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']), - - /** Accessibility behavior if overriden by the user. */ - accessibility: PropTypes.func, } static defaultProps = { diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index f075e491c1..51a3423f07 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -1,23 +1,26 @@ import * as PropTypes from 'prop-types' import * as React from 'react' -import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib' +import { createShorthandFactory, UIComponent } from '../../lib' import { imageBehavior } from '../../lib/accessibility' import { Accessibility } from '../../lib/accessibility/types' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' -import { Extendable, ReactChildren } from '../../../types/utils' +import { Extendable } from '../../../types/utils' +import { UIComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' -export interface ImageProps { +export interface ImageProps extends UIComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any + + /** An image may be formatted to appear inline with text as an avatar. */ avatar?: boolean - children?: ReactChildren + + /** An image can appear circular. */ circular?: boolean - className?: string + + /** An image can take up the width of its container. */ fluid?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -38,29 +41,11 @@ class Image extends UIComponent, any> { static displayName = 'Image' static propTypes = { - /** Accessibility behavior if overridden by the user. */ + ...commonUIComponentPropTypes, accessibility: PropTypes.func, - - /** An element type to render as. */ - as: customPropTypes.as, - - /** An image may be formatted to appear inline with text as an avatar. */ avatar: PropTypes.bool, - - /** An image can appear circular. */ circular: PropTypes.bool, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** An image can take up the width of its container. */ fluid: PropTypes.bool, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 9203b6155f..3bd553ebd9 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -11,36 +11,87 @@ import { } from '../../lib' import { Extendable, - ReactChildren, ShorthandValue, ShorthandRenderFunction, ComponentEventHandler, } from '../../../types/utils' -import { ComponentSlotStyle, ComponentVariablesInput } from '../../themes/types' import Icon from '../Icon/Icon' import Slot from '../Slot/Slot' import Ref from '../Ref/Ref' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface InputProps { - as?: any - children?: ReactChildren - className?: string +export interface InputProps extends UIComponentProps, ChildrenComponentProps { + /** A property that will change the icon on the input and clear the input on click on Cancel. */ clearable?: boolean + + /** The default value of the input. */ defaultValue?: React.ReactText + + /** An input can take the width of its container. */ fluid?: boolean + + /** Optional Icon to display inside the Input. */ icon?: ShorthandValue + + /** An Input with icon can format the icon to appear at the start or at the end of the input field. */ iconPosition?: 'start' | 'end' + + /** An input can be used inline with text. */ inline?: boolean + + /** Shorthand for the input component. */ input?: ShorthandValue + + /** + * Called on change. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props and proposed value. + */ onChange?: ComponentEventHandler + + /** + * A custom render function the icon slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderIcon?: ShorthandRenderFunction + + /** + * A custom render function the input slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderInput?: ShorthandRenderFunction + + /** + * A custom render function the wrapper slot. + * + * @param { React.ReactType } Component - The computed component for this slot. + * @param { object } props - The computed props for this slot. + * @param { ReactNode | ReactNodeArray } children - The computed children for this slot. + */ renderWrapper?: ShorthandRenderFunction - styles?: ComponentSlotStyle + + /** The HTML input type. */ type?: string + + /** + * Ref callback with an input DOM node. + * + * @param {JSX.Element} node - input DOM node. + */ inputRef?: (node: HTMLElement) => void + + /** The value of the input. */ value?: React.ReactText - variables?: ComponentVariablesInput + + /** Shorthand for the wrapper component. */ wrapper?: ShorthandValue } @@ -64,94 +115,22 @@ class Input extends AutoControlledComponent, InputState> static displayName = 'Input' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** A property that will change the icon on the input and clear the input on click on Cancel. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, clearable: PropTypes.bool, - - /** The default value of the input. */ defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - - /** An input can take the width of its container. */ fluid: PropTypes.bool, - - /** Optional Icon to display inside the Input. */ icon: customPropTypes.itemShorthand, - - /** An Input with icon can format the icon to appear at the start or at the end of the input field. */ iconPosition: PropTypes.oneOf(['start', 'end']), - - /** Shorthand for the input component. */ input: customPropTypes.itemShorthand, - - /** - * Ref callback with an input DOM node. - * - * @param {JSX.Element} node - input DOM node. - */ inputRef: PropTypes.func, - - /** An input can be used inline with text. */ inline: PropTypes.bool, - - /** - * Called on change. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props and proposed value. - */ onChange: PropTypes.func, - - /** - * A custom render function the icon slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderIcon: PropTypes.func, - - /** - * A custom render function the input slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderInput: PropTypes.func, - - /** - * A custom render function the wrapper slot. - * - * @param { React.ReactType } Component - The computed component for this slot. - * @param { object } props - The computed props for this slot. - * @param { ReactNode | ReactNodeArray } children - The computed children for this slot. - */ renderWrapper: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** The HTML input type. */ type: PropTypes.string, - - /** The value of the input. */ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Shorthand for the wrapper component. */ wrapper: customPropTypes.wrapperShorthand, } From 7516c604fac201b269969e49a540c7dd0708bfbd Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 13 Nov 2018 18:16:40 +0100 Subject: [PATCH 10/13] -converting some other component's props interfaces --- src/components/ItemLayout/ItemLayout.tsx | 53 +++----- src/components/Label/Label.tsx | 98 ++++++-------- src/components/Layout/Layout.tsx | 35 ++--- src/components/List/List.tsx | 84 +++++------- src/components/List/ListItem.tsx | 37 ++--- src/components/Menu/Menu.tsx | 116 ++++++---------- src/components/Menu/MenuItem.tsx | 135 +++++++++---------- src/components/Popup/Popup.tsx | 83 +++++------- src/components/Popup/PopupContent.tsx | 58 +++----- src/components/Portal/Portal.tsx | 96 +++++++------ src/components/Portal/PortalInner.tsx | 39 +++--- src/components/Provider/ProviderConsumer.tsx | 10 +- 12 files changed, 336 insertions(+), 508 deletions(-) diff --git a/src/components/ItemLayout/ItemLayout.tsx b/src/components/ItemLayout/ItemLayout.tsx index d6f00475c6..be65083459 100644 --- a/src/components/ItemLayout/ItemLayout.tsx +++ b/src/components/ItemLayout/ItemLayout.tsx @@ -2,21 +2,18 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import * as cx from 'classnames' -import { createShorthandFactory, customPropTypes, pxToRem, UIComponent } from '../../lib' +import { createShorthandFactory, pxToRem, UIComponent } from '../../lib' import Layout from '../Layout/Layout' -import { - ComponentVariablesInput, - ComponentSlotClasses, - ComponentSlotStyle, - ICSSInJSStyle, -} from '../../themes/types' +import { ComponentSlotClasses, ICSSInJSStyle } from '../../themes/types' import { Extendable } from '../../../types/utils' +import { UIComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' -export interface ItemLayoutProps { - as?: any - className?: string +export interface ItemLayoutProps extends UIComponentProps { contentMedia?: any + /** Shorthand for primary content. */ content?: any + /** Toggle debug mode */ debug?: boolean header?: any endMedia?: any @@ -37,17 +34,22 @@ export interface ItemLayoutProps { state: any, classes: ComponentSlotClasses, ) => React.ReactNode + /** Styled applied to the root element of the rendered component. */ rootCSS?: ICSSInJSStyle + /** Styled applied to the media element of the rendered component. */ mediaCSS?: ICSSInJSStyle + /** Styled applied to the header element of the rendered component. */ headerCSS?: ICSSInJSStyle + /** Styled applied to the header media element of the rendered component. */ headerMediaCSS?: ICSSInJSStyle + /** Styled applied to the content element of the rendered component. */ contentCSS?: ICSSInJSStyle + /** Styled applied to the content element of the rendered component. */ contentMediaCSS?: ICSSInJSStyle + /** Styled applied to the end media element of the rendered component. */ endMediaCSS?: ICSSInJSStyle truncateContent?: boolean truncateHeader?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -61,51 +63,26 @@ class ItemLayout extends UIComponent, any> { static className = 'ui-itemlayout' static propTypes = { - as: customPropTypes.as, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - + ...commonUIComponentPropTypes, contentMedia: PropTypes.any, - - /** Shorthand for primary content. */ content: PropTypes.any, - - /** Toggle debug mode */ debug: PropTypes.bool, - header: PropTypes.any, endMedia: PropTypes.any, headerMedia: PropTypes.any, - media: PropTypes.any, renderContentArea: PropTypes.func, renderHeaderArea: PropTypes.func, renderMainArea: PropTypes.func, - - /** Styled applied to the root element of the rendered component. */ rootCSS: PropTypes.object, - /** Styled applied to the media element of the rendered component. */ mediaCSS: PropTypes.object, - /** Styled applied to the header element of the rendered component. */ headerCSS: PropTypes.object, - /** Styled applied to the header media element of the rendered component. */ headerMediaCSS: PropTypes.object, - /** Styled applied to the content element of the rendered component. */ contentCSS: PropTypes.object, - /** Styled applied to the content element of the rendered component. */ contentMediaCSS: PropTypes.object, - /** Styled applied to the end media element of the rendered component. */ endMediaCSS: PropTypes.object, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - truncateContent: PropTypes.bool, truncateHeader: PropTypes.bool, - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 0984402b6b..5406a51384 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -12,30 +12,55 @@ import { import { Icon, Image, Layout } from '../..' import { Accessibility } from '../../lib/accessibility/types' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' +import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' import { - Extendable, - ReactChildren, - ShorthandRenderFunction, - ShorthandValue, -} from '../../../types/utils' + commonUIComponentPropTypes, + contentComponentPropsTypes, + childrenComponentPropTypes, +} from '../../lib/commonPropTypes' -export interface LabelProps { +export interface LabelProps extends UIComponentProps, ChildrenComponentProps { accessibility?: Accessibility - as?: any - children?: ReactChildren + + /** A label can be circular. */ circular?: boolean - className?: string + + /** Shorthand for primary content. */ content?: React.ReactNode + + /** A Label can take the width of its container. */ fluid?: boolean + + /** Label can have an icon. */ icon?: ShorthandValue + + /** An icon label can format an Icon to appear before or after the text in the label */ iconPosition?: 'start' | 'end' + + /** Label can have an icon. */ image?: ShorthandValue + + /** An icon label can format an Icon to appear before or after the text in the label */ imagePosition?: 'start' | 'end' + + /** + * A custom render function the icon slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderIcon?: ShorthandRenderFunction + + /** + * A custom render function the image slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderImage?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -49,59 +74,18 @@ class Label extends UIComponent, any> { static className = 'ui-label' static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** A label can be circular. */ + ...commonUIComponentPropTypes, + ...contentComponentPropsTypes, + ...childrenComponentPropTypes, circular: PropTypes.bool, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ content: customPropTypes.contentShorthand, - - /** Label can have an icon. */ icon: customPropTypes.itemShorthand, - - /** An icon label can format an Icon to appear before or after the text in the label */ iconPosition: PropTypes.oneOf(['start', 'end']), - - /** Label can have an icon. */ image: customPropTypes.itemShorthand, - - /** An icon label can format an Icon to appear before or after the text in the label */ imagePosition: PropTypes.oneOf(['start', 'end']), - - /** - * A custom render function the icon slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ + fluid: PropTypes.bool, renderIcon: PropTypes.func, - - /** - * A custom render function the image slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderImage: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 436468140c..62f59374fe 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -2,18 +2,19 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import * as cx from 'classnames' -import { customPropTypes, UIComponent } from '../../lib' +import { UIComponent } from '../../lib' import { Extendable } from '../../../types/utils' -import { ComponentVariablesInput, ComponentSlotStyle, ICSSInJSStyle } from '../../themes/types' +import { ICSSInJSStyle } from '../../themes/types' +import { UIComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' -export interface LayoutProps { - as?: any - className?: string +export interface LayoutProps extends UIComponentProps { debug?: boolean renderStartArea?: (params: object) => React.ReactNode renderMainArea?: (params: object) => React.ReactNode renderEndArea?: (params: object) => React.ReactNode renderGap?: (params: object) => React.ReactNode + /** Styled applied to the root element of the rendered component. */ rootCSS?: ICSSInJSStyle start?: any startCSS?: ICSSInJSStyle @@ -24,17 +25,20 @@ export interface LayoutProps { end?: any endCSS?: ICSSInJSStyle endSize?: string + /** How to align items on-axis within the layout (i.e. vertical or not). */ justifyItems?: React.CSSProperties['justifyItems'] + /** How to align cross-axis items within the layout (i.e. vertical or not). */ alignItems?: React.CSSProperties['alignItems'] + /** A layout can have gaps of whitespace between areas. */ gap?: string + /** A layout can reduce to the minimum required areas. */ reducing?: boolean + /** A layout can render its content directly if only one piece of content exists. */ disappearing?: boolean truncateStart?: boolean truncateMain?: boolean truncateEnd?: boolean vertical?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -46,8 +50,7 @@ class Layout extends UIComponent, any> { static displayName = 'Layout' static propTypes = { - as: customPropTypes.as, - className: PropTypes.string, + ...commonUIComponentPropTypes, debug: PropTypes.bool, renderStartArea: PropTypes.func, @@ -55,7 +58,6 @@ class Layout extends UIComponent, any> { renderEndArea: PropTypes.func, renderGap: PropTypes.func, - /** Styled applied to the root element of the rendered component. */ rootCSS: PropTypes.object, start: PropTypes.any, @@ -70,19 +72,12 @@ class Layout extends UIComponent, any> { endCSS: PropTypes.object, endSize: PropTypes.string, - /** How to align items on-axis within the layout (i.e. vertical or not). */ justifyItems: PropTypes.any, - /** How to align cross-axis items within the layout (i.e. vertical or not). */ alignItems: PropTypes.any, - /** A layout can have gaps of whitespace between areas. */ gap: PropTypes.string, - - /** A layout can reduce to the minimum required areas. */ reducing: PropTypes.bool, - - /** A layout can render its content directly if only one piece of content exists. */ disappearing: PropTypes.bool, truncateStart: PropTypes.bool, @@ -90,12 +85,6 @@ class Layout extends UIComponent, any> { truncateEnd: PropTypes.bool, vertical: PropTypes.bool, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index 31c3ea5479..26fd7dc292 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -9,28 +9,41 @@ import { listBehavior } from '../../lib/accessibility' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' import { ContainerFocusHandler } from '../../lib/accessibility/FocusHandling/FocusContainer' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' -import { - Extendable, - ReactChildren, - ShorthandRenderFunction, - ShorthandValue, -} from '../../../types/utils' - -export interface ListProps { +import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' + +export interface ListProps extends UIComponentProps, ChildrenComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any - children?: ReactChildren - className?: string + + /** Toggle debug mode */ debug?: boolean + + /** Shorthand array of props for ListItem. */ items?: ShorthandValue[] + + /** Ref callback with the list DOM node. */ listRef?: (node: HTMLElement) => void + + /** A selection list formats list items as possible choices. */ selection?: boolean + + /** Truncates content */ truncateContent?: boolean + + /** Truncates header */ truncateHeader?: boolean + + /** + * A custom render iterator for rendering each of the List items. + * The default component, props, and children are available for each item. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderItem?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } export interface ListState { @@ -46,53 +59,16 @@ class List extends UIComponent, ListState> { static className = 'ui-list' static propTypes = { - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Toggle debug mode */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + accessibility: PropTypes.func, debug: PropTypes.bool, - - /** Shorthand array of props for ListItem. */ items: customPropTypes.collectionShorthand, - - /** A selection list formats list items as possible choices. */ selection: PropTypes.bool, - - /** Truncates content */ truncateContent: PropTypes.bool, - - /** Truncates header */ truncateHeader: PropTypes.bool, - - /** Accessibility behavior if overridden by the user. */ - accessibility: PropTypes.func, - - /** Ref callback with the list DOM node. */ listRef: PropTypes.func, - - /** - * A custom render iterator for rendering each of the List items. - * The default component, props, and children are available for each item. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderItem: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index a6d1aa7d30..f995760f6f 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -1,30 +1,34 @@ import * as React from 'react' import * as PropTypes from 'prop-types' -import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib' +import { createShorthandFactory, UIComponent } from '../../lib' import ItemLayout from '../ItemLayout/ItemLayout' import { listItemBehavior } from '../../lib/accessibility' import { Accessibility } from '../../lib/accessibility/types' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { Extendable } from '../../../types/utils' +import { UIComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' -export interface ListItemProps { +export interface ListItemProps extends UIComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any - className?: string contentMedia?: any + /** Shorthand for primary content. */ content?: any + /** Toggle debug mode */ debug?: boolean header?: any endMedia?: any headerMedia?: any + + /** A list item can appear more important and draw the user's attention. */ important?: boolean media?: any + + /** A list item can indicate that it can be selected. */ selection?: boolean truncateContent?: boolean truncateHeader?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } export interface ListItemState { @@ -42,41 +46,24 @@ class ListItem extends UIComponent, ListItemState> { static className = 'ui-list__item' static propTypes = { - as: customPropTypes.as, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - + ...commonUIComponentPropTypes, contentMedia: PropTypes.any, - - /** Shorthand for primary content. */ content: PropTypes.any, - /** Toggle debug mode */ debug: PropTypes.bool, header: PropTypes.any, endMedia: PropTypes.any, headerMedia: PropTypes.any, - /** A list item can appear more important and draw the user's attention. */ important: PropTypes.bool, media: PropTypes.any, - /** A list item can indicate that it can be selected. */ selection: PropTypes.bool, truncateContent: PropTypes.bool, truncateHeader: PropTypes.bool, - /** Accessibility behavior if overridden by the user. */ accessibility: PropTypes.func, - focusableItemProps: PropTypes.object, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 5add0c309c..d525139b95 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -7,37 +7,60 @@ import MenuItem from './MenuItem' import { menuBehavior } from '../../lib/accessibility' import { Accessibility } from '../../lib/accessibility/types' -import { - ComponentVariablesInput, - ComponentVariablesObject, - ComponentSlotStyle, -} from '../../themes/types' -import { - Extendable, - ReactChildren, - ShorthandRenderFunction, - ShorthandValue, -} from '../../../types/utils' - -export interface MenuProps { +import { ComponentVariablesObject } from '../../themes/types' +import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' + +export interface MenuProps extends UIComponentProps, ChildrenComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any + + /** Index of the currently active item. */ activeIndex?: number | string - children?: ReactChildren - className?: string + + /** Initial activeIndex value. */ defaultActiveIndex?: number | string + + /** A vertical menu may take the size of its container. */ fluid?: boolean + + /** A menu may have just icons. */ iconOnly?: boolean + + /** Shorthand array of props for Menu. */ items?: ShorthandValue[] + + /** A menu can adjust its appearance to de-emphasize its contents. */ pills?: boolean + + /** + * A menu can point to show its relationship to nearby content. + * For vertical menu, it can point to the start of the item or to the end. + */ pointing?: boolean | 'start' | 'end' + + /** The menu can have primary type. */ primary?: boolean + + /** + * A custom render iterator for rendering each of the Menu items. + * The default component, props, and children are available for each item. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderItem?: ShorthandRenderFunction + + /** The menu can have secondary type. */ secondary?: boolean + + /** Menu items can by highlighted using underline. */ underlined?: boolean + + /** A vertical menu displays elements vertically. */ vertical?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } /** @@ -51,72 +74,21 @@ class Menu extends AutoControlledComponent, any> { static create: Function static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Index of the currently active item. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + accessibility: PropTypes.func, activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Initial activeIndex value. */ defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - - /** A vertical menu may take the size of its container. */ fluid: PropTypes.bool, - - /** A menu may have just icons. */ iconOnly: PropTypes.bool, - - /** Shorthand array of props for Menu. */ items: customPropTypes.collectionShorthand, - - /** A menu can adjust its appearance to de-emphasize its contents. */ pills: PropTypes.bool, - - /** - * A menu can point to show its relationship to nearby content. - * For vertical menu, it can point to the start of the item or to the end. - */ pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]), - - /** The menu can have primary type. */ primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]), - - /** - * A custom render iterator for rendering each of the Menu items. - * The default component, props, and children are available for each item. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderItem: PropTypes.func, - - /** The menu can have secondary type. */ secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]), - - /** Menu items can by highlighted using underline. */ underlined: PropTypes.bool, - - /** A vertical menu displays elements vertically. */ vertical: PropTypes.bool, - - /** Accessibility behavior if overridden by the user. */ - accessibility: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 7ce68f9241..169f1c1c1b 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -9,36 +9,83 @@ import { menuItemBehavior } from '../../lib/accessibility' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' import IsFromKeyboard from '../../lib/isFromKeyboard' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { ComponentEventHandler, Extendable, - ReactChildren, ShorthandRenderFunction, ShorthandValue, } from '../../../types/utils' - -export interface MenuItemProps { +import { + UIComponentProps, + ChildrenComponentProps, + ContentComponentProps, +} from '../../lib/commonPropInterfaces' +import { + commonUIComponentPropTypes, + childrenComponentPropTypes, + contentComponentPropsTypes, +} from '../../lib/commonPropTypes' + +export interface MenuItemProps + extends UIComponentProps, + ChildrenComponentProps, + ContentComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility + + /** A menu item can be active. */ active?: boolean - as?: any - children?: ReactChildren - className?: string - content?: any + + /** A menu item can show it is currently unable to be interacted with. */ disabled?: boolean + + /** Name or shorthand for Menu Item Icon */ icon?: ShorthandValue + + /** A menu may have just icons. */ iconOnly?: boolean + + /** MenuItem index inside Menu. */ index?: number + + /** + * Called on click. When passed, the component will render as an `a` + * tag by default instead of a `div`. + * + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ onClick?: ComponentEventHandler + + /** A menu can adjust its appearance to de-emphasize its contents. */ pills?: boolean + + /** + * A menu can point to show its relationship to nearby content. + * For vertical menu, it can point to the start of the item or to the end. + */ pointing?: boolean | 'start' | 'end' + + /** The menu item can have primary type. */ primary?: boolean + + /** + * A custom render function the icon slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderIcon?: ShorthandRenderFunction + + /** The menu item can have secondary type. */ secondary?: boolean + + /** Menu items can by highlighted using underline. */ underlined?: boolean + + /** A vertical menu displays elements vertically. */ vertical?: boolean - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput } export interface MenuItemState { @@ -56,83 +103,23 @@ class MenuItem extends UIComponent, MenuItemState> { static create: Function static propTypes = { - /** A menu item can be active. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, + accessibility: PropTypes.func, active: PropTypes.bool, - - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Shorthand for primary content. */ - content: PropTypes.any, - - /** A menu item can show it is currently unable to be interacted with. */ disabled: PropTypes.bool, - - /** Name or shorthand for Menu Item Icon */ icon: customPropTypes.itemShorthand, - - /** A menu may have just icons. */ iconOnly: PropTypes.bool, - - /** MenuItem index inside Menu. */ index: PropTypes.number, - - /** - * Called on click. When passed, the component will render as an `a` - * tag by default instead of a `div`. - * - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onClick: PropTypes.func, - - /** A menu can adjust its appearance to de-emphasize its contents. */ pills: PropTypes.bool, - - /** - * A menu can point to show its relationship to nearby content. - * For vertical menu, it can point to the start of the item or to the end. - */ pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]), - - /** The menu item can have primary type. */ primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]), - - /** The menu item can have secondary type. */ secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]), - - /** Menu items can by highlighted using underline. */ underlined: PropTypes.bool, - - /** A vertical menu displays elements vertically. */ vertical: PropTypes.bool, - - /** Accessibility behavior if overridden by the user. */ - accessibility: PropTypes.func, - - /** - * A custom render function the icon slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderIcon: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), } static defaultProps = { diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx index 2087de8706..0bd88acba7 100644 --- a/src/components/Popup/Popup.tsx +++ b/src/components/Popup/Popup.tsx @@ -6,18 +6,12 @@ import { Popper, PopperChildrenProps } from 'react-popper' import { childrenExist, - customPropTypes, AutoControlledComponent, EventStack, RenderResultConfig, isBrowser, } from '../../lib' -import { - ComponentEventHandler, - ShorthandValue, - Extendable, - ReactChildren, -} from '../../../types/utils' +import { ComponentEventHandler, Extendable } from '../../../types/utils' import Ref from '../Ref/Ref' import computePopupPlacement, { Alignment, Position } from './positioningHelper' @@ -30,22 +24,51 @@ import { AccessibilityActionHandlers, AccessibilityBehavior, } from '../../lib/accessibility/types' +import { ChildrenComponentProps, ContentComponentProps } from '../../lib/commonPropInterfaces' +import { contentComponentPropsTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' const POSITIONS: Position[] = ['above', 'below', 'before', 'after'] const ALIGNMENTS: Alignment[] = ['top', 'bottom', 'start', 'end', 'center'] -export interface PopupProps { +export interface PopupProps extends ChildrenComponentProps, ContentComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility + + /** Alignment for the popup. */ align?: Alignment - children?: ReactChildren + + /** Additional CSS class name(s) to apply. */ className?: string - content?: ShorthandValue + + /** Initial value for 'open'. */ defaultOpen?: boolean + + /** Defines whether popup is displayed. */ open?: boolean + + /** + * Event for request to change 'open' value. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props and proposed value. + */ onOpenChange?: ComponentEventHandler + + /** + * Position for the popup. Position has higher priority than align. If position is vertical ('above' | 'below') + * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after' + * and 'start' | 'end' respectively), then provided value for 'align' will be ignored and 'center' will be used instead. + */ position?: Position + + /** + * DOM element that should be used as popup's target - instead of 'trigger' element that is used by default. + */ target?: HTMLElement + + /** Initial value for 'target'. */ defaultTarget?: HTMLElement + + /** Element to be rendered in-place where the popup is defined. */ trigger?: JSX.Element } @@ -67,53 +90,17 @@ export default class Popup extends AutoControlledComponent, + ChildrenComponentProps, + ContentComponentProps {} /** * A PopupContent displays the content of a Popup component @@ -33,28 +30,9 @@ class PopupContent extends UIComponent, any> { public static className = 'ui-popup__content' public static propTypes = { - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** - * Wraped content. - */ - content: PropTypes.any, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, + ...contentComponentPropsTypes, } public renderComponent({ diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx index 819b7901c5..f06401d35f 100644 --- a/src/components/Portal/Portal.tsx +++ b/src/components/Portal/Portal.tsx @@ -9,11 +9,13 @@ import { doesNodeContainClick, EventStack, } from '../../lib' -import { ShorthandValue, ReactChildren } from '../../../types/utils' +import { ShorthandValue } from '../../../types/utils' import Ref from '../Ref/Ref' import PortalInner from './PortalInner' import { FocusTrapZone, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone' import { AccessibilityAttributes, OnKeyDownHandler } from '../../lib/accessibility/types' +import { ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { childrenComponentPropTypes } from '../../lib/commonPropTypes' type ReactMouseEvent = React.MouseEvent export type TriggerAccessibility = { @@ -21,18 +23,58 @@ export type TriggerAccessibility = { keyHandlers?: OnKeyDownHandler } -export interface PortalProps { - children?: ReactChildren +export interface PortalProps extends ChildrenComponentProps { + /** Shorthand for primary content. */ content?: ShorthandValue | ShorthandValue[] + + /** Initial value of open. */ defaultOpen?: boolean + + /** + * Called when the portal is mounted on the DOM. + * + * @param {object} data - All props. + */ onMount?: (props: PortalProps) => void + + /** + * Called when the portal is unmounted from the DOM. + * + * @param {object} data - All props. + */ onUnmount?: (props: PortalProps) => void + + /** Controls whether or not the portal is displayed. */ open?: boolean + + /** Element to be rendered in-place where the portal is defined. */ trigger?: JSX.Element + + /** Controls whether or not focus trap should be applied, using boolean or FocusTrapZoneProps type value */ trapFocus?: FocusTrapZoneProps | boolean + + /** Accessibility behavior object to apply on trigger node. */ triggerAccessibility?: TriggerAccessibility + + /** + * Called with a ref to the trigger node. + * + * @param {JSX.Element} node - Referred node. + */ triggerRef?: (node: HTMLElement) => void + + /** + * Called when trigger node was clicked. + * + * @param {object} data - All props. + */ onTriggerClick?: (e: ReactMouseEvent) => void + + /** + * Called when `click` event was invoked outside portal or trigger nodes. + * + * @param {object} data - All props. + */ onOutsideClick?: (e: ReactMouseEvent) => void } @@ -52,63 +94,17 @@ class Portal extends AutoControlledComponent { public static autoControlledProps = ['open'] public static propTypes = { - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Shorthand for primary content. */ + ...childrenComponentPropTypes, content: customPropTypes.contentShorthand, - - /** Initial value of open. */ defaultOpen: PropTypes.bool, - - /** - * Called when the portal is mounted on the DOM. - * - * @param {object} data - All props. - */ onMount: PropTypes.func, - - /** - * Called when the portal is unmounted from the DOM. - * - * @param {object} data - All props. - */ onUnmount: PropTypes.func, - - /** Controls whether or not the portal is displayed. */ open: PropTypes.bool, - - /** Element to be rendered in-place where the portal is defined. */ trigger: PropTypes.node, - - /** - * Called with a ref to the trigger node. - * - * @param {JSX.Element} node - Referred node. - */ triggerRef: PropTypes.func, - - /** Accessibility behavior object to apply on trigger node. */ triggerAccessibility: PropTypes.object, - - /** - * Called when trigger node was clicked. - * - * @param {object} data - All props. - */ onTriggerClick: PropTypes.func, - - /** - * Called when `click` event was invoked outside portal or trigger nodes. - * - * @param {object} data - All props. - */ onOutsideClick: PropTypes.func, - - /** Controls whether or not focus trap should be applied, using boolean or FocusTrapZoneProps type value */ trapFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), } diff --git a/src/components/Portal/PortalInner.tsx b/src/components/Portal/PortalInner.tsx index 7daacb3c46..6ebb6e3211 100644 --- a/src/components/Portal/PortalInner.tsx +++ b/src/components/Portal/PortalInner.tsx @@ -2,13 +2,26 @@ import * as PropTypes from 'prop-types' import * as _ from 'lodash' import { Component } from 'react' import { createPortal } from 'react-dom' -import { ReactChildren } from '../../../types/utils' import { isBrowser } from '../../lib' +import { ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface PortalInnerProps { - children?: ReactChildren +export interface PortalInnerProps extends ChildrenComponentProps { + /** Existing element the portal should be bound to. */ context?: HTMLElement + + /** + * Called when the portal is mounted on the DOM + * + * @param {object} data - All props. + */ onMount?: (props: PortalInnerProps) => void + + /** + * Called when the portal is unmounted from the DOM + * + * @param {object} data - All props. + */ onUnmount?: (props: PortalInnerProps) => void } @@ -17,27 +30,9 @@ export interface PortalInnerProps { */ class PortalInner extends Component { public static propTypes = { - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node.isRequired, - - /** Existing element the portal should be bound to. */ + ...childrenComponentPropTypes, context: PropTypes.object, - - /** - * Called when the portal is mounted on the DOM - * - * @param {object} data - All props. - */ onMount: PropTypes.func, - - /** - * Called when the portal is unmounted from the DOM - * - * @param {object} data - All props. - */ onUnmount: PropTypes.func, } diff --git a/src/components/Provider/ProviderConsumer.tsx b/src/components/Provider/ProviderConsumer.tsx index 9523908228..50f46a2d34 100644 --- a/src/components/Provider/ProviderConsumer.tsx +++ b/src/components/Provider/ProviderConsumer.tsx @@ -5,6 +5,11 @@ import { FelaTheme } from 'react-fela' import { ThemePrepared } from '../../themes/types' export interface ProviderConsumerProps { + /** + * Uses the function children pattern to access theme. + * @param {object} theme + * @param {object} theme.siteVariables - The siteVariables passed from the nearest Provider. + */ render: (theme: ThemePrepared) => React.ReactNode } @@ -14,11 +19,6 @@ export interface ProviderConsumerProps { const ProviderConsumer: React.SFC = props => ProviderConsumer.propTypes = { - /** - * Uses the function children pattern to access theme. - * @param {object} theme - * @param {object} theme.siteVariables - The siteVariables passed from the nearest Provider. - */ render: PropTypes.func.isRequired, } From 1d71a398a75fb3f2dfeaf20170f17d1cca8cffe3 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 13 Nov 2018 18:31:20 +0100 Subject: [PATCH 11/13] -converting some other component's props interfaces --- src/components/RadioGroup/RadioGroup.tsx | 82 +++++------ src/components/RadioGroup/RadioGroupItem.tsx | 141 ++++++++----------- 2 files changed, 94 insertions(+), 129 deletions(-) diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx index b0991e3449..46affcdd06 100644 --- a/src/components/RadioGroup/RadioGroup.tsx +++ b/src/components/RadioGroup/RadioGroup.tsx @@ -9,25 +9,47 @@ import RadioGroupItem, { RadioGroupItemProps } from './RadioGroupItem' import { radioGroupBehavior } from '../../lib/accessibility' import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/types' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import { Extendable, - ReactChildren, ShorthandValue, ShorthandRenderFunction, + ComponentEventHandler, } from '../../../types/utils' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface RadioGroupProps { +// TODO check if the checkedValueChanged args are correct +export interface RadioGroupProps extends UIComponentProps, ChildrenComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any + + /** Value of the currently checked radio item. */ checkedValue?: number | string - children?: ReactChildren - className?: string + + /** + * Called after radio group value is changed. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All value props. + */ + checkedValueChanged?: ComponentEventHandler + + /** Initial checkedValue value. */ defaultCheckedValue?: number | string + + /** Shorthand array of props for RadioGroup. */ items?: ShorthandValue[] + + /** + * A custom render iterator for rendering each of the RadioGroup items. + * The default component, props, and children are available for each item. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderItem?: ShorthandRenderFunction - styles?: ComponentSlotStyle - variables?: ComponentVariablesInput + + /** A vertical radio group displays elements vertically. */ vertical?: boolean } @@ -42,54 +64,14 @@ class RadioGroup extends AutoControlledComponent, an static create: Function static propTypes = { - /** Accessibility behavior if overridden by the user. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** An element type to render as (string or function). */ - as: customPropTypes.as, - - /** Value of the currently checked radio item. */ checkedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Initial checkedValue value. */ defaultCheckedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - - /** Shorthand array of props for RadioGroup. */ items: customPropTypes.collectionShorthand, - - /** - * Called after radio group value is changed. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All value props. - */ checkedValueChanged: PropTypes.func, - - /** - * A custom render iterator for rendering each of the RadioGroup items. - * The default component, props, and children are available for each item. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderItem: PropTypes.func, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** A vertical radio group displays elements vertically. */ vertical: PropTypes.bool, } diff --git a/src/components/RadioGroup/RadioGroupItem.tsx b/src/components/RadioGroup/RadioGroupItem.tsx index 1a28e9c659..f386595a6f 100644 --- a/src/components/RadioGroup/RadioGroupItem.tsx +++ b/src/components/RadioGroup/RadioGroupItem.tsx @@ -8,34 +8,86 @@ import Label from '../Label/Label' import { ComponentEventHandler, Extendable, - ReactChildren, ShorthandRenderFunction, ShorthandValue, } from '../../../types/utils' -import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types' import Icon from '../Icon/Icon' import { Accessibility } from '../../lib/accessibility/types' import { radioGroupItemBehavior } from '../../lib/accessibility' import isFromKeyboard from '../../lib/isFromKeyboard' +import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' +import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -export interface RadioGroupItemProps { +// TODO defaultIsFromKeyboard is not in the interface +export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponentProps { + /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility - as?: any + + /** Whether or not radio item is checked. */ checked?: boolean + + /** + * Called after radio item checked state is changed. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ checkedChanged?: ComponentEventHandler - children?: ReactChildren - className?: string + + /** The label of the radio item. */ label?: React.ReactNode + + /** Initial checked value. */ defaultChecked?: boolean + + /** A radio item can appear disabled and be unable to change states. */ disabled?: boolean + + /** The radio item indicator can be user-defined icon */ icon?: ShorthandValue + + /** The HTML input name. */ name?: string + + /** + * Called after radio item blurs. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onBlur?: ComponentEventHandler + + /** + * Called after radio item is clicked. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onClick?: ComponentEventHandler + + /** + * Called after radio item gets focus. + * @param {SyntheticEvent} event - React's original SyntheticEvent. + * @param {object} data - All props. + */ + onFocus?: ComponentEventHandler + + /** + * A custom render function the icon slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderIcon?: ShorthandRenderFunction + + /** Whether should focus when checked */ shouldFocus?: boolean // TODO: RFC #306 - styles?: ComponentSlotStyle + + /** The HTML input value. */ value?: string | number - variables?: ComponentVariablesInput + + /** Whether focus came from the keyboard (autocontrolled). */ [isFromKeyboard.propertyName]?: boolean + + /** A vertical radio group displays elements vertically. */ vertical?: boolean } @@ -62,94 +114,25 @@ class RadioGroupItem extends AutoControlledComponent< static className = 'ui-radiogroup__item' static propTypes = { - /** Accessibility behavior if overridden by the user. */ + ...commonUIComponentPropTypes, + ...childrenComponentPropTypes, accessibility: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - as: customPropTypes.as, - - /** Whether or not radio item is checked. */ checked: PropTypes.bool, - - /** - * Used to set content when using childrenApi - internal only - * @docSiteIgnore - */ - children: PropTypes.node, - - /** Additional CSS class name(s) to apply. */ - className: PropTypes.string, - - /** Initial checked value. */ defaultChecked: PropTypes.bool, - /** Default value for isFromKeyboard (autocontrolled). */ defaultIsFromKeyboard: PropTypes.bool, - - /** A radio item can appear disabled and be unable to change states. */ disabled: PropTypes.bool, - - /** The radio item indicator can be user-defined icon */ icon: customPropTypes.itemShorthand, - - /** Whether focus came from the keyboard (autocontrolled). */ isFromKeyboard: PropTypes.bool, - - /** The label of the radio item. */ label: customPropTypes.contentShorthand, - - /** The HTML input name. */ name: PropTypes.string, - - /** - * Called after radio item blurs. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onBlur: PropTypes.func, - - /** - * Called after radio item is clicked. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onClick: PropTypes.func, - - /** - * Called after radio item gets focus. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ onFocus: PropTypes.func, - - /** - * Called after radio item checked state is changed. - * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - All props. - */ checkedChanged: PropTypes.func, - - /** - * A custom render function the icon slot. - * - * @param {React.ReactType} Component - The computed component for this slot. - * @param {object} props - The computed props for this slot. - * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. - */ renderIcon: PropTypes.func, - - /** Whether should focus when checked */ shouldFocus: PropTypes.bool, - - /** Additional CSS styles to apply to the component instance. */ - styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** The HTML input value. */ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - - /** Override for theme site variables to allow modifications of component styling via themes. */ - variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), - - /** A vertical radio group displays elements vertically. */ vertical: PropTypes.bool, } From 0575b7640a7ee1ec992a8d94fdeb9b5922bc8916 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 14 Nov 2018 12:26:44 +0100 Subject: [PATCH 12/13] -updated changelog and commented prop function signature and enums --- CHANGELOG.md | 3 +++ .../ComponentTable/ComponentTableRow.tsx | 20 +++++++++---------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f4525d439..5a229c25b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Documentation +- Replace react-docgen with react-docgen-typescript for generating the props from the TS props interfaces @mnajdova ([#460](https://github.com/stardust-ui/react/pull/460)) + ### BREAKING - Replace the `type` prop with `secondary` and `primary` for `Button` @layershifter ([#419](https://github.com/stardust-ui/react/pull/419)) - Replace the `type` prop with `secondary` and `primary` for `Menu` @layershifter ([#429](https://github.com/stardust-ui/react/pull/429)) diff --git a/docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.tsx b/docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.tsx index 2c957e94da..fd8beeeed9 100644 --- a/docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.tsx +++ b/docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.tsx @@ -5,8 +5,6 @@ import { Table } from 'semantic-ui-react' import ComponentPropDefaultValue from '../ComponentProp/ComponentPropDefaultValue' import ComponentPropDescription from '../ComponentProp/ComponentPropDescription' -import ComponentPropEnum from '../ComponentProp/ComponentPropEnum' -import ComponentPropFunctionSignature from '../ComponentProp/ComponentPropFunctionSignature' import ComponentPropName from '../ComponentProp/ComponentPropName' export default class ComponentTableRow extends React.Component { @@ -25,8 +23,7 @@ export default class ComponentTableRow extends React.Component { toggleEnums = () => this.setState({ showEnums: !this.state.showEnums }) render() { - const { defaultValue, description, name, required, tags, type, value } = this.props - const { showEnums } = this.state + const { defaultValue, description, name, required, tags, type } = this.props const hideRow = this.docSiteHidden(tags) return ( @@ -40,13 +37,14 @@ export default class ComponentTableRow extends React.Component { {`{${type}}`} - - + {/* TODO change these according to the react-docgen-typescript generated json */} + {/**/} + {/**/} ) From 5483f64a2179932525591dbe2b2bbcb8370d6a20 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 14 Nov 2018 14:08:51 +0100 Subject: [PATCH 13/13] -adding default to some component's props --- src/components/Accordion/Accordion.tsx | 14 +++++++++++++- src/components/Button/ButtonGroup.tsx | 1 + src/components/Chat/Chat.tsx | 5 ++++- src/components/Chat/ChatItem.tsx | 7 +++++++ src/components/Chat/ChatMessage.tsx | 5 ++++- src/components/Grid/Grid.tsx | 5 ++++- src/components/Icon/Icon.tsx | 5 ++++- src/components/Image/Image.tsx | 5 ++++- src/components/List/List.tsx | 5 ++++- src/components/List/ListItem.tsx | 5 ++++- src/components/Menu/Menu.tsx | 5 ++++- src/components/Menu/MenuItem.tsx | 5 ++++- src/components/Popup/Popup.tsx | 5 ++++- src/components/RadioGroup/RadioGroup.tsx | 5 ++++- src/components/RadioGroup/RadioGroupItem.tsx | 9 +++++++-- src/lib/commonPropInterfaces.ts | 2 +- 16 files changed, 73 insertions(+), 15 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index eb8378f218..11f6e9b503 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -49,9 +49,21 @@ export interface AccordionProps extends UIComponentProps, ChildrenComp * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. */ renderContent?: ShorthandRenderFunction + + /** + * A custom render iterator for rendering each Accordion panel title. + * The default component, props, and children are available for each panel title. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderTitle?: ShorthandRenderFunction - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default defaultBehavior + * */ accessibility?: Accessibility } diff --git a/src/components/Button/ButtonGroup.tsx b/src/components/Button/ButtonGroup.tsx index ef68002f27..965698450c 100644 --- a/src/components/Button/ButtonGroup.tsx +++ b/src/components/Button/ButtonGroup.tsx @@ -24,6 +24,7 @@ export interface ButtonGroupProps ContentComponentProps { /** * Accessibility behavior if overridden by the user. + * @default buttonGroupBehavior */ accessibility?: Accessibility diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 8db16fd846..739e3156aa 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -12,7 +12,10 @@ import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropIn import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' export interface ChatProps extends UIComponentProps, ChildrenComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default chatBehavior + * */ accessibility?: Accessibility /** Shorthand array of the items inside the chat. */ diff --git a/src/components/Chat/ChatItem.tsx b/src/components/Chat/ChatItem.tsx index ade91f3e72..c9b347065a 100644 --- a/src/components/Chat/ChatItem.tsx +++ b/src/components/Chat/ChatItem.tsx @@ -19,6 +19,13 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { + /** + * A custom render function the content slot. + * + * @param {React.ReactType} Component - The computed component for this slot. + * @param {object} props - The computed props for this slot. + * @param {ReactNode|ReactNodeArray} children - The computed children for this slot. + */ renderContent?: ShorthandRenderFunction } diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index 6f0e8fed77..2f65f9f82e 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -36,7 +36,10 @@ export interface ChatMessageProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default chatMessageBehavior + * */ accessibility?: Accessibility /** Author of the message. */ diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index dbabc6c296..f09cc5bba1 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -9,7 +9,10 @@ import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../li import ReactNode = React.ReactNode export interface GridProps extends UIComponentProps, ChildrenComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default defaultBehavior + * */ accessibility?: Accessibility /** The columns of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line. */ diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 172634d7ed..ceb9a94154 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -22,7 +22,10 @@ export type IconSize = | 'massive' export interface IconProps extends UIComponentProps { - /** Accessibility behavior if overriden by the user. */ + /** + * Accessibility behavior if overriden by the user. + * @default iconBehavior + * */ accessibility?: Accessibility /** Icon can appear with rectangular border. */ diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index 51a3423f07..b669e7a706 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -10,7 +10,10 @@ import { UIComponentProps } from '../../lib/commonPropInterfaces' import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' export interface ImageProps extends UIComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default imageBehavior + * */ accessibility?: Accessibility /** An image may be formatted to appear inline with text as an avatar. */ diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index 26fd7dc292..58b22c7502 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -14,7 +14,10 @@ import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropIn import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' export interface ListProps extends UIComponentProps, ChildrenComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default listBehavior + * */ accessibility?: Accessibility /** Toggle debug mode */ diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index f995760f6f..5370a5dbd1 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -10,7 +10,10 @@ import { UIComponentProps } from '../../lib/commonPropInterfaces' import { commonUIComponentPropTypes } from '../../lib/commonPropTypes' export interface ListItemProps extends UIComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default listItemBehavior + * */ accessibility?: Accessibility contentMedia?: any /** Shorthand for primary content. */ diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index d525139b95..5421bcba49 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -13,7 +13,10 @@ import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropIn import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' export interface MenuProps extends UIComponentProps, ChildrenComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default menuBehavior + * */ accessibility?: Accessibility /** Index of the currently active item. */ diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 169f1c1c1b..412ae9a596 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -30,7 +30,10 @@ export interface MenuItemProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default menuItemBehavior + * */ accessibility?: Accessibility /** A menu item can be active. */ diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx index 0bd88acba7..1350ed2a5b 100644 --- a/src/components/Popup/Popup.tsx +++ b/src/components/Popup/Popup.tsx @@ -31,7 +31,10 @@ const POSITIONS: Position[] = ['above', 'below', 'before', 'after'] const ALIGNMENTS: Alignment[] = ['top', 'bottom', 'start', 'end', 'center'] export interface PopupProps extends ChildrenComponentProps, ContentComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default popupBehavior + * */ accessibility?: Accessibility /** Alignment for the popup. */ diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx index 46affcdd06..bb0cf460bd 100644 --- a/src/components/RadioGroup/RadioGroup.tsx +++ b/src/components/RadioGroup/RadioGroup.tsx @@ -20,7 +20,10 @@ import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../li // TODO check if the checkedValueChanged args are correct export interface RadioGroupProps extends UIComponentProps, ChildrenComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default radioGroupBehavior + * */ accessibility?: Accessibility /** Value of the currently checked radio item. */ diff --git a/src/components/RadioGroup/RadioGroupItem.tsx b/src/components/RadioGroup/RadioGroupItem.tsx index f386595a6f..2e8fb355ef 100644 --- a/src/components/RadioGroup/RadioGroupItem.tsx +++ b/src/components/RadioGroup/RadioGroupItem.tsx @@ -18,9 +18,11 @@ import isFromKeyboard from '../../lib/isFromKeyboard' import { UIComponentProps, ChildrenComponentProps } from '../../lib/commonPropInterfaces' import { commonUIComponentPropTypes, childrenComponentPropTypes } from '../../lib/commonPropTypes' -// TODO defaultIsFromKeyboard is not in the interface export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponentProps { - /** Accessibility behavior if overridden by the user. */ + /** + * Accessibility behavior if overridden by the user. + * @default radioGroupItemBehavior + * */ accessibility?: Accessibility /** Whether or not radio item is checked. */ @@ -39,6 +41,9 @@ export interface RadioGroupItemProps extends UIComponentProps, Childre /** Initial checked value. */ defaultChecked?: boolean + /** Default value for isFromKeyboard (autocontrolled). */ + defaultIsFromKeyboard?: boolean + /** A radio item can appear disabled and be unable to change states. */ disabled?: boolean diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts index 4e40d79783..54a43513d9 100644 --- a/src/lib/commonPropInterfaces.ts +++ b/src/lib/commonPropInterfaces.ts @@ -24,7 +24,7 @@ export interface ContentComponentProps { export interface ChildrenComponentProps { /** - * Button content for childrenApi + * Content for childrenApi * @docSiteIgnore */ children?: ReactChildren