update playground remove tabs replace with spaces

etn-ccis · Feb 7, 2024 · 1f7e063 · 1f7e063
1 parent 227ec85
commit 1f7e063
Show file tree

Hide file tree

Showing 17 changed files with 49 additions and 16 deletions.
diff --git a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx
@@ -148,6 +148,7 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     </Toolbar>
 </AppBar>`
         .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ')
         .replace(/^<AppBar(\s)+\n>/, '<AppBar>');
 
 export const AppBarPlaygroundComponent = (): JSX.Element => (

diff --git a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx
@@ -133,7 +133,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
               })}}`
             : ''
     }
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ChannelValuePlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx
@@ -303,7 +303,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     <DrawerBody>
         <DrawerNavGroup {...navGroupProps} />
     </DrawerBody>
-</Drawer>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</Drawer>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx
@@ -102,7 +102,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['open'] })}
 >
     <Box sx={{ p: 2 }}>Footer Content Here</Box>
-</DrawerFooter>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</DrawerFooter>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerFooterPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx
@@ -145,7 +145,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'backgroundImage'] })}
     ${data.icon && data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
     ${data.backgroundImage !== 'undefined' ? `backgroundImage={'../images/${data.backgroundImage as string}.png'}` : ''}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerHeaderPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx
@@ -139,7 +139,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${data.collapseIcon !== 'undefined' ? `collapseIcon={${getIconSnippetWithProps(data.collapseIcon as string)}}` : ''}
     ${data.expandIcon !== 'undefined' ? `expandIcon={${getIconSnippetWithProps(data.expandIcon as string)}}` : ''}
     items={navGroupItems}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerNavGroupPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx
@@ -104,7 +104,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
     ${data.collapseIcon !== 'undefined' ? `collapseIcon={${getIconSnippetWithProps(data.collapseIcon as string)}}` : ''}
     ${data.expandIcon !== 'undefined' ? `expandIcon={${getIconSnippetWithProps(data.expandIcon as string)}}` : ''}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerNavItemPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx
@@ -139,7 +139,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     `<DrawerRailItem
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'condensed'] })}
     ${data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerRailItemPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx
@@ -94,7 +94,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['open'] })}
 >
     <Box sx={{ p: 2 }}>Subheader Content Here</Box>
-</DrawerSubheader>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</DrawerSubheader>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerSubheaderPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx
@@ -97,7 +97,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     }`
             : ''
     }
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const EmptyStatePlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx
@@ -162,7 +162,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
                 : ''
         }
     }}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const HeroPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx
@@ -240,7 +240,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'clickable'] })}
     ${data.icon && data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
     ${data.clickable ? `onClick={(): void => {}}` : ``}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const InfoListItemPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx
@@ -60,7 +60,9 @@ const ListItemTagPreview: PreviewComponent = ({ data }) => {
 const generateSnippet: CodeSnippetFunction = (data) =>
     `<ListItemTag 
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t' })}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ListItemTagPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx
@@ -254,7 +254,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
         icon={<Cloud />}
     />
     </List>
-</ScoreCard>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</ScoreCard>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ScoreCardPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx
@@ -61,7 +61,9 @@ const ThreeLinerPreview: PreviewComponent = ({ data }) => {
 const generateSnippet: CodeSnippetFunction = (data) =>
     `<ThreeLiner 
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t' })}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ThreeLinerPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx
@@ -92,7 +92,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
             },
         ],
     }]}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ToolbarMenuPlaygroundComponent = (): JSX.Element => (
     <Box

diff --git a/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx
@@ -126,7 +126,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
             ],
         },
     ]}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const UserMenuPlaygroundComponent = (): JSX.Element => (
     <Box