Convert Component playground(s) to use playground library

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 orbs:
     codecov: codecov/[email protected]
     gh: circleci/[email protected]
-    browser-tools: circleci/[email protected].2
+    browser-tools: circleci/[email protected].6
 jobs:
     build_library:
         docker:

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.

docs/package.json

@@ -36,10 +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-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",
@@ -48,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",

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[];
-};

docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx

@@ -1,17 +1,162 @@
 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, removeEmptyProps } 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 (
+        <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
+            <Box
+                sx={{
+                    overflow: 'hidden',
+                    width: '100%',
+                    maxWidth: 450,
+                    maxHeight: 400,
+                    position: 'relative',
+                }}
+            >
+                <AppBar
+                    {...removeEmptyProps(rest)}
+                    backgroundImage={getImage(backgroundImage as string)}
+                    scrollContainerId={SCROLL_CONTAINER_ID}
+                >
+                    <Toolbar>
+                        <Typography variant="h6">Title</Typography>
+                    </Toolbar>
+                </AppBar>
+                <Box
+                    id={SCROLL_CONTAINER_ID}
+                    sx={{ height: 400, overflow: 'scroll', backgroundColor: 'background.paper' }}
+                >
+                    {getBodyFiller()}
+                </Box>
+            </Box>
+        </Stack>
+    );
+};
+
+const generateSnippet: CodeSnippetFunction = (data) =>
+    `<AppBar 
+    ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['backgroundImage'] })}
+    ${
+        data.backgroundImage && data.backgroundImage !== 'undefined'
+            ? `backgroundImage={'${getImage(data.backgroundImage as string) || ''}'}`
+            : ''
+    }
+>
+    <Toolbar>
+        <Typography variant={'h6'}>Title</Typography>
+    </Toolbar>
+</AppBar>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/^<AppBar(\s)+\n>/, '<AppBar>');
 
 export const AppBarPlaygroundComponent = (): JSX.Element => (
     <Box
         sx={{
             width: '100%',
-            display: 'flex',
-            flexDirection: 'column',
+            height: { xs: 'calc(100vh - 105px)', sm: 'calc(100vh - 113px)' },
         }}
     >
-        <PreviewComponent />
-        <AppBarPlayground />
+        <Playground inputConfig={inputConfig} codeSnippet={generateSnippet} previewComponent={AppBarPreview} />
     </Box>
 );