add skeleton components (#149)

* add skeleton components

* fix

* fix

* fix skeleton

* fix

* add custom

* fix skeleton

src/components/editor/ComponentPreview.tsx

@@ -30,6 +30,10 @@ import StatGroupPreview, {
   StatHelpTextPreview,
   StatPreview,
 } from './previews/StatPreview'
+import SkeletonPreview, {
+  SkeletonCirclePreview,
+  SkeletonTextPreview,
+} from './previews/SkeletonPreview'
 
 const ComponentPreview: React.FC<{
   componentName: string
@@ -165,12 +169,13 @@ const ComponentPreview: React.FC<{
       return <NumberInputPreview component={component} />
     case 'Highlight':
       return <HighlightPreview component={component} />
-    case 'StatGroup':
-      return <StatGroupPreview component={component} />
-    case 'Stat':
-      return <StatPreview component={component} />
-    case 'StatHelpText':
-      return <StatHelpTextPreview component={component} />
+    case 'Skeleton':
+      return <SkeletonPreview component={component} />
+    case 'SkeletonText':
+      return <SkeletonTextPreview component={component} />
+    case 'SkeletonCircle':
+      return <SkeletonCirclePreview component={component} />
+
     default:
       return null
   }

src/components/editor/previews/SkeletonPreview.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Box, Skeleton, SkeletonCircle, SkeletonText } from '@chakra-ui/react'
+import ComponentPreview from '~components/editor/ComponentPreview'
+import { useDropComponent } from '~hooks/useDropComponent'
+import { useInteractive } from '~hooks/useInteractive'
+
+const SkeletonPreview: React.FC<{ component: IComponent }> = ({
+  component,
+}) => {
+  const { drop, isOver } = useDropComponent(component.id)
+  const { props, ref } = useInteractive(component, true, true)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box ref={drop(ref)} {...props} m={0}>
+      <Skeleton {...component.props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </Skeleton>
+    </Box>
+  )
+}
+
+export const SkeletonTextPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true)
+  const { drop, isOver } = useDropComponent(component.id)
+
+  let boxProps: any = {}
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box ref={drop(ref)} {...boxProps}>
+      <SkeletonText {...props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </SkeletonText>
+    </Box>
+  )
+}
+
+export const SkeletonCirclePreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true, true)
+  const { drop, isOver } = useDropComponent(component.id)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <Box display="inline-block" ref={drop(ref)} {...props}>
+      <SkeletonCircle {...component.props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview key={key} componentName={key} />
+        ))}
+      </SkeletonCircle>
+    </Box>
+  )
+}
+
+export default SkeletonPreview

src/components/inspector/panels/Panels.tsx

@@ -53,6 +53,7 @@ import KbdPanel from './components/KbdPanel'
 import TabPanel from './components/TabPanel'
 import StatArrowPanel from './components/StatArrowPanel'
 import StatLabelPanel from './components/StatLabelPanel'
+import SkeletonPanel from './components/SkeletonPanel'
 
 const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
   component,
@@ -103,6 +104,9 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
       {type === 'Radio' && <RadioPanel />}
       {type === 'RadioGroup' && <RadioGroupPanel />}
       {type === 'Select' && <SelectPanel />}
+      {type === 'Skeleton' && <SkeletonPanel />}
+      {type === 'SkeletonCircle' && <SkeletonPanel isSkeletonCircle />}
+      {type === 'SkeletonText' && <SkeletonPanel isSkeletonText />}
       {type === 'List' && <ListPanel />}
       {type === 'ListItem' && <ListItemPanel />}
       {type === 'ListIcon' && <ListIconPanel />}

src/components/inspector/panels/components/SkeletonPanel.tsx

@@ -0,0 +1,50 @@
+import { memo } from 'react'
+import ColorPickerControl from '~components/inspector/controls/ColorPickerControl'
+import ColorsControl from '~components/inspector/controls/ColorsControl'
+import SwitchControl from '~components/inspector/controls/SwitchControl'
+import TextControl from '~components/inspector/controls/TextControl'
+import usePropsSelector from '~hooks/usePropsSelector'
+
+interface SkeletonPanelProps {
+  isSkeletonText?: boolean
+  isSkeletonCircle?: boolean
+}
+
+const SkeletonPanel = ({
+  isSkeletonText,
+  isSkeletonCircle,
+}: SkeletonPanelProps) => {
+  return (
+    <>
+      <ColorsControl
+        name="startColor"
+        label="Start Color"
+        enableHues
+        withFullColor
+      />
+
+      <ColorsControl
+        name="endColor"
+        label="End Color"
+        enableHues
+        withFullColor
+      />
+
+      <SwitchControl label="Is Loaded" name="isLoaded" />
+
+      <TextControl name="fadeDuration" label="Fade duration" />
+      <TextControl name="speed" label="Speed" />
+
+      {isSkeletonText && (
+        <>
+          <TextControl name="noOfLines" label="No of lines" />
+          <TextControl name="spacing" label="Spacing" />
+        </>
+      )}
+
+      {isSkeletonCircle && <TextControl name="size" label="Size" />}
+    </>
+  )
+}
+
+export default memo(SkeletonPanel)

src/componentsList.ts

@@ -96,6 +96,9 @@ export const menuItems: MenuItems = {
   SimpleGrid: {},
   Spinner: {},
   Select: {},
+  Skeleton: {},
+  SkeletonCircle: {},
+  SkeletonText: {},
   Stack: {},
   Stat: {
     children: {
@@ -180,6 +183,9 @@ export const componentsList: ComponentType[] = [
   'Select',
   'SimpleGrid',
   'Spinner',
+  'Skeleton',
+  'SkeletonCircle',
+  'SkeletonText',
   'Stack',
   'Stat',
   'StatArrow',

src/react-app-env.d.ts

@@ -61,6 +61,9 @@ type ComponentType =
   | 'Select'
   | 'SimpleGrid'
   | 'Spinner'
+  | 'Skeleton'
+  | 'SkeletonCircle'
+  | 'SkeletonText'
   | 'Stack'
   | 'Stat'
   | 'StatLabel'

src/utils/defaultProps.tsx

@@ -66,6 +66,7 @@ import {
   StatLabelProps,
   StatNumberProps,
   StatArrowProps,
+  SkeletonProps,
 } from '@chakra-ui/react'
 
 import iconsList from '~iconsList'
@@ -146,6 +147,9 @@ type PreviewDefaultProps = {
   Center?: PropsWithForm<CenterProps>
   Container?: PropsWithForm<ContainerProps>
   Kbd?: PropsWithForm<KbdProps>
+  Skeleton?: PropsWithForm<SkeletonProps>
+  SkeletonCircle?: PropsWithForm<SkeletonProps>
+  SkeletonText?: PropsWithForm<SkeletonProps>
 }
 
 export const DEFAULT_PROPS: PreviewDefaultProps = {
@@ -296,6 +300,26 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     alignItems: 'center',
   },
   StatGroup: {},
+  Skeleton: {
+    height: 50,
+
+    form: {
+      fadeDuration: 0.4,
+      speed: 0.8,
+    },
+  },
+  SkeletonCircle: {
+    form: {
+      fadeDuration: 0.4,
+      speed: 0.8,
+    },
+  },
+  SkeletonText: {
+    form: {
+      fadeDuration: 0.4,
+      speed: 0.8,
+    },
+  },
   Switch: {
     isChecked: false,
   },

src/utils/editor.ts

@@ -44,6 +44,9 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'SimpleGrid',
   'Spinner',
   'Select',
+  'Skeleton',
+  'SkeletonCircle',
+  'SkeletonText',
   'Stack',
   'Switch',
   'Tag',