From 1c48e7dc13661ad11f8a8066f5d58c90cb064de0 Mon Sep 17 00:00:00 2001 From: joebochill Date: Mon, 6 Nov 2023 12:43:01 -0500 Subject: [PATCH 01/26] Convert ChannelValue playground to use playground library --- docs/package.json | 1 + .../playground/PlaygroundPage.tsx | 153 +++++++++++++++++- docs/src/index.css | 1 + docs/src/shared/ComponentPreviewTabs.tsx | 7 +- docs/src/shared/TabPanel.tsx | 4 +- docs/yarn.lock | 16 +- package.json | 2 +- 7 files changed, 173 insertions(+), 11 deletions(-) diff --git a/docs/package.json b/docs/package.json index 40cdc9c0d..593e90266 100644 --- a/docs/package.json +++ b/docs/package.json @@ -39,6 +39,7 @@ "@brightlayer-ui/icons": "^1.11.0", "@brightlayer-ui/icons-mui": "^3.4.0", "@brightlayer-ui/react-components": "^6.2.0", + "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.1", "@brightlayer-ui/react-themes": "^7.1.0", "@craco/craco": "^7.0.0", "@emotion/react": "^11.10.8", diff --git a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx index 6280514c2..34428ace2 100644 --- a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx @@ -1,17 +1,158 @@ import React from 'react'; import Box from '@mui/material/Box'; -import ChannelValuePlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import Stack from '@mui/material/Stack'; + +import { ChannelValue, ChannelValueProps } from '@brightlayer-ui/react-components'; + +import TrendingUp from '@mui/icons-material/TrendingUp'; +import TrendingDown from '@mui/icons-material/TrendingDown'; + +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'value', + type: 'string', + typeLabel: `number | string`, + initialValue: '123', + description: 'The value (bold text) to display', + required: true, + category: 'Required Props', + }, + // Optional Props + { + id: 'units', + type: 'string', + initialValue: 'hz', + typeLabel: 'string', + description: 'The text to display for the units (light text)', + required: false, + category: 'Optional Props', + }, + { + id: 'icon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'The inline icon to display', + initialValue: '', + options: [ + { label: 'undefined', value: 'undefined' }, + { label: '', value: '' }, + { label: '', value: '' }, + ], + required: false, + category: 'Optional Props', + }, + { + id: 'fontSize', + type: 'number', + typeLabel: `number | string`, + initialValue: 30, + description: 'The size of the font', + required: false, + minValue: 10, + maxValue: 50, + valueStep: 10, + category: 'Optional Props', + defaultValue: 'inherit', + }, + { + id: 'color', + label: 'color', + type: 'color', + typeLabel: 'string', + description: 'The color of the font', + required: false, + category: 'Optional Props', + defaultValue: 'inherit', + allowMuiColors: true, + }, + { + id: 'prefix', + type: 'boolean', + initialValue: false, + typeLabel: 'boolean', + description: 'Show units before the value', + required: false, + category: 'Optional Props', + defaultValue: false, + }, + { + id: 'unitSpace', + type: 'select', + typeLabel: `'auto' | 'show' | 'hide'`, + initialValue: 'auto', + options: [ + { label: 'auto', value: 'auto' }, + { label: 'hide', value: 'hide' }, + { label: 'show', value: 'show' }, + ], + description: 'Show/Hide spacing between the value and units', + required: false, + category: 'Optional Props', + defaultValue: 'auto', + }, + // Other Configuration + { + id: 'htmlColor', + type: 'color', + initialValue: '#f33333', + // typeLabel: 'string', + description: 'The color applied to the primary icon', + required: false, + label: 'Icon Color', + category: 'Other Configuration', + }, +]; + +const ChannelValuePreview: PreviewComponent = ({ data }) => { + const { htmlColor, icon, ...rest } = data as unknown as ChannelValueProps & { htmlColor: string }; + const getIcon = (value: string): JSX.Element | undefined => { + switch (value) { + case '': + return ; + case '': + return ; + case 'undefined': + default: + return undefined; + } + }; + + return ( + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + `', '')}fontSize={'inherit'}${ + data.htmlColor && data.htmlColor !== 'undefined' ? ` htmlColor={'${data.htmlColor as string}'}` : '' + } />}` + : '' + } +/>`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const ChannelValuePlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/index.css b/docs/src/index.css index 57dc60cfa..03865752a 100644 --- a/docs/src/index.css +++ b/docs/src/index.css @@ -29,6 +29,7 @@ pre[class*='language-'] * { } pre[class*='language-'] { + margin: 0; padding-left: 1em; padding-right: 1rem; } diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index a7d9c8796..587316074 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -146,7 +146,12 @@ export const ComponentPreviewTabs = (): JSX.Element => { - + diff --git a/docs/src/shared/TabPanel.tsx b/docs/src/shared/TabPanel.tsx index 974854610..6ed5e81c5 100644 --- a/docs/src/shared/TabPanel.tsx +++ b/docs/src/shared/TabPanel.tsx @@ -1,8 +1,8 @@ import React from 'react'; import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; +import Box, { BoxProps } from '@mui/material/Box'; -type TabPanelProps = { +type TabPanelProps = BoxProps & { children?: React.ReactNode; index: number; value: number; diff --git a/docs/yarn.lock b/docs/yarn.lock index 521ff4d9f..d2021d5cd 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1236,6 +1236,15 @@ "@seznam/compose-react-refs" "^1.0.6" color "^4.2.3" +"@brightlayer-ui/react-doc-components@^1.0.0-alpha.1": + version "1.0.0-alpha.1" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.1.tgz#a8e3fa313d49b6c089e3affaac4dd9dc0dd343a1" + integrity sha512-+EeDVGzKDelclOuVQg5k25xwUKnKX55V4fkYZWrTXbEUPO2DW3bUm201uIX9mJRpQEUW4d+JzwtKll0i5X4H/A== + dependencies: + color "^4.0.0" + lodash.debounce "^4.0.8" + lodash.groupby "^4.6.0" + "@brightlayer-ui/react-themes@^7.1.0": version "7.1.0" resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-themes/-/react-themes-7.1.0.tgz#09519522ab192cdb16c47c2d15ccd238d0fc8c5e" @@ -4144,7 +4153,7 @@ color@^3.1.3: color-convert "^1.9.3" color-string "^1.6.0" -color@^4.2.3: +color@^4.0.0, color@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz" integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== @@ -7442,6 +7451,11 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== +lodash.groupby@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1" + integrity sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw== + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz" diff --git a/package.json b/package.json index fce72faf8..829c679c4 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "link:components": "cd scripts && bash ./linkComponents.sh && cd ..", "install:dependencies": "cd demos/showcase && yarn && cd ../../docs && yarn && cd ../components && yarn", "start:showcase": "yarn initialize && yarn install:dependencies && yarn link:components && cd demos/showcase && yarn start", - "start:reactdev": "yarn install:dependencies && yarn link:components && cd docs && yarn start", + "start:docs": "yarn install:dependencies && yarn link:components && cd docs && yarn start", "start": "yarn start:showcase", "lint": "cd components && yarn lint", "lint:fix": "cd components && yarn lint:fix", From 7001b9b5316de25ae1504596cd4cb4afd57dd8a9 Mon Sep 17 00:00:00 2001 From: joebochill Date: Mon, 6 Nov 2023 12:55:59 -0500 Subject: [PATCH 02/26] Remove unused channelvalue files --- .../playground/ChannelValueConfig.tsx | 87 ------------------- .../playground/PreviewComponent.tsx | 65 -------------- .../playground/PropsPlayground.tsx | 12 --- .../ChannelValue/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/utilities.tsx | 2 - 6 files changed, 170 deletions(-) delete mode 100644 docs/src/componentDocs/ChannelValue/playground/ChannelValueConfig.tsx delete mode 100644 docs/src/componentDocs/ChannelValue/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/ChannelValue/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/ChannelValue/playground/ChannelValueConfig.tsx b/docs/src/componentDocs/ChannelValue/playground/ChannelValueConfig.tsx deleted file mode 100644 index 0c2e4e480..000000000 --- a/docs/src/componentDocs/ChannelValue/playground/ChannelValueConfig.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const channelValueConfig: ComponentType = { - componentName: 'Channel Value', - props: [ - { - propName: 'color', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'The color of the font', - required: false, - }, - { - propName: 'fontSize', - inputType: 'number', - inputValue: 30, - propType: 'number | string', - helperText: 'The size of the font', - required: false, - rangeData: { - min: 10, - max: 50, - step: 10, - }, - }, - { - propName: 'icon', - inputType: 'select', - inputValue: '', - options: ['undefined', '', ''], - propType: 'JSX.Element', - helperText: 'The inline icon to display', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'prefix', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Show units before the value', - required: false, - defaultValue: false, - }, - { - propName: 'units', - inputType: 'string', - inputValue: 'hz', - propType: 'string', - helperText: 'The text to display for the units (light text)', - required: false, - }, - { - propName: 'unitSpace', - inputType: 'select', - inputValue: 'auto', - options: ['auto', 'hide', 'show'], - propType: 'string', - helperText: 'Show/Hide spacing between the value and units', - required: false, - defaultValue: 'auto', - }, - { - propName: 'value', - inputType: 'string', - inputValue: 123, - propType: 'number | string', - helperText: 'The value (bold text) to display', - required: true, - }, - ], - otherProps: [ - { - propName: 'htmlColor', - inputType: 'colorPicker', - inputValue: Colors.red[500], - propType: 'string', - helperText: 'The color apply to primary icon', - required: false, - label: 'Icon Color', - }, - ], -}; - -export default channelValueConfig; diff --git a/docs/src/componentDocs/ChannelValue/playground/PreviewComponent.tsx b/docs/src/componentDocs/ChannelValue/playground/PreviewComponent.tsx deleted file mode 100644 index a8cf128d8..000000000 --- a/docs/src/componentDocs/ChannelValue/playground/PreviewComponent.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { - createProps, - getIcon, - getIconWithProp, - hideDefaultPropsFromSnippet, - removeEmptyLines, -} from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { ChannelValue } from '@brightlayer-ui/react-components/core/ChannelValue'; - -export const PreviewComponent = (): JSX.Element => { - const channelValueJson = useAppSelector((state: RootState) => state.componentsPropsState.channelValueComponent); - - const channelValueProps = createProps(channelValueJson.props as PropsType[]); - const otherProps = createProps(channelValueJson.otherProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(channelValueJson, propName, currentValue, 'props'); - - const toggleIconProp = (icon: string): string => { - if (icon === 'undefined') { - return toggleDefaultProp('icon', channelValueProps.icon); - } - return `icon={${getIconWithProp( - channelValueProps.icon, - otherProps.htmlColor - ? { fontSize: 'inherit', htmlColor: `${otherProps.htmlColor}` } - : { fontSize: 'inherit' } - )}}`; - }; - - const generateCodeSnippet = (): string => { - const jsx = ``; - return removeEmptyLines(jsx); - }; - - return ( - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/ChannelValue/playground/PropsPlayground.tsx b/docs/src/componentDocs/ChannelValue/playground/PropsPlayground.tsx deleted file mode 100644 index 26cc35284..000000000 --- a/docs/src/componentDocs/ChannelValue/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const channelValueJson = useAppSelector((state: RootState) => state.componentsPropsState.channelValueComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/ChannelValue/playground/index.tsx b/docs/src/componentDocs/ChannelValue/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/ChannelValue/playground/index.tsx +++ b/docs/src/componentDocs/ChannelValue/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 342659be0..7ee60db07 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,6 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import appBarConfig from '../componentDocs/AppBar/playground/AppBarConfig'; -import channelValueConfig from '../componentDocs/ChannelValue/playground/ChannelValueConfig'; import drawerConfig from '../componentDocs/Drawer/playground/DrawerConfig'; import drawerHeaderConfig from '../componentDocs/DrawerHeader/playground/DrawerHeaderConfig'; import drawerSubheaderConfig from '../componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig'; @@ -22,7 +21,6 @@ import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { appBarComponent: ComponentType; - channelValueComponent: ComponentType; drawerComponent: ComponentType; drawerHeaderComponent: ComponentType; drawerSubheaderComponent: ComponentType; @@ -43,7 +41,6 @@ type ComponentState = { const initialState: ComponentState = { appBarComponent: appBarConfig, - channelValueComponent: channelValueConfig, drawerComponent: drawerConfig, drawerHeaderComponent: drawerHeaderConfig, drawerSubheaderComponent: drawerSubheaderConfig, diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 817fb081b..e5f24e77a 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -116,8 +116,6 @@ export const getComponentState = (componentName: string, state: RootState['compo switch (componentName) { case 'App Bar': return state.appBarComponent; - case 'Channel Value': - return state.channelValueComponent; case 'Drawer Header': return state.drawerHeaderComponent; case 'Drawer': From 82c9cae377d0a87266764927a700f7acdf7d49cd Mon Sep 17 00:00:00 2001 From: joebochill Date: Wed, 8 Nov 2023 11:49:23 -0500 Subject: [PATCH 03/26] Update to version with copy code button --- docs/package.json | 2 +- docs/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index 593e90266..9ac8ff2bf 100644 --- a/docs/package.json +++ b/docs/package.json @@ -39,7 +39,7 @@ "@brightlayer-ui/icons": "^1.11.0", "@brightlayer-ui/icons-mui": "^3.4.0", "@brightlayer-ui/react-components": "^6.2.0", - "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.1", + "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.2", "@brightlayer-ui/react-themes": "^7.1.0", "@craco/craco": "^7.0.0", "@emotion/react": "^11.10.8", diff --git a/docs/yarn.lock b/docs/yarn.lock index d2021d5cd..23dc3581c 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1236,10 +1236,10 @@ "@seznam/compose-react-refs" "^1.0.6" color "^4.2.3" -"@brightlayer-ui/react-doc-components@^1.0.0-alpha.1": - version "1.0.0-alpha.1" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.1.tgz#a8e3fa313d49b6c089e3affaac4dd9dc0dd343a1" - integrity sha512-+EeDVGzKDelclOuVQg5k25xwUKnKX55V4fkYZWrTXbEUPO2DW3bUm201uIX9mJRpQEUW4d+JzwtKll0i5X4H/A== +"@brightlayer-ui/react-doc-components@^1.0.0-alpha.2": + version "1.0.0-alpha.2" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.2.tgz#5b23c517238c0199e8d8df78875634cd4cba2828" + integrity sha512-fHo2JzZQ+/mlUQ5/gYadwz1hwQZwwG8JE2OYu38ZnVxQIGK21A/ehg5kO+NK4I9DeT9PgKZAfmX9uMkYd428oA== dependencies: color "^4.0.0" lodash.debounce "^4.0.8" From 3ce06ccea8171ecb5545c3110f2bf126b4bff5e6 Mon Sep 17 00:00:00 2001 From: joebochill Date: Wed, 8 Nov 2023 12:04:13 -0500 Subject: [PATCH 04/26] Add todo comment --- docs/src/shared/ComponentPreviewTabs.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 587316074..d8e04908a 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -149,6 +149,7 @@ export const ComponentPreviewTabs = (): JSX.Element => { From 6d80c0b662a1236d04698e77912c99b33cb1281d Mon Sep 17 00:00:00 2001 From: joebochill Date: Wed, 8 Nov 2023 13:31:16 -0500 Subject: [PATCH 05/26] Update browsertools version --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 542f614f7..3c116e92e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,7 +2,7 @@ version: 2.1 orbs: codecov: codecov/codecov@3.2.2 gh: circleci/github-cli@1.0.3 - browser-tools: circleci/browser-tools@1.4.2 + browser-tools: circleci/browser-tools@1.4.6 jobs: build_library: docker: From 59b182a938e4227c098c3f8f434068eba702a3b5 Mon Sep 17 00:00:00 2001 From: joebochill Date: Fri, 8 Dec 2023 15:25:23 -0500 Subject: [PATCH 06/26] Update AppBar to use utility library for playground --- .../AppBar/playground/PlaygroundPage.tsx | 153 +++++++++++++++++- .../AppBar/playground/PreviewComponent.tsx | 82 ---------- .../AppBar/playground/PropsPlayground.tsx | 12 -- .../componentDocs/AppBar/playground/index.tsx | 3 +- docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 5 +- docs/src/shared/utilities.tsx | 2 - 7 files changed, 152 insertions(+), 108 deletions(-) delete mode 100644 docs/src/componentDocs/AppBar/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/AppBar/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx index 30d5a5da1..fbc08e040 100644 --- a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx @@ -1,17 +1,158 @@ +/* eslint-disable */ import React from 'react'; import Box from '@mui/material/Box'; -import AppBarPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { AppBar, AppBarProps } from '@brightlayer-ui/react-components'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; +import { getBodyFiller, getImage } from '../../../shared'; + +const inputConfig: InputConfig = [ + // Required Props + // NONE + + // Optional Props + { + id: 'animationDuration', + type: 'number', + initialValue: 300, + defaultValue: 300, + maxValue: 1000, + minValue: 100, + valueStep: 100, + typeLabel: 'number', + description: 'Length of the collapse / expand animation (ms)', + required: false, + category: 'Optional Props', + }, + { + id: 'backgroundImage', + type: 'select', + typeLabel: 'string', + description: 'Image to use as the app bar background', + initialValue: 'undefined', + options: [ + { label: 'undefined', value: 'undefined' }, + { label: 'Farm', value: 'Farm' }, + ], + required: false, + category: 'Optional Props', + }, + { + id: 'collapsedHeight', + type: 'number', + typeLabel: `number | string`, + description: 'Height of the AppBar when collapsed', + required: false, + initialValue: 64, + minValue: 50, + maxValue: 100, + valueStep: 10, + defaultValue: 64, + category: 'Optional Props', + }, + { + id: 'expandedHeight', + type: 'number', + typeLabel: `number | string`, + description: 'Height of the AppBar when expanded', + required: false, + initialValue: 200, + minValue: 100, + maxValue: 240, + valueStep: 10, + defaultValue: 200, + category: 'Optional Props', + }, + { + id: 'scrollThreshold', + type: 'number', + typeLabel: `number`, + description: 'Distance to scroll before collapsing the app bar', + required: false, + initialValue: 136, + minValue: 50, + maxValue: 400, + valueStep: 10, + defaultValue: 136, + category: 'Optional Props', + }, + { + id: 'variant', + type: 'select', + typeLabel: `'collapsed' | 'expanded' | 'snap'`, + description: 'Behavior of the App Bar', + required: false, + initialValue: 'snap', + defaultValue: 'snap', + options: ['collapsed', 'expanded', 'snap'], + category: 'Optional Props', + }, + + // Other Configuration + // NONE +]; + +const AppBarPreview: PreviewComponent = ({ data }) => { + const { backgroundImage, ...rest } = data as unknown as AppBarProps & {}; + const SCROLL_CONTAINER_ID = 'BLUIAppBar-playground-scroll-container-1' + return ( + + + + + Title + + + + {getBodyFiller()} + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ` + + Title + +`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); + export const AppBarPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/AppBar/playground/PreviewComponent.tsx b/docs/src/componentDocs/AppBar/playground/PreviewComponent.tsx deleted file mode 100644 index 51af30430..000000000 --- a/docs/src/componentDocs/AppBar/playground/PreviewComponent.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { - createProps, - getBodyFiller, - getImage, - hideDefaultPropsFromSnippet, - removeEmptyLines, -} from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { AppBar } from '@brightlayer-ui/react-components/core/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import Box from '@mui/material/Box/Box'; -import Typography from '@mui/material/Typography'; -import useTheme from '@mui/material/styles/useTheme'; -import useMediaQuery from '@mui/material/useMediaQuery'; - -export const PreviewComponent = (): JSX.Element => { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - const appBarJson = useAppSelector((state: RootState) => state.componentsPropsState.appBarComponent); - - const appBarProps = createProps(appBarJson.props as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any, themeDefaultValue?: string | number): string => - hideDefaultPropsFromSnippet(appBarJson, propName, currentValue, 'props', themeDefaultValue); - - const generateCodeSnippet = (): string => { - const jsx = ` - - Title - -`; - return removeEmptyLines(jsx); - }; - - return ( - - - - Title - - - - {getBodyFiller()} - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/AppBar/playground/PropsPlayground.tsx b/docs/src/componentDocs/AppBar/playground/PropsPlayground.tsx deleted file mode 100644 index 6fdab63a6..000000000 --- a/docs/src/componentDocs/AppBar/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const appBarJson = useAppSelector((state: RootState) => state.componentsPropsState.appBarComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/AppBar/playground/index.tsx b/docs/src/componentDocs/AppBar/playground/index.tsx index 234b17b3c..b864f1565 100644 --- a/docs/src/componentDocs/AppBar/playground/index.tsx +++ b/docs/src/componentDocs/AppBar/playground/index.tsx @@ -1,2 +1 @@ -export * from './PlaygroundPage'; -export * from './PreviewComponent'; +export * from './PlaygroundPage'; \ No newline at end of file diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 7ee60db07..ad1cd2efc 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,5 +1,4 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import appBarConfig from '../componentDocs/AppBar/playground/AppBarConfig'; import drawerConfig from '../componentDocs/Drawer/playground/DrawerConfig'; import drawerHeaderConfig from '../componentDocs/DrawerHeader/playground/DrawerHeaderConfig'; import drawerSubheaderConfig from '../componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig'; @@ -20,7 +19,6 @@ import { getComponentState } from '../shared/utilities'; import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { - appBarComponent: ComponentType; drawerComponent: ComponentType; drawerHeaderComponent: ComponentType; drawerSubheaderComponent: ComponentType; @@ -40,7 +38,6 @@ type ComponentState = { }; const initialState: ComponentState = { - appBarComponent: appBarConfig, drawerComponent: drawerConfig, drawerHeaderComponent: drawerHeaderConfig, drawerSubheaderComponent: drawerSubheaderConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index d8e04908a..5def8fccf 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -150,7 +150,10 @@ export const ComponentPreviewTabs = (): JSX.Element => { sx={[ playgroundContentStyles, // @TODO Add each component here as we incrementally update them. Once all have been migrated to the new tools, we can refactor this to remove the right margin on the container. - location.pathname.includes('channel-value') ? { marginRight: 0 } : {}, + ( + location.pathname.includes('channel-value') || + location.pathname.includes('app-bar') + )? { marginRight: 0 } : {}, ]} > diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index e5f24e77a..d59322283 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -114,8 +114,6 @@ export const createProps = (props: PropsType[]): any => { export const getComponentState = (componentName: string, state: RootState['componentsPropsState']): ComponentType => { switch (componentName) { - case 'App Bar': - return state.appBarComponent; case 'Drawer Header': return state.drawerHeaderComponent; case 'Drawer': From ebe81058abdbab83a76bac6d67126e89dd0707f1 Mon Sep 17 00:00:00 2001 From: joebochill Date: Fri, 8 Dec 2023 16:02:32 -0500 Subject: [PATCH 07/26] Update EmptyState to use playground library --- .../AppBar/playground/AppBarConfig.tsx | 84 ------------- .../AppBar/playground/PlaygroundPage.tsx | 13 +- .../componentDocs/AppBar/playground/index.tsx | 2 +- .../playground/PlaygroundPage.tsx | 25 ++-- .../playground/EmptyStateConfig.tsx | 46 ------- .../EmptyState/playground/PlaygroundPage.tsx | 115 +++++++++++++++++- .../playground/PreviewComponent.tsx | 65 ---------- .../EmptyState/playground/PropsPlayground.tsx | 12 -- .../EmptyState/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 9 +- docs/src/shared/utilities.tsx | 2 - 12 files changed, 133 insertions(+), 244 deletions(-) delete mode 100644 docs/src/componentDocs/AppBar/playground/AppBarConfig.tsx delete mode 100644 docs/src/componentDocs/EmptyState/playground/EmptyStateConfig.tsx delete mode 100644 docs/src/componentDocs/EmptyState/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/EmptyState/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/AppBar/playground/AppBarConfig.tsx b/docs/src/componentDocs/AppBar/playground/AppBarConfig.tsx deleted file mode 100644 index ab9c1749e..000000000 --- a/docs/src/componentDocs/AppBar/playground/AppBarConfig.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { ComponentType } from '../../../__types__'; - -export const appBarConfig: ComponentType = { - componentName: 'App Bar', - props: [ - { - propName: 'animationDuration', - inputType: 'number', - inputValue: 300, - propType: 'number', - helperText: 'Length of the collapse / expand animation (ms)', - required: false, - rangeData: { - min: 100, - max: 1000, - step: 100, - }, - }, - { - propName: 'backgroundImage', - inputType: 'select', - inputValue: 'undefined', - options: ['undefined', 'Farm'], - propType: 'string', - helperText: 'Image to use as the app bar background', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'collapsedHeight', - inputType: 'number', - inputValue: 64, - propType: 'number | string', - helperText: 'Height of the AppBar when collapsed', - required: false, - rangeData: { - min: 50, - max: 100, - step: 10, - }, - defaultValue: 64, - }, - { - propName: 'expandedHeight', - inputType: 'number', - inputValue: 200, - propType: 'number | string', - helperText: 'Height of the AppBar when expanded', - required: false, - rangeData: { - min: 100, - max: 240, - step: 10, - }, - defaultValue: 200, - }, - { - propName: 'scrollThreshold', - inputType: 'number', - inputValue: 136, - propType: 'number | string', - helperText: 'Distance to scroll before collapsing the app bar', - required: false, - rangeData: { - min: 50, - max: 400, - step: 10, - }, - defaultValue: 136, - }, - { - propName: 'variant', - inputType: 'select', - inputValue: 'snap', - options: ['collapsed', 'expanded', 'snap'], - propType: 'string', - helperText: 'Behavior of the App Bar', - required: false, - defaultValue: 'snap', - }, - ], -}; - -export default appBarConfig; diff --git a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx index fbc08e040..b3b780d2e 100644 --- a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx @@ -1,4 +1,3 @@ -/* eslint-disable */ import React from 'react'; import Box from '@mui/material/Box'; import { @@ -102,8 +101,8 @@ const inputConfig: InputConfig = [ ]; const AppBarPreview: PreviewComponent = ({ data }) => { - const { backgroundImage, ...rest } = data as unknown as AppBarProps & {}; - const SCROLL_CONTAINER_ID = 'BLUIAppBar-playground-scroll-container-1' + const { backgroundImage, ...rest } = data as unknown as AppBarProps; + const SCROLL_CONTAINER_ID = 'BLUIAppBar-playground-scroll-container-1'; return ( { const generateSnippet: CodeSnippetFunction = (data) => ` Title `.replace(/^\s*$(?:\r\n?|\n)/gm, ''); - export const AppBarPlaygroundComponent = (): JSX.Element => ( ', options: [ { label: 'undefined', value: 'undefined' }, { label: '', value: '' }, { label: '', value: '' }, ], - required: false, category: 'Optional Props', }, { id: 'fontSize', type: 'number', typeLabel: `number | string`, - initialValue: 30, description: 'The size of the font', required: false, + initialValue: 30, minValue: 10, maxValue: 50, valueStep: 10, - category: 'Optional Props', defaultValue: 'inherit', + category: 'Optional Props', }, { id: 'color', @@ -71,9 +71,9 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color of the font', required: false, - category: 'Optional Props', defaultValue: 'inherit', allowMuiColors: true, + category: 'Optional Props', }, { id: 'prefix', @@ -82,33 +82,32 @@ const inputConfig: InputConfig = [ typeLabel: 'boolean', description: 'Show units before the value', required: false, - category: 'Optional Props', defaultValue: false, + category: 'Optional Props', }, { id: 'unitSpace', type: 'select', typeLabel: `'auto' | 'show' | 'hide'`, + description: 'Show/Hide spacing between the value and units', + required: false, initialValue: 'auto', options: [ { label: 'auto', value: 'auto' }, { label: 'hide', value: 'hide' }, { label: 'show', value: 'show' }, ], - description: 'Show/Hide spacing between the value and units', - required: false, - category: 'Optional Props', defaultValue: 'auto', + category: 'Optional Props', }, // Other Configuration { id: 'htmlColor', + label: 'Icon Color', type: 'color', - initialValue: '#f33333', - // typeLabel: 'string', description: 'The color applied to the primary icon', required: false, - label: 'Icon Color', + initialValue: '#f33333', category: 'Other Configuration', }, ]; diff --git a/docs/src/componentDocs/EmptyState/playground/EmptyStateConfig.tsx b/docs/src/componentDocs/EmptyState/playground/EmptyStateConfig.tsx deleted file mode 100644 index 25763fc37..000000000 --- a/docs/src/componentDocs/EmptyState/playground/EmptyStateConfig.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { ComponentType } from '../../../__types__'; - -export const emptyStateConfig: ComponentType = { - componentName: 'Empty State', - props: [ - { - propName: 'icon', - inputType: 'select', - inputValue: '', - options: ['', '', ''], - propType: 'ReactNode', - helperText: 'The primary icon', - required: true, - defaultValue: '', - }, - { - propName: 'description', - inputType: 'string', - inputValue: 'Check your network connection', - propType: 'ReactNode', - helperText: 'The secondary text to display', - required: false, - }, - { - propName: 'title', - inputType: 'string', - inputValue: 'No Devices', - propType: 'ReactNode', - helperText: 'The main text to display', - required: true, - }, - ], - otherProps: [ - { - propName: 'showAction', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to show action section or not', - required: false, - label: 'Show Action', - }, - ], -}; - -export default emptyStateConfig; diff --git a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx index ea6cf97d6..0f5c841ba 100644 --- a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx @@ -1,17 +1,120 @@ import React from 'react'; import Box from '@mui/material/Box'; -import EmptyStatePlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { EmptyState, EmptyStateProps } from '@brightlayer-ui/react-components'; +import { Add, Devices, Router, SensorsOff } from '@mui/icons-material'; +import Button from '@mui/material/Button'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'icon', + type: 'select', + typeLabel: 'ReactNode', + description: 'The primary icon', + initialValue: '', + options: ['', '', ''], + required: true, + category: 'Required Props', + }, + { + id: 'title', + type: 'string', + typeLabel: 'ReactNode', + description: 'The main text to display', + required: true, + initialValue: 'No Devices', + category: 'Required Props', + }, + + // Optional Props + { + id: 'description', + type: 'string', + typeLabel: 'ReactNode', + description: 'The secondary text to display', + required: false, + initialValue: 'Check your network connection', + category: 'Optional Props', + }, + + // Other Configuration + { + id: 'showAction', + label: 'Show Actions', + type: 'boolean', + description: 'Whether to show action section or not', + required: false, + initialValue: false, + category: 'Other Configuration', + }, +]; + +const EmptyStatePreview: PreviewComponent = ({ data }) => { + const { icon, showAction, ...rest } = data as unknown as EmptyStateProps & { showAction?: boolean }; + + const getIcon = (value: string): JSX.Element | undefined => { + switch (value) { + case '': + return ; + case '': + return ; + case '': + default: + return ; + } + }; + return ( + + }> + {'Add Device'} + + ) : undefined + } + /> + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + `', '')}fontSize={'inherit'} />}` + : '' + } + ${ + data.showAction + ? `actions={ + + }` + : '' + } +/>`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const EmptyStatePlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/EmptyState/playground/PreviewComponent.tsx b/docs/src/componentDocs/EmptyState/playground/PreviewComponent.tsx deleted file mode 100644 index 3ca6e0833..000000000 --- a/docs/src/componentDocs/EmptyState/playground/PreviewComponent.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { - createProps, - getIcon, - getIconWithProp, - hideDefaultPropsFromSnippet, - removeEmptyLines, -} from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { EmptyState } from '@brightlayer-ui/react-components/core/EmptyState'; -import Button from '@mui/material/Button'; -import AddIcon from '@mui/icons-material/Add'; - -export const PreviewComponent = (): JSX.Element => { - const emptyStateJson = useAppSelector((state: RootState) => state.componentsPropsState.emptyStateComponent); - - const emptyStateProps = createProps(emptyStateJson.props as PropsType[]); - const emptyStateOtherProps = createProps(emptyStateJson.otherProps as PropsType[]); - - const toggleActionSection = (showAction: boolean): JSX.Element | undefined => - showAction ? ( - - ) : undefined; - - const toggleActionSnippet = (showActionSnippet: boolean): string => - showActionSnippet - ? `actions={ - - }` - : ``; - - const toggleDefaultProp = (propName: string, currentValue: any, groupType?: string): string => - hideDefaultPropsFromSnippet(emptyStateJson, propName, currentValue, groupType); - - const generateCodeSnippet = (): string => { - const jsx = ``; - return removeEmptyLines(jsx); - }; - - return ( - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/EmptyState/playground/PropsPlayground.tsx b/docs/src/componentDocs/EmptyState/playground/PropsPlayground.tsx deleted file mode 100644 index cc094f502..000000000 --- a/docs/src/componentDocs/EmptyState/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const emptyStateJson = useAppSelector((state: RootState) => state.componentsPropsState.emptyStateComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/EmptyState/playground/index.tsx b/docs/src/componentDocs/EmptyState/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/EmptyState/playground/index.tsx +++ b/docs/src/componentDocs/EmptyState/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index ad1cd2efc..be63fb9e7 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -6,7 +6,6 @@ import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerF import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; -import emptyStateConfig from '../componentDocs/EmptyState/playground/EmptyStateConfig'; import heroConfig from '../componentDocs/Hero/playground/HeroConfig'; import infoListItemConfig from '../componentDocs/InfoListItem/playground/InfoListItemConfig'; import listItemTagConfig from '../componentDocs/ListItemTag/playground/ListItemTagConfig'; @@ -26,7 +25,6 @@ type ComponentState = { drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; - emptyStateComponent: ComponentType; heroComponent: ComponentType; infoListItemComponent: ComponentType; listItemTagComponent: ComponentType; @@ -45,7 +43,6 @@ const initialState: ComponentState = { drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, - emptyStateComponent: emptyStateConfig, heroComponent: heroConfig, infoListItemComponent: infoListItemConfig, listItemTagComponent: listItemTagConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 5def8fccf..76628df6a 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -150,10 +150,11 @@ export const ComponentPreviewTabs = (): JSX.Element => { sx={[ playgroundContentStyles, // @TODO Add each component here as we incrementally update them. Once all have been migrated to the new tools, we can refactor this to remove the right margin on the container. - ( - location.pathname.includes('channel-value') || - location.pathname.includes('app-bar') - )? { marginRight: 0 } : {}, + location.pathname.includes('channel-value') || + location.pathname.includes('app-bar') || + location.pathname.includes('empty-state') + ? { marginRight: 0 } + : {}, ]} > diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index d59322283..1ba3d7dbf 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -128,8 +128,6 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerNavItemComponent; case 'Drawer Rail Item': return state.drawerRailItemComponent; - case 'Empty State': - return state.emptyStateComponent; case 'Hero': return state.heroComponent; case 'Info List Item': From 8f04f1bdfaaeb24a9ee10763878e595a1f190a3d Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 09:52:21 -0500 Subject: [PATCH 08/26] Update Hero to use playground library --- docs/package.json | 2 +- .../Hero/playground/HeroConfig.tsx | 92 ---------- .../Hero/playground/PlaygroundPage.tsx | 164 +++++++++++++++++- .../Hero/playground/PreviewComponent.tsx | 56 ------ .../Hero/playground/PropsPlayground.tsx | 12 -- .../componentDocs/Hero/playground/index.tsx | 3 +- docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - docs/yarn.lock | 8 +- 10 files changed, 166 insertions(+), 179 deletions(-) delete mode 100644 docs/src/componentDocs/Hero/playground/HeroConfig.tsx delete mode 100644 docs/src/componentDocs/Hero/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/Hero/playground/PropsPlayground.tsx diff --git a/docs/package.json b/docs/package.json index 9ac8ff2bf..5d4af8506 100644 --- a/docs/package.json +++ b/docs/package.json @@ -39,7 +39,7 @@ "@brightlayer-ui/icons": "^1.11.0", "@brightlayer-ui/icons-mui": "^3.4.0", "@brightlayer-ui/react-components": "^6.2.0", - "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.2", + "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.5", "@brightlayer-ui/react-themes": "^7.1.0", "@craco/craco": "^7.0.0", "@emotion/react": "^11.10.8", diff --git a/docs/src/componentDocs/Hero/playground/HeroConfig.tsx b/docs/src/componentDocs/Hero/playground/HeroConfig.tsx deleted file mode 100644 index 6a52739e7..000000000 --- a/docs/src/componentDocs/Hero/playground/HeroConfig.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const heroConfig: ComponentType = { - componentName: 'Hero', - props: [ - { - propName: 'icon', - inputType: 'select', - inputValue: '', - options: ['', ''], - propType: 'ReactNode', - helperText: 'The primary icon', - required: true, - }, - { - propName: 'iconBackgroundColor', - inputType: 'colorPicker', - inputValue: Colors.blue[500], - propType: 'string', - helperText: 'The color used behind the primary icon', - required: false, - defaultValue: 'transparent', - }, - { - propName: 'iconSize', - inputType: 'number', - inputValue: 36, - propType: 'number | string', - helperText: 'The size of the primary icon (min 10px)', - required: false, - defaultValue: 36, - rangeData: { - min: 10, - max: 100, - step: 1, - }, - }, - { - propName: 'label', - inputType: 'string', - inputValue: 'Velocity', - propType: 'string', - helperText: 'The text shown below the Channel Value', - required: true, - }, - ], - otherProps: [ - { - propName: 'htmlColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'The color apply to primary icon', - required: false, - label: 'Icon Color', - }, - ], - otherComponentProps: { - childComponentName: 'Channel Value Props', - childComponentProps: [ - { - propName: 'units', - inputType: 'string', - inputValue: 'RPM', - propType: 'string', - helperText: 'The text to display for the units (light text)', - required: false, - }, - { - propName: 'valueIcon', - inputType: 'select', - inputValue: '', - options: ['undefined', ''], - propType: 'JSX.Element', - helperText: 'The inline icon to display', - required: false, - defaultValue: '', - }, - { - propName: 'value', - inputType: 'string', - inputValue: 470, - propType: 'number | string', - helperText: 'The value (bold text) to display', - required: true, - }, - ], - }, -}; - -export default heroConfig; diff --git a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx index 0472b80bb..b58e90c06 100644 --- a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx @@ -1,17 +1,169 @@ import React from 'react'; import Box from '@mui/material/Box'; -import HeroPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { ChannelValueProps, Hero, HeroProps } from '@brightlayer-ui/react-components'; +import * as Colors from '@brightlayer-ui/colors'; +import { Fan, FanCircled } from '@brightlayer-ui/icons-mui'; +import TrendingUp from '@mui/icons-material/TrendingUp'; +import TrendingDown from '@mui/icons-material/TrendingDown'; + + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'icon', + type: 'select', + typeLabel: 'ReactNode', + description: 'The primary icon', + initialValue: '', + options: ['', ''], + required: true, + category: 'Required Props', + }, + { + id: 'label', + type: 'string', + typeLabel: 'string', + description: 'The text shown below the Channel Value', + required: true, + initialValue: 'Velocity', + category: 'Required Props', + }, + + // Optional Props + { + id: 'iconBackgroundColor', + type: 'color', + typeLabel: 'string', + description: 'The color used behind the primary icon', + required: false, + initialValue: Colors.blue[500], + defaultValue: 'transparent', + category: 'Optional Props', + }, + { + id: 'iconSize', + type: 'number', + typeLabel: `number | string`, + description: 'The size of the primary icon (min 10px)', + required: false, + initialValue: 36, + minValue: 10, + maxValue: 100, + valueStep: 1, + defaultValue: 36, + category: 'Optional Props', + }, + + // ChannelValueProps + { + id: 'value', + type: 'string', + typeLabel: `number | string`, + description: 'The value (bold text) to display', + required: true, + initialValue: '123', + category: 'ChannelValue Props', + }, + { + id: 'units', + type: 'string', + typeLabel: 'string', + description: 'The text to display for the units (light text)', + required: false, + initialValue: 'hz', + category: 'ChannelValue Props', + }, + { + id: 'valueIcon', + label: 'icon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'The inline icon to display', + required: false, + initialValue: '', + options: ['undefined', '', ''], + category: 'ChannelValue Props', + }, + + // Other Configuration + { + id: 'htmlColor', + label: 'Icon Color', + type: 'color', + description: 'The color applied to the primary icon', + required: false, + initialValue: Colors.white[50], + category: 'Other Configuration', + }, +]; + +const HeroPreview: PreviewComponent = ({ data }) => { + const { icon, htmlColor, value: channelValue, units, valueIcon, ...rest } = data as unknown as HeroProps & { htmlColor: string; valueIcon: string } & Pick; + + const getIcon = (value: string, preserveColor = true): JSX.Element | undefined => { + switch (value) { + case '': + return ; + case '': + return ; + case '': + return ; + case '': + return ; + default: + return undefined; + } + }; + return ( + + + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + `', '')}fontSize={'inherit'}${data.htmlColor && data.htmlColor !== 'undefined' ? ` htmlColor={'${data.htmlColor as string}'}` : '' + } />}` + : '' + } + ChannelValueProps={{ + ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t\t', format: 'object', skip: ['icon', 'label', 'iconBackgroundColor', 'iconSize', 'htmlColor', 'valueIcon'] })} + ${data.valueIcon && data.valueIcon !== 'undefined' + ? `icon: ${(data.valueIcon as string).replace('/>', '')}fontSize={'inherit'} />,` + : '' + } + }} +/>`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const HeroPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/Hero/playground/PreviewComponent.tsx b/docs/src/componentDocs/Hero/playground/PreviewComponent.tsx deleted file mode 100644 index a0c57abbd..000000000 --- a/docs/src/componentDocs/Hero/playground/PreviewComponent.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { Hero } from '@brightlayer-ui/react-components/core/Hero'; -import { - createProps, - getIcon, - getIconWithProp, - hideDefaultPropsFromSnippet, - removeEmptyLines, -} from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; - -export const PreviewComponent = (): JSX.Element => { - const heroJson = useAppSelector((state: RootState) => state.componentsPropsState.heroComponent); - - const heroProps = createProps(heroJson.props as PropsType[]); - const heroOtherProps = createProps(heroJson.otherProps as PropsType[]); - const channelValueProps = createProps(heroJson.otherComponentProps?.childComponentProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(heroJson, propName, currentValue, 'props'); - - const generateCodeSnippet = (): string => { - const jsx = ``; - return removeEmptyLines(jsx); - }; - - return ( - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/Hero/playground/PropsPlayground.tsx b/docs/src/componentDocs/Hero/playground/PropsPlayground.tsx deleted file mode 100644 index 1fa2f95c8..000000000 --- a/docs/src/componentDocs/Hero/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const heroJson = useAppSelector((state: RootState) => state.componentsPropsState.heroComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/Hero/playground/index.tsx b/docs/src/componentDocs/Hero/playground/index.tsx index 234b17b3c..b864f1565 100644 --- a/docs/src/componentDocs/Hero/playground/index.tsx +++ b/docs/src/componentDocs/Hero/playground/index.tsx @@ -1,2 +1 @@ -export * from './PlaygroundPage'; -export * from './PreviewComponent'; +export * from './PlaygroundPage'; \ No newline at end of file diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index be63fb9e7..878812398 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -6,7 +6,6 @@ import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerF import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; -import heroConfig from '../componentDocs/Hero/playground/HeroConfig'; import infoListItemConfig from '../componentDocs/InfoListItem/playground/InfoListItemConfig'; import listItemTagConfig from '../componentDocs/ListItemTag/playground/ListItemTagConfig'; import spacerConfig from '../componentDocs/Spacer/playground/SpacerConfig'; @@ -25,7 +24,6 @@ type ComponentState = { drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; - heroComponent: ComponentType; infoListItemComponent: ComponentType; listItemTagComponent: ComponentType; spacerComponent: ComponentType; @@ -43,7 +41,6 @@ const initialState: ComponentState = { drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, - heroComponent: heroConfig, infoListItemComponent: infoListItemConfig, listItemTagComponent: listItemTagConfig, spacerComponent: spacerConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 76628df6a..7a867552f 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -152,7 +152,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { // @TODO Add each component here as we incrementally update them. Once all have been migrated to the new tools, we can refactor this to remove the right margin on the container. location.pathname.includes('channel-value') || location.pathname.includes('app-bar') || - location.pathname.includes('empty-state') + location.pathname.includes('empty-state') || + location.pathname.includes('hero') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 1ba3d7dbf..83ef7e486 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -128,8 +128,6 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerNavItemComponent; case 'Drawer Rail Item': return state.drawerRailItemComponent; - case 'Hero': - return state.heroComponent; case 'Info List Item': return state.infoListItemComponent; case 'List Item Tag': diff --git a/docs/yarn.lock b/docs/yarn.lock index 23dc3581c..c33024d40 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1236,10 +1236,10 @@ "@seznam/compose-react-refs" "^1.0.6" color "^4.2.3" -"@brightlayer-ui/react-doc-components@^1.0.0-alpha.2": - version "1.0.0-alpha.2" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.2.tgz#5b23c517238c0199e8d8df78875634cd4cba2828" - integrity sha512-fHo2JzZQ+/mlUQ5/gYadwz1hwQZwwG8JE2OYu38ZnVxQIGK21A/ehg5kO+NK4I9DeT9PgKZAfmX9uMkYd428oA== +"@brightlayer-ui/react-doc-components@^1.0.0-alpha.5": + version "1.0.0-alpha.5" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.5.tgz#45d7b52af2056df69c43bdfef5688095afe00126" + integrity sha512-iA5nwu/qgcAGc0NOLdbZS+tshxLVKBuRhpAgZ9kYRbVWnNSPRXc5GmwJWffHUFa8tpf/xXuvHZ0+IG87u/B2OQ== dependencies: color "^4.0.0" lodash.debounce "^4.0.8" From 02d7f4e322268ba7b679ab9fd4ff390cd7acec3b Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 11:03:15 -0500 Subject: [PATCH 09/26] Update InfoListItem to use playground library --- .../Hero/playground/PlaygroundPage.tsx | 45 ++- .../componentDocs/Hero/playground/index.tsx | 2 +- .../playground/InfoListItemConfig.tsx | 185 ------------- .../playground/PlaygroundPage.tsx | 258 +++++++++++++++++- .../playground/PreviewComponent.tsx | 77 ------ .../playground/PropsPlayground.tsx | 12 - .../InfoListItem/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - 10 files changed, 287 insertions(+), 301 deletions(-) delete mode 100644 docs/src/componentDocs/InfoListItem/playground/InfoListItemConfig.tsx delete mode 100644 docs/src/componentDocs/InfoListItem/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/InfoListItem/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx index b58e90c06..678bc018a 100644 --- a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx @@ -15,7 +15,6 @@ import { Fan, FanCircled } from '@brightlayer-ui/icons-mui'; import TrendingUp from '@mui/icons-material/TrendingUp'; import TrendingDown from '@mui/icons-material/TrendingDown'; - const inputConfig: InputConfig = [ // Required Props { @@ -107,7 +106,17 @@ const inputConfig: InputConfig = [ ]; const HeroPreview: PreviewComponent = ({ data }) => { - const { icon, htmlColor, value: channelValue, units, valueIcon, ...rest } = data as unknown as HeroProps & { htmlColor: string; valueIcon: string } & Pick; + const { + icon, + htmlColor, + value: channelValue, + units, + valueIcon, + ...rest + } = data as unknown as HeroProps & { htmlColor: string; valueIcon: string } & Pick< + ChannelValueProps, + 'value' | 'units' + >; const getIcon = (value: string, preserveColor = true): JSX.Element | undefined => { switch (value) { @@ -132,7 +141,7 @@ const HeroPreview: PreviewComponent = ({ data }) => { ChannelValueProps={{ value: channelValue, units, - icon: getIcon(valueIcon, false) + icon: getIcon(valueIcon, false), }} /> @@ -142,18 +151,28 @@ const HeroPreview: PreviewComponent = ({ data }) => { const generateSnippet: CodeSnippetFunction = (data) => `', '')}fontSize={'inherit'}${data.htmlColor && data.htmlColor !== 'undefined' ? ` htmlColor={'${data.htmlColor as string}'}` : '' - } />}` + ${getPropsToString(getPropsMapping(data, inputConfig), { + join: '\n\t', + skip: ['icon', 'htmlColor', 'value', 'units', 'valueIcon'], + })} + ${ + data.icon && data.icon !== 'undefined' + ? `icon={${(data.icon as string).replace('/>', '')}fontSize={'inherit'}${ + data.htmlColor && data.htmlColor !== 'undefined' ? ` htmlColor={'${data.htmlColor as string}'}` : '' + } />}` : '' - } - ChannelValueProps={{ - ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t\t', format: 'object', skip: ['icon', 'label', 'iconBackgroundColor', 'iconSize', 'htmlColor', 'valueIcon'] })} - ${data.valueIcon && data.valueIcon !== 'undefined' - ? `icon: ${(data.valueIcon as string).replace('/>', '')}fontSize={'inherit'} />,` - : '' } + ChannelValueProps={{ + ${getPropsToString(getPropsMapping(data, inputConfig), { + join: '\n\t\t', + format: 'object', + skip: ['icon', 'label', 'iconBackgroundColor', 'iconSize', 'htmlColor', 'valueIcon'], + })} + ${ + data.valueIcon && data.valueIcon !== 'undefined' + ? `icon: ${(data.valueIcon as string).replace('/>', '')}fontSize={'inherit'} />,` + : '' + } }} />`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); diff --git a/docs/src/componentDocs/Hero/playground/index.tsx b/docs/src/componentDocs/Hero/playground/index.tsx index b864f1565..34cee0ea0 100644 --- a/docs/src/componentDocs/Hero/playground/index.tsx +++ b/docs/src/componentDocs/Hero/playground/index.tsx @@ -1 +1 @@ -export * from './PlaygroundPage'; \ No newline at end of file +export * from './PlaygroundPage'; diff --git a/docs/src/componentDocs/InfoListItem/playground/InfoListItemConfig.tsx b/docs/src/componentDocs/InfoListItem/playground/InfoListItemConfig.tsx deleted file mode 100644 index 638b6bbc3..000000000 --- a/docs/src/componentDocs/InfoListItem/playground/InfoListItemConfig.tsx +++ /dev/null @@ -1,185 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const infoListItemConfig: ComponentType = { - componentName: 'Info List Item', - props: [ - { - propName: 'avatar', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Show colored background for icon', - required: false, - defaultValue: false, - }, - { - propName: 'backgroundColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'The color used for the background ', - required: false, - }, - { - propName: 'chevron', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Add a chevron icon on the right', - required: false, - defaultValue: false, - }, - { - propName: 'chevronColor', - inputType: 'colorPicker', - inputValue: Colors.gray[500], - propType: 'string', - helperText: 'Color override for the chevron icon', - required: false, - }, - { - propName: 'dense', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Smaller height row with less padding', - required: false, - defaultValue: false, - }, - { - propName: 'divider', - inputType: 'select', - inputValue: 'none', - options: ['none', 'full', 'partial'], - propType: 'string', - helperText: 'Show a row separator below the row', - required: false, - defaultValue: 'none', - }, - { - propName: 'fontColor', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'Main text color', - required: false, - }, - { - propName: 'hidePadding', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Remove left padding if no icon is used', - required: false, - defaultValue: false, - }, - { - propName: 'icon', - inputType: 'select', - inputValue: '', - options: ['undefined', ''], - propType: 'JSX.Element', - helperText: 'A component to render for the icon', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'iconAlign', - inputType: 'select', - inputValue: 'left', - options: ['left', 'center', 'right'], - propType: 'string', - helperText: 'Icon alignment when avatar is set to false', - required: false, - defaultValue: 'left', - }, - { - propName: 'iconColor', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'The color used for the icon', - required: false, - }, - { - propName: 'info', - inputType: 'string', - inputValue: 'more info...', - propType: 'string | Array', - helperText: 'The text to show on the third line', - required: false, - }, - { - propName: 'ripple', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to apply material ripple effect on click', - required: false, - defaultValue: false, - }, - { - propName: 'statusColor', - inputType: 'colorPicker', - inputValue: Colors.blue[500], - propType: 'string', - helperText: 'Status stripe and icon color', - required: false, - }, - { - propName: 'subtitle', - inputType: 'string', - inputValue: 'with all customizable properties', - propType: 'string | Array', - helperText: 'The text to show on the second line', - required: false, - }, - { - propName: 'title', - inputType: 'string', - inputValue: 'Info List Item', - propType: 'ReactNode', - helperText: 'The text to show on the first line', - required: true, - }, - { - propName: 'wrapInfo', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to wrap info on overflow', - required: false, - defaultValue: false, - }, - { - propName: 'wrapSubtitle', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to wrap subtitle on overflow', - required: false, - defaultValue: false, - }, - { - propName: 'wrapTitle', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to wrap title on overflow', - required: false, - defaultValue: false, - }, - { - propName: 'disabled', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to Disable Info List Item', - required: false, - defaultValue: false, - }, - ], -}; - -export default infoListItemConfig; diff --git a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx index 8dd2bf29a..b6b54d083 100644 --- a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx @@ -1,17 +1,263 @@ import React from 'react'; import Box from '@mui/material/Box'; -import InfoListItemPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { InfoListItem, InfoListItemProps } from '@brightlayer-ui/react-components'; +import * as Colors from '@brightlayer-ui/colors'; +import Devices from '@mui/icons-material/Devices'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'title', + type: 'string', + typeLabel: 'ReactNode', + description: 'The text to show on the first line', + required: true, + initialValue: 'Info List Item', + category: 'Required Props', + }, + + // Optional Props + { + id: 'avatar', + type: 'boolean', + description: 'Show colored background for icon', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'backgroundColor', + type: 'color', + typeLabel: 'string', + description: 'The color used for the background', + required: false, + initialValue: Colors.white[50], + category: 'Optional Props', + }, + { + id: 'chevron', + type: 'boolean', + description: 'Add a chevron icon on the right', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'chevronColor', + type: 'color', + typeLabel: 'string', + description: 'Color override for the chevron icon', + required: false, + initialValue: Colors.gray[500], + category: 'Optional Props', + }, + { + id: 'dense', + type: 'boolean', + description: 'Smaller height row with less padding', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'disabled', + type: 'boolean', + description: 'Whether to disable the list item', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'divider', + type: 'select', + typeLabel: `'full' | 'partial'`, + description: 'Show a row separator below the row', + initialValue: 'undefined', + defaultValue: 'undefined', + options: ['undefined', 'partial', 'full'], + required: false, + category: 'Optional Props', + }, + { + id: 'fontColor', + type: 'color', + typeLabel: 'string', + description: 'Main text color', + required: false, + initialValue: Colors.black[500], + category: 'Optional Props', + }, + { + id: 'hidePadding', + type: 'boolean', + description: 'Remove left padding if no icon is used', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'icon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'A component to render for the icon', + initialValue: '', + options: ['undefined', ''], + required: false, + category: 'Optional Props', + }, + { + id: 'iconAlign', + type: 'select', + typeLabel: `'left' | 'center' | 'right'`, + description: 'Icon alignment when avatar is set to false', + initialValue: 'left', + defaultValue: 'left', + options: ['left', 'center', 'right'], + required: false, + category: 'Optional Props', + }, + { + id: 'iconColor', + type: 'color', + typeLabel: 'string', + description: 'The color used for the icon', + required: false, + initialValue: Colors.black[500], + category: 'Optional Props', + }, + { + id: 'info', + type: 'string', + typeLabel: `string | ReactNode[]`, + description: 'The text to show on the third line', + required: false, + initialValue: 'more info...', + category: 'Optional Props', + }, + { + id: 'ripple', + type: 'boolean', + description: 'Whether to apply material ripple effect on click', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'statusColor', + type: 'color', + typeLabel: 'string', + description: 'Status stripe and icon color', + required: false, + initialValue: Colors.blue[500], + category: 'Optional Props', + }, + { + id: 'subtitle', + type: 'string', + typeLabel: `string | ReactNode[]`, + description: 'The text to show on the second line', + required: false, + initialValue: 'with all customizable properties', + category: 'Optional Props', + }, + { + id: 'wrapInfo', + type: 'boolean', + description: 'Whether to wrap info on overflow', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'wrapSubtitle', + type: 'boolean', + description: 'Whether to wrap subtitle on overflow', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'wrapTitle', + type: 'boolean', + description: 'Whether to wrap title on overflow', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + + // Other Configuration + { + id: 'clickable', + label: 'Add onClick', + type: 'boolean', + description: 'Add a click handler', + required: false, + initialValue: false, + defaultValue: false, + category: 'Other Configuration', + }, +]; + +const InfoListItemPreview: PreviewComponent = ({ data }) => { + const { icon, divider, clickable, ...rest } = data as unknown as Omit & { + divider: 'full' | 'partial' | 'undefined'; + clickable: boolean; + }; + + const getIcon = (value: string): JSX.Element | undefined => { + switch (value) { + case '': + return ; + case 'undefined': + default: + return undefined; + } + }; + return ( + + {} : undefined} + icon={getIcon(icon as unknown as string)} + divider={divider === 'undefined' ? undefined : divider} + /> + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ` {}}` : ``} +/>`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const InfoListItemPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/InfoListItem/playground/PreviewComponent.tsx b/docs/src/componentDocs/InfoListItem/playground/PreviewComponent.tsx deleted file mode 100644 index 3ded385c9..000000000 --- a/docs/src/componentDocs/InfoListItem/playground/PreviewComponent.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { InfoListItem } from '@brightlayer-ui/react-components/core/InfoListItem'; -import { createProps, getIcon, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; - -export const PreviewComponent = (): JSX.Element => { - const infoListItemJson = useAppSelector((state: RootState) => state.componentsPropsState.infoListItemComponent); - - const infoListItemProps = createProps(infoListItemJson.props as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any, groupType?: string): string => - hideDefaultPropsFromSnippet(infoListItemJson, propName, currentValue, groupType); - - const generateCodeSnippet = (): string => { - const jsx = ` { - console.log("clicked"); - }} -/>`; - return removeEmptyLines(jsx); - }; - - return ( - {}} - /> - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/InfoListItem/playground/PropsPlayground.tsx b/docs/src/componentDocs/InfoListItem/playground/PropsPlayground.tsx deleted file mode 100644 index 167b49c70..000000000 --- a/docs/src/componentDocs/InfoListItem/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const infoListItemJson = useAppSelector((state: RootState) => state.componentsPropsState.infoListItemComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/InfoListItem/playground/index.tsx b/docs/src/componentDocs/InfoListItem/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/InfoListItem/playground/index.tsx +++ b/docs/src/componentDocs/InfoListItem/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 878812398..d1a58ed5a 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -6,7 +6,6 @@ import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerF import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; -import infoListItemConfig from '../componentDocs/InfoListItem/playground/InfoListItemConfig'; import listItemTagConfig from '../componentDocs/ListItemTag/playground/ListItemTagConfig'; import spacerConfig from '../componentDocs/Spacer/playground/SpacerConfig'; import scoreCardConfig from '../componentDocs/ScoreCard/playground/ScoreCardConfig'; @@ -24,7 +23,6 @@ type ComponentState = { drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; - infoListItemComponent: ComponentType; listItemTagComponent: ComponentType; spacerComponent: ComponentType; scoreCardComponent: ComponentType; @@ -41,7 +39,6 @@ const initialState: ComponentState = { drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, - infoListItemComponent: infoListItemConfig, listItemTagComponent: listItemTagConfig, spacerComponent: spacerConfig, scoreCardComponent: scoreCardConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 7a867552f..2b95da6c6 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -153,7 +153,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('channel-value') || location.pathname.includes('app-bar') || location.pathname.includes('empty-state') || - location.pathname.includes('hero') + location.pathname.includes('hero') || + location.pathname.includes('info-list-item') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 83ef7e486..f641ae9ed 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -128,8 +128,6 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerNavItemComponent; case 'Drawer Rail Item': return state.drawerRailItemComponent; - case 'Info List Item': - return state.infoListItemComponent; case 'List Item Tag': return state.listItemTagComponent; // case 'Spacer': From 7b5cedf332105003d1d17527365f47097b56b8b1 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 11:12:18 -0500 Subject: [PATCH 10/26] Update ListItemTag to use playground library --- .../playground/ListItemTagConfig.tsx | 34 --------- .../ListItemTag/playground/PlaygroundPage.tsx | 69 +++++++++++++++++-- .../playground/PreviewComponent.tsx | 36 ---------- .../playground/PropsPlayground.tsx | 12 ---- .../ListItemTag/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 4 -- 8 files changed, 65 insertions(+), 97 deletions(-) delete mode 100644 docs/src/componentDocs/ListItemTag/playground/ListItemTagConfig.tsx delete mode 100644 docs/src/componentDocs/ListItemTag/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/ListItemTag/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/ListItemTag/playground/ListItemTagConfig.tsx b/docs/src/componentDocs/ListItemTag/playground/ListItemTagConfig.tsx deleted file mode 100644 index dacdb7bd0..000000000 --- a/docs/src/componentDocs/ListItemTag/playground/ListItemTagConfig.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const listItemTagConfig: ComponentType = { - componentName: 'List Item Tag', - props: [ - { - propName: 'backgroundColor', - inputType: 'colorPicker', - inputValue: Colors.red[500], - propType: 'string', - helperText: 'Color of the label background', - required: false, - }, - { - propName: 'fontColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'Color of the label', - required: false, - }, - { - propName: 'label', - inputType: 'string', - inputValue: 'active', - propType: 'string', - helperText: 'The label text', - required: true, - }, - ], -}; - -export default listItemTagConfig; diff --git a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx index 74c954ae0..268936415 100644 --- a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx @@ -1,17 +1,74 @@ import React from 'react'; import Box from '@mui/material/Box'; -import ListItemTagPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { ListItemTag, ListItemTagProps } from '@brightlayer-ui/react-components'; +import * as Colors from '@brightlayer-ui/colors'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'label', + type: 'string', + typeLabel: 'string', + description: 'The label text', + required: true, + initialValue: 'active', + category: 'Required Props', + }, + + // Optional Props + { + id: 'backgroundColor', + type: 'color', + typeLabel: 'string', + description: 'Color of the label background', + required: false, + initialValue: Colors.red[500], + category: 'Optional Props', + }, + { + id: 'fontColor', + type: 'color', + typeLabel: 'string', + description: 'Main text color', + required: false, + initialValue: Colors.white[50], + category: 'Optional Props', + }, + + // Other Configuration + // NONE +]; + +const ListItemTagPreview: PreviewComponent = ({ data }) => { + const { ...rest } = data as unknown as ListItemTagProps; + return ( + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ``.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const ListItemTagPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/ListItemTag/playground/PreviewComponent.tsx b/docs/src/componentDocs/ListItemTag/playground/PreviewComponent.tsx deleted file mode 100644 index a885f15ab..000000000 --- a/docs/src/componentDocs/ListItemTag/playground/PreviewComponent.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { createProps, hideDefaultPropsFromSnippet } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { ListItemTag } from '@brightlayer-ui/react-components/core/ListItemTag'; - -export const PreviewComponent = (): JSX.Element => { - const listItemTagJson = useAppSelector((state: RootState) => state.componentsPropsState.listItemTagComponent); - const listItemTagProps = createProps(listItemTagJson.props as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(listItemTagJson, propName, currentValue, 'props'); - - const generateCodeSnippet = (): string => { - const jsx = ``; - return jsx; - }; - - return ( - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/ListItemTag/playground/PropsPlayground.tsx b/docs/src/componentDocs/ListItemTag/playground/PropsPlayground.tsx deleted file mode 100644 index 5ccc580db..000000000 --- a/docs/src/componentDocs/ListItemTag/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const listItemTagJson = useAppSelector((state: RootState) => state.componentsPropsState.listItemTagComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/ListItemTag/playground/index.tsx b/docs/src/componentDocs/ListItemTag/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/ListItemTag/playground/index.tsx +++ b/docs/src/componentDocs/ListItemTag/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index d1a58ed5a..0da837e7e 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -6,7 +6,6 @@ import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerF import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; -import listItemTagConfig from '../componentDocs/ListItemTag/playground/ListItemTagConfig'; import spacerConfig from '../componentDocs/Spacer/playground/SpacerConfig'; import scoreCardConfig from '../componentDocs/ScoreCard/playground/ScoreCardConfig'; import threeLinerConfig from '../componentDocs/ThreeLiner/playground/ThreeLinerConfig'; @@ -23,7 +22,6 @@ type ComponentState = { drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; - listItemTagComponent: ComponentType; spacerComponent: ComponentType; scoreCardComponent: ComponentType; threeLinerComponent: ComponentType; @@ -39,7 +37,6 @@ const initialState: ComponentState = { drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, - listItemTagComponent: listItemTagConfig, spacerComponent: spacerConfig, scoreCardComponent: scoreCardConfig, threeLinerComponent: threeLinerConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 2b95da6c6..fcc73038e 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -154,7 +154,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('app-bar') || location.pathname.includes('empty-state') || location.pathname.includes('hero') || - location.pathname.includes('info-list-item') + location.pathname.includes('info-list-item') || + location.pathname.includes('list-item-tag') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index f641ae9ed..fd5cc8167 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -128,10 +128,6 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerNavItemComponent; case 'Drawer Rail Item': return state.drawerRailItemComponent; - case 'List Item Tag': - return state.listItemTagComponent; - // case 'Spacer': - // return state.spacerComponent; case 'Score Card': return state.scoreCardComponent; case 'Three Liner': From 4e94347888d7439f195306e7930844310144ac94 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 11:23:35 -0500 Subject: [PATCH 11/26] Update ThreeLiner to use playground library --- .../ThreeLiner/playground/PlaygroundPage.tsx | 69 +++++++++++++++++-- .../playground/PreviewComponent.tsx | 35 ---------- .../ThreeLiner/playground/PropsPlayground.tsx | 12 ---- .../ThreeLiner/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - 7 files changed, 65 insertions(+), 60 deletions(-) delete mode 100644 docs/src/componentDocs/ThreeLiner/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/ThreeLiner/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx index bd679dbd5..51fab05e0 100644 --- a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx @@ -1,17 +1,74 @@ import React from 'react'; import Box from '@mui/material/Box'; -import ThreeLinerPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { ThreeLiner, ThreeLinerProps } from '@brightlayer-ui/react-components'; + +const inputConfig: InputConfig = [ + // Required Props + // NONE + + // Optional Props + { + id: 'title', + type: 'string', + typeLabel: 'ReactNode', + description: 'The first line of text', + required: false, + initialValue: 'title', + category: 'Optional Props', + }, + { + id: 'subtitle', + type: 'string', + typeLabel: 'ReactNode', + description: 'The first line of text', + required: false, + initialValue: 'subtitle', + category: 'Optional Props', + }, + { + id: 'info', + type: 'string', + typeLabel: 'ReactNode', + description: 'The first line of text', + required: false, + initialValue: 'info', + category: 'Optional Props', + }, + + // Other Configuration + // NONE +]; + +const ThreeLinerPreview: PreviewComponent = ({ data }) => { + const { ...rest } = data as unknown as ThreeLinerProps; + return ( + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ``.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const ThreeLinerPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/ThreeLiner/playground/PreviewComponent.tsx b/docs/src/componentDocs/ThreeLiner/playground/PreviewComponent.tsx deleted file mode 100644 index c0c72b13e..000000000 --- a/docs/src/componentDocs/ThreeLiner/playground/PreviewComponent.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { createProps } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { ThreeLiner } from '@brightlayer-ui/react-components'; - -export const PreviewComponent = (): JSX.Element => { - const threeLinerJson = useAppSelector((state: RootState) => state.componentsPropsState.threeLinerComponent); - - const threeLinerProps = createProps(threeLinerJson.props as PropsType[]); - - const generateCodeSnippet = (): string => { - const jsx = ``; - return jsx; - }; - - return ( - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/ThreeLiner/playground/PropsPlayground.tsx b/docs/src/componentDocs/ThreeLiner/playground/PropsPlayground.tsx deleted file mode 100644 index 3f24da473..000000000 --- a/docs/src/componentDocs/ThreeLiner/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const threeLinerJson = useAppSelector((state: RootState) => state.componentsPropsState.threeLinerComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/ThreeLiner/playground/index.tsx b/docs/src/componentDocs/ThreeLiner/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/ThreeLiner/playground/index.tsx +++ b/docs/src/componentDocs/ThreeLiner/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 0da837e7e..d461bd18e 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -8,7 +8,6 @@ import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/Drawe import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; import spacerConfig from '../componentDocs/Spacer/playground/SpacerConfig'; import scoreCardConfig from '../componentDocs/ScoreCard/playground/ScoreCardConfig'; -import threeLinerConfig from '../componentDocs/ThreeLiner/playground/ThreeLinerConfig'; import toolbarMenuConfig from '../componentDocs/ToolbarMenu/playground/ToolbarMenuConfig'; import userMenuConfig from '../componentDocs/UserMenu/playground/UserMenuConfig'; import { getComponentState } from '../shared/utilities'; @@ -24,7 +23,6 @@ type ComponentState = { drawerRailItemComponent: ComponentType; spacerComponent: ComponentType; scoreCardComponent: ComponentType; - threeLinerComponent: ComponentType; toolbarMenuComponent: ComponentType; userMenuComponent: ComponentType; }; @@ -39,7 +37,6 @@ const initialState: ComponentState = { drawerRailItemComponent: drawerRailItemConfig, spacerComponent: spacerConfig, scoreCardComponent: scoreCardConfig, - threeLinerComponent: threeLinerConfig, toolbarMenuComponent: toolbarMenuConfig, userMenuComponent: userMenuConfig, }; diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index fcc73038e..643f3083d 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -155,7 +155,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('empty-state') || location.pathname.includes('hero') || location.pathname.includes('info-list-item') || - location.pathname.includes('list-item-tag') + location.pathname.includes('list-item-tag') || + location.pathname.includes('three-liner') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index fd5cc8167..1347f8de4 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -130,8 +130,6 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerRailItemComponent; case 'Score Card': return state.scoreCardComponent; - case 'Three Liner': - return state.threeLinerComponent; case 'Toolbar Menu': return state.toolbarMenuComponent; case 'User Menu': From c5295ccf51216d73e799611346ddc038738a1aed Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 12:31:33 -0500 Subject: [PATCH 12/26] Update ToolbarMenu to use playground library --- .../ToolbarMenu/playground/PlaygroundPage.tsx | 112 +++++++++++++++++- .../playground/PreviewComponent.tsx | 78 ------------ .../playground/PropsPlayground.tsx | 12 -- .../playground/ToolbarMenuConfig.tsx | 28 ----- .../ToolbarMenu/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - 8 files changed, 108 insertions(+), 131 deletions(-) delete mode 100644 docs/src/componentDocs/ToolbarMenu/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/ToolbarMenu/playground/PropsPlayground.tsx delete mode 100644 docs/src/componentDocs/ToolbarMenu/playground/ToolbarMenuConfig.tsx diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx index 82adf116f..1730f6beb 100644 --- a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx @@ -1,17 +1,117 @@ import React from 'react'; import Box from '@mui/material/Box'; -import ToolbarMenuPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { ToolbarMenu, ToolbarMenuProps } from '@brightlayer-ui/react-components'; +import Home from '@mui/icons-material/Home'; +import Place from '@mui/icons-material/Place'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'label', + type: 'string', + typeLabel: 'ReactNode', + description: 'Custom content for label text / icon + label', + required: true, + initialValue: 'Subtitle', + category: 'Required Props', + }, + + // Optional Props + { + id: 'icon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'A component to render for the icon', + initialValue: 'undefined', + options: ['undefined', '', ''], + required: false, + category: 'Optional Props', + }, + + // Other Configuration + // NONE +]; + +const ToolbarMenuPreview: PreviewComponent = ({ data }) => { + const { icon, ...rest } = data as unknown as ToolbarMenuProps; + + const getIcon = (value: string): JSX.Element | undefined => { + switch (value) { + case '': + return ; + case '': + return ; + case 'undefined': + default: + return undefined; + } + }; + return ( + + {}, + }, + { + title: 'Menu Item 2', + onClick: (): void => {}, + }, + { + title: 'Menu Item 3', + onClick: (): void => {}, + }, + ], + }, + ]} + /> + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ` { }, + }, + { + title: 'Menu Item 2', + onClick: (): void => { }, + }, + { + title: 'Menu Item 3', + onClick: (): void => { }, + }, + ], + }]} +/>`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const ToolbarMenuPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PreviewComponent.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PreviewComponent.tsx deleted file mode 100644 index 69af7756f..000000000 --- a/docs/src/componentDocs/ToolbarMenu/playground/PreviewComponent.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { createProps, getIcon, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { ToolbarMenu } from '@brightlayer-ui/react-components/core/ToolbarMenu'; - -export const PreviewComponent = (): JSX.Element => { - const toolbarMenuJson = useAppSelector((state: RootState) => state.componentsPropsState.toolbarMenuComponent); - - const toolbarMenuProps = createProps(toolbarMenuJson.props as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(toolbarMenuJson, propName, currentValue, 'props'); - - const generateCodeSnippet = (): string => { - const jsx = ` { - console.log('clicked 1'); - }, - }, - { - title: 'Menu Item 2', - onClick: (): void => { - console.log('clicked 2'); - }, - }, - { - title: 'Menu Item 3', - onClick: (): void => { - console.log('clicked 3'); - }, - }, - ], - }} -/>`; - - return removeEmptyLines(jsx); - }; - const menuGroups = [ - { - items: [ - { - title: 'Menu Item 1', - onClick: (): void => {}, - }, - { - title: 'Menu Item 2', - onClick: (): void => {}, - }, - { - title: 'Menu Item 3', - onClick: (): void => {}, - }, - ], - }, - ]; - - return ( - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PropsPlayground.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PropsPlayground.tsx deleted file mode 100644 index 5936505db..000000000 --- a/docs/src/componentDocs/ToolbarMenu/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const toolbarMenuJson = useAppSelector((state: RootState) => state.componentsPropsState.toolbarMenuComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/ToolbarMenu/playground/ToolbarMenuConfig.tsx b/docs/src/componentDocs/ToolbarMenu/playground/ToolbarMenuConfig.tsx deleted file mode 100644 index 7dd1ab58a..000000000 --- a/docs/src/componentDocs/ToolbarMenu/playground/ToolbarMenuConfig.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { ComponentType } from '../../../__types__'; - -export const toolbarMenuConfig: ComponentType = { - componentName: 'Toolbar Menu', - props: [ - { - propName: 'icon', - inputType: 'select', - inputValue: 'undefined', - options: ['undefined', '', ''], - propType: 'JSX.Element', - helperText: 'The inline icon to display', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'label', - inputType: 'string', - inputValue: 'Subtitle', - propType: 'ReactNode', - helperText: 'Custom content for label text / icon + label', - required: true, - defaultValue: true, - }, - ], -}; - -export default toolbarMenuConfig; diff --git a/docs/src/componentDocs/ToolbarMenu/playground/index.tsx b/docs/src/componentDocs/ToolbarMenu/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/ToolbarMenu/playground/index.tsx +++ b/docs/src/componentDocs/ToolbarMenu/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index d461bd18e..eab052bf7 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -8,7 +8,6 @@ import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/Drawe import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; import spacerConfig from '../componentDocs/Spacer/playground/SpacerConfig'; import scoreCardConfig from '../componentDocs/ScoreCard/playground/ScoreCardConfig'; -import toolbarMenuConfig from '../componentDocs/ToolbarMenu/playground/ToolbarMenuConfig'; import userMenuConfig from '../componentDocs/UserMenu/playground/UserMenuConfig'; import { getComponentState } from '../shared/utilities'; import { ComponentDocPayloadType, ComponentType } from '../__types__'; @@ -23,7 +22,6 @@ type ComponentState = { drawerRailItemComponent: ComponentType; spacerComponent: ComponentType; scoreCardComponent: ComponentType; - toolbarMenuComponent: ComponentType; userMenuComponent: ComponentType; }; @@ -37,7 +35,6 @@ const initialState: ComponentState = { drawerRailItemComponent: drawerRailItemConfig, spacerComponent: spacerConfig, scoreCardComponent: scoreCardConfig, - toolbarMenuComponent: toolbarMenuConfig, userMenuComponent: userMenuConfig, }; diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 643f3083d..abe458819 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -156,7 +156,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('hero') || location.pathname.includes('info-list-item') || location.pathname.includes('list-item-tag') || - location.pathname.includes('three-liner') + location.pathname.includes('three-liner') || + location.pathname.includes('toolbar-menu') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 1347f8de4..aba4d16a3 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -130,8 +130,6 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerRailItemComponent; case 'Score Card': return state.scoreCardComponent; - case 'Toolbar Menu': - return state.toolbarMenuComponent; case 'User Menu': return state.userMenuComponent; default: From 3ceab8491352004ddcda400440e8d8e9bed71613 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 13:20:35 -0500 Subject: [PATCH 13/26] Update UserMenu to use playground library --- .../Spacer/playground/PlaygroundPage.tsx | 17 -- .../Spacer/playground/PreviewComponent.tsx | 187 ------------------ .../Spacer/playground/PropsPlayground.tsx | 12 -- .../Spacer/playground/SpacerConfig.tsx | 104 ---------- .../componentDocs/Spacer/playground/index.tsx | 2 - .../playground/ThreeLinerConfig.tsx | 33 ---- .../UserMenu/playground/PlaygroundPage.tsx | 134 ++++++++++++- .../UserMenu/playground/PreviewComponent.tsx | 90 --------- .../UserMenu/playground/PropsPlayground.tsx | 12 -- .../UserMenu/playground/UserMenuConfig.tsx | 51 ----- .../UserMenu/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 6 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - 14 files changed, 130 insertions(+), 524 deletions(-) delete mode 100644 docs/src/componentDocs/Spacer/playground/PlaygroundPage.tsx delete mode 100644 docs/src/componentDocs/Spacer/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/Spacer/playground/PropsPlayground.tsx delete mode 100644 docs/src/componentDocs/Spacer/playground/SpacerConfig.tsx delete mode 100644 docs/src/componentDocs/Spacer/playground/index.tsx delete mode 100644 docs/src/componentDocs/ThreeLiner/playground/ThreeLinerConfig.tsx delete mode 100644 docs/src/componentDocs/UserMenu/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/UserMenu/playground/PropsPlayground.tsx delete mode 100644 docs/src/componentDocs/UserMenu/playground/UserMenuConfig.tsx diff --git a/docs/src/componentDocs/Spacer/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Spacer/playground/PlaygroundPage.tsx deleted file mode 100644 index 766f85a01..000000000 --- a/docs/src/componentDocs/Spacer/playground/PlaygroundPage.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import Box from '@mui/material/Box'; -import SpacerPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; - -export const SpacerPlaygroundComponent = (): JSX.Element => ( - - - - -); diff --git a/docs/src/componentDocs/Spacer/playground/PreviewComponent.tsx b/docs/src/componentDocs/Spacer/playground/PreviewComponent.tsx deleted file mode 100644 index 5aee88500..000000000 --- a/docs/src/componentDocs/Spacer/playground/PreviewComponent.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { Spacer } from '@brightlayer-ui/react-components/core/Utility/Spacer'; -import { createProps } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import Box from '@mui/material/Box'; - -import * as Colors from '@brightlayer-ui/colors'; -import Typography from '@mui/material/Typography'; - -export const PreviewComponent = (): JSX.Element => { - const spacerJson = useAppSelector((state: RootState) => state.componentsPropsState.spacerComponent); - - const spacerProps = createProps(spacerJson.props as PropsType[]); - const spacerOtherProps = createProps(spacerJson.otherProps as PropsType[]); - - const showFlexLayoutSnippet = (): string => ` - Horizontal - - - 1 - - - 2 - - - 3 - - - Vertical - - - 1 - - - 2 - - - 3 - - - - `; - - const showStaticLayoutSnippet = (): string => ` - Horizontal - - - 1 - - - 2 - - - 3 - - - Vertical - - - 1 - - - 2 - - - 3 - - - - `; - - const generateCodeSnippet = (): string => { - const jsx = `${spacerOtherProps.useFlex ? showFlexLayoutSnippet() : showStaticLayoutSnippet()}`; - return jsx; - }; - - return ( - - Horizontal Flex Layout - - - 1 - - - 2 - - - 3 - - - Vertical Flex Layout - - - 1 - - - 2 - - - 3 - - - - ) : ( - - Horizontal Static Layout - - - 1 - - - 2 - - - 3 - - - Vertical Static Layout - - - 1 - - - 2 - - - 3 - - - - ) - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/Spacer/playground/PropsPlayground.tsx b/docs/src/componentDocs/Spacer/playground/PropsPlayground.tsx deleted file mode 100644 index 3a210978b..000000000 --- a/docs/src/componentDocs/Spacer/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const spacerJson = useAppSelector((state: RootState) => state.componentsPropsState.spacerComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/Spacer/playground/SpacerConfig.tsx b/docs/src/componentDocs/Spacer/playground/SpacerConfig.tsx deleted file mode 100644 index c03da5384..000000000 --- a/docs/src/componentDocs/Spacer/playground/SpacerConfig.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { ComponentType } from '../../../__types__'; - -export const spacerConfig: ComponentType = { - componentName: 'Spacer', - props: [ - { - propName: 'flex1', - inputType: 'number', - inputValue: 1, - propType: 'number', - helperText: 'Flex grow/shrink value for flex layouts', - required: false, - rangeData: { - min: 1, - max: 5, - step: 1, - }, - label: 'Item 1 Flex', - }, - { - propName: 'flex2', - inputType: 'number', - inputValue: 1, - propType: 'number', - helperText: 'Flex grow/shrink value for flex layouts', - required: false, - rangeData: { - min: 1, - max: 5, - step: 1, - }, - label: 'Item 2 Flex', - }, - { - propName: 'flex3', - inputType: 'number', - inputValue: 1, - propType: 'number', - helperText: 'Flex grow/shrink value for flex layouts', - required: false, - rangeData: { - min: 1, - max: 5, - step: 1, - }, - label: 'Item 3 Flex', - }, - { - propName: 'size1', - inputType: 'number', - inputValue: 60, - propType: 'number | string', - helperText: 'Set Width / Height (in px) for static layouts', - required: false, - rangeData: { - min: 20, - max: 100, - step: 20, - }, - label: 'Item 1 Size (px)', - }, - { - propName: 'size2', - inputType: 'number', - inputValue: 60, - propType: 'number | string', - helperText: 'Set Width / Height (in px) for static layouts', - required: false, - rangeData: { - min: 20, - max: 100, - step: 20, - }, - label: 'Item 2 Size (px)', - }, - { - propName: 'size3', - inputType: 'number', - inputValue: 60, - propType: 'number | string', - helperText: 'Set Width / Height (in px) for static layouts', - required: false, - rangeData: { - min: 20, - max: 100, - step: 20, - }, - label: 'Item 3 Size (px)', - }, - ], - otherProps: [ - { - propName: 'useFlex', - inputType: 'boolean', - inputValue: true, - propType: 'boolean', - helperText: 'Show spacer with flex layout', - required: false, - label: 'Use Flex Layout', - }, - ], -}; - -export default spacerConfig; diff --git a/docs/src/componentDocs/Spacer/playground/index.tsx b/docs/src/componentDocs/Spacer/playground/index.tsx deleted file mode 100644 index 234b17b3c..000000000 --- a/docs/src/componentDocs/Spacer/playground/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/componentDocs/ThreeLiner/playground/ThreeLinerConfig.tsx b/docs/src/componentDocs/ThreeLiner/playground/ThreeLinerConfig.tsx deleted file mode 100644 index 4e9d1c29c..000000000 --- a/docs/src/componentDocs/ThreeLiner/playground/ThreeLinerConfig.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ComponentType } from '../../../__types__'; - -export const threeLinerConfig: ComponentType = { - componentName: 'Three Liner', - props: [ - { - propName: 'info', - inputType: 'string', - inputValue: 'info', - propType: 'string', - helperText: 'Third line content', - required: false, - }, - { - propName: 'subtitle', - inputType: 'string', - inputValue: 'subtitle', - propType: 'string', - helperText: 'Second line content', - required: false, - }, - { - propName: 'title', - inputType: 'string', - inputValue: 'title', - propType: 'string', - helperText: 'First line content', - required: false, - }, - ], -}; - -export default threeLinerConfig; diff --git a/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx index 97e36893c..ebe26616d 100644 --- a/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx @@ -1,17 +1,139 @@ import React from 'react'; import Box from '@mui/material/Box'; -import UserMenuPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { UserMenu, UserMenuProps } from '@brightlayer-ui/react-components'; +import Avatar from '@mui/material/Avatar'; +import trex from '../images/trex.png'; +import Email from '@mui/icons-material/Email'; +import ExitToApp from '@mui/icons-material/ExitToApp'; +import Settings from '@mui/icons-material/Settings'; + +const inputConfig: InputConfig = [ + // Required Props + // NONE + + // Optional Props + { + id: 'menuTitle', + type: 'string', + typeLabel: 'string', + description: 'Title shown when menu is open', + required: false, + initialValue: 'Menu Title', + category: 'Optional Props', + }, + { + id: 'menuSubtitle', + type: 'string', + typeLabel: 'string', + description: 'Subtitle shown when menu is open', + required: false, + initialValue: 'Menu Subtitle', + category: 'Optional Props', + }, + { + id: 'useBottomSheetAt', + type: 'number', + typeLabel: `number`, + description: + 'Window pixel width at which the responsive bottom sheet menu is triggered (set to 0 to disable responsive behavior)', + required: false, + initialValue: 600, + minValue: 0, + maxValue: 1000, + valueStep: 50, + defaultValue: 600, + category: 'Optional Props', + }, + + // Other Configuration + { + id: 'imageAvatar', + label: 'Image Avatar', + type: 'boolean', + description: 'Use image avatar instead of text', + required: false, + initialValue: false, + category: 'Other Configuration', + }, +]; + +const UserMenuPreview: PreviewComponent = ({ data }) => { + const { imageAvatar, ...rest } = data as unknown as UserMenuProps & { imageAvatar: boolean }; + + return ( + + : AB} + menuGroups={[ + { + items: [ + { + title: 'Settings', + icon: , + onClick: (): void => {}, + }, + { + title: 'Contact Us', + icon: , + onClick: (): void => {}, + }, + { + title: 'Log Out', + icon: , + onClick: (): void => {}, + }, + ], + }, + ]} + /> + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + `` : 'AB'}} + menuGroups={[ + { + items: [ + { + title: "Settings", + icon: , + onClick: (): void => { }, + }, + { + title: "Contact Us", + icon: , + onClick: (): void => { }, + }, + { + title: "Log Out", + icon: , + onClick: (): void => { }, + }, + ], + }, + ]} +/>`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const UserMenuPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/UserMenu/playground/PreviewComponent.tsx b/docs/src/componentDocs/UserMenu/playground/PreviewComponent.tsx deleted file mode 100644 index 490fa95aa..000000000 --- a/docs/src/componentDocs/UserMenu/playground/PreviewComponent.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { createProps, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { UserMenu } from '@brightlayer-ui/react-components/core/UserMenu'; -import Avatar from '@mui/material/Avatar'; -import Email from '@mui/icons-material/Email'; -import ExitToApp from '@mui/icons-material/ExitToApp'; -import Settings from '@mui/icons-material/Settings'; -import Trex from '../images/trex.png'; - -export const PreviewComponent = (): JSX.Element => { - const userMenuJson = useAppSelector((state: RootState) => state.componentsPropsState.userMenuComponent); - - const userMenuProps = createProps(userMenuJson.props as PropsType[]); - const userMenuOtherProps = createProps(userMenuJson.otherProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(userMenuJson, propName, currentValue, 'props'); - - const toggleAvatarSection = (showAvatarImage: boolean): JSX.Element => - showAvatarImage ? : AV; - - const toggleAvatarSnippet = (showAvatarImageSnippet: boolean): string => - showAvatarImageSnippet - ? `avatar={}` - : `avatar={AV}`; - - const generateCodeSnippet = (): string => { - const jsx = `, - }, - { - title: "Contact Us", - icon: , - }, - { - title: "Log Out", - icon: , - }, - ], - }, - ]} -/>`; - return removeEmptyLines(jsx); - }; - - return ( - , - }, - { - title: 'Contact Us', - icon: , - }, - { - title: 'Log Out', - icon: , - }, - ], - }, - ]} - menuTitle={userMenuProps.menuTitle} - menuSubtitle={userMenuProps.menuSubtitle} - useBottomSheetAt={userMenuProps.useBottomSheetAt} - /> - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/UserMenu/playground/PropsPlayground.tsx b/docs/src/componentDocs/UserMenu/playground/PropsPlayground.tsx deleted file mode 100644 index 106ca0bf5..000000000 --- a/docs/src/componentDocs/UserMenu/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const userMenuJson = useAppSelector((state: RootState) => state.componentsPropsState.userMenuComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/UserMenu/playground/UserMenuConfig.tsx b/docs/src/componentDocs/UserMenu/playground/UserMenuConfig.tsx deleted file mode 100644 index dbb6111c4..000000000 --- a/docs/src/componentDocs/UserMenu/playground/UserMenuConfig.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { ComponentType } from '../../../__types__'; - -export const userMenuConfig: ComponentType = { - componentName: 'User Menu', - props: [ - { - propName: 'menuSubtitle', - inputType: 'string', - inputValue: 'Menu Subtitle', - propType: 'string', - helperText: 'Subtitle shown when menu is open', - required: false, - }, - { - propName: 'menuTitle', - inputType: 'string', - inputValue: 'Menu Title', - propType: 'string', - helperText: 'Title shown when menu is open', - required: false, - }, - { - propName: 'useBottomSheetAt', - inputType: 'number', - inputValue: 600, - propType: 'number', - helperText: - 'Window pixel width at which the responsive bottom sheet menu is triggered (set to 0 to disable responsive behavior)', - required: false, - defaultValue: 600, - rangeData: { - min: 0, - max: 1000, - step: 50, - }, - }, - ], - otherProps: [ - { - propName: 'showAvatarImage', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Show / hide image for avatar', - required: false, - label: 'Use Image For Avatar', - }, - ], -}; - -export default userMenuConfig; diff --git a/docs/src/componentDocs/UserMenu/playground/index.tsx b/docs/src/componentDocs/UserMenu/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/UserMenu/playground/index.tsx +++ b/docs/src/componentDocs/UserMenu/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index eab052bf7..06e550ba0 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -6,9 +6,7 @@ import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerF import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; -import spacerConfig from '../componentDocs/Spacer/playground/SpacerConfig'; import scoreCardConfig from '../componentDocs/ScoreCard/playground/ScoreCardConfig'; -import userMenuConfig from '../componentDocs/UserMenu/playground/UserMenuConfig'; import { getComponentState } from '../shared/utilities'; import { ComponentDocPayloadType, ComponentType } from '../__types__'; @@ -20,9 +18,7 @@ type ComponentState = { drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; - spacerComponent: ComponentType; scoreCardComponent: ComponentType; - userMenuComponent: ComponentType; }; const initialState: ComponentState = { @@ -33,9 +29,7 @@ const initialState: ComponentState = { drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, - spacerComponent: spacerConfig, scoreCardComponent: scoreCardConfig, - userMenuComponent: userMenuConfig, }; export const componentPropsStateSlice = createSlice({ diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index abe458819..d59dfd400 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -157,7 +157,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('info-list-item') || location.pathname.includes('list-item-tag') || location.pathname.includes('three-liner') || - location.pathname.includes('toolbar-menu') + location.pathname.includes('toolbar-menu') || + location.pathname.includes('user-menu') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index aba4d16a3..25f3f9143 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -130,8 +130,6 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerRailItemComponent; case 'Score Card': return state.scoreCardComponent; - case 'User Menu': - return state.userMenuComponent; default: return state.drawerComponent; } From b079531dbadb8c4a993327ebae4c31a5e5e571ee Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 14:10:54 -0500 Subject: [PATCH 14/26] Update ScoreCard to use playground library --- .../ScoreCard/playground/PlaygroundPage.tsx | 262 +++++++++++++++++- .../ScoreCard/playground/PreviewComponent.tsx | 199 ------------- .../ScoreCard/playground/PropsPlayground.tsx | 12 - .../ScoreCard/playground/ScoreCardConfig.tsx | 106 ------- .../ScoreCard/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 8 +- 8 files changed, 261 insertions(+), 333 deletions(-) delete mode 100644 docs/src/componentDocs/ScoreCard/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/ScoreCard/playground/PropsPlayground.tsx delete mode 100644 docs/src/componentDocs/ScoreCard/playground/ScoreCardConfig.tsx diff --git a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx index a95304e7c..30c56f9a9 100644 --- a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx @@ -1,17 +1,267 @@ import React from 'react'; import Box from '@mui/material/Box'; -import ScoreCardPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { Hero, HeroBanner, InfoListItem, ScoreCard, ScoreCardProps } from '@brightlayer-ui/react-components'; +import * as Colors from '@brightlayer-ui/colors'; +import List from '@mui/material/List'; +import Notifications from '@mui/icons-material/Notifications'; +import ListAlt from '@mui/icons-material/ListAlt'; +import Cloud from '@mui/icons-material/Cloud'; +import Search from '@mui/icons-material/Search'; +import Mail from '@mui/icons-material/Mail'; +import MoreVert from '@mui/icons-material/MoreVert'; +import Favorite from '@mui/icons-material/Favorite'; +import { Temp, Moisture } from '@brightlayer-ui/icons-mui'; +import { getImage } from '../../../shared'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'headerTitle', + type: 'string', + typeLabel: 'string', + description: 'The primary text', + required: true, + initialValue: 'Substation 3', + category: 'Required Props', + }, + + // Optional Props + { + id: 'actionLimit', + type: 'number', + typeLabel: `number`, + description: 'Max number of actionItems in the header', + required: false, + initialValue: 3, + minValue: 1, + maxValue: 6, + valueStep: 1, + defaultValue: 3, + category: 'Optional Props', + }, + { + id: 'badgeOffset', + type: 'number', + typeLabel: `number`, + description: 'Vertical offset for the badge component', + required: false, + initialValue: -40, + minValue: -50, + maxValue: 50, + valueStep: 2, + defaultValue: 0, + category: 'Optional Props', + }, + { + id: 'headerBackgroundImage', + type: 'select', + typeLabel: `string`, + description: 'An image to display in the header', + initialValue: 'undefined', + defaultValue: 'undefined', + options: ['undefined', 'pattern'], + required: false, + category: 'Optional Props', + }, + { + id: 'headerColor', + type: 'color', + typeLabel: 'string', + description: 'The color of the background background', + required: false, + initialValue: Colors.blue[500], + category: 'Optional Props', + }, + { + id: 'headerFontColor', + type: 'color', + typeLabel: 'string', + description: 'The color of the header text', + required: false, + initialValue: Colors.white[50], + defaultValue: '#ffffff', + category: 'Optional Props', + }, + { + id: 'headerInfo', + type: 'string', + typeLabel: 'string', + description: 'The tertiary text', + required: true, + initialValue: '4 Devices', + category: 'Optional Props', + }, + { + id: 'headerSubtitle', + type: 'string', + typeLabel: 'string', + description: 'The secondary text', + required: true, + initialValue: 'High Humidity Alarm', + category: 'Optional Props', + }, + + // Other Configuration + { + id: 'numberOfHeroes', + label: '# of Heroes', + type: 'number', + description: '# of heroes to show', + required: false, + initialValue: 1, + minValue: 0, + maxValue: 2, + valueStep: 1, + defaultValue: 1, + category: 'Additional Configuration', + }, +]; + +const ScoreCardPreview: PreviewComponent = ({ data }) => { + const { headerBackgroundImage, numberOfHeroes, ...rest } = data as unknown as ScoreCardProps & { + numberOfHeroes: number; + }; + + const heroes: JSX.Element[] = [ + } + label={'Temperature'} + iconSize={48} + iconBackgroundColor={Colors.white[50]} + ChannelValueProps={{ value: 98, units: '°F' }} + fontSize={'normal'} + />, + } + label={'Humidity'} + ChannelValueProps={{ value: 54, units: '%' }} + iconSize={48} + iconBackgroundColor={Colors.white[50]} + fontSize={'normal'} + />, + ]; + + return ( + + + , + , + , + , + , + , + ]} + actionRow={ + + + + } + badge={{heroes.slice(0, numberOfHeroes)}} + > + + } /> + } + /> + } /> + + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ` 0 + ? `badge={ + + } + label={'Temperature'} + iconSize={48} + iconBackgroundColor={Colors.white[50]} + ChannelValueProps={{ value: 98, units: '°F' }} + fontSize={'normal'} + /> + ${ + ((data.numberOfHeroes as number) ?? 0) > 1 + ? `} + label={'Humidity'} + ChannelValueProps={{ value: 54, units: '%' }} + iconSize={48} + iconBackgroundColor={Colors.white[50]} + fontSize={'normal'} + />` + : '' + } + + }` + : '' + } +> + + } + /> + } + /> + } + /> + +`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const ScoreCardPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/ScoreCard/playground/PreviewComponent.tsx b/docs/src/componentDocs/ScoreCard/playground/PreviewComponent.tsx deleted file mode 100644 index c1952e7de..000000000 --- a/docs/src/componentDocs/ScoreCard/playground/PreviewComponent.tsx +++ /dev/null @@ -1,199 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { ScoreCard } from '@brightlayer-ui/react-components/core/ScoreCard'; -import { InfoListItem } from '@brightlayer-ui/react-components/core/InfoListItem'; -import { Hero } from '@brightlayer-ui/react-components/core/Hero'; -import { HeroBanner } from '@brightlayer-ui/react-components/core/HeroBanner'; -import Cloud from '@mui/icons-material/Cloud'; -import Favorite from '@mui/icons-material/Favorite'; -import Humidity from '@brightlayer-ui/icons-mui/Moisture'; -import List from '@mui/material/List'; -import ListAlt from '@mui/icons-material/ListAlt'; -import Mail from '@mui/icons-material/Mail'; -import MoreVert from '@mui/icons-material/MoreVert'; -import Notifications from '@mui/icons-material/Notifications'; -import Search from '@mui/icons-material/Search'; -import Temp from '@brightlayer-ui/icons-mui/Temp'; -import { createProps, getImage, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; - -import * as Colors from '@brightlayer-ui/colors'; - -export const PreviewComponent = (): JSX.Element => { - const scoreCardJson = useAppSelector((state: RootState) => state.componentsPropsState.scoreCardComponent); - - const scoreCardProps = createProps(scoreCardJson.props as PropsType[]); - const scoreCardOtherProps = createProps(scoreCardJson.otherProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(scoreCardJson, propName, currentValue, 'props'); - - const actionItems = [ - , - , - , - , - , - , - ]; - - const heroes: JSX.Element[] = [ - } - label={'Temperature'} - iconSize={48} - iconBackgroundColor={Colors.white[50]} - ChannelValueProps={{ value: 98, units: '°F' }} - fontSize={'normal'} - />, - } - label={'Humidity'} - ChannelValueProps={{ value: 54, units: '%' }} - iconSize={48} - iconBackgroundColor={Colors.white[50]} - fontSize={'normal'} - />, - ]; - - const showHeroSection = (noOfHeroes: number): string => { - switch (noOfHeroes) { - case 0: - return ''; - case 1: - return `badge={ - - } - label={"Temperature"} - iconSize={48} - iconBackgroundColor={"${Colors.white[50]}"} - ChannelValueProps={{ value: 98, units: "°F" }} - fontSize={"normal"} - /> - - }`; - case 2: - return `badge={ - - } - label={"Temperature"} - iconSize={48} - iconBackgroundColor={"${Colors.white[50]}"} - ChannelValueProps={{ value: 98, units: "°F" }} - fontSize={"normal"} - /> - } - label={"Humidity"} - ChannelValueProps={{ value: 54, units: "%" }} - iconSize={48} - iconBackgroundColor={"${Colors.white[50]}"} - fontSize={"normal"} - /> - - }`; - default: - return ''; - } - }; - - const generateCodeSnippet = (): string => { - const jsx = `, - , - , - , - , - , - ]} - actionRow={ - - - - } - ${showHeroSection(scoreCardOtherProps.numberofHeroes)} - ${toggleDefaultProp('badgeOffset', scoreCardProps.badgeOffset)} -> - - } - /> - } - /> - } - /> - -`; - return removeEmptyLines(jsx); - }; - - return ( - - - - } - badge={{heroes.slice(0, scoreCardOtherProps.numberofHeroes)}} - badgeOffset={scoreCardProps.badgeOffset} - > - - } /> - } - /> - } /> - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/ScoreCard/playground/PropsPlayground.tsx b/docs/src/componentDocs/ScoreCard/playground/PropsPlayground.tsx deleted file mode 100644 index 0fec34b98..000000000 --- a/docs/src/componentDocs/ScoreCard/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const scoreCardJson = useAppSelector((state: RootState) => state.componentsPropsState.scoreCardComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/ScoreCard/playground/ScoreCardConfig.tsx b/docs/src/componentDocs/ScoreCard/playground/ScoreCardConfig.tsx deleted file mode 100644 index 42d1e3c78..000000000 --- a/docs/src/componentDocs/ScoreCard/playground/ScoreCardConfig.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const scoreCardConfig: ComponentType = { - componentName: 'Score Card', - props: [ - { - propName: 'actionLimit', - inputType: 'number', - inputValue: 3, - propType: 'number', - helperText: 'Max number of actionItems in the header', - required: false, - rangeData: { - min: 1, - max: 6, - step: 1, - }, - defaultValue: 3, - }, - { - propName: 'badgeOffset', - inputType: 'number', - inputValue: -40, - propType: 'number', - helperText: 'Vertical offset for the badge component', - required: false, - rangeData: { - min: -50, - max: 50, - step: 10, - }, - defaultValue: 0, - }, - { - propName: 'headerBackgroundImage', - inputType: 'select', - inputValue: 'undefined', - options: ['undefined', 'Pattern'], - propType: 'string', - helperText: 'An image to display in the header', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'headerColor', - inputType: 'colorPicker', - inputValue: Colors.blue[500], - propType: 'string', - helperText: 'The color of the header', - required: false, - }, - { - propName: 'headerFontColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'The color for text and icons in header', - required: false, - defaultValue: 'white', - }, - { - propName: 'headerInfo', - inputType: 'string', - inputValue: '4 Devices', - propType: 'string', - helperText: 'Tertiary text', - required: false, - }, - { - propName: 'headerTitle', - inputType: 'string', - inputValue: 'Substation 3', - propType: 'string', - helperText: 'The primary text', - required: true, - }, - { - propName: 'headerSubtitle', - inputType: 'string', - inputValue: 'High Humidity Alarm', - propType: 'string', - helperText: 'The secondary text', - required: false, - }, - ], - otherProps: [ - { - propName: 'numberofHeroes', - inputType: 'number', - inputValue: 1, - propType: 'number', - helperText: 'Number of heroes to render as badges', - required: false, - rangeData: { - min: 0, - max: 2, - step: 1, - }, - defaultValue: 1, - label: 'Number of Heroes', - }, - ], -}; - -export default scoreCardConfig; diff --git a/docs/src/componentDocs/ScoreCard/playground/index.tsx b/docs/src/componentDocs/ScoreCard/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/ScoreCard/playground/index.tsx +++ b/docs/src/componentDocs/ScoreCard/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 06e550ba0..891e2e7fe 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -6,7 +6,6 @@ import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerF import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; -import scoreCardConfig from '../componentDocs/ScoreCard/playground/ScoreCardConfig'; import { getComponentState } from '../shared/utilities'; import { ComponentDocPayloadType, ComponentType } from '../__types__'; @@ -18,7 +17,6 @@ type ComponentState = { drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; - scoreCardComponent: ComponentType; }; const initialState: ComponentState = { @@ -29,7 +27,6 @@ const initialState: ComponentState = { drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, - scoreCardComponent: scoreCardConfig, }; export const componentPropsStateSlice = createSlice({ diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index d59dfd400..156912bac 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -158,7 +158,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('list-item-tag') || location.pathname.includes('three-liner') || location.pathname.includes('toolbar-menu') || - location.pathname.includes('user-menu') + location.pathname.includes('user-menu') || + location.pathname.includes('score-card') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 25f3f9143..1763a5ac9 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -128,18 +128,16 @@ export const getComponentState = (componentName: string, state: RootState['compo return state.drawerNavItemComponent; case 'Drawer Rail Item': return state.drawerRailItemComponent; - case 'Score Card': - return state.scoreCardComponent; default: return state.drawerComponent; } }; export const getImage = (image: string): string | undefined => { - switch (image) { - case 'Pattern': + switch (image.toLowerCase()) { + case 'pattern': return topologyBgImage; - case 'Farm': + case 'farm': return farmBgImage; case 'undefined': return undefined; From bd1aecd20986e28cb275435fec1c634c0250b45a Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 14:39:45 -0500 Subject: [PATCH 15/26] Update DrawerHeader to use playground library --- .../playground/DrawerHeaderConfig.tsx | 85 --------- .../playground/PlaygroundPage.tsx | 168 +++++++++++++++++- .../playground/PreviewComponent.tsx | 104 ----------- .../playground/PropsPlayground.tsx | 12 -- .../DrawerHeader/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - 8 files changed, 164 insertions(+), 214 deletions(-) delete mode 100644 docs/src/componentDocs/DrawerHeader/playground/DrawerHeaderConfig.tsx delete mode 100644 docs/src/componentDocs/DrawerHeader/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/DrawerHeader/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/DrawerHeader/playground/DrawerHeaderConfig.tsx b/docs/src/componentDocs/DrawerHeader/playground/DrawerHeaderConfig.tsx deleted file mode 100644 index ff3025d75..000000000 --- a/docs/src/componentDocs/DrawerHeader/playground/DrawerHeaderConfig.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const drawerTypes: ComponentType = { - componentName: 'Drawer Header', - props: [ - { - propName: 'backgroundColor', - inputType: 'colorPicker', - inputValue: Colors.blue[500], - propType: 'string', - helperText: 'The color used for the background', - required: false, - }, - { - propName: 'backgroundImage', - inputType: 'select', - inputValue: 'undefined', - options: ['undefined', 'Pattern', 'Farm'], - propType: 'string', - helperText: 'An image to display in the header', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'backgroundOpacity', - inputType: 'number', - inputValue: 0.3, - propType: 'number', - helperText: 'The opacity of the background image', - required: false, - defaultValue: 0.3, - rangeData: { - min: 0, - max: 1, - step: 0.1, - }, - }, - { - propName: 'divider', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Optional divider which appears beneath header', - required: false, - defaultValue: false, - }, - { - propName: 'fontColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'The color of the text elements', - required: false, - }, - { - propName: 'icon', - inputType: 'select', - inputValue: '', - options: ['undefined', '', ''], - propType: 'ReactNode', - helperText: 'A component to render for the icon', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'subtitle', - inputType: 'string', - inputValue: 'Organize your menu items here', - propType: 'string', - helperText: 'The text to show on the second line', - required: false, - }, - { - propName: 'title', - inputType: 'string', - inputValue: 'Brightlayer UI Drawer', - propType: 'string', - helperText: 'The text to show on the first line', - required: false, - }, - ], -}; - -export default drawerTypes; diff --git a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx index 32a5402b4..f357188b8 100644 --- a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx @@ -1,17 +1,173 @@ import React from 'react'; import Box from '@mui/material/Box'; -import DrawerHeaderPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { + Drawer, + DrawerBody, + DrawerHeader, + DrawerHeaderProps, + DrawerNavGroup, + DrawerNavItem, +} from '@brightlayer-ui/react-components'; +import * as Colors from '@brightlayer-ui/colors'; +import Menu from '@mui/icons-material/Menu'; +import NotificationsActive from '@mui/icons-material/NotificationsActive'; +import Person from '@mui/icons-material/Person'; +import Today from '@mui/icons-material/Today'; +import Accessibility from '@mui/icons-material/Accessibility'; +import ArrowBack from '@mui/icons-material/ArrowBack'; +import { getImage } from '../../../shared'; + +const inputConfig: InputConfig = [ + // Required Props + // NONE + + // Optional Props + { + id: 'backgroundColor', + type: 'color', + typeLabel: 'string', + description: 'The color used for the background', + required: false, + initialValue: Colors.blue[500], + category: 'Optional Props', + }, + { + id: 'backgroundImage', + type: 'select', + typeLabel: `string`, + description: 'An image to display in the header', + initialValue: 'undefined', + defaultValue: 'undefined', + options: ['undefined', 'pattern', 'farm'], + required: false, + category: 'Optional Props', + }, + { + id: 'backgroundOpacity', + type: 'number', + typeLabel: `number`, + description: 'The opacity of the background image', + required: false, + initialValue: 0.3, + minValue: 0, + maxValue: 1, + valueStep: 0.1, + defaultValue: 0.3, + category: 'Optional Props', + }, + { + id: 'divider', + type: 'boolean', + description: 'Optional divider which appears beneath the header', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'fontColor', + type: 'color', + typeLabel: 'string', + description: 'The color of the text elements', + required: false, + initialValue: Colors.white[50], + category: 'Optional Props', + }, + { + id: 'icon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'A component to render for the icon', + initialValue: '', + options: ['undefined', '', ''], + required: false, + category: 'Optional Props', + }, + { + id: 'subtitle', + type: 'string', + typeLabel: `string`, + description: 'The text to show on the second line', + required: false, + initialValue: 'Organize your menu items here', + category: 'Optional Props', + }, + { + id: 'title', + type: 'string', + typeLabel: `string`, + description: 'The text to show on the first line', + required: false, + initialValue: 'Brightlayer UI Drawer', + category: 'Optional Props', + }, + + // Other Configuration + // NONE +]; + +const DrawerHeaderPreview: PreviewComponent = ({ data }) => { + const { icon, backgroundImage, ...rest } = data as unknown as DrawerHeaderProps; + + const getIcon = (value: string): JSX.Element | undefined => { + switch (value) { + case '': + return ; + case '': + return ; + case 'undefined': + default: + return undefined; + } + }; + return ( + + + + + + } itemID={'Identity Management'} title={'Identity Management'} /> + } itemID={'Calendar'} title={'Calendar'} /> + } title={'Accessibility'} itemID={'Accessibility'} /> + } + title={'Notifications'} + itemID={'Notifications'} + /> + + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ``.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const DrawerHeaderPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/DrawerHeader/playground/PreviewComponent.tsx b/docs/src/componentDocs/DrawerHeader/playground/PreviewComponent.tsx deleted file mode 100644 index 1db34a2c5..000000000 --- a/docs/src/componentDocs/DrawerHeader/playground/PreviewComponent.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, DrawerNavItem } from '@brightlayer-ui/react-components'; -import { - createProps, - getIcon, - getIconWithProp, - getImage, - hideDefaultPropsFromSnippet, - removeEmptyLines, -} from '../../../shared/utilities'; -import { Accessibility, NotificationsActive, Person, Today } from '@mui/icons-material'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import useTheme from '@mui/material/styles/useTheme'; - -export const PreviewComponent = (): JSX.Element => { - const theme = useTheme(); - const drawerHeaderJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerHeaderComponent); - - const drawerHeaderProps = createProps(drawerHeaderJson.props as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any, themeDefaultValue?: string | number): string => - hideDefaultPropsFromSnippet(drawerHeaderJson, propName, currentValue, 'props', themeDefaultValue); - - const toggleIconProp = (icon: string): string => { - if (icon === 'undefined') { - return toggleDefaultProp('icon', icon); - } - return `icon={${getIconWithProp(icon, {})}}`; - }; - - const generateCodeSnippet = (): string => { - const jsx = ` - - - - - } - itemID={"Identity Management"} - title={"Identity Management"} - /> - } itemID={"Calendar"} title={"Calendar"} /> - } title={"Accessibility"} itemID={"Accessibility"} /> - } - title={"Notifications"} - itemID={"Notifications"} - /> - - -`; - - return removeEmptyLines(jsx); - }; - - return ( - - - - - - } - itemID={'Identity Management'} - title={'Identity Management'} - /> - } itemID={'Calendar'} title={'Calendar'} /> - } title={'Accessibility'} itemID={'Accessibility'} /> - } - title={'Notifications'} - itemID={'Notifications'} - /> - - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/DrawerHeader/playground/PropsPlayground.tsx b/docs/src/componentDocs/DrawerHeader/playground/PropsPlayground.tsx deleted file mode 100644 index b643d92c4..000000000 --- a/docs/src/componentDocs/DrawerHeader/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const drawerHeaderJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerHeaderComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/DrawerHeader/playground/index.tsx b/docs/src/componentDocs/DrawerHeader/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/DrawerHeader/playground/index.tsx +++ b/docs/src/componentDocs/DrawerHeader/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 891e2e7fe..10a0c3f9c 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,6 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import drawerConfig from '../componentDocs/Drawer/playground/DrawerConfig'; -import drawerHeaderConfig from '../componentDocs/DrawerHeader/playground/DrawerHeaderConfig'; import drawerSubheaderConfig from '../componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig'; import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerFooterConfig'; import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; @@ -11,7 +10,6 @@ import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { drawerComponent: ComponentType; - drawerHeaderComponent: ComponentType; drawerSubheaderComponent: ComponentType; drawerFooterComponent: ComponentType; drawerNavGroupComponent: ComponentType; @@ -21,7 +19,6 @@ type ComponentState = { const initialState: ComponentState = { drawerComponent: drawerConfig, - drawerHeaderComponent: drawerHeaderConfig, drawerSubheaderComponent: drawerSubheaderConfig, drawerFooterComponent: drawerFooterConfig, drawerNavGroupComponent: drawerNavGroupConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 156912bac..b3b0a3b9a 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -159,7 +159,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('three-liner') || location.pathname.includes('toolbar-menu') || location.pathname.includes('user-menu') || - location.pathname.includes('score-card') + location.pathname.includes('score-card') || + location.pathname.includes('drawer-header') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 1763a5ac9..55841a928 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -114,8 +114,6 @@ export const createProps = (props: PropsType[]): any => { export const getComponentState = (componentName: string, state: RootState['componentsPropsState']): ComponentType => { switch (componentName) { - case 'Drawer Header': - return state.drawerHeaderComponent; case 'Drawer': return state.drawerComponent; case 'Drawer Subheader': From 6bdfd03a3ee87f6b287e85c0c34f16cf48832fd5 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 14:58:49 -0500 Subject: [PATCH 16/26] Update DrawerSubheader to use playground library --- docs/package.json | 2 +- .../playground/DrawerSubheaderConfig.tsx | 38 ------ .../playground/PlaygroundPage.tsx | 102 ++++++++++++++- .../playground/PreviewComponent.tsx | 120 ------------------ .../playground/PropsPlayground.tsx | 14 -- .../DrawerSubheader/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - docs/yarn.lock | 8 +- 10 files changed, 103 insertions(+), 190 deletions(-) delete mode 100644 docs/src/componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig.tsx delete mode 100644 docs/src/componentDocs/DrawerSubheader/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/DrawerSubheader/playground/PropsPlayground.tsx diff --git a/docs/package.json b/docs/package.json index 5d4af8506..cbf185152 100644 --- a/docs/package.json +++ b/docs/package.json @@ -39,7 +39,7 @@ "@brightlayer-ui/icons": "^1.11.0", "@brightlayer-ui/icons-mui": "^3.4.0", "@brightlayer-ui/react-components": "^6.2.0", - "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.5", + "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.6", "@brightlayer-ui/react-themes": "^7.1.0", "@craco/craco": "^7.0.0", "@emotion/react": "^11.10.8", diff --git a/docs/src/componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig.tsx b/docs/src/componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig.tsx deleted file mode 100644 index 74df26e68..000000000 --- a/docs/src/componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { ComponentType } from '../../../__types__'; - -export const drawerSubheaderConfig: ComponentType = { - componentName: 'Drawer Subheader', - props: [ - { - propName: 'divider', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Optional divider which appears below the Subheader', - required: false, - defaultValue: true, - }, - { - propName: 'hideContentOnCollapse', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Hide subheader contents when drawer is closed', - required: false, - defaultValue: true, - }, - ], - otherProps: [ - { - propName: 'open', - inputType: 'boolean', - inputValue: true, - propType: 'boolean', - helperText: 'Controls the open/closed state of the drawer', - required: false, - label: 'Drawer Open', - }, - ], -}; - -export default drawerSubheaderConfig; diff --git a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx index 396bc5a51..bd733f99f 100644 --- a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx @@ -1,17 +1,107 @@ import React from 'react'; import Box from '@mui/material/Box'; -import DrawerSubheaderPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { + Drawer, + DrawerBody, + DrawerHeader, + DrawerSubheader, + DrawerSubheaderProps, + DrawerNavGroup, + DrawerNavItem, +} from '@brightlayer-ui/react-components'; +import Menu from '@mui/icons-material/Menu'; +import NotificationsActive from '@mui/icons-material/NotificationsActive'; +import Person from '@mui/icons-material/Person'; +import Today from '@mui/icons-material/Today'; +import Accessibility from '@mui/icons-material/Accessibility'; + +const inputConfig: InputConfig = [ + // Required Props + // NONE + + // Optional Props + { + id: 'divider', + type: 'boolean', + description: 'Optional divider which appears beneath the subheader', + required: false, + initialValue: true, + defaultValue: true, + category: 'Optional Props', + }, + { + id: 'hideContentOnCollapse', + type: 'boolean', + description: 'Hide subheader contents when drawer is closed', + required: false, + initialValue: true, + defaultValue: true, + category: 'Optional Props', + }, + + // Other Configuration + { + id: 'open', + label: 'Drawer Open', + type: 'boolean', + description: 'Is the drawer open', + required: false, + initialValue: true, + category: 'Other Configuration', + }, +]; + +const DrawerSubheaderPreview: PreviewComponent = ({ data }) => { + const { open, ...rest } = data as unknown as DrawerSubheaderProps & { open: boolean }; + + return ( + + + } title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} /> + + + Subheader Content Here + + + + } itemID={'Identity Management'} title={'Identity Management'} /> + } itemID={'Calendar'} title={'Calendar'} /> + } title={'Accessibility'} itemID={'Accessibility'} /> + } + title={'Notifications'} + itemID={'Notifications'} + /> + + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ` + Subheader Content Here +`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const DrawerSubheaderPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/DrawerSubheader/playground/PreviewComponent.tsx b/docs/src/componentDocs/DrawerSubheader/playground/PreviewComponent.tsx deleted file mode 100644 index 00ec81e2d..000000000 --- a/docs/src/componentDocs/DrawerSubheader/playground/PreviewComponent.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { - Drawer, - DrawerBody, - DrawerHeader, - DrawerNavGroup, - DrawerNavItem, - DrawerSubheader, -} from '@brightlayer-ui/react-components/core/Drawer'; -import { createProps, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { Accessibility, Menu, NotificationsActive, Person, Today } from '@mui/icons-material'; -import Box from '@mui/material/Box'; - -export const PreviewComponent = (): JSX.Element => { - const drawerSubheaderJson = useAppSelector( - (state: RootState) => state.componentsPropsState.drawerSubheaderComponent - ); - - const drawerSubheaderProps = createProps(drawerSubheaderJson.props as PropsType[]); - const drawerSubheaderOtherProps = createProps(drawerSubheaderJson.otherProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(drawerSubheaderJson, propName, currentValue, 'props'); - - const generateSubHeaderSnippet = (): string => { - if (drawerSubheaderProps.divider && drawerSubheaderProps.hideContentOnCollapse) { - return ``; - } - return ``; - }; - - const generateCodeSnippet = (): string => { - const jsx = ` - } - title={'Subheader Demo'} - subtitle={'See the DrawerSubheader below'} - /> - ${generateSubHeaderSnippet()} - - Subheader Content Here - - - - - } - itemID={'Identity Management'} - title={'Identity Management'} - /> - } - itemID={'Calendar'} - title={'Calendar'} /> - } - title={'Accessibility'} - itemID={'Accessibility'} /> - } - title={'Notifications'} - itemID={'Notifications'} - /> - - -`; - - return removeEmptyLines(jsx); - }; - - return ( - - } title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} /> - - - Subheader Content Here - - - - - } - itemID={'Identity Management'} - title={'Identity Management'} - /> - } itemID={'Calendar'} title={'Calendar'} /> - } title={'Accessibility'} itemID={'Accessibility'} /> - } - title={'Notifications'} - itemID={'Notifications'} - /> - - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/DrawerSubheader/playground/PropsPlayground.tsx b/docs/src/componentDocs/DrawerSubheader/playground/PropsPlayground.tsx deleted file mode 100644 index 0f731ab00..000000000 --- a/docs/src/componentDocs/DrawerSubheader/playground/PropsPlayground.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const drawerSubheaderJson = useAppSelector( - (state: RootState) => state.componentsPropsState.drawerSubheaderComponent - ); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/DrawerSubheader/playground/index.tsx b/docs/src/componentDocs/DrawerSubheader/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/DrawerSubheader/playground/index.tsx +++ b/docs/src/componentDocs/DrawerSubheader/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 10a0c3f9c..a570d10df 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,6 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import drawerConfig from '../componentDocs/Drawer/playground/DrawerConfig'; -import drawerSubheaderConfig from '../componentDocs/DrawerSubheader/playground/DrawerSubheaderConfig'; import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerFooterConfig'; import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; @@ -10,7 +9,6 @@ import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { drawerComponent: ComponentType; - drawerSubheaderComponent: ComponentType; drawerFooterComponent: ComponentType; drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; @@ -19,7 +17,6 @@ type ComponentState = { const initialState: ComponentState = { drawerComponent: drawerConfig, - drawerSubheaderComponent: drawerSubheaderConfig, drawerFooterComponent: drawerFooterConfig, drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index b3b0a3b9a..50a3cb3e0 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -160,7 +160,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('toolbar-menu') || location.pathname.includes('user-menu') || location.pathname.includes('score-card') || - location.pathname.includes('drawer-header') + location.pathname.includes('drawer-header') || + location.pathname.includes('drawer-subheader') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 55841a928..93ba97895 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -116,8 +116,6 @@ export const getComponentState = (componentName: string, state: RootState['compo switch (componentName) { case 'Drawer': return state.drawerComponent; - case 'Drawer Subheader': - return state.drawerSubheaderComponent; case 'Drawer Footer': return state.drawerFooterComponent; case 'Drawer Nav Group': diff --git a/docs/yarn.lock b/docs/yarn.lock index c33024d40..87b876479 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1236,10 +1236,10 @@ "@seznam/compose-react-refs" "^1.0.6" color "^4.2.3" -"@brightlayer-ui/react-doc-components@^1.0.0-alpha.5": - version "1.0.0-alpha.5" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.5.tgz#45d7b52af2056df69c43bdfef5688095afe00126" - integrity sha512-iA5nwu/qgcAGc0NOLdbZS+tshxLVKBuRhpAgZ9kYRbVWnNSPRXc5GmwJWffHUFa8tpf/xXuvHZ0+IG87u/B2OQ== +"@brightlayer-ui/react-doc-components@^1.0.0-alpha.6": + version "1.0.0-alpha.6" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.6.tgz#7ce7f1b222eaff4949a5afa27a923e24450f4dc7" + integrity sha512-3zFLsQmVTGCJzHwh8WnKWuebwxaXdNT6bKgb9nOmK5soQYfaKsfc8V+YlXANAtoUidKzYq+1U9U4sTqTuhiCaA== dependencies: color "^4.0.0" lodash.debounce "^4.0.8" From ab8c2038a0ca150885ad8c588501f30888536d4f Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 15:06:18 -0500 Subject: [PATCH 17/26] Update DrawerFooter to use playground library --- .../playground/DrawerFooterConfig.tsx | 47 -------- .../playground/PlaygroundPage.tsx | 111 +++++++++++++++++- .../playground/PreviewComponent.tsx | 79 ------------- .../playground/PropsPlayground.tsx | 12 -- .../DrawerFooter/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - 8 files changed, 107 insertions(+), 151 deletions(-) delete mode 100644 docs/src/componentDocs/DrawerFooter/playground/DrawerFooterConfig.tsx delete mode 100644 docs/src/componentDocs/DrawerFooter/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/DrawerFooter/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/DrawerFooter/playground/DrawerFooterConfig.tsx b/docs/src/componentDocs/DrawerFooter/playground/DrawerFooterConfig.tsx deleted file mode 100644 index 99d78d6e4..000000000 --- a/docs/src/componentDocs/DrawerFooter/playground/DrawerFooterConfig.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const drawerTypes: ComponentType = { - componentName: 'Drawer Footer', - props: [ - { - propName: 'backgroundColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'The color used for the background', - required: false, - }, - { - propName: 'divider', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Optional divider which appears above footer', - required: false, - defaultValue: true, - }, - { - propName: 'hideContentOnCollapse', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Hide footer contents when drawer is closed', - required: false, - defaultValue: true, - }, - ], - otherProps: [ - { - propName: 'open', - inputType: 'boolean', - inputValue: true, - propType: 'boolean', - helperText: 'Controls the open/closed state of the drawer', - required: false, - label: 'Drawer Open', - }, - ], -}; - -export default drawerTypes; diff --git a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx index 3b66816c3..324faf50a 100644 --- a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx @@ -1,17 +1,116 @@ import React from 'react'; import Box from '@mui/material/Box'; -import DrawerFooterPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { + Drawer, + DrawerBody, + DrawerHeader, + DrawerFooter, + DrawerFooterProps, + DrawerNavGroup, + DrawerNavItem, +} from '@brightlayer-ui/react-components'; +import Menu from '@mui/icons-material/Menu'; +import NotificationsActive from '@mui/icons-material/NotificationsActive'; +import Person from '@mui/icons-material/Person'; +import Today from '@mui/icons-material/Today'; +import Accessibility from '@mui/icons-material/Accessibility'; +import * as Colors from '@brightlayer-ui/colors'; + +const inputConfig: InputConfig = [ + // Required Props + // NONE + + // Optional Props + { + id: 'backgroundColor', + type: 'color', + typeLabel: 'string', + description: 'The color used for the background', + required: false, + initialValue: Colors.white[50], + category: 'Optional Props', + }, + { + id: 'divider', + type: 'boolean', + description: 'Optional divider which appears above the Footer', + required: false, + initialValue: true, + defaultValue: true, + category: 'Optional Props', + }, + { + id: 'hideContentOnCollapse', + type: 'boolean', + description: 'Hide footer contents when drawer is closed', + required: false, + initialValue: true, + defaultValue: true, + category: 'Optional Props', + }, + + // Other Configuration + { + id: 'open', + label: 'Drawer Open', + type: 'boolean', + description: 'Is the drawer open', + required: false, + initialValue: true, + category: 'Other Configuration', + }, +]; + +const DrawerFooterPreview: PreviewComponent = ({ data }) => { + const { open, ...rest } = data as unknown as DrawerFooterProps & { open: boolean }; + + return ( + + + } title={'Footer Demo'} subtitle={'See the DrawerFooter below'} /> + + + } itemID={'Identity Management'} title={'Identity Management'} /> + } itemID={'Calendar'} title={'Calendar'} /> + } title={'Accessibility'} itemID={'Accessibility'} /> + } + title={'Notifications'} + itemID={'Notifications'} + /> + + + + Footer Content Here + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ` + Footer Content Here +`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const DrawerFooterPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/DrawerFooter/playground/PreviewComponent.tsx b/docs/src/componentDocs/DrawerFooter/playground/PreviewComponent.tsx deleted file mode 100644 index 234a5a326..000000000 --- a/docs/src/componentDocs/DrawerFooter/playground/PreviewComponent.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { - Drawer, - DrawerBody, - DrawerHeader, - DrawerNavGroup, - DrawerNavItem, - DrawerFooter, -} from '@brightlayer-ui/react-components'; -import { createProps, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import Box from '@mui/material/Box'; -import Menu from '@mui/icons-material/Menu'; - -export const PreviewComponent = (): JSX.Element => { - const drawerFooterJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerFooterComponent); - - const drawerFooterProps = createProps(drawerFooterJson.props as PropsType[]); - const drawerFooterOtherProps = createProps(drawerFooterJson.otherProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any): string => - hideDefaultPropsFromSnippet(drawerFooterJson, propName, currentValue, 'props'); - - const generateCodeSnippet = (): string => { - const jsx = ` - } - title={"Header Title"} - /> - - - - - - - - - Footer Content Here - - -`; - - return removeEmptyLines(jsx); - }; - return ( - - } title={'Header Title'} /> - - - - - - - - Footer Content Here - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/DrawerFooter/playground/PropsPlayground.tsx b/docs/src/componentDocs/DrawerFooter/playground/PropsPlayground.tsx deleted file mode 100644 index 60e253d44..000000000 --- a/docs/src/componentDocs/DrawerFooter/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const drawerFooterJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerFooterComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/DrawerFooter/playground/index.tsx b/docs/src/componentDocs/DrawerFooter/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/DrawerFooter/playground/index.tsx +++ b/docs/src/componentDocs/DrawerFooter/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index a570d10df..fb1f6fd8c 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,6 +1,5 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import drawerConfig from '../componentDocs/Drawer/playground/DrawerConfig'; -import drawerFooterConfig from '../componentDocs/DrawerFooter/playground/DrawerFooterConfig'; import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; @@ -9,7 +8,6 @@ import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { drawerComponent: ComponentType; - drawerFooterComponent: ComponentType; drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; @@ -17,7 +15,6 @@ type ComponentState = { const initialState: ComponentState = { drawerComponent: drawerConfig, - drawerFooterComponent: drawerFooterConfig, drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 50a3cb3e0..9413bdcfa 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -161,7 +161,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('user-menu') || location.pathname.includes('score-card') || location.pathname.includes('drawer-header') || - location.pathname.includes('drawer-subheader') + location.pathname.includes('drawer-subheader') || + location.pathname.includes('drawer-footer') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 93ba97895..6f5e9b7c3 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -116,8 +116,6 @@ export const getComponentState = (componentName: string, state: RootState['compo switch (componentName) { case 'Drawer': return state.drawerComponent; - case 'Drawer Footer': - return state.drawerFooterComponent; case 'Drawer Nav Group': return state.drawerNavGroupComponent; case 'Drawer Nav Item': From 6872abd049b05ce8c59d2e34da2ce77874e409c5 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 16:08:35 -0500 Subject: [PATCH 18/26] Update Drawer to use playground library --- .../Drawer/playground/DrawerConfig.tsx | 94 ----- .../Drawer/playground/PlaygroundPage.tsx | 304 +++++++++++++++- .../Drawer/playground/PreviewComponent.tsx | 334 ------------------ .../Drawer/playground/PropsPlayground.tsx | 12 - .../componentDocs/Drawer/playground/index.tsx | 1 - .../Drawer/playground/sharedPropsConfig.ts | 3 + docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 5 +- 9 files changed, 303 insertions(+), 456 deletions(-) delete mode 100644 docs/src/componentDocs/Drawer/playground/DrawerConfig.tsx delete mode 100644 docs/src/componentDocs/Drawer/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/Drawer/playground/PropsPlayground.tsx create mode 100644 docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts diff --git a/docs/src/componentDocs/Drawer/playground/DrawerConfig.tsx b/docs/src/componentDocs/Drawer/playground/DrawerConfig.tsx deleted file mode 100644 index 766b7b4a8..000000000 --- a/docs/src/componentDocs/Drawer/playground/DrawerConfig.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import sharedPropsConfig from '../../../shared/data/SharedPropsConfig'; - -export const drawerConfig: ComponentType = { - componentName: 'Drawer', - props: [ - { - propName: 'activeItem', - inputType: 'select', - inputValue: 'Overview', - options: ['Overview', 'Monthly Report', 'Annual Report', 'Timeline', 'Devices', 'Schedule'], - propType: 'string', - helperText: `itemID for the 'active' item`, - required: false, - disabled: true, - }, - { - propName: 'condensed', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Show condensed nav items without labels (rail variant only)', - required: false, - defaultValue: false, - }, - { - propName: 'open', - inputType: 'boolean', - inputValue: true, - propType: 'boolean', - helperText: 'Controls the open/closed state of the drawer', - required: true, - }, - { - propName: 'openOnHover', - inputType: 'boolean', - inputValue: true, - propType: 'boolean', - helperText: 'Automatically open the drawer on hover when closed (persistent variant only)', - required: false, - defaultValue: true, - }, - { - propName: 'openOnHoverDelay', - inputType: 'number', - inputValue: 500, - propType: 'number', - helperText: 'Delay (ms) before triggering open on hover (persistent variant only)', - required: false, - rangeData: { - min: 100, - max: 1000, - step: 100, - }, - defaultValue: 500, - }, - { - propName: 'sideBorder', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to use a side border for the drawer instead of a shadow', - required: false, - defaultValue: false, - }, - { - propName: 'variant', - inputType: 'select', - inputValue: 'persistent', - options: ['persistent', 'permanent', 'temporary', 'rail'], - propType: 'string', - helperText: `The variant to use from options 'persistent', 'permanent', 'temporary', 'rail'`, - required: false, - defaultValue: 'persistent', - }, - { - propName: 'width', - inputType: 'number', - inputValue: 350, - propType: 'number | string', - helperText: 'Sets the width of the drawer when open. Default value is 22.5rem (360px)', - required: false, - rangeData: { - min: 200, - max: 700, - step: 50, - }, - defaultValue: 360, - }, - ], - sharedProps: sharedPropsConfig, -}; - -export default drawerConfig; diff --git a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx index 83ed22aba..73f1d4bcb 100644 --- a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx @@ -1,17 +1,307 @@ -import React from 'react'; +import React, { useRef } from 'react'; import Box from '@mui/material/Box'; -import DrawerPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, + usePlaygroundValues, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { + Drawer, + DrawerBody, + DrawerHeader, + DrawerProps, + DrawerNavGroup, + NavItem, +} from '@brightlayer-ui/react-components'; +import * as Colors from '@brightlayer-ui/colors'; +import Menu from '@mui/icons-material/Menu'; +import AppBar from '@mui/material/AppBar'; +import Close from '@mui/icons-material/Close'; +import Dashboard from '@mui/icons-material/Dashboard'; +import Toc from '@mui/icons-material/Toc'; +import Devices from '@mui/icons-material/Devices'; +import AirportShuttle from '@mui/icons-material/AirportShuttle'; +import Toolbar from '@mui/material/Toolbar'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import { sharedPropsConfig } from './sharedPropsConfig'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'open', + type: 'boolean', + description: 'Controls the open/closed state of the drawer', + required: true, + initialValue: true, + defaultValue: false, + category: 'Required Props', + }, + + // Optional Props + { + id: 'activeItem', + type: 'select', + typeLabel: `string`, + description: `itemID for the 'active' item`, + initialValue: 'undefined', + defaultValue: 'undefined', + options: ['undefined', 'Overview', 'Monthly Report', 'Annual Report', 'Timeline', 'Devices', 'Schedule'], + required: false, + category: 'Optional Props', + }, + { + id: 'condensed', + type: 'boolean', + description: 'Show condensed nav items without labels (rail variant only)', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'openOnHover', + type: 'boolean', + description: 'Automatically open the drawer on hover when closed (persistent variant only)', + required: false, + initialValue: true, + defaultValue: true, + category: 'Optional Props', + }, + { + id: 'openOnHoverDelay', + type: 'number', + typeLabel: `number`, + description: 'Delay (ms) before triggering open on hover (persistent variant only)', + required: false, + initialValue: 500, + minValue: 100, + maxValue: 1000, + valueStep: 100, + defaultValue: 500, + category: 'Optional Props', + }, + { + id: 'sideBorder', + type: 'boolean', + description: 'Whether to use a side border for the drawer instead of a shadow', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'variant', + type: 'select', + typeLabel: `'persistent' | 'permanent' | 'temporary' | 'rail'`, + description: 'The variant / style of drawer to use', + initialValue: 'persistent', + defaultValue: 'persistent', + options: ['persistent', 'permanent', 'temporary', 'rail'], + required: false, + category: 'Optional Props', + }, + { + id: 'width', + type: 'number', + typeLabel: `number | string`, + description: 'Sets the width of the drawer when open', + required: false, + initialValue: 360, + minValue: 200, + maxValue: 700, + valueStep: 10, + defaultValue: 360, + category: 'Optional Props', + }, + + // Shared Props + ...sharedPropsConfig, + + // Other Configuration + // NONE +]; + +const DrawerPreview: PreviewComponent = ({ data }) => { + const { variant, open, ...rest } = data as unknown as DrawerProps; + const { updateData } = usePlaygroundValues(); + const containerRef = useRef(null); + const persistent = variant === 'persistent'; + const permanent = variant === 'permanent'; + const temporary = variant === 'temporary'; + const rail = variant === 'rail'; + + const navGroupItems: NavItem[] = [ + { + icon: , + itemID: 'Overview', + title: 'Overview', + onClick: (): void => updateData('activeItem', 'Overview'), + items: [ + { + itemID: 'Monthly Report', + title: 'Monthly Report', + onClick: (): void => updateData('activeItem', 'Monthly Report'), + }, + { + itemID: 'Annual Report', + title: 'Annual Report', + onClick: (): void => updateData('activeItem', 'Annual Report'), + }, + ], + }, + { + icon: , + itemID: 'Timeline', + title: 'Timeline', + onClick: (): void => updateData('activeItem', 'Timeline'), + }, + { + icon: , + title: 'Devices', + itemID: 'Devices', + subtitle: '5 new warnings', + statusColor: Colors.yellow[500], + onClick: (): void => updateData('activeItem', 'Devices'), + }, + { + icon: , + itemID: 'Schedule', + title: 'Schedule', + onClick: (): void => updateData('activeItem', 'Schedule'), + }, + ]; + + return ( + + + + {temporary && ( + } + onClick={(): void => updateData('open', !open)} + sx={{ cursor: 'pointer' }} + /> + )} + + {persistent && ( + } + onClick={(): void => updateData('open', !open)} + sx={{ cursor: 'pointer' }} + /> + )} + + {permanent && } + + + + + + {rail ? ( + App Content Here. + ) : ( + <> + + + updateData('open', !open)} + > + + + Toolbar + + + + App Content Here. + + + )} + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ` + + + + +`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const DrawerPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/Drawer/playground/PreviewComponent.tsx b/docs/src/componentDocs/Drawer/playground/PreviewComponent.tsx deleted file mode 100644 index c1b9bfb00..000000000 --- a/docs/src/componentDocs/Drawer/playground/PreviewComponent.tsx +++ /dev/null @@ -1,334 +0,0 @@ -import React, { useRef } from 'react'; -import { AppBar, Box, IconButton, Toolbar } from '@mui/material'; -import { RootState } from '../../../redux/store'; -import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; -import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, NavItem } from '@brightlayer-ui/react-components'; -import { PropsType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; -import Typography from '@mui/material/Typography'; -import { Devices, AirportShuttle, Menu, Dashboard, Toc, Close } from '@mui/icons-material'; -import { createProps, getIcon, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { updateComponentProp } from '../../../redux/componentsPropsState'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; - -export const PreviewComponent = (): JSX.Element => { - const drawerJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerComponent); - const dispatch = useAppDispatch(); - const containerRef = useRef(null); - - const updateActiveItem = (activeItem: string): void => { - const newState = { - propName: 'activeItem', - propValue: activeItem, - componentName: drawerJson.componentName as string, - groupType: 'props', - }; - dispatch(updateComponentProp(newState)); - }; - - const updateOpenProp = (open: boolean): void => { - const newState = { - propName: 'open', - propValue: open, - componentName: drawerJson.componentName as string, - groupType: 'props', - }; - dispatch(updateComponentProp(newState)); - }; - - const drawerProps = createProps(drawerJson.props as PropsType[]); - const drawerSharedProps = createProps(drawerJson.sharedProps as PropsType[]); - const variantIsTemporary = drawerProps.variant === 'temporary'; - const variantIsPersistent = drawerProps.variant === 'persistent'; - const variantIsPermanent = drawerProps.variant === 'permanent'; - const variantIsRail = drawerProps.variant === 'rail'; - - const navGroupItems: NavItem[] = [ - { - icon: , - itemID: 'Overview', - title: 'Overview', - onClick: (): void => updateActiveItem('Overview'), - items: [ - { - itemID: 'Monthly Report', - title: 'Monthly Report', - onClick: (): void => updateActiveItem('Monthly Report'), - }, - { - itemID: 'Annual Report', - title: 'Annual Report', - onClick: (): void => updateActiveItem('Annual Report'), - }, - ], - }, - { - icon: , - itemID: 'Timeline', - title: 'Timeline', - onClick: (): void => updateActiveItem('Timeline'), - }, - { - icon: , - title: 'Devices', - itemID: 'Devices', - subtitle: '5 new warnings', - statusColor: Colors.yellow[500], - onClick: (): void => updateActiveItem('Devices'), - }, - { - icon: , - itemID: 'Schedule', - title: 'Schedule', - onClick: (): void => updateActiveItem('Schedule'), - }, - ]; - - const toggleDefaultProp = (propName: string, currentValue: any, groupType?: string): string => - hideDefaultPropsFromSnippet(drawerJson, propName, currentValue, groupType); - - const toggleOpenProp = (open: boolean): string => `updateOpenProp(${open ? `false` : `true`})`; - - const updateHeaderAsPerVariant = (): string => { - if (variantIsTemporary) { - return ` - } - onClick={(): void => ${toggleOpenProp(drawerProps.open)}} - sx={{ cursor: 'pointer' }} - /> - `; - } else if (variantIsPersistent) { - return ` - } - onClick={(): void => ${toggleOpenProp(drawerProps.open)}} - sx={{ cursor: 'pointer' }} - /> - `; - } else if (variantIsPermanent) { - return ` - - `; - } - return ``; - }; - - const generateCodeSnippet = (): string => { - const jsx = ` -${updateHeaderAsPerVariant()} - - , - itemID: "Overview", - title: "Overview", - onClick:(): void => updateActiveItem("Overview"), - items: [ - { - itemID: "Monthly Report", - title: "Monthly Report", - onClick: (): void => updateActiveItem("Monthly Report"), - }, - { - itemID: "Annual Report", - title: "Annual Report", - onClick: (): void => updateActiveItem("Annual Report"), - }, - ], - }, - { - icon: , - itemID: "Timeline", - title: "Timeline", - onClick:(): void => updateActiveItem("Timeline"), - }, - { - icon: , - title: "Devices", - itemID: "Devices", - subtitle: "5 new warnings", - statusColor: Colors.yellow[500], - onClick:(): void => updateActiveItem("Devices"), - }, - { - icon: , - itemID: "Schedule", - title: "Schedule", - onClick:(): void => updateActiveItem("Schedule"), - } - ] - }> - - - -`; - return removeEmptyLines(jsx); - }; - return ( - - updateOpenProp(!drawerProps.open)} - SlideProps={{ - container: containerRef.current, - }} - BackdropProps={{ - sx: { position: 'absolute' }, - }} - sx={{ - position: 'absolute', - minWidth: '100%', - '& .MuiPaper-root': { - background: 'transparent', - width: variantIsPersistent ? 'inherit' : 'initial', - }, - '& .BluiDrawer-content': { backgroundColor: 'background.paper' }, - }} - activeItem={drawerProps.activeItem} - activeItemBackgroundColor={drawerSharedProps.activeItemBackgroundColor} - activeItemFontColor={drawerSharedProps.activeItemFontColor} - activeItemIconColor={drawerSharedProps.activeItemIconColor} - activeItemBackgroundShape={drawerSharedProps.activeItemBackgroundShape} - chevron={drawerSharedProps.chevron} - chevronColor={drawerSharedProps.chevronColor} - collapseIcon={getIcon(drawerSharedProps.collapseIcon)} - condensed={drawerProps.condensed} - disableActiveItemParentStyles={drawerSharedProps.disableActiveItemParentStyles} - divider={drawerSharedProps.divider} - expandIcon={getIcon(drawerSharedProps.expandIcon)} - hidePadding={drawerSharedProps.hidePadding} - itemFontColor={drawerSharedProps.itemFontColor} - itemIconColor={drawerSharedProps.itemIconColor} - nestedBackgroundColor={drawerSharedProps.nestedBackgroundColor} - nestedDivider={drawerSharedProps.nestedDivider} - openOnHover={drawerProps.openOnHover} - openOnHoverDelay={drawerProps.openOnHoverDelay} - ripple={drawerSharedProps.ripple} - sideBorder={drawerProps.sideBorder} - > - {variantIsTemporary && ( - } - onClick={(): void => updateOpenProp(!drawerProps.open)} - sx={{ cursor: 'pointer' }} - /> - )} - - {variantIsPersistent && ( - } - onClick={(): void => updateOpenProp(!drawerProps.open)} - sx={{ cursor: 'pointer' }} - /> - )} - - {variantIsPermanent && } - - - - - - - {variantIsRail ? ( - App Content Here. - ) : ( - <> - - - updateOpenProp(!drawerProps.open)} - > - - - Toolbar - - - - App Content Here. - - - )} - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/Drawer/playground/PropsPlayground.tsx b/docs/src/componentDocs/Drawer/playground/PropsPlayground.tsx deleted file mode 100644 index fcbc710c8..000000000 --- a/docs/src/componentDocs/Drawer/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const drawerJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/Drawer/playground/index.tsx b/docs/src/componentDocs/Drawer/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/Drawer/playground/index.tsx +++ b/docs/src/componentDocs/Drawer/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts b/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts new file mode 100644 index 000000000..93457b0ca --- /dev/null +++ b/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts @@ -0,0 +1,3 @@ +import { InputConfig } from '@brightlayer-ui/react-doc-components'; + +export const sharedPropsConfig: InputConfig = []; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index fb1f6fd8c..802a7a199 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,5 +1,4 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import drawerConfig from '../componentDocs/Drawer/playground/DrawerConfig'; import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; @@ -7,14 +6,12 @@ import { getComponentState } from '../shared/utilities'; import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { - drawerComponent: ComponentType; drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; }; const initialState: ComponentState = { - drawerComponent: drawerConfig, drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 9413bdcfa..5a619eca2 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -162,7 +162,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('score-card') || location.pathname.includes('drawer-header') || location.pathname.includes('drawer-subheader') || - location.pathname.includes('drawer-footer') + location.pathname.includes('drawer-footer') || + location.pathname.includes('drawer/') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 6f5e9b7c3..adac663f2 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -114,16 +114,13 @@ export const createProps = (props: PropsType[]): any => { export const getComponentState = (componentName: string, state: RootState['componentsPropsState']): ComponentType => { switch (componentName) { - case 'Drawer': - return state.drawerComponent; case 'Drawer Nav Group': return state.drawerNavGroupComponent; case 'Drawer Nav Item': return state.drawerNavItemComponent; case 'Drawer Rail Item': - return state.drawerRailItemComponent; default: - return state.drawerComponent; + return state.drawerRailItemComponent; } }; From da8b8523bcbc7737792284bb658396f5290b0cb4 Mon Sep 17 00:00:00 2001 From: joebochill Date: Tue, 12 Dec 2023 17:02:05 -0500 Subject: [PATCH 19/26] Update Drawer with sharedProps --- .../playground/PlaygroundPage.tsx | 26 +-- .../Drawer/playground/PlaygroundPage.tsx | 22 ++- .../Drawer/playground/sharedPropsConfig.ts | 154 +++++++++++++++++- .../playground/PlaygroundPage.tsx | 17 +- .../EmptyState/playground/PlaygroundPage.tsx | 18 +- .../Hero/playground/PlaygroundPage.tsx | 34 ++-- .../playground/PlaygroundPage.tsx | 13 +- .../ToolbarMenu/playground/PlaygroundPage.tsx | 16 +- docs/src/shared/data/SharedPropsConfig.tsx | 144 +--------------- docs/src/shared/utilities.tsx | 34 ++-- 10 files changed, 217 insertions(+), 261 deletions(-) diff --git a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx index 180a623bb..a4d9900f4 100644 --- a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx @@ -1,12 +1,7 @@ import React from 'react'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; - import { ChannelValue, ChannelValueProps } from '@brightlayer-ui/react-components'; - -import TrendingUp from '@mui/icons-material/TrendingUp'; -import TrendingDown from '@mui/icons-material/TrendingDown'; - import { InputConfig, PreviewComponent, @@ -15,6 +10,7 @@ import { getPropsMapping, Playground, } from '@brightlayer-ui/react-doc-components'; +import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -114,21 +110,10 @@ const inputConfig: InputConfig = [ const ChannelValuePreview: PreviewComponent = ({ data }) => { const { htmlColor, icon, ...rest } = data as unknown as ChannelValueProps & { htmlColor: string }; - const getIcon = (value: string): JSX.Element | undefined => { - switch (value) { - case '': - return ; - case '': - return ; - case 'undefined': - default: - return undefined; - } - }; return ( - + ); }; @@ -138,9 +123,10 @@ const generateSnippet: CodeSnippetFunction = (data) => ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'htmlColor'] })} ${ data.icon && data.icon !== 'undefined' - ? `icon={${(data.icon as string).replace('/>', '')}fontSize={'inherit'}${ - data.htmlColor && data.htmlColor !== 'undefined' ? ` htmlColor={'${data.htmlColor as string}'}` : '' - } />}` + ? `icon={${getIconSnippetWithProps(data.icon as string, { + fontSize: 'inherit', + htmlColor: data.htmlColor as string, + })}}` : '' } />`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); diff --git a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx index 73f1d4bcb..fa346f5fd 100644 --- a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx @@ -30,6 +30,7 @@ import Toolbar from '@mui/material/Toolbar'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import { sharedPropsConfig } from './sharedPropsConfig'; +import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -128,7 +129,10 @@ const inputConfig: InputConfig = [ ]; const DrawerPreview: PreviewComponent = ({ data }) => { - const { variant, open, ...rest } = data as unknown as DrawerProps; + const { variant, open, collapseIcon, expandIcon, ...rest } = data as unknown as Omit< + DrawerProps, + 'collapseIcon' | 'expandIcon' + > & { collapseIcon: string; expandIcon: string }; const { updateData } = usePlaygroundValues(); const containerRef = useRef(null); const persistent = variant === 'persistent'; @@ -193,13 +197,17 @@ const DrawerPreview: PreviewComponent = ({ data }) => { open={open} noLayout variant={variant} - disablePortal={temporary} + collapseIcon={getIcon(collapseIcon)} + expandIcon={getIcon(expandIcon)} + ModalProps={{ + disablePortal: temporary, + slotProps: { + backdrop: { sx: { position: 'absolute' } }, + }, + }} SlideProps={{ container: containerRef.current, }} - slotProps={{ - backdrop: { sx: { position: 'absolute' } }, - }} sx={{ position: 'absolute', minWidth: '100%', @@ -287,7 +295,9 @@ const DrawerPreview: PreviewComponent = ({ data }) => { const generateSnippet: CodeSnippetFunction = (data) => ` diff --git a/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts b/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts index 93457b0ca..e4ec2d3de 100644 --- a/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts +++ b/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts @@ -1,3 +1,155 @@ import { InputConfig } from '@brightlayer-ui/react-doc-components'; +import * as Colors from '@brightlayer-ui/colors'; -export const sharedPropsConfig: InputConfig = []; +export const sharedPropsConfig: InputConfig = [ + // Shared Props + { + id: 'activeItemBackgroundColor', + type: 'color', + typeLabel: 'string', + description: `Background color for the active item`, + required: false, + initialValue: Colors.blue[50], + category: 'Shared Props', + }, + { + id: 'activeItemBackgroundShape', + type: 'select', + typeLabel: `'round' | 'square'`, + description: 'Shape of the active item background highlight', + initialValue: 'square', + defaultValue: 'square', + options: ['square', 'round'], + required: false, + category: 'Shared Props', + }, + { + id: 'activeItemFontColor', + type: 'color', + typeLabel: 'string', + description: `Font color for the active item`, + required: false, + initialValue: Colors.blue[500], + category: 'Shared Props', + }, + { + id: 'activeItemIconColor', + type: 'color', + typeLabel: 'string', + description: `Icon color for the active item`, + required: false, + initialValue: Colors.blue[500], + category: 'Shared Props', + }, + { + id: 'chevron', + type: 'boolean', + description: 'Whether to have chevron for menu items', + required: false, + initialValue: false, + defaultValue: false, + category: 'Shared Props', + }, + { + id: 'chevronColor', + type: 'color', + typeLabel: 'string', + description: `Color override for the chevron icon`, + required: false, + initialValue: Colors.gray[500], + category: 'Shared Props', + }, + { + id: 'collapseIcon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'Icon used to collapse drawer items', + initialValue: 'undefined', + options: ['undefined', '', ''], + required: false, + category: 'Shared Props', + }, + { + id: 'disableActiveItemParentStyles', + type: 'boolean', + description: 'If true, NavItems will not have a bold title when a child NavItem is selected', + required: false, + initialValue: false, + defaultValue: false, + category: 'Shared Props', + }, + { + id: 'divider', + type: 'boolean', + description: 'Whether to show a line between non-nested items', + required: false, + initialValue: false, + defaultValue: false, + category: 'Shared Props', + }, + { + id: 'expandIcon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'Icon used to collapse drawer items', + initialValue: 'undefined', + options: ['undefined', '', ''], + required: false, + category: 'Shared Props', + }, + + { + id: 'hidePadding', + type: 'boolean', + description: 'Whether to hide the paddings reserved for menu item icons', + required: false, + initialValue: false, + defaultValue: false, + category: 'Shared Props', + }, + { + id: 'itemFontColor', + type: 'color', + typeLabel: 'string', + description: `Color for the item text`, + required: false, + initialValue: Colors.black[500], + category: 'Shared Props', + }, + { + id: 'itemIconColor', + type: 'color', + typeLabel: 'string', + description: `Color for the item icon`, + required: false, + initialValue: Colors.black[500], + category: 'Shared Props', + }, + { + id: 'nestedBackgroundColor', + type: 'color', + typeLabel: 'string', + description: `Background color for nested menu items`, + required: false, + initialValue: Colors.white[200], + category: 'Shared Props', + }, + { + id: 'nestedDivider', + type: 'boolean', + description: 'Whether to show a line between nested menu items', + required: false, + initialValue: false, + defaultValue: false, + category: 'Shared Props', + }, + { + id: 'ripple', + type: 'boolean', + description: 'Whether to apply material ripple effect to items on click', + required: false, + initialValue: false, + defaultValue: false, + category: 'Shared Props', + }, +]; diff --git a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx index f357188b8..f34f9aac0 100644 --- a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx @@ -18,13 +18,11 @@ import { DrawerNavItem, } from '@brightlayer-ui/react-components'; import * as Colors from '@brightlayer-ui/colors'; -import Menu from '@mui/icons-material/Menu'; import NotificationsActive from '@mui/icons-material/NotificationsActive'; import Person from '@mui/icons-material/Person'; import Today from '@mui/icons-material/Today'; import Accessibility from '@mui/icons-material/Accessibility'; -import ArrowBack from '@mui/icons-material/ArrowBack'; -import { getImage } from '../../../shared'; +import { getIcon, getIconSnippetWithProps, getImage } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -118,17 +116,6 @@ const inputConfig: InputConfig = [ const DrawerHeaderPreview: PreviewComponent = ({ data }) => { const { icon, backgroundImage, ...rest } = data as unknown as DrawerHeaderProps; - const getIcon = (value: string): JSX.Element | undefined => { - switch (value) { - case '': - return ; - case '': - return ; - case 'undefined': - default: - return undefined; - } - }; return ( @@ -157,7 +144,7 @@ const DrawerHeaderPreview: PreviewComponent = ({ data }) => { const generateSnippet: CodeSnippetFunction = (data) => ``.replace(/^\s*$(?:\r\n?|\n)/gm, ''); diff --git a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx index 0f5c841ba..7fe881689 100644 --- a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx @@ -10,8 +10,9 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { EmptyState, EmptyStateProps } from '@brightlayer-ui/react-components'; -import { Add, Devices, Router, SensorsOff } from '@mui/icons-material'; +import Add from '@mui/icons-material/Add'; import Button from '@mui/material/Button'; +import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -61,22 +62,11 @@ const inputConfig: InputConfig = [ const EmptyStatePreview: PreviewComponent = ({ data }) => { const { icon, showAction, ...rest } = data as unknown as EmptyStateProps & { showAction?: boolean }; - const getIcon = (value: string): JSX.Element | undefined => { - switch (value) { - case '': - return ; - case '': - return ; - case '': - default: - return ; - } - }; return ( }> @@ -94,7 +84,7 @@ const generateSnippet: CodeSnippetFunction = (data) => ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'showAction'] })} ${ data.icon && data.icon !== 'undefined' - ? `icon={${(data.icon as string).replace('/>', '')}fontSize={'inherit'} />}` + ? `icon={${getIconSnippetWithProps(data.icon as string, { fontSize: 'inherit' })}}` : '' } ${ diff --git a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx index 678bc018a..ca60af6e9 100644 --- a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx @@ -11,9 +11,7 @@ import { import Stack from '@mui/material/Stack'; import { ChannelValueProps, Hero, HeroProps } from '@brightlayer-ui/react-components'; import * as Colors from '@brightlayer-ui/colors'; -import { Fan, FanCircled } from '@brightlayer-ui/icons-mui'; -import TrendingUp from '@mui/icons-material/TrendingUp'; -import TrendingDown from '@mui/icons-material/TrendingDown'; +import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -118,30 +116,19 @@ const HeroPreview: PreviewComponent = ({ data }) => { 'value' | 'units' >; - const getIcon = (value: string, preserveColor = true): JSX.Element | undefined => { - switch (value) { - case '': - return ; - case '': - return ; - case '': - return ; - case '': - return ; - default: - return undefined; - } - }; return ( @@ -157,9 +144,10 @@ const generateSnippet: CodeSnippetFunction = (data) => })} ${ data.icon && data.icon !== 'undefined' - ? `icon={${(data.icon as string).replace('/>', '')}fontSize={'inherit'}${ - data.htmlColor && data.htmlColor !== 'undefined' ? ` htmlColor={'${data.htmlColor as string}'}` : '' - } />}` + ? `icon={${getIconSnippetWithProps(data.icon as string, { + fontSize: 'inherit', + htmlColor: data.htmlColor as string, + })}` : '' } ChannelValueProps={{ @@ -170,7 +158,7 @@ const generateSnippet: CodeSnippetFunction = (data) => })} ${ data.valueIcon && data.valueIcon !== 'undefined' - ? `icon: ${(data.valueIcon as string).replace('/>', '')}fontSize={'inherit'} />,` + ? `icon: ${getIconSnippetWithProps(data.valueIcon as string, { fontSize: 'inherit' })},` : '' } }} diff --git a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx index b6b54d083..16c5becd9 100644 --- a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx @@ -11,7 +11,7 @@ import { import Stack from '@mui/material/Stack'; import { InfoListItem, InfoListItemProps } from '@brightlayer-ui/react-components'; import * as Colors from '@brightlayer-ui/colors'; -import Devices from '@mui/icons-material/Devices'; +import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -222,15 +222,6 @@ const InfoListItemPreview: PreviewComponent = ({ data }) => { clickable: boolean; }; - const getIcon = (value: string): JSX.Element | undefined => { - switch (value) { - case '': - return ; - case 'undefined': - default: - return undefined; - } - }; return ( { const generateSnippet: CodeSnippetFunction = (data) => ` {}}` : ``} />`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx index 1730f6beb..ea4d34043 100644 --- a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx @@ -10,8 +10,7 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { ToolbarMenu, ToolbarMenuProps } from '@brightlayer-ui/react-components'; -import Home from '@mui/icons-material/Home'; -import Place from '@mui/icons-material/Place'; +import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -44,17 +43,6 @@ const inputConfig: InputConfig = [ const ToolbarMenuPreview: PreviewComponent = ({ data }) => { const { icon, ...rest } = data as unknown as ToolbarMenuProps; - const getIcon = (value: string): JSX.Element | undefined => { - switch (value) { - case '': - return ; - case '': - return ; - case 'undefined': - default: - return undefined; - } - }; return ( { const generateSnippet: CodeSnippetFunction = (data) => `', ''], - propType: 'JSX.Element', - helperText: 'Icon used to collapse drawer', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'disableActiveItemParentStyles', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'If true, NavItems will not have a bold title when a child NavItem is selected', - required: false, - defaultValue: false, - }, - { - propName: 'divider', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to show a line between non-nested items', - required: false, - defaultValue: false, - }, - { - propName: 'expandIcon', - inputType: 'select', - inputValue: 'undefined', - options: ['undefined', '', ''], - propType: 'JSX.Element', - helperText: 'Icon used to expand drawer', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'hidePadding', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to hide the paddings reserved for menu item icons', - required: false, - defaultValue: false, - }, - { - propName: 'itemFontColor', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'The color used for the item text', - required: false, - }, - { - propName: 'itemIconColor', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'The color used for the icon', - required: false, - }, - { - propName: 'nestedBackgroundColor', - inputType: 'colorPicker', - inputValue: Colors.white[200], - propType: 'string', - helperText: 'Background color for nested menu items', - required: false, - }, - { - propName: 'nestedDivider', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to show a line between nested menu items', - required: false, - defaultValue: false, - }, - { - propName: 'ripple', - inputType: 'boolean', - inputValue: true, - propType: 'boolean', - helperText: 'Whether to apply material ripple effect to items on click', - required: false, - defaultValue: true, - }, -]; +export const sharedPropsConfig: PropsType[] = []; export default sharedPropsConfig; diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index adac663f2..f9609e65f 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -12,13 +12,14 @@ import Place from '@mui/icons-material/Place'; import PinDrop from '@mui/icons-material/PinDrop'; import Remove from '@mui/icons-material/Remove'; import RouterIcon from '@mui/icons-material/Router'; -import SensorsOffIcon from '@mui/icons-material/SensorsOff'; +import SensorsOff from '@mui/icons-material/SensorsOff'; import TrendingUp from '@mui/icons-material/TrendingUp'; import TrendingDown from '@mui/icons-material/TrendingDown'; import { RootState } from '../redux/store'; import { ComponentType, PropsType } from '../__types__'; import { SvgIconProps } from '@mui/material/SvgIcon'; import Box from '@mui/material/Box'; +import ArrowBack from '@mui/icons-material/ArrowBack'; const topologyBgImage = require('../shared/images/topology_40.png'); const farmBgImage = require('../shared/images/farm.jpg'); @@ -64,9 +65,11 @@ export const getHash = (str: string): string => export const getIcon = (icon: string, iconProps?: SvgIconProps): JSX.Element | undefined => { switch (icon) { case '': - return ; + return React.createElement(Add, iconProps); case '': - return ; + return React.createElement(AddAPhoto, iconProps); + case '': + return React.createElement(ArrowBack, iconProps); case '': return React.createElement(Device, iconProps); case '': @@ -76,21 +79,21 @@ export const getIcon = (icon: string, iconProps?: SvgIconProps): JSX.Element | u case '': return React.createElement(FanCircled, iconProps); case '': - return ; + return React.createElement(FitnessCenter, iconProps); case '': - return ; + return React.createElement(Home, iconProps); case '': - return ; + return React.createElement(Menu, iconProps); case '': - return ; + return React.createElement(Place, iconProps); case '': - return ; + return React.createElement(PinDrop, iconProps); case '': - return ; + return React.createElement(Remove, iconProps); case '': return React.createElement(RouterIcon, iconProps); - case '': - return React.createElement(SensorsOffIcon, iconProps); + case '': + return React.createElement(SensorsOff, iconProps); case '': return React.createElement(TrendingUp, iconProps); case '': @@ -137,15 +140,18 @@ export const getImage = (image: string): string | undefined => { } }; -const iterateIconProps = (iconProps: any): string => { +const iterateIconProps = (iconProps?: SvgIconProps): string => { + if (!iconProps) return ''; let str = ''; for (const prop in iconProps) { - str = `${str}` + `${prop}="${iconProps[prop]}" `; + if (iconProps[prop as keyof SvgIconProps]) { + str = `${str}` + `${prop}={'${iconProps[prop as keyof SvgIconProps] as string}'} `; + } } return str; }; -export const getIconWithProp = (icon: string, iconProps: SvgIconProps): string => { +export const getIconSnippetWithProps = (icon: string, iconProps?: SvgIconProps): string => { const index = icon.lastIndexOf('/>'); const result = icon.slice(0, index) + iterateIconProps(iconProps) + icon.slice(index); return result; From 125e6bfa9d38984495b2982b627634c4b15d3dc3 Mon Sep 17 00:00:00 2001 From: joebochill Date: Wed, 13 Dec 2023 15:16:18 -0500 Subject: [PATCH 20/26] Update some style issues --- docs/package.json | 2 +- .../componentDocs/AppBar/playground/PlaygroundPage.tsx | 9 +++++++-- docs/src/index.tsx | 2 +- docs/yarn.lock | 8 ++++---- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/docs/package.json b/docs/package.json index cbf185152..3fb062455 100644 --- a/docs/package.json +++ b/docs/package.json @@ -39,7 +39,7 @@ "@brightlayer-ui/icons": "^1.11.0", "@brightlayer-ui/icons-mui": "^3.4.0", "@brightlayer-ui/react-components": "^6.2.0", - "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.6", + "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.7", "@brightlayer-ui/react-themes": "^7.1.0", "@craco/craco": "^7.0.0", "@emotion/react": "^11.10.8", diff --git a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx index b3b780d2e..705ef834a 100644 --- a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx @@ -123,7 +123,10 @@ const AppBarPreview: PreviewComponent = ({ data }) => { Title - + {getBodyFiller()} @@ -143,7 +146,9 @@ const generateSnippet: CodeSnippetFunction = (data) => Title -`.replace(/^\s*$(?:\r\n?|\n)/gm, ''); +` + .replace(/^\s*$(?:\r\n?|\n)/gm, '') + .replace(/^/, ''); export const AppBarPlaygroundComponent = (): JSX.Element => ( { const MemoThemedApp = React.useCallback( () => ( + @@ -77,7 +78,6 @@ root.render( - diff --git a/docs/yarn.lock b/docs/yarn.lock index 87b876479..40631287c 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1236,10 +1236,10 @@ "@seznam/compose-react-refs" "^1.0.6" color "^4.2.3" -"@brightlayer-ui/react-doc-components@^1.0.0-alpha.6": - version "1.0.0-alpha.6" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.6.tgz#7ce7f1b222eaff4949a5afa27a923e24450f4dc7" - integrity sha512-3zFLsQmVTGCJzHwh8WnKWuebwxaXdNT6bKgb9nOmK5soQYfaKsfc8V+YlXANAtoUidKzYq+1U9U4sTqTuhiCaA== +"@brightlayer-ui/react-doc-components@^1.0.0-alpha.7": + version "1.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.7.tgz#d66b0d108e7f6157c531b2a950b036c25544bc89" + integrity sha512-V4jBR5ApmEghNdS1fIPts4I+1Qk84pItE5BhbWo0s0iNjNuILTn/wzKhNJDY/IEtcrz9XDpGfwhKNyGHRjIBug== dependencies: color "^4.0.0" lodash.debounce "^4.0.8" From 14544cc85b1304b6700bb6a7376b7e66603c2830 Mon Sep 17 00:00:00 2001 From: joebochill Date: Thu, 14 Dec 2023 13:56:20 -0500 Subject: [PATCH 21/26] Update DrawerNavGroup to use playground library --- docs/package.json | 14 +- .../Drawer/playground/sharedPropsConfig.ts | 15 +- .../playground/PlaygroundPage.tsx | 3 +- .../playground/PlaygroundPage.tsx | 5 +- .../playground/DrawerNavGroupConfig.tsx | 37 --- .../playground/PlaygroundPage.tsx | 150 +++++++++- .../playground/PreviewComponent.tsx | 188 ------------- .../playground/PropsPlayground.tsx | 12 - .../DrawerNavGroup/playground/index.tsx | 1 - .../Hero/playground/PlaygroundPage.tsx | 5 +- .../playground/PlaygroundPage.tsx | 11 +- .../ListItemTag/playground/PlaygroundPage.tsx | 5 +- .../ScoreCard/playground/PlaygroundPage.tsx | 4 +- docs/src/index.tsx | 2 +- docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - docs/yarn.lock | 257 +++++++++--------- 18 files changed, 310 insertions(+), 407 deletions(-) delete mode 100644 docs/src/componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig.tsx delete mode 100644 docs/src/componentDocs/DrawerNavGroup/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/DrawerNavGroup/playground/PropsPlayground.tsx diff --git a/docs/package.json b/docs/package.json index 3fb062455..ec9c838ec 100644 --- a/docs/package.json +++ b/docs/package.json @@ -36,11 +36,11 @@ }, "dependencies": { "@brightlayer-ui/colors": "^3.1.1", - "@brightlayer-ui/icons": "^1.11.0", - "@brightlayer-ui/icons-mui": "^3.4.0", - "@brightlayer-ui/react-components": "^6.2.0", - "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.7", - "@brightlayer-ui/react-themes": "^7.1.0", + "@brightlayer-ui/icons": "^2.2.0", + "@brightlayer-ui/icons-mui": "^3.5.0", + "@brightlayer-ui/react-components": "^6.3.0", + "@brightlayer-ui/react-doc-components": "^1.0.0-alpha.8", + "@brightlayer-ui/react-themes": "^7.2.0", "@craco/craco": "^7.0.0", "@emotion/react": "^11.10.8", "@emotion/styled": "^11.10.5", @@ -49,8 +49,8 @@ "@mdx-js/loader": "^2.2.1", "@mdx-js/mdx": "^2.1.5", "@mdx-js/react": "^2.1.5", - "@mui/icons-material": "^5.11.0", - "@mui/material": "^5.14.4", + "@mui/icons-material": "^5.15.0", + "@mui/material": "^5.15.0", "@reduxjs/toolkit": "^1.8.2", "@types/prismjs": "^1.26.1", "lodash.debounce": "^4.0.8", diff --git a/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts b/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts index e4ec2d3de..7ea86b913 100644 --- a/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts +++ b/docs/src/componentDocs/Drawer/playground/sharedPropsConfig.ts @@ -1,5 +1,4 @@ import { InputConfig } from '@brightlayer-ui/react-doc-components'; -import * as Colors from '@brightlayer-ui/colors'; export const sharedPropsConfig: InputConfig = [ // Shared Props @@ -9,7 +8,7 @@ export const sharedPropsConfig: InputConfig = [ typeLabel: 'string', description: `Background color for the active item`, required: false, - initialValue: Colors.blue[50], + initialValue: '', category: 'Shared Props', }, { @@ -29,7 +28,7 @@ export const sharedPropsConfig: InputConfig = [ typeLabel: 'string', description: `Font color for the active item`, required: false, - initialValue: Colors.blue[500], + initialValue: '', category: 'Shared Props', }, { @@ -38,7 +37,7 @@ export const sharedPropsConfig: InputConfig = [ typeLabel: 'string', description: `Icon color for the active item`, required: false, - initialValue: Colors.blue[500], + initialValue: '', category: 'Shared Props', }, { @@ -56,7 +55,7 @@ export const sharedPropsConfig: InputConfig = [ typeLabel: 'string', description: `Color override for the chevron icon`, required: false, - initialValue: Colors.gray[500], + initialValue: '', category: 'Shared Props', }, { @@ -113,7 +112,7 @@ export const sharedPropsConfig: InputConfig = [ typeLabel: 'string', description: `Color for the item text`, required: false, - initialValue: Colors.black[500], + initialValue: '', category: 'Shared Props', }, { @@ -122,7 +121,7 @@ export const sharedPropsConfig: InputConfig = [ typeLabel: 'string', description: `Color for the item icon`, required: false, - initialValue: Colors.black[500], + initialValue: '', category: 'Shared Props', }, { @@ -131,7 +130,7 @@ export const sharedPropsConfig: InputConfig = [ typeLabel: 'string', description: `Background color for nested menu items`, required: false, - initialValue: Colors.white[200], + initialValue: '', category: 'Shared Props', }, { diff --git a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx index 324faf50a..2633a572f 100644 --- a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx @@ -23,7 +23,6 @@ import NotificationsActive from '@mui/icons-material/NotificationsActive'; import Person from '@mui/icons-material/Person'; import Today from '@mui/icons-material/Today'; import Accessibility from '@mui/icons-material/Accessibility'; -import * as Colors from '@brightlayer-ui/colors'; const inputConfig: InputConfig = [ // Required Props @@ -36,7 +35,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color used for the background', required: false, - initialValue: Colors.white[50], + initialValue: '', category: 'Optional Props', }, { diff --git a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx index f34f9aac0..b4a31b928 100644 --- a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx @@ -17,7 +17,6 @@ import { DrawerNavGroup, DrawerNavItem, } from '@brightlayer-ui/react-components'; -import * as Colors from '@brightlayer-ui/colors'; import NotificationsActive from '@mui/icons-material/NotificationsActive'; import Person from '@mui/icons-material/Person'; import Today from '@mui/icons-material/Today'; @@ -35,7 +34,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color used for the background', required: false, - initialValue: Colors.blue[500], + initialValue: '', category: 'Optional Props', }, { @@ -77,7 +76,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color of the text elements', required: false, - initialValue: Colors.white[50], + initialValue: '', category: 'Optional Props', }, { diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig.tsx deleted file mode 100644 index eca31c04c..000000000 --- a/docs/src/componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; -import sharedPropsConfig from '../../../shared/data/SharedPropsConfig'; - -export const drawerNavGroupConfig: ComponentType = { - componentName: 'Drawer Nav Group', - props: [ - { - propName: 'title', - inputType: 'string', - inputValue: 'Brightlayer UI Drawer', - propType: 'string', - helperText: 'Text to display in the group header', - required: false, - }, - { - propName: 'titleColor', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'Color used for the title text', - required: false, - }, - { - propName: 'titleDivider', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Divider for the title', - required: false, - defaultValue: true, - }, - ], - sharedProps: sharedPropsConfig, -}; - -export default drawerNavGroupConfig; diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx index d5bcb1bc6..15d16b694 100644 --- a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx @@ -1,17 +1,153 @@ -import React from 'react'; +import React, { useState } from 'react'; import Box from '@mui/material/Box'; -import DrawerNavGroupPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { + Drawer, + DrawerBody, + DrawerHeader, + DrawerNavGroup, + NavItem, + DrawerNavGroupProps, +} from '@brightlayer-ui/react-components'; +import * as Colors from '@brightlayer-ui/colors'; +import Menu from '@mui/icons-material/Menu'; +import Dashboard from '@mui/icons-material/Dashboard'; +import Toc from '@mui/icons-material/Toc'; +import Devices from '@mui/icons-material/Devices'; +import AirportShuttle from '@mui/icons-material/AirportShuttle'; +import { sharedPropsConfig } from '../../Drawer/playground/sharedPropsConfig'; +import { getIcon, getIconSnippetWithProps } from '../../../shared'; + +const inputConfig: InputConfig = [ + // Required Props + // NONE + + // Optional Props + { + id: 'title', + type: 'string', + typeLabel: 'string', + description: 'Text to display in the group header', + required: false, + initialValue: 'Brightlayer UI Drawer', + category: 'Optional Props', + }, + { + id: 'titleColor', + type: 'color', + typeLabel: 'string', + description: `Color used for the title text`, + required: false, + initialValue: '', + category: 'Optional Props', + }, + { + id: 'titleDivider', + type: 'boolean', + description: 'Whether to show a divider line below the title', + required: false, + initialValue: true, + defaultValue: true, + category: 'Optional Props', + }, + + // Shared Props + ...sharedPropsConfig, + + // Other Configuration + // NONE +]; + +const DrawerNavGroupPreview: PreviewComponent = ({ data }) => { + const { expandIcon, collapseIcon, ...rest } = data as unknown as Omit< + DrawerNavGroupProps, + 'collapseIcon' | 'expandIcon' + > & { collapseIcon: string; expandIcon: string }; + const [activeItem, setActiveItem] = useState('Overview'); + + const navGroupItems: NavItem[] = [ + { + icon: , + itemID: 'Overview', + title: 'Overview', + onClick: (): void => setActiveItem('Overview'), + items: [ + { + itemID: 'Monthly Report', + title: 'Monthly Report', + onClick: (): void => setActiveItem('Monthly Report'), + }, + { + itemID: 'Annual Report', + title: 'Annual Report', + onClick: (): void => setActiveItem('Annual Report'), + }, + ], + }, + { + icon: , + itemID: 'Timeline', + title: 'Timeline', + onClick: (): void => setActiveItem('Timeline'), + }, + { + icon: , + title: 'Devices', + itemID: 'Devices', + subtitle: '5 new warnings', + statusColor: Colors.yellow[500], + onClick: (): void => setActiveItem('Devices'), + }, + { + icon: , + itemID: 'Schedule', + title: 'Schedule', + onClick: (): void => setActiveItem('Schedule'), + }, + ]; + + return ( + + + + } /> + + + + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ``.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const DrawerNavGroupPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/PreviewComponent.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/PreviewComponent.tsx deleted file mode 100644 index 8b9517dea..000000000 --- a/docs/src/componentDocs/DrawerNavGroup/playground/PreviewComponent.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import React, { useState } from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { - Drawer, - DrawerBody, - DrawerHeader, - DrawerNavGroup, - DrawerNavItem, -} from '@brightlayer-ui/react-components/core/Drawer'; -import { createProps, getIcon, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { Devices, AirportShuttle, Menu, Dashboard, Toc } from '@mui/icons-material'; - -import * as Colors from '@brightlayer-ui/colors'; - -export const PreviewComponent = (): JSX.Element => { - const drawerNavGroupJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerNavGroupComponent); - const [drawerActiveItem, setDrawerActiveItem] = useState('Overview'); - - const drawerNavGroupProps = createProps(drawerNavGroupJson.props as PropsType[]); - const drawerNavGroupSharedProps = createProps(drawerNavGroupJson.sharedProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any, groupType?: string): string => - hideDefaultPropsFromSnippet(drawerNavGroupJson, propName, currentValue, groupType); - - const generateCodeSnippet = (): string => { - const jsx = ` - } - title={"Header Title"} - /> - - - - } - itemID={"Overview"} - title={"Overview"} - onClick={(): void => setDrawerActiveItem("Overview")} - > - setDrawerActiveItem("Monthly Report")} - /> - setDrawerActiveItem("Annual Report")} - /> - - } - itemID={"Timeline"} - title={"Timeline"} - onClick={(): void => setDrawerActiveItem("Timeline")} - /> - } - title={"Devices"} - itemID={"Devices"} - subtitle={"5 new warnings"} - statusColor={Colors.yellow[500]} - onClick={(): void => setDrawerActiveItem("Devices")} - /> - } - itemID={"Schedule"} - title={"Schedule"} - onClick={(): void => setDrawerActiveItem("Schedule")} - /> - - -`; - return removeEmptyLines(jsx); - }; - - return ( - - } title={'Header Title'} /> - - - - } - itemID={'Overview'} - title={'Overview'} - onClick={(): void => setDrawerActiveItem('Overview')} - > - setDrawerActiveItem('Monthly Report')} - /> - setDrawerActiveItem('Annual Report')} - /> - - } - itemID={'Timeline'} - title={'Timeline'} - onClick={(): void => setDrawerActiveItem('Timeline')} - /> - } - title={'Devices'} - itemID={'Devices'} - subtitle={'5 new warnings'} - statusColor={Colors.yellow[500]} - onClick={(): void => setDrawerActiveItem('Devices')} - /> - } - itemID={'Schedule'} - title={'Schedule'} - onClick={(): void => setDrawerActiveItem('Schedule')} - /> - - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/PropsPlayground.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/PropsPlayground.tsx deleted file mode 100644 index 06000b436..000000000 --- a/docs/src/componentDocs/DrawerNavGroup/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const drawerNavGroupJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerNavGroupComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/index.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/DrawerNavGroup/playground/index.tsx +++ b/docs/src/componentDocs/DrawerNavGroup/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx index ca60af6e9..440e1d74d 100644 --- a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx @@ -10,7 +10,6 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { ChannelValueProps, Hero, HeroProps } from '@brightlayer-ui/react-components'; -import * as Colors from '@brightlayer-ui/colors'; import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ @@ -42,7 +41,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color used behind the primary icon', required: false, - initialValue: Colors.blue[500], + initialValue: '', defaultValue: 'transparent', category: 'Optional Props', }, @@ -98,7 +97,7 @@ const inputConfig: InputConfig = [ type: 'color', description: 'The color applied to the primary icon', required: false, - initialValue: Colors.white[50], + initialValue: '', category: 'Other Configuration', }, ]; diff --git a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx index 16c5becd9..dc2370ca6 100644 --- a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx @@ -10,7 +10,6 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { InfoListItem, InfoListItemProps } from '@brightlayer-ui/react-components'; -import * as Colors from '@brightlayer-ui/colors'; import { getIcon, getIconSnippetWithProps } from '../../../shared'; const inputConfig: InputConfig = [ @@ -41,7 +40,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color used for the background', required: false, - initialValue: Colors.white[50], + initialValue: '', category: 'Optional Props', }, { @@ -59,7 +58,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'Color override for the chevron icon', required: false, - initialValue: Colors.gray[500], + initialValue: '', category: 'Optional Props', }, { @@ -97,7 +96,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'Main text color', required: false, - initialValue: Colors.black[500], + initialValue: '', category: 'Optional Props', }, { @@ -136,7 +135,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color used for the icon', required: false, - initialValue: Colors.black[500], + initialValue: '', category: 'Optional Props', }, { @@ -163,7 +162,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'Status stripe and icon color', required: false, - initialValue: Colors.blue[500], + initialValue: '', category: 'Optional Props', }, { diff --git a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx index 268936415..349a66678 100644 --- a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx @@ -10,7 +10,6 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { ListItemTag, ListItemTagProps } from '@brightlayer-ui/react-components'; -import * as Colors from '@brightlayer-ui/colors'; const inputConfig: InputConfig = [ // Required Props @@ -31,7 +30,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'Color of the label background', required: false, - initialValue: Colors.red[500], + initialValue: '', category: 'Optional Props', }, { @@ -40,7 +39,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'Main text color', required: false, - initialValue: Colors.white[50], + initialValue: '', category: 'Optional Props', }, diff --git a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx index 30c56f9a9..107e96e1f 100644 --- a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx @@ -78,7 +78,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color of the background background', required: false, - initialValue: Colors.blue[500], + initialValue: '', category: 'Optional Props', }, { @@ -87,7 +87,7 @@ const inputConfig: InputConfig = [ typeLabel: 'string', description: 'The color of the header text', required: false, - initialValue: Colors.white[50], + initialValue: '', defaultValue: '#ffffff', category: 'Optional Props', }, diff --git a/docs/src/index.tsx b/docs/src/index.tsx index 8013cbd49..58bddabd7 100644 --- a/docs/src/index.tsx +++ b/docs/src/index.tsx @@ -39,7 +39,7 @@ if (process.env.REACT_APP_GAID) { } // Brightlayer UI Icon font -require('@brightlayer-ui/icons/iconfont/BrightlayerUIIcons.css'); +require('@brightlayer-ui/icons/BrightlayerUIIcons.css'); const container = document.getElementById('root'); if (!container) throw new Error('Root Element was not found in the DOM'); diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 802a7a199..0a1674323 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,18 +1,15 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import drawerNavGroupConfig from '../componentDocs/DrawerNavGroup/playground/DrawerNavGroupConfig'; import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; import { getComponentState } from '../shared/utilities'; import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { - drawerNavGroupComponent: ComponentType; drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; }; const initialState: ComponentState = { - drawerNavGroupComponent: drawerNavGroupConfig, drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, }; diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 5a619eca2..1f65c8744 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -163,7 +163,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('drawer-header') || location.pathname.includes('drawer-subheader') || location.pathname.includes('drawer-footer') || - location.pathname.includes('drawer/') + location.pathname.includes('drawer/') || + location.pathname.includes('drawer-nav-group') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index f9609e65f..2590ad263 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -117,8 +117,6 @@ export const createProps = (props: PropsType[]): any => { export const getComponentState = (componentName: string, state: RootState['componentsPropsState']): ComponentType => { switch (componentName) { - case 'Drawer Nav Group': - return state.drawerNavGroupComponent; case 'Drawer Nav Item': return state.drawerNavItemComponent; case 'Drawer Rail Item': diff --git a/docs/yarn.lock b/docs/yarn.lock index 40631287c..a88ee4bf2 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1122,13 +1122,20 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.10" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682" integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ== dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.23.5": + version "7.23.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d" + integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.16.7", "@babel/template@^7.3.3": version "7.16.7" resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz" @@ -1211,48 +1218,48 @@ optionalDependencies: eslint-plugin-react "^7.28.0" -"@brightlayer-ui/icons-mui@^3.4.0": - version "3.4.0" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/icons-mui/-/icons-mui-3.4.0.tgz#b5df32f89d329f9a5d2d9b01c84a645e997f3c1c" - integrity sha512-MJWXLEjnjsSeXUtpZhqsWDalzZD+L4J4whw0ErYJ/pfkcC37w3JG07pTyxFJY+Lm1v8TDjZQoaKTT3NjYOE6tA== +"@brightlayer-ui/icons-mui@^3.5.0": + version "3.5.0" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/icons-mui/-/icons-mui-3.5.0.tgz#f2eaab9328180aab28b8b6157bd8bdfb72783d60" + integrity sha512-mGN7f+d6Ia40JaQ0faqFMRi5sWWLOmquOEzR26n3jyz5Qhs4Ufs6Nnq6DZGlyABz2hDq2eSQf9cZlgauu4tBxQ== -"@brightlayer-ui/icons@^1.11.0": - version "1.11.0" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/icons/-/icons-1.11.0.tgz#412baae591b9c5fc87dda7b3cdd278dc2671d667" - integrity sha512-2pHKJY7Xpao6BQ1ZIRcXxpTFuhSlalOJKw2//D05mNSzIFTZmBCv+6OVtAE45NxbLNIDP/To0/Cykm2mA9I1Vw== +"@brightlayer-ui/icons@^2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/icons/-/icons-2.2.0.tgz#758c0de5577a48dce00f72573bd36a3e66d231f4" + integrity sha512-H2njPi5xupmj4aEfzbZkLT+J5D/tOdBGatvoFNbEVPsCGBxgAahinGdsvD4Jbpj8/tK/c9LYA6vtL0Tn9rt6Pw== "@brightlayer-ui/prettier-config@^1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@brightlayer-ui/prettier-config/-/prettier-config-1.0.3.tgz#e40a7ae7435c6fd5118acbf249080e0aa81e93af" integrity sha512-EYm3+V7Qd+oYEF+8FadsXAZqXryEHHbGnrV1BMp9selhABjceqUqXPVE4Sn3SKWQdBNJ3En2A3EzgrzRbvRTaw== -"@brightlayer-ui/react-components@^6.2.0": - version "6.2.0" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-components/-/react-components-6.2.0.tgz#07e7a28a9459fd84099cfb2b64bc2188ae3e9a12" - integrity sha512-/9HcgkUwKbDKgI3aI2KA22lym0x9AT+w5/M6/ket6j6oaqPCarMy0IRbAwaSO7as+Dcvp+FrTZjrDi0NYXyfqQ== +"@brightlayer-ui/react-components@^6.3.0": + version "6.3.0" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-components/-/react-components-6.3.0.tgz#59d03ac9f0dbbb9b56f3e639068d6463c8c70738" + integrity sha512-EQc2PfQ/jxMUzppA4Wykxp1jfN6VCvJveAGvGluCbuXf6tPrFeeAGsUfunA/IcqUnD9whidPw+E7iGaI1+dhTQ== dependencies: "@brightlayer-ui/colors" "^3.1.1" "@emotion/css" "^11.10.5" "@seznam/compose-react-refs" "^1.0.6" color "^4.2.3" -"@brightlayer-ui/react-doc-components@^1.0.0-alpha.7": - version "1.0.0-alpha.7" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.7.tgz#d66b0d108e7f6157c531b2a950b036c25544bc89" - integrity sha512-V4jBR5ApmEghNdS1fIPts4I+1Qk84pItE5BhbWo0s0iNjNuILTn/wzKhNJDY/IEtcrz9XDpGfwhKNyGHRjIBug== +"@brightlayer-ui/react-doc-components@^1.0.0-alpha.8": + version "1.0.0-alpha.8" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-doc-components/-/react-doc-components-1.0.0-alpha.8.tgz#43858a78a675d335d92ddcf41c0d76bff24a05e8" + integrity sha512-IRUpI6thFiL6LdzRt/f0oF18Rc88mCp64J0J3/RbNnsqizwUmKFbDzYaLbwj2Pjv/Dijfjkl9iWPpnbLBZf6Lw== dependencies: color "^4.0.0" lodash.debounce "^4.0.8" lodash.groupby "^4.6.0" -"@brightlayer-ui/react-themes@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-themes/-/react-themes-7.1.0.tgz#09519522ab192cdb16c47c2d15ccd238d0fc8c5e" - integrity sha512-zAESyIZJmGAcRDHwX2nB26gsloQ53Kx9FGb4I4bPdDf3Ragbaio/Is03/3CRCim5qCVwjcDqq/iy4iDqg1Q9BQ== +"@brightlayer-ui/react-themes@^7.2.0": + version "7.2.0" + resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-themes/-/react-themes-7.2.0.tgz#03985faba940dc3d94e2eb0d22a0e8f6a7a2b738" + integrity sha512-maNTWF4gck4nTUnh86p/7wFn6qQrdNgKYv+/XVGBR/fYceUcjeik5yFdJ9AlHzOFBp+WrsqnG+qr7yC6Q1iKQQ== dependencies: "@brightlayer-ui/colors" "^3.0.0" - "@fontsource/open-sans" "^4.2.2" - color "^3.1.3" + "@fontsource/open-sans" "^5.0.3" + color "^4.2.3" "@brightlayer-ui/types@^2.0.0": version "2.0.0" @@ -1443,13 +1450,6 @@ dependencies: "@emotion/memoize" "^0.8.0" -"@emotion/is-prop-valid@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" - integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== - dependencies: - "@emotion/memoize" "^0.8.1" - "@emotion/memoize@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" @@ -1569,10 +1569,37 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6" integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA== -"@fontsource/open-sans@^4.2.2": - version "4.5.10" - resolved "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.10.tgz" - integrity sha512-MrtTDfWb1Tu9YxVh2KaKmsKBn6O3KL/lHZS0KRKK58jgqvdwuiDt4QW4udmW4FQf0XOWgnZ+4vKUF80F3SqBAA== +"@floating-ui/core@^1.4.2": + version "1.5.2" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.2.tgz#53a0f7a98c550e63134d504f26804f6b83dbc071" + integrity sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A== + dependencies: + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/dom@^1.5.1": + version "1.5.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa" + integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA== + dependencies: + "@floating-ui/core" "^1.4.2" + "@floating-ui/utils" "^0.1.3" + +"@floating-ui/react-dom@^2.0.4": + version "2.0.4" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec" + integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ== + dependencies: + "@floating-ui/dom" "^1.5.1" + +"@floating-ui/utils@^0.1.3": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9" + integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A== + +"@fontsource/open-sans@^5.0.3": + version "5.0.18" + resolved "https://registry.yarnpkg.com/@fontsource/open-sans/-/open-sans-5.0.18.tgz#215008af81249849661ec16e9b6e972383d4ff97" + integrity sha512-DnqTxjqEQM+Ei3FbgJV0GmL5uGCAJnLtLuQj06mjVBcszobrkPbOHmLtnTBlhW3DmejuO1LgJCM7ki96mQIG9Q== "@fontsource/roboto-mono@^4.5.8": version "4.5.8" @@ -1969,96 +1996,94 @@ "@types/mdx" "^2.0.0" "@types/react" ">=16" -"@mui/base@5.0.0-beta.10": - version "5.0.0-beta.10" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.10.tgz#b9a2de21c7de45aa4275c7ecf5aa803ecc236ba6" - integrity sha512-moTAhGwFfQffj7hsu61FnqcGqVcd53A1CrOhnskM9TF0Uh2rnLDMCuar4JRUWWpaJofAfQEbQBBFPadFQLI4PA== +"@mui/base@5.0.0-beta.27": + version "5.0.0-beta.27" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.27.tgz#21a9c7d954a5f88f6706dfee630154c651ee73af" + integrity sha512-duL37qxihT1N0pW/gyXVezP7SttLkF+cLAs/y6g6ubEFmVadjbnZ45SeF12/vAiKzqwf5M0uFH1cczIPXFZygA== dependencies: - "@babel/runtime" "^7.22.6" - "@emotion/is-prop-valid" "^1.2.1" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.4" + "@babel/runtime" "^7.23.5" + "@floating-ui/react-dom" "^2.0.4" + "@mui/types" "^7.2.11" + "@mui/utils" "^5.15.0" "@popperjs/core" "^2.11.8" clsx "^2.0.0" prop-types "^15.8.1" - react-is "^18.2.0" -"@mui/core-downloads-tracker@^5.14.4": - version "5.14.4" - resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5" - integrity sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg== - -"@mui/icons-material@^5.11.0": - version "5.11.0" - resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.11.0.tgz#9ea6949278b2266d2683866069cd43009eaf6464" - integrity sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A== - dependencies: - "@babel/runtime" "^7.20.6" - -"@mui/material@^5.14.4": - version "5.14.4" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6" - integrity sha512-2XUV3KyRC07BQPPzEgd+ss3x/ezXtHeKtOGCMCNmx3MauZojPYUpSwFkE0fYgYCD9dMQMVG4DY/VF38P0KShsg== - dependencies: - "@babel/runtime" "^7.22.6" - "@mui/base" "5.0.0-beta.10" - "@mui/core-downloads-tracker" "^5.14.4" - "@mui/system" "^5.14.4" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.4" - "@types/react-transition-group" "^4.4.6" +"@mui/core-downloads-tracker@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.0.tgz#6b45d5bff38f305402d24d3bf86075b56c578909" + integrity sha512-NpGtlHwuyLfJtdrlERXb8qRqd279O0VnuGaZAor1ehdNhUJOD1bSxHDeXKZkbqNpvi50hasFj7lsbTpluworTQ== + +"@mui/icons-material@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.0.tgz#fdc93611ca77ce3b79128be02fb6c1ae79b972b8" + integrity sha512-zHY6fOkaK7VfhWeyxO8MjO3IAjEYpYMXuqUhX7TkUZJ9+TSH/9dn4ClG4K2j6hdgBU5Yrq2Z/89Bo6BHHp7AdQ== + dependencies: + "@babel/runtime" "^7.23.5" + +"@mui/material@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.0.tgz#f801cf56d505cc52dca225438360ab9c62057285" + integrity sha512-60CDI/hQNwJv9a3vEZtFG7zz0USdQhVwpBd3fZqrzhuXSdiMdYMaZcCXeX/KMuNq0ZxQEAZd74Pv+gOb408QVA== + dependencies: + "@babel/runtime" "^7.23.5" + "@mui/base" "5.0.0-beta.27" + "@mui/core-downloads-tracker" "^5.15.0" + "@mui/system" "^5.15.0" + "@mui/types" "^7.2.11" + "@mui/utils" "^5.15.0" + "@types/react-transition-group" "^4.4.9" clsx "^2.0.0" csstype "^3.1.2" prop-types "^15.8.1" react-is "^18.2.0" react-transition-group "^4.4.5" -"@mui/private-theming@^5.14.4": - version "5.14.4" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.14.4.tgz#0ec5510da05047f94984344360c7f457f3a0e19e" - integrity sha512-ISXsHDiQ3z1XA4IuKn+iXDWvDjcz/UcQBiFZqtdoIsEBt8CB7wgdQf3LwcwqO81dl5ofg/vNQBEnXuKfZHrnYA== +"@mui/private-theming@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.0.tgz#96de66ce097ba417e1b6b769cd67cbf516bd8876" + integrity sha512-7WxtIhXxNek0JjtsYy+ut2LtFSLpsUW5JSDehQO+jF7itJ8ehy7Bd9bSt2yIllbwGjCFowLfYpPk2Ykgvqm1tA== dependencies: - "@babel/runtime" "^7.22.6" - "@mui/utils" "^5.14.4" + "@babel/runtime" "^7.23.5" + "@mui/utils" "^5.15.0" prop-types "^15.8.1" -"@mui/styled-engine@^5.13.2": - version "5.13.2" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.13.2.tgz#c87bd61c0ab8086d34828b6defe97c02bcd642ef" - integrity sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw== +"@mui/styled-engine@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.0.tgz#44e068dbb855699053b9e6e4e6d3ed5efe98b7d9" + integrity sha512-6NysIsHkuUS2lF+Lzv1jiK3UjBJk854/vKVcJQVGKlPiqNEVZJNlwaSpsaU5xYXxWEZYfbVFSAomLOS/LV/ovQ== dependencies: - "@babel/runtime" "^7.21.0" + "@babel/runtime" "^7.23.5" "@emotion/cache" "^11.11.0" csstype "^3.1.2" prop-types "^15.8.1" -"@mui/system@^5.14.4": - version "5.14.4" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.4.tgz#306a2fdd41ab6f4912ea689316f834db8461bb86" - integrity sha512-oPgfWS97QNfHcDBapdkZIs4G5i85BJt69Hp6wbXF6s7vi3Evcmhdk8AbCRW6n0sX4vTj8oe0mh0RIm1G2A1KDA== - dependencies: - "@babel/runtime" "^7.22.6" - "@mui/private-theming" "^5.14.4" - "@mui/styled-engine" "^5.13.2" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.14.4" +"@mui/system@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.0.tgz#d4f6fd65ad8e404d4d7c7b56d755d2a63b0edddb" + integrity sha512-8TPjfTlYBNB7/zBJRL4QOD9kImwdZObbiYNh0+hxvhXr2koezGx8USwPXj8y/JynbzGCkIybkUztCdWlMZe6OQ== + dependencies: + "@babel/runtime" "^7.23.5" + "@mui/private-theming" "^5.15.0" + "@mui/styled-engine" "^5.15.0" + "@mui/types" "^7.2.11" + "@mui/utils" "^5.15.0" clsx "^2.0.0" csstype "^3.1.2" prop-types "^15.8.1" -"@mui/types@^7.2.4": - version "7.2.4" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328" - integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA== +"@mui/types@^7.2.11": + version "7.2.11" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.11.tgz#36b99a88f8010dc716128e568dc05681a69dc7ae" + integrity sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w== -"@mui/utils@^5.14.4": - version "5.14.4" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.4.tgz#498cc2b08e46776c1e4327bfd8c23ad2f5890bc6" - integrity sha512-4ANV0txPD3x0IcTCSEHKDWnsutg1K3m6Vz5IckkbLXVYu17oOZCVUdOKsb/txUmaCd0v0PmSRe5PW+Mlvns5dQ== +"@mui/utils@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.0.tgz#87b4db92dd2ddf3e2676377427f50662124013b4" + integrity sha512-XSmTKStpKYamewxyJ256+srwEnsT3/6eNo6G7+WC1tj2Iq9GfUJ/6yUoB7YXjOD2jTZ3XobToZm4pVz1LBt6GA== dependencies: - "@babel/runtime" "^7.22.6" - "@types/prop-types" "^15.7.5" - "@types/react-is" "^18.2.1" + "@babel/runtime" "^7.23.5" + "@types/prop-types" "^15.7.11" prop-types "^15.8.1" react-is "^18.2.0" @@ -2708,11 +2733,16 @@ resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.1.tgz#aae6739d8f0d14a3bc9e6dd83e6d791ad75d4d76" integrity sha512-Q7jDsRbzcNHIQje15CS/piKhu6lMLb9jwjxSfEIi4KcFKXW23GoJMkwQiJ8VObyfx+VmUaDcJxXaWN+cTCjVog== -"@types/prop-types@*", "@types/prop-types@^15.7.5": +"@types/prop-types@*": version "15.7.5" resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/prop-types@^15.7.11": + version "15.7.11" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563" + integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng== + "@types/q@^1.5.1": version "1.5.5" resolved "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz" @@ -2735,13 +2765,6 @@ dependencies: "@types/react" "*" -"@types/react-is@^18.2.1": - version "18.2.1" - resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.2.1.tgz#61d01c2a6fc089a53520c0b66996d458fdc46863" - integrity sha512-wyUkmaaSZEzFZivD8F2ftSyAfk6L+DfFliVj/mYdOXbVjRcS87fQJLTnhk6dRZPuJjI+9g6RZJO4PNCngUrmyw== - dependencies: - "@types/react" "*" - "@types/react-router-dom@^5.3.3": version "5.3.3" resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz" @@ -2759,10 +2782,10 @@ "@types/history" "^4.7.11" "@types/react" "*" -"@types/react-transition-group@^4.4.6": - version "4.4.6" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e" - integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew== +"@types/react-transition-group@^4.4.9": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== dependencies: "@types/react" "*" @@ -4113,7 +4136,7 @@ collect-v8-coverage@^1.0.0: resolved "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz" integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg== -color-convert@^1.9.0, color-convert@^1.9.3: +color-convert@^1.9.0: version "1.9.3" resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -4137,7 +4160,7 @@ color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4: resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.6.0, color-string@^1.9.0: +color-string@^1.9.0: version "1.9.1" resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz" integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== @@ -4145,14 +4168,6 @@ color-string@^1.6.0, color-string@^1.9.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^3.1.3: - version "3.2.1" - resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz" - integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== - dependencies: - color-convert "^1.9.3" - color-string "^1.6.0" - color@^4.0.0, color@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz" From 7959135c3742f7dad6dec9006e7a2d944640d41d Mon Sep 17 00:00:00 2001 From: joebochill Date: Thu, 14 Dec 2023 16:13:45 -0500 Subject: [PATCH 22/26] Add better defaults for theme swapping support --- .../src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx | 2 ++ .../componentDocs/AppBar/playground/PlaygroundPage.tsx | 4 ++-- .../ChannelValue/playground/PlaygroundPage.tsx | 8 ++++++-- .../componentDocs/Drawer/playground/PlaygroundPage.tsx | 4 ++-- .../DrawerFooter/playground/PlaygroundPage.tsx | 3 ++- .../DrawerHeader/playground/PlaygroundPage.tsx | 4 ++-- .../DrawerNavGroup/playground/PlaygroundPage.tsx | 4 ++-- .../DrawerSubheader/playground/PlaygroundPage.tsx | 3 ++- .../EmptyState/playground/PlaygroundPage.tsx | 5 +++-- .../componentDocs/Hero/playground/PlaygroundPage.tsx | 5 +++-- .../InfoListItem/playground/PlaygroundPage.tsx | 5 +++-- .../ListItemTag/playground/PlaygroundPage.tsx | 3 ++- .../ScoreCard/playground/PlaygroundPage.tsx | 5 +++-- .../ThreeLiner/playground/PlaygroundPage.tsx | 3 ++- .../ToolbarMenu/playground/PlaygroundPage.tsx | 5 +++-- .../UserMenu/playground/PlaygroundPage.tsx | 3 ++- docs/src/shared/utilities.tsx | 10 ++++++++++ 17 files changed, 51 insertions(+), 25 deletions(-) diff --git a/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx b/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx index 14e54f00e..6f8161d16 100644 --- a/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx +++ b/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx @@ -254,6 +254,8 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction 0) || Boolean(children)); diff --git a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx index 705ef834a..446994b08 100644 --- a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx @@ -12,7 +12,7 @@ import Stack from '@mui/material/Stack'; import { AppBar, AppBarProps } from '@brightlayer-ui/react-components'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; -import { getBodyFiller, getImage } from '../../../shared'; +import { getBodyFiller, getImage, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -115,7 +115,7 @@ const AppBarPreview: PreviewComponent = ({ data }) => { }} > diff --git a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx index a4d9900f4..66377d6d8 100644 --- a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx @@ -10,7 +10,7 @@ import { getPropsMapping, Playground, } from '@brightlayer-ui/react-doc-components'; -import { getIcon, getIconSnippetWithProps } from '../../../shared'; +import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -113,7 +113,11 @@ const ChannelValuePreview: PreviewComponent = ({ data }) => { return ( - + ); }; diff --git a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx index fa346f5fd..05a60f9a3 100644 --- a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx @@ -30,7 +30,7 @@ import Toolbar from '@mui/material/Toolbar'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import { sharedPropsConfig } from './sharedPropsConfig'; -import { getIcon, getIconSnippetWithProps } from '../../../shared'; +import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -217,7 +217,7 @@ const DrawerPreview: PreviewComponent = ({ data }) => { }, '& .BluiDrawer-content': { backgroundColor: 'background.paper' }, }} - {...rest} + {...removeEmptyProps(rest)} > {temporary && ( { /> - + Footer Content Here diff --git a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx index b4a31b928..ae838ef6d 100644 --- a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx @@ -21,7 +21,7 @@ import NotificationsActive from '@mui/icons-material/NotificationsActive'; import Person from '@mui/icons-material/Person'; import Today from '@mui/icons-material/Today'; import Accessibility from '@mui/icons-material/Accessibility'; -import { getIcon, getIconSnippetWithProps, getImage } from '../../../shared'; +import { getIcon, getIconSnippetWithProps, getImage, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -119,7 +119,7 @@ const DrawerHeaderPreview: PreviewComponent = ({ data }) => { diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx index 15d16b694..faf7fdf4b 100644 --- a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx @@ -24,7 +24,7 @@ import Toc from '@mui/icons-material/Toc'; import Devices from '@mui/icons-material/Devices'; import AirportShuttle from '@mui/icons-material/AirportShuttle'; import { sharedPropsConfig } from '../../Drawer/playground/sharedPropsConfig'; -import { getIcon, getIconSnippetWithProps } from '../../../shared'; +import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -124,7 +124,7 @@ const DrawerNavGroupPreview: PreviewComponent = ({ data }) => { items={navGroupItems} collapseIcon={getIcon(collapseIcon)} expandIcon={getIcon(expandIcon)} - {...rest} + {...removeEmptyProps(rest)} /> diff --git a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx index bd733f99f..bd0f7ea67 100644 --- a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx @@ -23,6 +23,7 @@ import NotificationsActive from '@mui/icons-material/NotificationsActive'; import Person from '@mui/icons-material/Person'; import Today from '@mui/icons-material/Today'; import Accessibility from '@mui/icons-material/Accessibility'; +import { removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -68,7 +69,7 @@ const DrawerSubheaderPreview: PreviewComponent = ({ data }) => { } title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} /> - + Subheader Content Here diff --git a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx index 7fe881689..435205569 100644 --- a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx @@ -12,7 +12,7 @@ import Stack from '@mui/material/Stack'; import { EmptyState, EmptyStateProps } from '@brightlayer-ui/react-components'; import Add from '@mui/icons-material/Add'; import Button from '@mui/material/Button'; -import { getIcon, getIconSnippetWithProps } from '../../../shared'; +import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -65,7 +65,8 @@ const EmptyStatePreview: PreviewComponent = ({ data }) => { return ( { { return ( {} : undefined} icon={getIcon(icon as unknown as string)} diff --git a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx index 349a66678..93426711c 100644 --- a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx @@ -10,6 +10,7 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { ListItemTag, ListItemTagProps } from '@brightlayer-ui/react-components'; +import { removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -51,7 +52,7 @@ const ListItemTagPreview: PreviewComponent = ({ data }) => { const { ...rest } = data as unknown as ListItemTagProps; return ( - + ); }; diff --git a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx index 107e96e1f..079c9aaf9 100644 --- a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx @@ -20,7 +20,7 @@ import Mail from '@mui/icons-material/Mail'; import MoreVert from '@mui/icons-material/MoreVert'; import Favorite from '@mui/icons-material/Favorite'; import { Temp, Moisture } from '@brightlayer-ui/icons-mui'; -import { getImage } from '../../../shared'; +import { getImage, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -156,7 +156,8 @@ const ScoreCardPreview: PreviewComponent = ({ data }) => { , diff --git a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx index 51fab05e0..3308dd715 100644 --- a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx @@ -10,6 +10,7 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { ThreeLiner, ThreeLinerProps } from '@brightlayer-ui/react-components'; +import { removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -52,7 +53,7 @@ const ThreeLinerPreview: PreviewComponent = ({ data }) => { const { ...rest } = data as unknown as ThreeLinerProps; return ( - + ); }; diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx index ea4d34043..6ee79c2a9 100644 --- a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx @@ -10,7 +10,7 @@ import { } from '@brightlayer-ui/react-doc-components'; import Stack from '@mui/material/Stack'; import { ToolbarMenu, ToolbarMenuProps } from '@brightlayer-ui/react-components'; -import { getIcon, getIconSnippetWithProps } from '../../../shared'; +import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared'; const inputConfig: InputConfig = [ // Required Props @@ -46,7 +46,8 @@ const ToolbarMenuPreview: PreviewComponent = ({ data }) => { return ( { return ( : AB} menuGroups={[ { diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 2590ad263..99029e9a2 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -336,3 +336,13 @@ export const getBodyFiller = (): JSX.Element => ( interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus. ); + +export const removeEmptyProps = (props: { [key: string]: any }): { [key: string]: any } => { + const newProps: { [key: string]: any } = {}; + Object.keys(props) + .filter((p: string) => !['', 'undefined', undefined, null].includes(props[p])) + .forEach((p) => { + newProps[p] = props[p]; + }); + return newProps; +}; From 3b6bef4622bdae44ec846dc0f80eb8b20aecd13a Mon Sep 17 00:00:00 2001 From: joebochill Date: Thu, 14 Dec 2023 16:35:41 -0500 Subject: [PATCH 23/26] Update DrawerNavItem to use playground library --- .../playground/DrawerNavItemConfig.tsx | 54 ------- .../playground/PlaygroundPage.tsx | 113 ++++++++++++++- .../playground/PreviewComponent.tsx | 135 ------------------ .../playground/PropsPlayground.tsx | 12 -- .../DrawerNavItem/playground/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 3 - docs/src/shared/ComponentPreviewTabs.tsx | 3 +- docs/src/shared/utilities.tsx | 2 - 8 files changed, 109 insertions(+), 214 deletions(-) delete mode 100644 docs/src/componentDocs/DrawerNavItem/playground/DrawerNavItemConfig.tsx delete mode 100644 docs/src/componentDocs/DrawerNavItem/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/DrawerNavItem/playground/PropsPlayground.tsx diff --git a/docs/src/componentDocs/DrawerNavItem/playground/DrawerNavItemConfig.tsx b/docs/src/componentDocs/DrawerNavItem/playground/DrawerNavItemConfig.tsx deleted file mode 100644 index 1b0ddb547..000000000 --- a/docs/src/componentDocs/DrawerNavItem/playground/DrawerNavItemConfig.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import sharedPropsConfig from '../../../shared/data/SharedPropsConfig'; - -export const drawerNavItemConfig: ComponentType = { - componentName: 'Drawer Nav Item', - props: [ - { - propName: 'hidden', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Sets whether to hide the nav item', - required: false, - defaultValue: false, - }, - { - propName: 'icon', - inputType: 'select', - inputValue: '', - options: ['undefined', '', ''], - propType: 'JSX.Element', - helperText: 'A component to render for the left icon', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'statusColor', - inputType: 'colorPicker', - inputValue: '#ffac00', - propType: 'string', - helperText: 'Status stripe and icon color', - required: false, - }, - { - propName: 'subtitle', - inputType: 'string', - inputValue: 'Subtitle', - propType: 'string', - helperText: 'The text to show on the second line', - required: false, - }, - { - propName: 'title', - inputType: 'string', - inputValue: 'Title', - propType: 'string', - helperText: 'The text to show on the first line', - required: true, - }, - ], - sharedProps: sharedPropsConfig, -}; - -export default drawerNavItemConfig; diff --git a/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx index 8a1bf8fe5..af680889b 100644 --- a/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx @@ -1,17 +1,118 @@ import React from 'react'; import Box from '@mui/material/Box'; -import DrawerNavItemPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { DrawerNavItem, DrawerNavItemProps } from '@brightlayer-ui/react-components'; +import { sharedPropsConfig } from '../../Drawer/playground/sharedPropsConfig'; +import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared'; +import * as Colors from '@brightlayer-ui/colors'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'title', + type: 'string', + typeLabel: 'string', + description: 'Text to show on the first line', + required: true, + initialValue: 'Title', + category: 'Required Props', + }, + + // Optional Props + { + id: 'subtitle', + type: 'string', + typeLabel: 'string', + description: 'Text to sho on the second line', + required: false, + initialValue: 'Subtitle', + category: 'Optional Props', + }, + { + id: 'hidden', + type: 'boolean', + description: 'Whether to hide this nav item', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'icon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'The icon to display on the left', + required: false, + initialValue: '', + options: ['undefined', '', ''], + category: 'Optional Props', + }, + { + id: 'statusColor', + type: 'color', + typeLabel: 'string', + description: `Status stripe and icon color`, + required: false, + initialValue: Colors.blue[500], + category: 'Optional Props', + }, + + // Shared Props + ...sharedPropsConfig, + + // Other Configuration + // NONE +]; + +const DrawerNavItemPreview: PreviewComponent = ({ data }) => { + const { expandIcon, collapseIcon, icon, ...rest } = data as unknown as Omit< + DrawerNavItemProps, + 'collapseIcon' | 'expandIcon' | 'icon' + > & { collapseIcon: string; expandIcon: string; icon: string }; + + return ( + + + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ``.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const DrawerNavItemPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/DrawerNavItem/playground/PreviewComponent.tsx b/docs/src/componentDocs/DrawerNavItem/playground/PreviewComponent.tsx deleted file mode 100644 index eefea1a77..000000000 --- a/docs/src/componentDocs/DrawerNavItem/playground/PreviewComponent.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import React, { useState } from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { Drawer, DrawerBody, DrawerNavGroup, DrawerNavItem } from '@brightlayer-ui/react-components/core/Drawer'; -import { createProps, getIcon, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; - -export const PreviewComponent = (): JSX.Element => { - const drawerNavItemJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerNavItemComponent); - const [activeItem, setActiveItem] = useState('Title'); - - const drawerNavItemProps = createProps(drawerNavItemJson.props as PropsType[]); - const drawerNavItemSharedProps = createProps(drawerNavItemJson.sharedProps as PropsType[]); - - const toggleDefaultProp = (propName: string, currentValue: any, groupType?: string): string => - hideDefaultPropsFromSnippet(drawerNavItemJson, propName, currentValue, groupType); - - const generateCodeSnippet = (): string => { - const jsx = ` - - - setActiveItem("Title")} - > - setActiveItem("Monthly Report")} - /> - setActiveItem("Annual Report")} - /> - - - -`; - return removeEmptyLines(jsx); - }; - - return ( - - - - - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/DrawerNavItem/playground/PropsPlayground.tsx b/docs/src/componentDocs/DrawerNavItem/playground/PropsPlayground.tsx deleted file mode 100644 index 77e779c08..000000000 --- a/docs/src/componentDocs/DrawerNavItem/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const drawerNavItemJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerNavItemComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/DrawerNavItem/playground/index.tsx b/docs/src/componentDocs/DrawerNavItem/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/DrawerNavItem/playground/index.tsx +++ b/docs/src/componentDocs/DrawerNavItem/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx index 0a1674323..e20ff6b5e 100644 --- a/docs/src/redux/componentsPropsState.tsx +++ b/docs/src/redux/componentsPropsState.tsx @@ -1,16 +1,13 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import drawerNavItemConfig from '../componentDocs/DrawerNavItem/playground/DrawerNavItemConfig'; import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; import { getComponentState } from '../shared/utilities'; import { ComponentDocPayloadType, ComponentType } from '../__types__'; type ComponentState = { - drawerNavItemComponent: ComponentType; drawerRailItemComponent: ComponentType; }; const initialState: ComponentState = { - drawerNavItemComponent: drawerNavItemConfig, drawerRailItemComponent: drawerRailItemConfig, }; diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 1f65c8744..6d6f0dc6d 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -164,7 +164,8 @@ export const ComponentPreviewTabs = (): JSX.Element => { location.pathname.includes('drawer-subheader') || location.pathname.includes('drawer-footer') || location.pathname.includes('drawer/') || - location.pathname.includes('drawer-nav-group') + location.pathname.includes('drawer-nav-group') || + location.pathname.includes('drawer-nav-item') ? { marginRight: 0 } : {}, ]} diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index 99029e9a2..a53a408e1 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -117,8 +117,6 @@ export const createProps = (props: PropsType[]): any => { export const getComponentState = (componentName: string, state: RootState['componentsPropsState']): ComponentType => { switch (componentName) { - case 'Drawer Nav Item': - return state.drawerNavItemComponent; case 'Drawer Rail Item': default: return state.drawerRailItemComponent; From 21f2dca8560fcbf3efb1883d50c8b2c40e9e242a Mon Sep 17 00:00:00 2001 From: joebochill Date: Thu, 14 Dec 2023 17:10:49 -0500 Subject: [PATCH 24/26] Update DrawerRailItem to use playground library, remove unused files --- docs/src/__types__/index.ts | 35 --- .../playground/DrawerRailItemConfig.tsx | 136 --------- .../playground/PlaygroundPage.tsx | 150 ++++++++- .../playground/PreviewComponent.tsx | 198 ------------ .../playground/PropsPlayground.tsx | 12 - .../DrawerRailItem/playground/index.tsx | 1 - docs/src/components/Playground/CodeBlock.tsx | 57 ---- .../Playground/CodeBlockActionButtonRow.tsx | 39 --- .../Playground/ComponentPreview.tsx | 32 -- .../Playground/CopyToClipboardButton.tsx | 73 ----- .../Playground/FullCodeOnGithubButton.tsx | 15 - docs/src/components/Playground/Playground.tsx | 285 ------------------ .../Playground/PlaygroundControls.tsx | 257 ---------------- .../Playground/SourceCodeViewer.tsx | 56 ---- .../Playground/custom-inputs/ColorPicker.tsx | 125 -------- .../Playground/custom-inputs/DocTextField.tsx | 23 -- .../Playground/custom-inputs/NumberPicker.tsx | 136 --------- .../Playground/custom-inputs/index.tsx | 3 - .../components/Playground/exampleConfig.tsx | 89 ------ .../components/Playground/exampleConfig2.tsx | 106 ------- .../Playground/exampleConfig2Render.tsx | 62 ---- .../Playground/exampleConfigRender.tsx | 8 - docs/src/components/Playground/index.tsx | 1 - docs/src/components/Playground/types.tsx | 38 --- docs/src/components/Playground/utilities.tsx | 96 ------ docs/src/components/index.tsx | 1 - docs/src/redux/componentsPropsState.tsx | 68 ----- docs/src/redux/store.tsx | 2 - docs/src/shared/ComponentPreviewTabs.tsx | 27 +- docs/src/shared/DocTextField.tsx | 23 -- docs/src/shared/PlaygroundDrawer.tsx | 284 ----------------- docs/src/shared/PreviewComponentWithCode.tsx | 72 ----- .../ColorPicker/ColorPicker.component.tsx | 125 -------- .../NumberPicker/NumberPicker.component.tsx | 136 --------- docs/src/shared/constants.ts | 1 - docs/src/shared/data/SharedPropsConfig.tsx | 5 - docs/src/shared/index.tsx | 2 - docs/src/shared/utilities.tsx | 68 ----- 38 files changed, 144 insertions(+), 2703 deletions(-) delete mode 100644 docs/src/componentDocs/DrawerRailItem/playground/DrawerRailItemConfig.tsx delete mode 100644 docs/src/componentDocs/DrawerRailItem/playground/PreviewComponent.tsx delete mode 100644 docs/src/componentDocs/DrawerRailItem/playground/PropsPlayground.tsx delete mode 100644 docs/src/components/Playground/CodeBlock.tsx delete mode 100644 docs/src/components/Playground/CodeBlockActionButtonRow.tsx delete mode 100644 docs/src/components/Playground/ComponentPreview.tsx delete mode 100644 docs/src/components/Playground/CopyToClipboardButton.tsx delete mode 100644 docs/src/components/Playground/FullCodeOnGithubButton.tsx delete mode 100644 docs/src/components/Playground/Playground.tsx delete mode 100644 docs/src/components/Playground/PlaygroundControls.tsx delete mode 100644 docs/src/components/Playground/SourceCodeViewer.tsx delete mode 100644 docs/src/components/Playground/custom-inputs/ColorPicker.tsx delete mode 100644 docs/src/components/Playground/custom-inputs/DocTextField.tsx delete mode 100644 docs/src/components/Playground/custom-inputs/NumberPicker.tsx delete mode 100644 docs/src/components/Playground/custom-inputs/index.tsx delete mode 100644 docs/src/components/Playground/exampleConfig.tsx delete mode 100644 docs/src/components/Playground/exampleConfig2.tsx delete mode 100644 docs/src/components/Playground/exampleConfig2Render.tsx delete mode 100644 docs/src/components/Playground/exampleConfigRender.tsx delete mode 100644 docs/src/components/Playground/index.tsx delete mode 100644 docs/src/components/Playground/types.tsx delete mode 100644 docs/src/components/Playground/utilities.tsx delete mode 100644 docs/src/components/index.tsx delete mode 100644 docs/src/redux/componentsPropsState.tsx delete mode 100644 docs/src/shared/DocTextField.tsx delete mode 100644 docs/src/shared/PlaygroundDrawer.tsx delete mode 100644 docs/src/shared/PreviewComponentWithCode.tsx delete mode 100644 docs/src/shared/components/ColorPicker/ColorPicker.component.tsx delete mode 100644 docs/src/shared/components/NumberPicker/NumberPicker.component.tsx delete mode 100644 docs/src/shared/data/SharedPropsConfig.tsx diff --git a/docs/src/__types__/index.ts b/docs/src/__types__/index.ts index cab7c676e..b379d5f29 100644 --- a/docs/src/__types__/index.ts +++ b/docs/src/__types__/index.ts @@ -13,38 +13,3 @@ export type SiteThemePayloadType = { export type SiteDirectionPayloadType = { siteDirection: UIDirection; }; - -export type ComponentDocPayloadType = { - propName: string; - propValue: boolean | number | string | string[] | []; - componentName: string; - groupType: string; -}; - -export type PropsType = { - propName: string; - inputType: 'boolean' | 'colorPicker' | 'select' | 'string' | 'number'; - inputValue: boolean | number | string | string[] | []; - defaultValue?: boolean | number | string | string[] | []; - options?: string[] | []; - propType: string; - helperText: string; - required: boolean; - rangeData?: RangeDataTypes; - disabled?: boolean; - label?: string; -}; - -export type OtherComponentPropsType = { - childComponentName: string; - childComponentProps: PropsType[]; -}; - -export type ComponentType = { - componentName?: string; - id?: string; - props?: PropsType[]; - sharedProps?: PropsType[]; - otherComponentProps?: OtherComponentPropsType; - otherProps?: PropsType[]; -}; diff --git a/docs/src/componentDocs/DrawerRailItem/playground/DrawerRailItemConfig.tsx b/docs/src/componentDocs/DrawerRailItem/playground/DrawerRailItemConfig.tsx deleted file mode 100644 index 586bb4c06..000000000 --- a/docs/src/componentDocs/DrawerRailItem/playground/DrawerRailItemConfig.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { ComponentType } from '../../../__types__'; -import * as Colors from '@brightlayer-ui/colors'; - -export const drawerRailItemConfig: ComponentType = { - componentName: 'Drawer Rail Item', - props: [ - { - propName: 'disableRailTooltip', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Sets whether to disable the tooltip on hover (applies when rail item is condensed)', - required: false, - defaultValue: false, - }, - { - propName: 'hidden', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Sets whether to hide the rail item', - required: false, - defaultValue: false, - }, - { - propName: 'icon', - inputType: 'select', - inputValue: '', - options: ['', ''], - propType: 'JSX.Element', - helperText: 'An icon component to render', - required: true, - defaultValue: '', - }, - { - propName: 'statusColor', - inputType: 'colorPicker', - inputValue: '#ffac00', - propType: 'string', - helperText: 'Status stripe color', - required: false, - }, - { - propName: 'title', - inputType: 'string', - inputValue: 'Title', - propType: 'string', - helperText: 'The label text', - required: true, - }, - ], - sharedProps: [ - { - propName: 'activeItemBackgroundColor', - inputType: 'colorPicker', - inputValue: '', - propType: 'string', - helperText: `Background color for the 'active' item`, - required: false, - }, - { - propName: 'activeItemFontColor', - inputType: 'colorPicker', - inputValue: Colors.blue[500], - propType: 'string', - helperText: `Font color for the 'active' item`, - required: false, - }, - { - propName: 'activeItemIconColor', - inputType: 'colorPicker', - inputValue: Colors.blue[500], - propType: 'string', - helperText: `Icon color for the 'active' item`, - required: false, - }, - { - propName: 'backgroundColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'Color used for the background of the element', - required: false, - }, - { - propName: 'divider', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Whether to show a line between all items', - required: false, - defaultValue: false, - }, - { - propName: 'itemFontColor', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'The color used for the title text', - required: false, - }, - { - propName: 'itemIconColor', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'The color used for the icon', - required: false, - }, - { - propName: 'ripple', - inputType: 'boolean', - inputValue: true, - propType: 'boolean', - helperText: 'Whether to apply material ripple effect to items on click', - required: false, - defaultValue: true, - }, - ], - otherComponentProps: { - childComponentName: 'Drawer Props', - childComponentProps: [ - { - propName: 'condensed', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Show condensed nav items without title text', - required: false, - defaultValue: false, - }, - ], - }, -}; - -export default drawerRailItemConfig; diff --git a/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx index 621dc491b..69a1a7d50 100644 --- a/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx +++ b/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx @@ -1,17 +1,153 @@ -import React from 'react'; +import React, { useState } from 'react'; import Box from '@mui/material/Box'; -import DrawerRailItemPlayground from './PropsPlayground'; -import { PreviewComponent } from './PreviewComponent'; +import { + InputConfig, + PreviewComponent, + CodeSnippetFunction, + getPropsToString, + getPropsMapping, + Playground, +} from '@brightlayer-ui/react-doc-components'; +import Stack from '@mui/material/Stack'; +import { + Drawer, + DrawerBody, + DrawerHeader, + DrawerNavGroup, + DrawerRailItem, + DrawerRailItemProps, +} from '@brightlayer-ui/react-components'; +import Menu from '@mui/icons-material/Menu'; +import { sharedPropsConfig } from '../../Drawer/playground/sharedPropsConfig'; +import { getIconSnippetWithProps, getIcon, removeEmptyProps } from '../../../shared'; +import LocationOn from '@mui/icons-material/LocationOn'; +import Gavel from '@mui/icons-material/Gavel'; + +const inputConfig: InputConfig = [ + // Required Props + { + id: 'title', + type: 'string', + typeLabel: 'string', + description: 'The label text', + required: true, + initialValue: 'Title', + category: 'Required Props', + }, + + // Optional Props + { + id: 'disableRailTooltip', + type: 'boolean', + description: 'Sets whether to disable the tooltip on hover', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'hidden', + type: 'boolean', + description: 'Whether to hide this rail item', + required: false, + initialValue: false, + defaultValue: false, + category: 'Optional Props', + }, + { + id: 'icon', + type: 'select', + typeLabel: 'JSX.Element', + description: 'The icon to display on the left', + required: false, + initialValue: '', + options: ['undefined', '', ''], + category: 'Optional Props', + }, + { + id: 'statusColor', + type: 'color', + typeLabel: 'string', + description: `Status stripe color`, + required: false, + initialValue: '', + category: 'Optional Props', + }, + + // Shared Props + ...sharedPropsConfig.filter((prop) => !['collapseIcon', 'expandIcon', 'nestedDivider'].includes(prop.id)), + + // Other Configuration + { + id: 'condensed', + type: 'boolean', + description: 'Show condensed rail items without text labels', + required: false, + initialValue: false, + defaultValue: false, + category: 'Drawer Props', + }, +]; + +const DrawerRailItemPreview: PreviewComponent = ({ data }) => { + const { icon, condensed, ...rest } = data as unknown as Omit & { icon: string }; + const [activeItem, setActiveItem] = useState('Custom'); + + return ( + + + + } /> + + + { + setActiveItem('Custom'); + }} + {...removeEmptyProps(rest)} + title={rest.title} + /> + } + itemID={'Locations'} + title={'Locations'} + {...removeEmptyProps(rest)} + onClick={(): void => { + setActiveItem('Locations'); + }} + /> + } + itemID={'Legal'} + title={'Legal'} + {...removeEmptyProps(rest)} + onClick={(): void => { + setActiveItem('Legal'); + }} + /> + + + + + + ); +}; + +const generateSnippet: CodeSnippetFunction = (data) => + ``.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const DrawerRailItemPlaygroundComponent = (): JSX.Element => ( - - + ); diff --git a/docs/src/componentDocs/DrawerRailItem/playground/PreviewComponent.tsx b/docs/src/componentDocs/DrawerRailItem/playground/PreviewComponent.tsx deleted file mode 100644 index 726a38f2f..000000000 --- a/docs/src/componentDocs/DrawerRailItem/playground/PreviewComponent.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import React, { useState } from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import { createProps, getIcon, hideDefaultPropsFromSnippet, removeEmptyLines } from '../../../shared/utilities'; -import { PropsType } from '../../../__types__'; -import PreviewComponentWithCode from '../../../shared/PreviewComponentWithCode'; -import { Drawer, DrawerBody, DrawerNavGroup, DrawerRailItem } from '@brightlayer-ui/react-components'; -import Gavel from '@mui/icons-material/Gavel'; -import LocationOn from '@mui/icons-material/LocationOn'; - -export const PreviewComponent = (): JSX.Element => { - const drawerRailItemJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerRailItemComponent); - const drawerRailItemProps = createProps(drawerRailItemJson.props as PropsType[]); - const drawerRailItemSharedProps = createProps(drawerRailItemJson.sharedProps as PropsType[]); - const drawerProps = createProps(drawerRailItemJson.otherComponentProps?.childComponentProps as PropsType[]); - const [activeItem, setActiveItem] = useState(drawerRailItemProps.title as string); - - const toggleDefaultProp = (propName: string, currentValue: any, groupType?: string): string => - hideDefaultPropsFromSnippet(drawerRailItemJson, propName, currentValue, groupType); - - const generateCodeSnippet = (): string => { - const jsx = ` - - - { - setActiveItem("${drawerRailItemProps.title}"); - }} - /> - } - itemID={'Locations'} - title={'Locations'} - ${toggleDefaultProp('disableRailTooltip', drawerRailItemProps.disableRailTooltip, 'props')} - ${toggleDefaultProp( - 'activeItemBackgroundColor', - drawerRailItemSharedProps.activeItemBackgroundColor, - 'sharedProps' - )} - ${toggleDefaultProp( - 'activeItemFontColor', - drawerRailItemSharedProps.activeItemFontColor, - 'sharedProps' - )} - ${toggleDefaultProp( - 'activeItemIconColor', - drawerRailItemSharedProps.activeItemIconColor, - 'sharedProps' - )} - ${toggleDefaultProp('backgroundColor', drawerRailItemSharedProps.backgroundColor, 'sharedProps')} - ${toggleDefaultProp('divider', drawerRailItemSharedProps.divider, 'sharedProps')} - ${toggleDefaultProp('itemFontColor', drawerRailItemSharedProps.itemFontColor, 'sharedProps')} - ${toggleDefaultProp('itemIconColor', drawerRailItemSharedProps.itemIconColor, 'sharedProps')} - ${toggleDefaultProp('ripple', drawerRailItemSharedProps.ripple, 'sharedProps')} - onClick={(): void => { - setActiveItem("Locations"); - }} - /> - } - itemID={"Legal"} - title={"Legal"} - ${toggleDefaultProp('disableRailTooltip', drawerRailItemProps.disableRailTooltip, 'props')} - ${toggleDefaultProp( - 'activeItemBackgroundColor', - drawerRailItemSharedProps.activeItemBackgroundColor, - 'sharedProps' - )} - ${toggleDefaultProp( - 'activeItemFontColor', - drawerRailItemSharedProps.activeItemFontColor, - 'sharedProps' - )} - ${toggleDefaultProp( - 'activeItemIconColor', - drawerRailItemSharedProps.activeItemIconColor, - 'sharedProps' - )} - ${toggleDefaultProp('backgroundColor', drawerRailItemSharedProps.backgroundColor, 'sharedProps')} - ${toggleDefaultProp('divider', drawerRailItemSharedProps.divider, 'sharedProps')} - ${toggleDefaultProp('itemFontColor', drawerRailItemSharedProps.itemFontColor, 'sharedProps')} - ${toggleDefaultProp('itemIconColor', drawerRailItemSharedProps.itemIconColor, 'sharedProps')} - ${toggleDefaultProp('ripple', drawerRailItemSharedProps.ripple, 'sharedProps')} - onClick={(): void => { - setActiveItem("Legal"); - }} - /> - - -`; - return removeEmptyLines(jsx); - }; - - return ( - - - - - - - } - code={generateCodeSnippet()} - /> - ); -}; diff --git a/docs/src/componentDocs/DrawerRailItem/playground/PropsPlayground.tsx b/docs/src/componentDocs/DrawerRailItem/playground/PropsPlayground.tsx deleted file mode 100644 index 4a0339622..000000000 --- a/docs/src/componentDocs/DrawerRailItem/playground/PropsPlayground.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react'; -import { RootState } from '../../../redux/store'; -import { useAppSelector } from '../../../redux/hooks'; -import PlaygroundDrawer from '../../../shared/PlaygroundDrawer'; - -const PropsPlayground = (): JSX.Element => { - const drawerRailItemJson = useAppSelector((state: RootState) => state.componentsPropsState.drawerRailItemComponent); - - return ; -}; - -export default PropsPlayground; diff --git a/docs/src/componentDocs/DrawerRailItem/playground/index.tsx b/docs/src/componentDocs/DrawerRailItem/playground/index.tsx index 234b17b3c..34cee0ea0 100644 --- a/docs/src/componentDocs/DrawerRailItem/playground/index.tsx +++ b/docs/src/componentDocs/DrawerRailItem/playground/index.tsx @@ -1,2 +1 @@ export * from './PlaygroundPage'; -export * from './PreviewComponent'; diff --git a/docs/src/components/Playground/CodeBlock.tsx b/docs/src/components/Playground/CodeBlock.tsx deleted file mode 100644 index 5cbee3b39..000000000 --- a/docs/src/components/Playground/CodeBlock.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { HTMLAttributes, useEffect } from 'react'; -import Prism from 'prismjs'; -import Box from '@mui/material/Box'; -import * as Colors from '@brightlayer-ui/colors'; - -export type CodeBlockProps = HTMLAttributes & { - /** The code to be rendered */ - code: string; - /** The language to be added as a class - * - * Default: 'ts' - */ - language: string; - /** The range of code lines to highlight - * - * Default: undefined - */ - dataLine?: string; -}; - -/** - * CodeBlock component - * - * Used to show snippet of code. - * You may also include a range of code lines to highlight. - */ -export const CodeBlock: React.FC = (props): JSX.Element => { - const { code, language = 'ts', dataLine, ...divProps } = props; - useEffect(() => { - Prism.highlightAll(); - }, [code]); - return ( - - 
-                
-                    {code}
-                
-
- - ); -}; diff --git a/docs/src/components/Playground/CodeBlockActionButtonRow.tsx b/docs/src/components/Playground/CodeBlockActionButtonRow.tsx deleted file mode 100644 index 8e3d282df..000000000 --- a/docs/src/components/Playground/CodeBlockActionButtonRow.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import Box from '@mui/material/Box'; -import { FullCodeOnGithub } from './FullCodeOnGithubButton'; -import { SxProps } from '@mui/material/styles'; -import { TooltipProps } from '@mui/material/Tooltip'; -import { CopyToClipboardButton } from './CopyToClipboardButton'; - -type Position = 'bottom' | 'top' | 'left' | 'right'; - -export type CodeBlockActionButtonRowProps = { - copyText?: string; - title?: string; - url?: string; - sx?: SxProps; - duration?: number; - position?: Position; - copiedTitle?: string; - toolTipProps?: TooltipProps; -}; - -export const CodeBlockActionButtonRow: React.FC = (props): JSX.Element => { - const { title = 'Copy All', copyText = '', url = '', sx } = props; - - return ( - - {copyText !== '' && ( - - )} - {url !== '' && } - - ); -}; diff --git a/docs/src/components/Playground/ComponentPreview.tsx b/docs/src/components/Playground/ComponentPreview.tsx deleted file mode 100644 index 7acbe4dec..000000000 --- a/docs/src/components/Playground/ComponentPreview.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import Box, { BoxProps } from '@mui/material/Box/Box'; -import * as Colors from '@brightlayer-ui/colors'; - -export type ComponentPreviewProps = HTMLAttributes & - BoxProps & { - previewContent: JSX.Element; - }; - -const ComponentPreview: React.FC = (props): JSX.Element => { - const { previewContent, sx } = props; - - return ( - - {previewContent} - - ); -}; - -export default ComponentPreview; diff --git a/docs/src/components/Playground/CopyToClipboardButton.tsx b/docs/src/components/Playground/CopyToClipboardButton.tsx deleted file mode 100644 index 3f520f283..000000000 --- a/docs/src/components/Playground/CopyToClipboardButton.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import Tooltip, { TooltipProps } from '@mui/material/Tooltip'; -import React, { useState } from 'react'; -import { isMobile } from 'react-device-detect'; -import CopyAllIcon from '@mui/icons-material/CopyAll'; -import Button from '@mui/material/Button'; -import Box from '@mui/material/Box'; -import { Theme, SxProps } from '@mui/material/styles'; - -type Position = 'bottom' | 'top' | 'left' | 'right'; - -type CopyButtonProps = { - sx?: SxProps; -}; - -type CopyToClipboardProps = { - duration?: number; - position?: Position; - title?: string; - copiedTitle?: string; - copyText: string; - toolTipProps?: TooltipProps; - copyButtonProps?: CopyButtonProps; -}; - -export function copyTextToClipboard(text: string, onCopied?: () => void): void { - void navigator.clipboard.writeText(text); - if (onCopied) onCopied(); -} - -export const CopyToClipboardButton: React.FC = (props) => { - const { - duration = 1000, - position = 'bottom', - title = '', - copiedTitle = 'Copied', - copyText, - toolTipProps, - copyButtonProps, - } = props; - const [isCopied, setIsCopied] = useState(false); - const [showTooltip, setShowTooltip] = useState(false); - - return isMobile ? null : ( - - - - - - ); -}; diff --git a/docs/src/components/Playground/FullCodeOnGithubButton.tsx b/docs/src/components/Playground/FullCodeOnGithubButton.tsx deleted file mode 100644 index b7e2357ca..000000000 --- a/docs/src/components/Playground/FullCodeOnGithubButton.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import Button from '@mui/material/Button'; -import GitHubIcon from '@mui/icons-material/GitHub'; -import { SxProps, Theme } from '@mui/material/styles'; - -type FullCodeOnGithubProps = { - url: string; - sx?: SxProps; -}; - -export const FullCodeOnGithub: React.FC = (props) => ( - -); diff --git a/docs/src/components/Playground/Playground.tsx b/docs/src/components/Playground/Playground.tsx deleted file mode 100644 index f83733a05..000000000 --- a/docs/src/components/Playground/Playground.tsx +++ /dev/null @@ -1,285 +0,0 @@ -/* eslint-disable no-console */ -import React, { useCallback, useReducer } from 'react'; -import { renderToString } from 'react-dom/server'; -import Box from '@mui/material/Box'; -import ComponentPreview from './ComponentPreview'; -import PlaygroundControls from './PlaygroundControls'; -import { PlaygroundComponent, PlaygroundComponentProp } from './types'; -import SourceCodeViewer from './SourceCodeViewer'; -import { findStringIndex } from './utilities'; -import { SxProps } from '@mui/material'; - -type PlaygroundProps = { - /** The component to be rendered in the playground */ - demoComponent: any; - /** An object with the props that should be added to the demoComponent - * - * Default: {} - */ - demoComponentProps?: any; - /** An element to be rendered as the child of the demoComponent */ - demoComponentChild?: JSX.Element; - /** Configuration object for the playground */ - config: PlaygroundComponent; - /** The width of the playground controls drawer - * - * Default: 375 - */ - playgroundDrawerWidth?: number; - /** Styles applied to the root */ - sx?: SxProps; - /** Styles applied to the container where the component is rendered */ - previewContainerSx?: SxProps; - /** Styles applied to the container where the source code snippet is generated */ - sourceCodeSx?: SxProps; - /** Styles applied to the drawer that contains the playground controls */ - controlsDrawerSx?: SxProps; -}; - -export const PLAYGROUND_ACTIONS = { - RESET_PROPS: 'resetProps', - UPDATE_PROP: 'updateProp', - UPDATE_SHARED_PROP: 'updateSharedProp', - UPDATE_ADDITIONAL_PROP: 'updateAdditionalProp', - UPDATE_CHILD_COMPONENT_PROP: 'updateChildComponentProp', -}; - -// eslint-disable-next-line @typescript-eslint/explicit-function-return-type -function playgroundReducer(state: any, action: any) { - switch (action.type) { - case PLAYGROUND_ACTIONS.RESET_PROPS: { - return { ...state }; - } - case PLAYGROUND_ACTIONS.UPDATE_PROP: { - const updatedControl = state?.props?.filter( - (prop: PlaygroundComponentProp) => prop.propName === action.payload.propName - ); - if (updatedControl) { - updatedControl[0].inputValue = action.payload.propValue; - } - return { ...state, ...updatedControl }; - } - case PLAYGROUND_ACTIONS.UPDATE_SHARED_PROP: { - const updatedControl = state?.sharedProps?.filter( - (prop: PlaygroundComponentProp) => prop.propName === action.payload.propName - ); - if (updatedControl) { - updatedControl[0].inputValue = action.payload.propValue; - } - return { ...state, ...updatedControl }; - } - case PLAYGROUND_ACTIONS.UPDATE_ADDITIONAL_PROP: { - const updatedControl = state?.additionalProps?.filter( - (prop: PlaygroundComponentProp) => prop.propName === action.payload.propName - ); - if (updatedControl) { - updatedControl[0].inputValue = action.payload.propValue; - } - return { ...state, ...updatedControl }; - } - case PLAYGROUND_ACTIONS.UPDATE_CHILD_COMPONENT_PROP: { - const updatedControl = state?.childComponent?.childComponentProps?.filter( - (prop: PlaygroundComponentProp) => prop.propName === action.payload.propName - ); - if (updatedControl) { - updatedControl[0].inputValue = action.payload.propValue; - } - return { ...state, ...updatedControl }; - } - default: - throw new Error(); - } -} - -function getInitialState(config: PlaygroundComponent): any { - return config; -} - -export const Playground: React.FC = (props): JSX.Element => { - const { - demoComponent, - demoComponentProps = {}, - demoComponentChild, - config, - playgroundDrawerWidth = 375, - sx, - previewContainerSx, - sourceCodeSx, - controlsDrawerSx, - } = props; - const [state, dispatch] = useReducer(playgroundReducer, getInitialState(config)); - - const getFullPropObjectByPropName = useCallback( - (propName: string): PlaygroundComponentProp | undefined => - state?.props?.filter((prop: PlaygroundComponentProp) => prop.propName === propName)[0], - [state] - ); - - const getCoreComponentProps = useCallback((): any => { - const propKeyValuePairs: any = {}; - const propsWithMapping: PlaygroundComponentProp[] = []; - - state?.props?.forEach((prop: PlaygroundComponentProp) => { - if (!prop.inputValue || prop.inputValue === 'undefined') return; - - if (prop.propType === 'JSX.Element') { - propsWithMapping.push(prop); - } else { - propKeyValuePairs[prop.propName] = prop.inputValue; - } - }); - - state?.sharedProps?.forEach((prop: PlaygroundComponentProp) => { - if (prop.propType === 'JSX.Element') { - propsWithMapping.push(prop); - } else { - propKeyValuePairs[prop.propName] = prop.inputValue; - } - }); - - // @TODO: This will require updates to the config type definition so that users can associate props to the correct components - // state?.additionalProps?.forEach((prop: PlaygroundComponentProp) => { - // if (prop.propType === 'JSX.Element') { - // JSXProps.push(prop); - // } else { - // propKeyValuePairs[prop.propName] = prop.inputValue; - // } - // }); - - // Map prop.options to prop.optionsValueMapping for select-inputs whose values need mapped - propsWithMapping.forEach((prop: PlaygroundComponentProp) => { - if (prop.inputType === 'select' && prop.options?.length && prop.optionsValueMapping?.length) { - propKeyValuePairs[prop.propName] = - prop.optionsValueMapping[findStringIndex(prop.options, prop.inputValue as string)]; - } - }); - - // eslint-disable-next-line no-console - console.log('propKeyValuePairs:', propKeyValuePairs); - - return propKeyValuePairs; - }, [state]); - - const PreviewContent = React.createElement( - demoComponent, - { ...getCoreComponentProps(), ...demoComponentProps }, - demoComponentChild ? demoComponentChild : undefined - ); - - type GenericProps = { - [key: string]: any; - }; - - const generateComponentCode = (_componentName: string, _props?: GenericProps): string => { - // Used to add empty space for new lines in the code window - const newLineSpacing = ` `; - let exampleCode = `<${_componentName} />`; - - if (_props) { - // find all props that have a defaultValue - const propsWithDefaults: PlaygroundComponentProp[] = state?.props?.filter( - (prop: PlaygroundComponentProp) => prop.defaultValue - ); - - // remove all _props that are using the default value - // @TODO: Update to deal with props that use JSX.Element or select value mappings - propsWithDefaults?.forEach((propWithDefault) => { - if (propWithDefault.defaultValue === _props[propWithDefault.propName]) { - delete _props[propWithDefault.propName]; - } - }); - - const propsString = Object.entries(_props) - .map(([propName, currentValue]) => { - switch (typeof currentValue) { - case undefined: - return ''; - case 'string': - return `${propName}={"${currentValue}"}`; - case 'object': { - const fullPropObject = getFullPropObjectByPropName(propName); - if (fullPropObject?.propType === 'JSX.Element') { - const subComponentCode = - fullPropObject && - fullPropObject.inputValue && - fullPropObject.inputValue !== undefined - ? generateComponentCode(fullPropObject.inputValue as string) - : ''; - return subComponentCode ? `${propName}={${subComponentCode}}` : ''; - } - - return `${propName}={${currentValue}}`; - } - case 'boolean': - case 'number': - default: - return `${propName}={${currentValue}}`; - } - }) - .join(`\n${newLineSpacing}`); - - const exampleCodeSuffix = demoComponentChild - ? `>\n${newLineSpacing}${renderToString(demoComponentChild)}\n/>` - : `\n/>`; - - exampleCode = `<${_componentName}\n${newLineSpacing}${propsString}${exampleCodeSuffix}`; - } - - return exampleCode; - }; - - const getSourceCode = useCallback( - (): string => - generateComponentCode( - state.componentName?.split(' ').join('') as string | 'Component', - getCoreComponentProps() - ), - [state] - ); - - React.useEffect(() => { - // eslint-disable-next-line no-console - console.log('state: ', state); - }, [state]); - - return ( - - - - - - - - ); -}; diff --git a/docs/src/components/Playground/PlaygroundControls.tsx b/docs/src/components/Playground/PlaygroundControls.tsx deleted file mode 100644 index 21dfce1c8..000000000 --- a/docs/src/components/Playground/PlaygroundControls.tsx +++ /dev/null @@ -1,257 +0,0 @@ -import React from 'react'; -import Drawer from '@mui/material/Drawer'; -import Typography from '@mui/material/Typography'; -import Accordion from '@mui/material/Accordion'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import { useTheme } from '@mui/material/styles'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import Box, { BoxProps } from '@mui/material/Box'; -import Checkbox from '@mui/material/Checkbox/Checkbox'; -import Divider from '@mui/material/Divider'; -import FormControl from '@mui/material/FormControl/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel/FormControlLabel'; -import FormHelperText from '@mui/material/FormHelperText/FormHelperText'; -import InputLabel from '@mui/material/InputLabel/InputLabel'; -import MenuItem from '@mui/material/MenuItem/MenuItem'; -import Stack from '@mui/material/Stack'; -import Select from '@mui/material/Select/Select'; -import { ColorPicker, NumberPicker } from './custom-inputs'; -import { ChildComponent, PlaygroundComponent, PlaygroundComponentProp } from './types'; -import { DocTextField } from './custom-inputs/DocTextField'; -import { PLAYGROUND_ACTIONS } from './Playground'; - -type PlaygroundControlsProps = BoxProps & { - config: PlaygroundComponent; - playgroundDrawerWidth?: number; - dispatch: any; -}; - -const PlaygroundControls = (props: PlaygroundControlsProps): JSX.Element => { - const { config, playgroundDrawerWidth, dispatch, sx } = props; - const componentName = config.componentName as string; - const theme = useTheme(); - - const dispatchActions = (groupType: string, newPropState: any): void => { - const groupName = groupType.substring(0, groupType.indexOf('-')); - switch (groupName) { - case 'props': - dispatch({ type: PLAYGROUND_ACTIONS.UPDATE_PROP, payload: newPropState }); - break; - case 'additionalProps': - dispatch({ type: PLAYGROUND_ACTIONS.UPDATE_ADDITIONAL_PROP, payload: newPropState }); - break; - case 'sharedProps': - dispatch({ type: PLAYGROUND_ACTIONS.UPDATE_SHARED_PROP, payload: newPropState }); - break; - case 'childComponent': - dispatch({ type: PLAYGROUND_ACTIONS.UPDATE_CHILD_COMPONENT_PROP, payload: newPropState }); - break; - default: - dispatch({ type: PLAYGROUND_ACTIONS.UPDATE_PROP, payload: newPropState }); - break; - } - }; - - const createNewPropState = ( - name: string, - value: string | boolean | number | number[], - component: string, - groupType: string - ): void => { - const newState = { - propName: name, - propValue: value, - componentName: component, - }; - dispatchActions(groupType, newState); - }; - - const handleChange = ( - propName: string, - propValue: string | boolean | number | number[], - componentTitle: string, - groupType: string - ): void => { - createNewPropState(propName, propValue, componentTitle, groupType); - }; - - const renderSelect = (prop: PlaygroundComponentProp, index: string): JSX.Element => ( - - {`${prop.propName}: ${prop.propType}`} - - {prop.helperText} - - ); - - const renderBoolean = (prop: PlaygroundComponentProp, index: string): JSX.Element => ( - handleChange(prop.propName, event.target.checked, componentName, index)} - disabled={prop.disabled} - /> - } - sx={{ alignItems: 'flex-start' }} - label={ - - {`${ - prop.label ? prop.label : prop.propName - }`} - - {prop.helperText} - - - } - /> - ); - - const renderSlider = (prop: PlaygroundComponentProp, index: string): JSX.Element => ( - { - const value = parseFloat(event.target.value); - handleChange( - prop.propName, - isNaN(value) && prop.propType === 'number | string' ? '' : isNaN(value) ? '' : value, - componentName, - index - ); - }} - /> - ); - - const renderTextField = (prop: PlaygroundComponentProp, index: string): JSX.Element => ( - handleChange(prop.propName, String(event.target.value), componentName, index)} - /> - ); - - const renderColorInput = (prop: PlaygroundComponentProp, index: string): JSX.Element => ( - handleChange(prop.propName, String(event.target.value), componentName, index)} - /> - ); - - const propBlock = (prop: PlaygroundComponentProp, index: string): JSX.Element => ( - - {prop.inputType === 'select' ? renderSelect(prop, index) : undefined} - {prop.inputType === 'boolean' ? renderBoolean(prop, index) : undefined} - {prop.inputType === 'string' ? renderTextField(prop, index) : undefined} - {prop.inputType === 'colorPicker' ? renderColorInput(prop, index) : undefined} - {prop.inputType === 'number' ? renderSlider(prop, index) : undefined} - - ); - - const iterateProps = ( - knobs: PlaygroundComponentProp[], - headingTitle: string, - sectionNumber: number, - groupType: string - ): JSX.Element => ( - - }> - - {headingTitle} - - - - - {knobs?.map( - (item: PlaygroundComponentProp, index: number): JSX.Element => - propBlock(item, `${groupType}-${index}`) - )} - - - - ); - - const displayPropsByGroupType = (data: PlaygroundComponent): JSX.Element => { - const requiredProps: PlaygroundComponentProp[] = data.props?.filter( - (prop: any) => prop.required - ) as PlaygroundComponentProp[]; - const optionalProps: PlaygroundComponentProp[] = data.props?.filter( - (prop: any) => !prop.required - ) as PlaygroundComponentProp[]; - const additionalProps: PlaygroundComponentProp[] = data.additionalProps as PlaygroundComponentProp[]; - const sharedProps: PlaygroundComponentProp[] = data.sharedProps as PlaygroundComponentProp[]; - const childComponent: ChildComponent = data.childComponent as ChildComponent; - let sectionNumber = 0; - return ( - } mb={2}> - {requiredProps?.length > 0 && iterateProps(requiredProps, 'Required Props', sectionNumber++, 'props')} - {optionalProps?.length > 0 && iterateProps(optionalProps, 'Optional Props', sectionNumber++, 'props')} - {childComponent?.childComponentProps?.length > 0 && - iterateProps( - childComponent.childComponentProps, - childComponent.childComponentName, - sectionNumber++, - 'childComponent' - )} - {sharedProps?.length > 0 && iterateProps(sharedProps, 'Shared Props', sectionNumber++, 'sharedProps')} - {additionalProps?.length > 0 && - iterateProps(additionalProps, 'Others', sectionNumber++, 'additionalProps')} - - ); - }; - - return ( - - - - {displayPropsByGroupType(config)} - - - - ); -}; - -export default PlaygroundControls; diff --git a/docs/src/components/Playground/SourceCodeViewer.tsx b/docs/src/components/Playground/SourceCodeViewer.tsx deleted file mode 100644 index dcbd529e4..000000000 --- a/docs/src/components/Playground/SourceCodeViewer.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import Box, { BoxProps } from '@mui/material/Box/Box'; -import * as Colors from '@brightlayer-ui/colors'; -import { CopyToClipboardButton } from './CopyToClipboardButton'; -import { CodeBlock } from './CodeBlock'; - -export type SourceCodeViewerProps = HTMLAttributes & - BoxProps & { - code: string; - }; - -const SourceCodeViewer: React.FC = (props): JSX.Element => { - const { code, sx } = props; - const [show, setShow] = React.useState(false); - - return ( - setShow(!show)} - onMouseLeave={(): void => setShow(false)} - > - - - {show && ( - - )} - - - ); -}; - -export default SourceCodeViewer; diff --git a/docs/src/components/Playground/custom-inputs/ColorPicker.tsx b/docs/src/components/Playground/custom-inputs/ColorPicker.tsx deleted file mode 100644 index 3be36ca59..000000000 --- a/docs/src/components/Playground/custom-inputs/ColorPicker.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'; -import InputAdornment from '@mui/material/InputAdornment'; -import { Colorize, QuestionMark } from '@mui/icons-material'; -import Color from 'color'; -import _debounce from 'lodash.debounce'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; -import IconButton from '@mui/material/IconButton'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { PlaygroundComponentProp } from '../types'; - -type ColorPickerProps = TextFieldProps & { - propData: PlaygroundComponentProp; - allowMUIColors?: boolean; -}; - -const HEX = /^#[0-9a-f]{6}$/i; -const MUI_COLOR = /^(primary|secondary|error|success|warning|info|text)\.(main|dark|light|contrastText)$/; -const MUI_GREY = /^(grey)\.(50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700)$/; -const MUI_COMMON = /^(common)\.(white|black)$/; -const MUI_TEXT = /^(text)\.(primary|secondary|disabled)$/; -const MUI_DIVIDER = /^divider$/; -const MUI_BACKGROUND = /^(background)\.(paper|default)$/; -const MUI_ACTION = /^(action)\.(active|hover|selected|disabled|disabledBackground|focus)$/; - -const muiRegex = [MUI_COLOR, MUI_GREY, MUI_COMMON, MUI_TEXT, MUI_DIVIDER, MUI_BACKGROUND, MUI_ACTION]; - -const colorIsValid = (color: string, useMui = false): boolean => { - try { - Color(color); - return true; - } catch (e) { - if (useMui) { - for (let i = 0; i < muiRegex.length; i++) { - if (muiRegex[i].test(color)) { - return true; - } - } - } - return false; - } -}; - -export const ColorPicker = (props: ColorPickerProps): JSX.Element => { - const { propData, allowMUIColors = false, ...textFieldProps } = props; - const [color, setColor] = useState(propData.inputValue as string); - - const handleColorChange = useCallback( - (e: ChangeEvent): void => { - textFieldProps.onChange?.(e); - }, - [textFieldProps.onChange] - ); - - const validColor = colorIsValid(color, allowMUIColors) || (!propData.required && color === ''); - - // debounce the color change events to 1 per 300ms - const handleColorChangeDebounced = useMemo(() => _debounce(handleColorChange, 300), [handleColorChange]); - - // cancel the debounce event if we unmount before it executes - useEffect( - () => () => { - handleColorChangeDebounced.cancel(); - }, - [handleColorChangeDebounced] - ); - - return ( - <> - { - setColor(e.target.value); - handleColorChangeDebounced(e as ChangeEvent); - }} - variant={'filled'} - type={'text'} - InputProps={{ - endAdornment: ( - - - - {validColor ? : } - - - { - setColor(e.target.value); - handleColorChangeDebounced(e); - }} - /> - - - ), - }} - value={color} - label={`${propData.label ? propData.label : propData.propName}${ - propData.label ? '' : `:${propData.propType}` - }`} - error={!validColor} - helperText={validColor ? propData.helperText : 'Color value not recognized'} - /> - - ); -}; diff --git a/docs/src/components/Playground/custom-inputs/DocTextField.tsx b/docs/src/components/Playground/custom-inputs/DocTextField.tsx deleted file mode 100644 index 4b55dd0a8..000000000 --- a/docs/src/components/Playground/custom-inputs/DocTextField.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; -import { PlaygroundComponentProp } from '../types'; - -type CustomTextFieldProps = TextFieldProps & { - propData: PlaygroundComponentProp; -}; - -export const DocTextField = (props: CustomTextFieldProps): JSX.Element => { - const { propData, ...textFieldProps } = props; - const isRequiredPropEmpty = propData.required && propData.inputValue === ''; - return ( - - ); -}; diff --git a/docs/src/components/Playground/custom-inputs/NumberPicker.tsx b/docs/src/components/Playground/custom-inputs/NumberPicker.tsx deleted file mode 100644 index 91211b4c9..000000000 --- a/docs/src/components/Playground/custom-inputs/NumberPicker.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React, { ChangeEvent, useCallback } from 'react'; -import InputAdornment from '@mui/material/InputAdornment'; -import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; -import Collapse from '@mui/material/Collapse'; -import Paper from '@mui/material/Paper'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; -import Slider from '@mui/material/Slider'; -import { PlaygroundComponentProp } from '../types'; - -type NumberPickerProps = TextFieldProps & { - propData: PlaygroundComponentProp; -}; - -const floatMath = (value: string | number, step: number): number => { - const valueDecimal = value.toString().indexOf('.') + 1; - const valueDecimalPlaces = value.toString().length - valueDecimal; - const stepDecimal = step.toString().indexOf('.') + 1; - const stepDecimalPlaces = step.toString().length - stepDecimal; - - const floatCorrectionFactor = Math.pow(10, Math.max(valueDecimalPlaces, stepDecimalPlaces)); - // floating point math correction - return ((value as number) * floatCorrectionFactor + step * floatCorrectionFactor) / floatCorrectionFactor; -}; - -export const NumberPicker = (props: NumberPickerProps): JSX.Element => { - const { propData, ...textFieldProps } = props; - const { - step: stepSize = 1, - min = Number.MIN_SAFE_INTEGER, - max = Number.MAX_SAFE_INTEGER, - } = propData?.rangeData || {}; - - // Slider Popover - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleOpen = (event: React.MouseEvent): void => { - setAnchorEl(event.currentTarget); - }; - const handleClose = (): void => { - setAnchorEl(null); - }; - - const handleNumberChange = useCallback( - (e: ChangeEvent): void => { - textFieldProps.onChange?.(e); - }, - [textFieldProps.onChange] - ); - - return ( - - { - // only allow numeric values to be typed in - if (e.target.value && !/^\d+(?:[.]\d+)?$/.test(e.target.value)) return; - handleNumberChange(e as ChangeEvent); - }} - inputProps={{ - min: propData?.rangeData?.min, - max: propData?.rangeData?.max, - step: stepSize, - }} - variant={'filled'} - type={'number'} - onClick={handleOpen} - InputProps={{ - endAdornment: ( - // We fake the increment/decrement buttons so we can stop the event propagation (otherwise every increment toggles the slider panel) - - - { - e.stopPropagation(); - const newValue = Math.min( - max, - floatMath(propData.inputValue as number, stepSize) - ); - handleNumberChange({ target: { value: newValue } } as any); - }} - > - - - { - e.stopPropagation(); - const newValue = Math.max( - min, - floatMath(propData.inputValue as number, -1 * stepSize) - ); - handleNumberChange({ target: { value: newValue } } as any); - }} - > - - - - - ), - }} - value={propData.inputValue as number} - label={`${propData.label ? propData.label : propData.propName}: ${propData.propType}`} - helperText={propData.helperText} - /> - - {/* The range slider popover */} - - - - handleNumberChange({ target: { value: value } } as any)} - /> - - - - - ); -}; diff --git a/docs/src/components/Playground/custom-inputs/index.tsx b/docs/src/components/Playground/custom-inputs/index.tsx deleted file mode 100644 index fe8434baa..000000000 --- a/docs/src/components/Playground/custom-inputs/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export * from './ColorPicker'; -export * from './NumberPicker'; -export * from './DocTextField'; diff --git a/docs/src/components/Playground/exampleConfig.tsx b/docs/src/components/Playground/exampleConfig.tsx deleted file mode 100644 index 060b925cc..000000000 --- a/docs/src/components/Playground/exampleConfig.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { PlaygroundComponent } from './types'; -import * as Colors from '@brightlayer-ui/colors'; -import { TrendingDown, TrendingUp } from '@mui/icons-material'; - -export const channelValueConfig: PlaygroundComponent = { - componentName: 'Channel Value', - props: [ - { - propName: 'color', - inputType: 'colorPicker', - inputValue: Colors.black[500], - propType: 'string', - helperText: 'The color of the font', - required: false, - }, - { - propName: 'fontSize', - inputType: 'number', - inputValue: 30, - propType: 'number | string', - helperText: 'The size of the font', - required: false, - rangeData: { - min: 10, - max: 50, - step: 10, - }, - }, - { - propName: 'icon', - inputType: 'select', - inputValue: 'TrendingUp', - options: ['undefined', 'TrendingUp', 'TrendingDown'], - optionsValueMapping: [undefined, , ], - propType: 'JSX.Element', - helperText: 'The inline icon to display', - required: false, - defaultValue: 'undefined', - }, - { - propName: 'prefix', - inputType: 'boolean', - inputValue: false, - propType: 'boolean', - helperText: 'Show units before the value', - required: false, - defaultValue: false, - }, - { - propName: 'units', - inputType: 'string', - inputValue: 'hz', - propType: 'string', - helperText: 'The text to display for the units (light text)', - required: false, - }, - { - propName: 'unitSpace', - inputType: 'select', - inputValue: 'auto', - options: ['auto', 'hide', 'show'], - propType: 'string', - helperText: 'Show/Hide spacing between the value and units', - required: false, - defaultValue: 'auto', - }, - { - propName: 'value', - inputType: 'string', - inputValue: 123, - propType: 'number | string', - helperText: 'The value (bold text) to display', - required: true, - }, - ], - // additionalProps: [ - // { - // propName: 'htmlColor', - // inputType: 'colorPicker', - // inputValue: Colors.red[500], - // propType: 'string', - // helperText: 'The color apply to primary icon', - // required: false, - // label: 'Icon Color', - // }, - // ], -}; - -export default channelValueConfig; diff --git a/docs/src/components/Playground/exampleConfig2.tsx b/docs/src/components/Playground/exampleConfig2.tsx deleted file mode 100644 index de9987d30..000000000 --- a/docs/src/components/Playground/exampleConfig2.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { PlaygroundComponent } from './types'; -import * as Colors from '@brightlayer-ui/colors'; - -export const scoreCardConfig: PlaygroundComponent = { - componentName: 'Score Card', - props: [ - { - propName: 'actionLimit', - inputType: 'number', - inputValue: 3, - propType: 'number', - helperText: 'Max number of actionItems in the header', - required: false, - rangeData: { - min: 1, - max: 6, - step: 1, - }, - defaultValue: 3, - }, - { - propName: 'badgeOffset', - inputType: 'number', - inputValue: -40, - propType: 'number', - helperText: 'Vertical offset for the badge component', - required: false, - rangeData: { - min: -50, - max: 50, - step: 10, - }, - defaultValue: 0, - }, - // { - // propName: 'headerBackgroundImage', - // inputType: 'select', - // inputValue: 'undefined', - // options: ['undefined', 'Pattern'], - // propType: 'string', - // helperText: 'An image to display in the header', - // required: false, - // defaultValue: 'undefined', - // }, - { - propName: 'headerColor', - inputType: 'colorPicker', - inputValue: Colors.blue[500], - propType: 'string', - helperText: 'The color of the header', - required: false, - }, - { - propName: 'headerFontColor', - inputType: 'colorPicker', - inputValue: Colors.white[50], - propType: 'string', - helperText: 'The color for text and icons in header', - required: false, - defaultValue: 'white', - }, - { - propName: 'headerInfo', - inputType: 'string', - inputValue: '4 Devices', - propType: 'string', - helperText: 'Tertiary text', - required: false, - }, - { - propName: 'headerTitle', - inputType: 'string', - inputValue: 'Substation 3', - propType: 'string', - helperText: 'The primary text', - required: true, - }, - { - propName: 'headerSubtitle', - inputType: 'string', - inputValue: 'High Humidity Alarm', - propType: 'string', - helperText: 'The secondary text', - required: false, - }, - ], - // additionalProps: [ - // { - // propName: 'numberofHeroes', - // inputType: 'number', - // inputValue: 1, - // propType: 'number', - // helperText: 'Number of heroes to render as badges', - // required: false, - // rangeData: { - // min: 0, - // max: 2, - // step: 1, - // }, - // defaultValue: 1, - // label: 'Number of Heroes', - // }, - // ], -}; - -export default scoreCardConfig; diff --git a/docs/src/components/Playground/exampleConfig2Render.tsx b/docs/src/components/Playground/exampleConfig2Render.tsx deleted file mode 100644 index 16b8b9920..000000000 --- a/docs/src/components/Playground/exampleConfig2Render.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import { Playground } from './Playground'; -import exampleConfig2 from './exampleConfig2'; -import Search from '@mui/icons-material/Search'; -import Mail from '@mui/icons-material/Mail'; -import Notifications from '@mui/icons-material/Notifications'; -import Favorite from '@mui/icons-material/Favorite'; -import Cloud from '@mui/icons-material/Cloud'; -import MoreVert from '@mui/icons-material/MoreVert'; -import Temp from '@brightlayer-ui/icons-mui/Temp'; -import Humidity from '@brightlayer-ui/icons-mui/Moisture'; -import * as Colors from '@brightlayer-ui/colors'; -import { ScoreCard, Hero } from '@brightlayer-ui/react-components'; -import { List, ListItem, ListItemText } from '@mui/material'; - -const exampleConfig2Render = (): JSX.Element => ( - , - , - , - , - , - , - ], - heroes: [ - } - label={'Temperature'} - iconSize={48} - iconBackgroundColor={Colors.white[50]} - ChannelValueProps={{ value: 98, units: '°F' }} - fontSize={'normal'} - />, - } - label={'Humidity'} - ChannelValueProps={{ value: 54, units: '%' }} - iconSize={48} - iconBackgroundColor={Colors.white[50]} - fontSize={'normal'} - />, - ], - sx: { maxWidth: '400px' }, - }} - demoComponentChild={ - - - - - - } - config={exampleConfig2} - previewContainerSx={{ alignItems: 'center' }} - /> -); - -export default exampleConfig2Render; diff --git a/docs/src/components/Playground/exampleConfigRender.tsx b/docs/src/components/Playground/exampleConfigRender.tsx deleted file mode 100644 index e062a89ec..000000000 --- a/docs/src/components/Playground/exampleConfigRender.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Playground } from './Playground'; -import { ChannelValue } from '@brightlayer-ui/react-components/core/ChannelValue'; -import exampleConfig from './exampleConfig'; - -const exampleConfigRender = (): JSX.Element => ; - -export default exampleConfigRender; diff --git a/docs/src/components/Playground/index.tsx b/docs/src/components/Playground/index.tsx deleted file mode 100644 index 469667aff..000000000 --- a/docs/src/components/Playground/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Playground'; diff --git a/docs/src/components/Playground/types.tsx b/docs/src/components/Playground/types.tsx deleted file mode 100644 index f5d1ac2d5..000000000 --- a/docs/src/components/Playground/types.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { ReactNode } from 'react'; - -export type RangeData = { - min: number; - max: number; - step: number; -}; - -export type PlaygroundComponentProp = { - propName: string; - inputType: 'boolean' | 'colorPicker' | 'select' | 'string' | 'number'; - inputValue: boolean | number | string | string[] | []; - defaultValue?: boolean | number | string | string[] | []; - options?: string[] | []; - // values to use for the items provided in the `options` prop - optionsValueMapping?: ReactNode[] | []; - propType: string; - helperText: string; - required: boolean; - rangeData?: RangeData; - disabled?: boolean; - label?: string; -}; - -export type ChildComponent = { - childComponentName: string; - childComponentProps: PlaygroundComponentProp[]; -}; - -export type PlaygroundComponent = { - componentName?: string; - id?: string; - props?: PlaygroundComponentProp[]; - sharedProps?: PlaygroundComponentProp[]; - childComponent?: ChildComponent; - // @TODO: either remove these or we need to extend the type definition so we know which component this belongs to - additionalProps?: PlaygroundComponentProp[]; -}; diff --git a/docs/src/components/Playground/utilities.tsx b/docs/src/components/Playground/utilities.tsx deleted file mode 100644 index 4264ecfcf..000000000 --- a/docs/src/components/Playground/utilities.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { PlaygroundComponent, PlaygroundComponentProp } from './types'; -import { SvgIconProps } from '@mui/material/SvgIcon'; - -// const topologyBgImage = require('../../shared/images/topology_40.png'); -// const farmBgImage = require('../shared/images/farm.jpg'); - -export const getSnakeCase = (str: string): string => str.replace(/[A-Z]/g, '_$&').toLowerCase().slice(1); - -export const getKebabCase = (str: string): string => str.replace(/[A-Z]/g, '-$&').toLowerCase().slice(1); - -export const snakeToKebabCase = (str: string): string => str.replaceAll('_', '-').toLowerCase(); - -export const unCamelCase = (val: string): string => - val - .replace(/([a-z0-9])([A-Z])/g, '$1 $2') - .replace(/([a-zA-Z])([0-9])/g, '$1 $2') - .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3') - .replace(/^./, (str) => str.toUpperCase()); - -export const titleCase = (val: string): string => - val.replace('-', ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase()); - -export const snakeToTitleCase = (str: string): string => - str.replaceAll('_', ' ').replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase()); - -export const capitalize = (val: string): string => val.charAt(0).toUpperCase() + val.slice(1); - -// https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript -export function copyTextToClipboard(text: string, onCopied?: () => void): void { - void navigator.clipboard.writeText(text); - if (onCopied) onCopied(); -} - -export function findStringIndex(arr: any[], str: string): number { - for (let i = 0; i < arr.length; i++) { - if (arr[i] === str) { - return i; - } - } - return -1; -} - -/** - * Get markdown title hash for markdown doc titles. - * @param str The title string to be hashed - * @returns The hashed string to be used in a URL, all lowercase - */ -export const getHash = (str: string): string => - str - .replace(/ /g, '-') - .replace(/[#?/&]/g, '') - .toLowerCase(); - -export const createProps = (props: PlaygroundComponentProp[]): any => { - const componentProps = props?.reduce( - (acc: any, cur: any) => ({ - ...acc, - [cur.propName]: Array.isArray(cur.inputValue) ? cur.defaultValue : cur.inputValue, - }), - {} - ); - return componentProps; -}; - -const iterateIconProps = (iconProps: any): string => { - let str = ''; - for (const prop in iconProps) { - str = `${str}` + `${prop}="${iconProps[prop]}" `; - } - return str; -}; - -export const getIconWithProp = (icon: string, iconProps: SvgIconProps): string => { - const index = icon.lastIndexOf('/>'); - const result = icon.slice(0, index) + iterateIconProps(iconProps) + icon.slice(index); - return result; -}; - -export const filterPropsAsPerGroupType = ( - state: PlaygroundComponent, - propName: string, - groupType?: string -): PlaygroundComponentProp | undefined => { - switch (groupType) { - case 'props': - return state.props?.filter((prop: PlaygroundComponentProp) => prop.propName === propName)[0]; - case 'sharedProps': - return state.sharedProps?.filter((prop: PlaygroundComponentProp) => prop.propName === propName)[0]; - case 'otherProps': - return state.additionalProps?.filter((prop: PlaygroundComponentProp) => prop.propName === propName)[0]; - default: - return state.props?.filter((prop: PlaygroundComponentProp) => prop.propName === propName)[0]; - } -}; - -export const removeEmptyLines = (code: string): string => code.replace(/^\s*$(?:\r\n?|\n)/gm, ''); diff --git a/docs/src/components/index.tsx b/docs/src/components/index.tsx deleted file mode 100644 index 469667aff..000000000 --- a/docs/src/components/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Playground'; diff --git a/docs/src/redux/componentsPropsState.tsx b/docs/src/redux/componentsPropsState.tsx deleted file mode 100644 index e20ff6b5e..000000000 --- a/docs/src/redux/componentsPropsState.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import drawerRailItemConfig from '../componentDocs/DrawerRailItem/playground/DrawerRailItemConfig'; -import { getComponentState } from '../shared/utilities'; -import { ComponentDocPayloadType, ComponentType } from '../__types__'; - -type ComponentState = { - drawerRailItemComponent: ComponentType; -}; - -const initialState: ComponentState = { - drawerRailItemComponent: drawerRailItemConfig, -}; - -export const componentPropsStateSlice = createSlice({ - name: 'componentsPropsState', - initialState: initialState, - reducers: { - resetProps: () => initialState, - updateProp: (state, action: PayloadAction) => { - const newArray = getComponentState(action.payload.componentName, state); - const updatedKnob = newArray?.props?.filter((prop) => prop.propName === action.payload.propName); - if (updatedKnob) { - updatedKnob[0].inputValue = action.payload.propValue; - } - }, - updateSharedProp: (state, action: PayloadAction) => { - const newArray = getComponentState(action.payload.componentName, state); - const updatedKnob = newArray?.sharedProps?.filter((prop) => prop.propName === action.payload.propName); - if (updatedKnob) { - updatedKnob[0].inputValue = action.payload.propValue; - } - }, - updateOtherProp: (state, action: PayloadAction) => { - const newArray = getComponentState(action.payload.componentName, state); - const updatedKnob = newArray?.otherProps?.filter((prop) => prop.propName === action.payload.propName); - if (updatedKnob) { - updatedKnob[0].inputValue = action.payload.propValue; - } - }, - updateOtherComponentProp: (state, action: PayloadAction) => { - const newArray = getComponentState(action.payload.componentName, state); - const updatedKnob = newArray?.otherComponentProps?.childComponentProps?.filter( - (prop) => prop.propName === action.payload.propName - ); - if (updatedKnob) { - updatedKnob[0].inputValue = action.payload.propValue; - } - }, - updateComponentProp: (state, action: PayloadAction) => { - const newArray = getComponentState(action.payload.componentName, state); - const updatedKnob = newArray?.props?.filter((prop) => prop.propName === action.payload.propName); - if (updatedKnob) { - updatedKnob[0].inputValue = action.payload.propValue; - } - }, - }, -}); - -export const { - resetProps, - updateProp, - updateSharedProp, - updateOtherProp, - updateComponentProp, - updateOtherComponentProp, -} = componentPropsStateSlice.actions; - -export default componentPropsStateSlice.reducer; diff --git a/docs/src/redux/store.tsx b/docs/src/redux/store.tsx index 734ff4c6e..7c8f37e6d 100644 --- a/docs/src/redux/store.tsx +++ b/docs/src/redux/store.tsx @@ -1,11 +1,9 @@ import { configureStore } from '@reduxjs/toolkit'; import appStateReducer from './appState'; -import componentsPropsStateReducer from './componentsPropsState'; export const store = configureStore({ reducer: { appState: appStateReducer, - componentsPropsState: componentsPropsStateReducer, }, }); diff --git a/docs/src/shared/ComponentPreviewTabs.tsx b/docs/src/shared/ComponentPreviewTabs.tsx index 6d6f0dc6d..296ba93cd 100644 --- a/docs/src/shared/ComponentPreviewTabs.tsx +++ b/docs/src/shared/ComponentPreviewTabs.tsx @@ -5,7 +5,6 @@ import Box from '@mui/material/Box'; import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'; import { SxProps, Theme, useTheme } from '@mui/material/styles'; import { TabPanel } from '../shared'; -import { PLAYGROUND_DRAWER_WIDTH } from './constants'; const hidePlaygroundTabs = ['drawer-layout', 'spacer', 'drawer-body']; @@ -61,7 +60,6 @@ const playgroundContentStyles = { height: '100%', display: 'flex', flex: '1 1 0px', - marginRight: `${PLAYGROUND_DRAWER_WIDTH}px`, }; export const ComponentPreviewTabs = (): JSX.Element => { @@ -146,30 +144,7 @@ export const ComponentPreviewTabs = (): JSX.Element => { - + diff --git a/docs/src/shared/DocTextField.tsx b/docs/src/shared/DocTextField.tsx deleted file mode 100644 index e1dd5aa18..000000000 --- a/docs/src/shared/DocTextField.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; -import { PropsType } from '../__types__'; - -type CustomTextFieldProps = TextFieldProps & { - propData: PropsType; -}; - -export const DocTextField = (props: CustomTextFieldProps): JSX.Element => { - const { propData, ...textFieldProps } = props; - const isRequiredPropEmpty = propData.required && propData.inputValue === ''; - return ( - - ); -}; diff --git a/docs/src/shared/PlaygroundDrawer.tsx b/docs/src/shared/PlaygroundDrawer.tsx deleted file mode 100644 index b0a026716..000000000 --- a/docs/src/shared/PlaygroundDrawer.tsx +++ /dev/null @@ -1,284 +0,0 @@ -import React, { useEffect } from 'react'; -import Drawer from '@mui/material/Drawer'; -import { DocTextField, PLAYGROUND_DRAWER_WIDTH } from '../shared'; -import { ComponentType, OtherComponentPropsType, PropsType } from '../__types__'; -import { - resetProps, - updateProp, - updateSharedProp, - updateOtherProp, - updateOtherComponentProp, -} from '../redux/componentsPropsState'; -import { useAppDispatch } from '../redux/hooks'; -import Typography from '@mui/material/Typography'; -import Accordion from '@mui/material/Accordion'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import { useTheme } from '@mui/material/styles'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import Box from '@mui/material/Box'; -import Checkbox from '@mui/material/Checkbox/Checkbox'; -import Divider from '@mui/material/Divider'; -import FormControl from '@mui/material/FormControl/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel/FormControlLabel'; -import FormHelperText from '@mui/material/FormHelperText/FormHelperText'; -import InputLabel from '@mui/material/InputLabel/InputLabel'; -import MenuItem from '@mui/material/MenuItem/MenuItem'; -import Stack from '@mui/material/Stack'; -import Select from '@mui/material/Select/Select'; -import { ColorPicker } from './components/ColorPicker/ColorPicker.component'; -import { NumberPicker } from './components/NumberPicker/NumberPicker.component'; - -type Anchor = 'right'; -type DrawerProps = { - drawerData: ComponentType; -}; -const PlaygroundDrawer = (props: DrawerProps): JSX.Element => { - const { drawerData: DrawerData } = props; - const componentName = DrawerData.componentName as string; - const dispatch = useAppDispatch(); - const theme = useTheme(); - const [state, setState] = React.useState({ - right: true, - }); - useEffect(() => { - dispatch(resetProps()); - }, []); - const toggleDrawer = (anchor: Anchor, open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { - if ( - event.type === 'keydown' && - ((event as React.KeyboardEvent).key === 'Tab' || (event as React.KeyboardEvent).key === 'Shift') - ) { - return; - } - - setState({ ...state, [anchor]: open }); - }; - - const dispatchActions = (groupType: string, newPropState: any): void => { - const groupName = groupType.substring(0, groupType.indexOf('-')); - switch (groupName) { - case 'props': - dispatch(updateProp(newPropState)); - break; - case 'otherProps': - dispatch(updateOtherProp(newPropState)); - break; - case 'sharedProps': - dispatch(updateSharedProp(newPropState)); - break; - case 'otherComponentProps': - dispatch(updateOtherComponentProp(newPropState)); - break; - default: - dispatch(updateProp(newPropState)); - break; - } - }; - - const createNewPropState = ( - name: string, - value: string | boolean | number | number[], - component: string, - groupType: string - ): void => { - const newState = { - propName: name, - propValue: value, - componentName: component, - }; - dispatchActions(groupType, newState); - }; - - const handleChange = ( - propName: string, - propValue: string | boolean | number | number[], - componentTitle: string, - groupType: string - ): void => { - createNewPropState(propName, propValue, componentTitle, groupType); - }; - - const renderSelect = (prop: PropsType, index: string): JSX.Element => ( - - {`${prop.propName}: ${prop.propType}`} - - {prop.helperText} - - ); - - const renderBoolean = (prop: PropsType, index: string): JSX.Element => ( - handleChange(prop.propName, event.target.checked, componentName, index)} - disabled={prop.disabled} - /> - } - sx={{ alignItems: 'flex-start' }} - label={ - - {`${ - prop.label ? prop.label : prop.propName - }`} - - {prop.helperText} - - - } - /> - ); - - const renderSlider = (prop: PropsType, index: string): JSX.Element => ( - { - const value = parseFloat(event.target.value); - handleChange( - prop.propName, - isNaN(value) && prop.propType === 'number | string' ? '' : isNaN(value) ? '' : value, - componentName, - index - ); - }} - /> - ); - - const renderTextField = (prop: PropsType, index: string): JSX.Element => ( - handleChange(prop.propName, String(event.target.value), componentName, index)} - /> - ); - - const renderColorInput = (prop: PropsType, index: string): JSX.Element => ( - handleChange(prop.propName, String(event.target.value), componentName, index)} - /> - ); - - const propBlock = (prop: PropsType, index: string): JSX.Element => ( - - {prop.inputType === 'select' ? renderSelect(prop, index) : undefined} - {prop.inputType === 'boolean' ? renderBoolean(prop, index) : undefined} - {prop.inputType === 'string' ? renderTextField(prop, index) : undefined} - {prop.inputType === 'colorPicker' ? renderColorInput(prop, index) : undefined} - {prop.inputType === 'number' ? renderSlider(prop, index) : undefined} - - ); - - const iterateProps = ( - knobs: PropsType[], - headingTitle: string, - sectionNumber: number, - groupType: string - ): JSX.Element => ( - - }> - - {headingTitle} - - - - - {knobs?.map( - (item: PropsType, index: number): JSX.Element => propBlock(item, `${groupType}-${index}`) - )} - - - - ); - - const displayPropsByGroupType = (data: ComponentType): JSX.Element => { - const requiredProps: PropsType[] = data.props?.filter((prop) => prop.required) as PropsType[]; - const optionalProps: PropsType[] = data.props?.filter((prop) => !prop.required) as PropsType[]; - const otherProps: PropsType[] = data.otherProps as PropsType[]; - const sharedProps: PropsType[] = data.sharedProps as PropsType[]; - const otherComponentProps: OtherComponentPropsType = data.otherComponentProps as OtherComponentPropsType; - let sectionNumber = 0; - return ( - } mb={2}> - {requiredProps?.length > 0 && iterateProps(requiredProps, 'Required Props', sectionNumber++, 'props')} - {optionalProps?.length > 0 && iterateProps(optionalProps, 'Optional Props', sectionNumber++, 'props')} - {otherComponentProps?.childComponentProps?.length > 0 && - iterateProps( - otherComponentProps.childComponentProps, - otherComponentProps.childComponentName, - sectionNumber++, - 'otherComponentProps' - )} - {sharedProps?.length > 0 && iterateProps(sharedProps, 'Shared Props', sectionNumber++, 'sharedProps')} - {otherProps?.length > 0 && iterateProps(otherProps, 'Others', sectionNumber++, 'otherProps')} - - ); - }; - - return ( -
- - - {displayPropsByGroupType(DrawerData)} - - -
- ); -}; - -export default PlaygroundDrawer; diff --git a/docs/src/shared/PreviewComponentWithCode.tsx b/docs/src/shared/PreviewComponentWithCode.tsx deleted file mode 100644 index 6b6a989c2..000000000 --- a/docs/src/shared/PreviewComponentWithCode.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import Box from '@mui/material/Box/Box'; -import { CodeBlock, CopyToClipboard } from '.'; -import * as Colors from '@brightlayer-ui/colors'; - -export type PreviewComponentProps = HTMLAttributes & { - previewContent: JSX.Element; - code: string; -}; - -const PreviewComponentWithCode: React.FC = (props): JSX.Element => { - const { previewContent, code } = props; - const [show, setShow] = React.useState(false); - - return ( - <> - - {previewContent} - - setShow(!show)} - onMouseLeave={(): void => setShow(false)} - > - - - {show && ( - - )} - - - - ); -}; - -export default PreviewComponentWithCode; diff --git a/docs/src/shared/components/ColorPicker/ColorPicker.component.tsx b/docs/src/shared/components/ColorPicker/ColorPicker.component.tsx deleted file mode 100644 index ad41190ff..000000000 --- a/docs/src/shared/components/ColorPicker/ColorPicker.component.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'; -import InputAdornment from '@mui/material/InputAdornment'; -import { Colorize, QuestionMark } from '@mui/icons-material'; -import { PropsType } from '../../../__types__'; -import Color from 'color'; -import _debounce from 'lodash.debounce'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; -import IconButton from '@mui/material/IconButton'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; - -type ColorPickerProps = TextFieldProps & { - propData: PropsType; - allowMUIColors?: boolean; -}; - -const HEX = /^#[0-9a-f]{6}$/i; -const MUI_COLOR = /^(primary|secondary|error|success|warning|info|text)\.(main|dark|light|contrastText)$/; -const MUI_GREY = /^(grey)\.(50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700)$/; -const MUI_COMMON = /^(common)\.(white|black)$/; -const MUI_TEXT = /^(text)\.(primary|secondary|disabled)$/; -const MUI_DIVIDER = /^divider$/; -const MUI_BACKGROUND = /^(background)\.(paper|default)$/; -const MUI_ACTION = /^(action)\.(active|hover|selected|disabled|disabledBackground|focus)$/; - -const muiRegex = [MUI_COLOR, MUI_GREY, MUI_COMMON, MUI_TEXT, MUI_DIVIDER, MUI_BACKGROUND, MUI_ACTION]; - -const colorIsValid = (color: string, useMui = false): boolean => { - try { - Color(color); - return true; - } catch (e) { - if (useMui) { - for (let i = 0; i < muiRegex.length; i++) { - if (muiRegex[i].test(color)) { - return true; - } - } - } - return false; - } -}; - -export const ColorPicker = (props: ColorPickerProps): JSX.Element => { - const { propData, allowMUIColors = false, ...textFieldProps } = props; - const [color, setColor] = useState(propData.inputValue as string); - - const handleColorChange = useCallback( - (e: ChangeEvent): void => { - textFieldProps.onChange?.(e); - }, - [textFieldProps.onChange] - ); - - const validColor = colorIsValid(color, allowMUIColors) || (!propData.required && color === ''); - - // debounce the color change events to 1 per 300ms - const handleColorChangeDebounced = useMemo(() => _debounce(handleColorChange, 300), [handleColorChange]); - - // cancel the debounce event if we unmount before it executes - useEffect( - () => () => { - handleColorChangeDebounced.cancel(); - }, - [handleColorChangeDebounced] - ); - - return ( - <> - { - setColor(e.target.value); - handleColorChangeDebounced(e as ChangeEvent); - }} - variant={'filled'} - type={'text'} - InputProps={{ - endAdornment: ( - - - - {validColor ? : } - - - { - setColor(e.target.value); - handleColorChangeDebounced(e); - }} - /> - - - ), - }} - value={color} - label={`${propData.label ? propData.label : propData.propName}${ - propData.label ? '' : `:${propData.propType}` - }`} - error={!validColor} - helperText={validColor ? propData.helperText : 'Color value not recognized'} - /> - - ); -}; diff --git a/docs/src/shared/components/NumberPicker/NumberPicker.component.tsx b/docs/src/shared/components/NumberPicker/NumberPicker.component.tsx deleted file mode 100644 index ce99048b7..000000000 --- a/docs/src/shared/components/NumberPicker/NumberPicker.component.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React, { ChangeEvent, useCallback } from 'react'; -import InputAdornment from '@mui/material/InputAdornment'; -import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material'; -import { PropsType } from '../../../__types__'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; -import Collapse from '@mui/material/Collapse'; -import Paper from '@mui/material/Paper'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; -import Slider from '@mui/material/Slider'; - -type NumberPickerProps = TextFieldProps & { - propData: PropsType; -}; - -const floatMath = (value: string | number, step: number): number => { - const valueDecimal = value.toString().indexOf('.') + 1; - const valueDecimalPlaces = value.toString().length - valueDecimal; - const stepDecimal = step.toString().indexOf('.') + 1; - const stepDecimalPlaces = step.toString().length - stepDecimal; - - const floatCorrectionFactor = Math.pow(10, Math.max(valueDecimalPlaces, stepDecimalPlaces)); - // floating point math correction - return ((value as number) * floatCorrectionFactor + step * floatCorrectionFactor) / floatCorrectionFactor; -}; - -export const NumberPicker = (props: NumberPickerProps): JSX.Element => { - const { propData, ...textFieldProps } = props; - const { - step: stepSize = 1, - min = Number.MIN_SAFE_INTEGER, - max = Number.MAX_SAFE_INTEGER, - } = propData?.rangeData || {}; - - // Slider Popover - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleOpen = (event: React.MouseEvent): void => { - setAnchorEl(event.currentTarget); - }; - const handleClose = (): void => { - setAnchorEl(null); - }; - - const handleNumberChange = useCallback( - (e: ChangeEvent): void => { - textFieldProps.onChange?.(e); - }, - [textFieldProps.onChange] - ); - - return ( - - { - // only allow numeric values to be typed in - if (e.target.value && !/^\d+(?:[.]\d+)?$/.test(e.target.value)) return; - handleNumberChange(e as ChangeEvent); - }} - inputProps={{ - min: propData?.rangeData?.min, - max: propData?.rangeData?.max, - step: stepSize, - }} - variant={'filled'} - type={'number'} - onClick={handleOpen} - InputProps={{ - endAdornment: ( - // We fake the increment/decrement buttons so we can stop the event propagation (otherwise every increment toggles the slider panel) - - - { - e.stopPropagation(); - const newValue = Math.min( - max, - floatMath(propData.inputValue as number, stepSize) - ); - handleNumberChange({ target: { value: newValue } } as any); - }} - > - - - { - e.stopPropagation(); - const newValue = Math.max( - min, - floatMath(propData.inputValue as number, -1 * stepSize) - ); - handleNumberChange({ target: { value: newValue } } as any); - }} - > - - - - - ), - }} - value={propData.inputValue as number} - label={`${propData.label ? propData.label : propData.propName}: ${propData.propType}`} - helperText={propData.helperText} - /> - - {/* The range slider popover */} - - - - handleNumberChange({ target: { value: value } } as any)} - /> - - - - - ); -}; diff --git a/docs/src/shared/constants.ts b/docs/src/shared/constants.ts index a624f9e4c..44cfd0a6a 100644 --- a/docs/src/shared/constants.ts +++ b/docs/src/shared/constants.ts @@ -1,5 +1,4 @@ export const DRAWER_WIDTH = 300; -export const PLAYGROUND_DRAWER_WIDTH = 375; export const PADDING = 24; diff --git a/docs/src/shared/data/SharedPropsConfig.tsx b/docs/src/shared/data/SharedPropsConfig.tsx deleted file mode 100644 index a2bf618b6..000000000 --- a/docs/src/shared/data/SharedPropsConfig.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { PropsType } from '../../__types__'; - -export const sharedPropsConfig: PropsType[] = []; - -export default sharedPropsConfig; diff --git a/docs/src/shared/index.tsx b/docs/src/shared/index.tsx index 0346146fb..631f4175a 100644 --- a/docs/src/shared/index.tsx +++ b/docs/src/shared/index.tsx @@ -3,9 +3,7 @@ export * from './ComponentPreviewTabs'; export * from './constants'; export * from './CopyToClipboardButton'; export * from './utilities'; -export * from './DocTextField'; export * from './Logo'; -export * from './PlaygroundDrawer'; export * from './TabPanel'; export * from './FullCodeOnGithubButton'; export * from './CodeBlockActionButtonRow'; diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx index a53a408e1..41c1e9ada 100644 --- a/docs/src/shared/utilities.tsx +++ b/docs/src/shared/utilities.tsx @@ -15,8 +15,6 @@ import RouterIcon from '@mui/icons-material/Router'; import SensorsOff from '@mui/icons-material/SensorsOff'; import TrendingUp from '@mui/icons-material/TrendingUp'; import TrendingDown from '@mui/icons-material/TrendingDown'; -import { RootState } from '../redux/store'; -import { ComponentType, PropsType } from '../__types__'; import { SvgIconProps } from '@mui/material/SvgIcon'; import Box from '@mui/material/Box'; import ArrowBack from '@mui/icons-material/ArrowBack'; @@ -104,25 +102,6 @@ export const getIcon = (icon: string, iconProps?: SvgIconProps): JSX.Element | u } }; -export const createProps = (props: PropsType[]): any => { - const componentProps = props?.reduce( - (acc: any, cur: any) => ({ - ...acc, - [cur.propName]: Array.isArray(cur.inputValue) ? cur.defaultValue : cur.inputValue, - }), - {} - ); - return componentProps; -}; - -export const getComponentState = (componentName: string, state: RootState['componentsPropsState']): ComponentType => { - switch (componentName) { - case 'Drawer Rail Item': - default: - return state.drawerRailItemComponent; - } -}; - export const getImage = (image: string): string | undefined => { switch (image.toLowerCase()) { case 'pattern': @@ -153,53 +132,6 @@ export const getIconSnippetWithProps = (icon: string, iconProps?: SvgIconProps): return result; }; -export const filterPropsAsPerGroupType = ( - state: ComponentType, - propName: string, - groupType?: string -): PropsType | undefined => { - switch (groupType) { - case 'props': - return state.props?.filter((prop) => prop.propName === propName)[0]; - case 'sharedProps': - return state.sharedProps?.filter((prop) => prop.propName === propName)[0]; - case 'otherProps': - return state.otherProps?.filter((prop) => prop.propName === propName)[0]; - default: - return state.props?.filter((prop) => prop.propName === propName)[0]; - } -}; - -export const hideDefaultPropsFromSnippet = ( - state: ComponentType, - propName: string, - currentValue: any | undefined, - groupType?: string, - themeDefaultValue?: string | number -): string => { - const knob = filterPropsAsPerGroupType(state, propName, groupType); - if (knob?.defaultValue === currentValue || themeDefaultValue === currentValue) { - return ''; - } - switch (knob?.propType) { - case 'string': - case 'string | Array': - return currentValue === '' ? '' : `${propName}={"${currentValue}"}`; - case 'ReactNode': - if (knob.inputType === 'string') { - return currentValue === '' ? '' : `${propName}={"${currentValue}"}`; - } - return `${propName}={${currentValue}}`; - case 'boolean': - return `${propName}={${currentValue}}`; - case 'number': - case 'number | string': - return currentValue === '' ? '' : `${propName}={${currentValue}}`; - default: - return `${propName}={${currentValue}}`; - } -}; - export const removeEmptyLines = (code: string): string => code.replace(/^\s*$(?:\r\n?|\n)/gm, ''); export const getBodyFiller = (): JSX.Element => ( From cac6ae591b2be04f31f1da416fcaf003247a987c Mon Sep 17 00:00:00 2001 From: joebochill Date: Thu, 14 Dec 2023 17:16:36 -0500 Subject: [PATCH 25/26] Revert console log from testing --- components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx b/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx index 6f8161d16..14e54f00e 100644 --- a/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx +++ b/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx @@ -254,8 +254,6 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction 0) || Boolean(children)); From 38bea0bb983e5fa3ef7fbc9d978f7bfa5519641e Mon Sep 17 00:00:00 2001 From: huayunh <96_mouse@sina.com> Date: Wed, 27 Dec 2023 17:29:32 -0500 Subject: [PATCH 26/26] Commit to trigger firebase --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dec94ca47..8c4b7bcef 100644 --- a/README.md +++ b/README.md @@ -62,4 +62,4 @@ See the [documentation](https://brightlayer-ui-components.github.io/react) for i ## Browser Support -Brightlayer UI libraries will work with any modern browser. For details refer to our [Browser Support](https://brightlayer-ui.github.io/development/frameworks-web/react#browser-support) documentation. +Brightlayer UI libraries will work with any modern browser. For details, please refer to our [Browser Support](https://brightlayer-ui.github.io/development/frameworks-web/react#browser-support) documentation.