Add Slider component

src/components/editor/ComponentPreview.tsx

@@ -23,6 +23,8 @@ import IconPreview from './previews/IconPreview'
 import IconButtonPreview from './previews/IconButtonPreview'
 import SelectPreview from '~components/editor/previews/SelectPreview'
 import NumberInputPreview from '~components/editor/previews/NumberInputPreview'
+import SliderTrackPreview from './previews/SliderTrackPreview'
+import SliderPreview from './previews/SliderPreview'
 
 const ComponentPreview: React.FC<{
   componentName: string
@@ -55,6 +57,8 @@ const ComponentPreview: React.FC<{
     case 'Radio':
     case 'ListItem':
     case 'BreadcrumbLink':
+    case 'SliderThumb':
+    case 'SliderFilledTrack':
       return (
         <PreviewContainer
           component={component}
@@ -150,6 +154,10 @@ const ComponentPreview: React.FC<{
       return <SelectPreview component={component} />
     case 'NumberInput':
       return <NumberInputPreview component={component} />
+    case 'SliderTrack':
+      return <SliderTrackPreview component={component} />
+    case 'Slider':
+      return <SliderPreview component={component} />
     default:
       return null
   }

src/components/editor/previews/SliderPreview.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useInteractive } from '~hooks/useInteractive'
+import ComponentPreview from '~components/editor/ComponentPreview'
+import { Slider } from '@chakra-ui/react'
+
+const SliderPreview: React.FC<IPreviewProps> = ({ component }) => {
+  const { props } = useInteractive(component, false)
+
+  return (
+    <Slider {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview key={key} componentName={key} />
+      ))}
+    </Slider>
+  )
+}
+
+export default SliderPreview

src/components/editor/previews/SliderTrackPreview.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useInteractive } from '~hooks/useInteractive'
+import ComponentPreview from '~components/editor/ComponentPreview'
+import { SliderTrack } from '@chakra-ui/react'
+
+const SliderTrackPreview: React.FC<IPreviewProps> = ({ component }) => {
+  const { props } = useInteractive(component, false)
+
+  return (
+    <SliderTrack {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview key={key} componentName={key} />
+      ))}
+    </SliderTrack>
+  )
+}
+
+export default SliderTrackPreview

src/components/inspector/panels/Panels.tsx

@@ -48,6 +48,7 @@ import NumberInputPanel from '~components/inspector/panels/components/NumberInpu
 import AspectRatioPanel from '~components/inspector/panels/components/AspectRatioPanel'
 import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbPanel'
 import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel'
+import SliderPanel from './components/SliderPanel'
 
 const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
   component,
@@ -96,6 +97,10 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
       {type === 'Radio' && <RadioPanel />}
       {type === 'RadioGroup' && <RadioGroupPanel />}
       {type === 'Select' && <SelectPanel />}
+      {type === 'Slider' && <SliderPanel />}
+      {type === 'SliderTrack' && <ChildrenControl />}
+      {type === 'SliderFilledTrack' && <ChildrenControl />}
+      {type === 'SliderThumb' && <ChildrenControl />}
       {type === 'List' && <ListPanel />}
       {type === 'ListItem' && <ListItemPanel />}
       {type === 'ListIcon' && <ListIconPanel />}

src/components/inspector/panels/components/SliderPanel.tsx

@@ -0,0 +1,122 @@
+import React, { memo } from 'react'
+import {
+  SliderTrack,
+  SliderFilledTrack,
+  Slider,
+  SliderThumb,
+  Select,
+  Input,
+} from '@chakra-ui/react'
+import FormControl from '~components/inspector/controls/FormControl'
+import { useForm } from '~hooks/useForm'
+import usePropsSelector from '~hooks/usePropsSelector'
+import SizeControl from '~components/inspector/controls/SizeControl'
+import ColorsControl from '~components/inspector/controls/ColorsControl'
+
+const SliderPanel = () => {
+  const { setValue, setValueFromEvent } = useForm()
+  const value = usePropsSelector('value')
+  const size = usePropsSelector('size')
+  const step = usePropsSelector('step')
+  const orientation = usePropsSelector('orientation')
+  const label = usePropsSelector('aria-label')
+  const min = usePropsSelector('min')
+  const max = usePropsSelector('max')
+
+  return (
+    <>
+      <FormControl label="Value">
+        <Slider
+          onChange={value => setValue('value', value)}
+          min={0}
+          max={100}
+          step={1}
+          value={value}
+          defaultValue={value}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb />
+        </Slider>
+      </FormControl>
+
+      <FormControl label="Min">
+        <Slider
+          onChange={value => setValue('min', value)}
+          min={0}
+          max={100}
+          step={1}
+          value={min}
+          defaultValue={min}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb />
+        </Slider>
+      </FormControl>
+
+      <FormControl label="Max">
+        <Slider
+          onChange={value => setValue('max', value)}
+          min={0}
+          max={100}
+          step={1}
+          value={max}
+          defaultValue={max}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb />
+        </Slider>
+      </FormControl>
+
+      <FormControl label="Step">
+        <Slider
+          onChange={step => setValue('step', step)}
+          min={1}
+          max={100}
+          step={1}
+          value={step}
+          defaultValue={step}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb />
+        </Slider>
+      </FormControl>
+
+      <FormControl label="Aria Label">
+        <Input
+          size="sm"
+          value={label || ''}
+          type="text"
+          name="aria-label"
+          onChange={setValueFromEvent}
+        />
+      </FormControl>
+
+      <ColorsControl label="Color Scheme" name="colorScheme" />
+
+      <SizeControl label="Size" options={['sm', 'md', 'lg']} value={size} />
+
+      <FormControl htmlFor="orientation" label="Orientation">
+        <Select
+          id="orientation"
+          onChange={setValueFromEvent}
+          name="orientation"
+          size="sm"
+          value={orientation || ''}
+        >
+          <option>horizontal</option>
+          <option>vertical</option>
+        </Select>
+      </FormControl>
+    </>
+  )
+}
+
+export default memo(SliderPanel)

src/componentsList.ts

@@ -94,6 +94,13 @@ export const menuItems: MenuItems = {
   SimpleGrid: {},
   Spinner: {},
   Select: {},
+  Slider: {
+    children: {
+      SliderTrack: {},
+      SliderFilledTrack: {},
+      SliderThumb: {},
+    },
+  },
   Stack: {},
   Switch: {},
   Tag: {},
@@ -161,6 +168,7 @@ export const componentsList: ComponentType[] = [
   'RadioGroup',
   'Select',
   'SimpleGrid',
+  'Slider',
   'Spinner',
   'Stack',
   'Switch',

src/core/models/composer/builder.ts

@@ -134,6 +134,21 @@ export const buildInputGroup = (parent: string): ComposedComponent => {
   }
 }
 
+export const buildSlider = (parent: string): ComposedComponent => {
+  const composer = new Composer()
+  const nodeId = composer.addNode({ type: 'Slider' })
+  const track = composer.addNode({ type: 'SliderTrack', parent: nodeId })
+  composer.addNode({ type: 'SliderFilledTrack', parent: track })
+  composer.addNode({ type: 'SliderThumb', parent: nodeId })
+  const components = composer.getComponents()
+
+  return {
+    components,
+    root: nodeId,
+    parent,
+  }
+}
+
 type BuilderFn = (parent: string) => ComposedComponent
 
 type ComposerBuilders = {
@@ -147,6 +162,7 @@ const builders: ComposerBuilders = {
   ListMeta: buildList,
   InputGroupMeta: buildInputGroup,
   BreadcrumbMeta: buildBreadcrumb,
+  SliderMeta: buildSlider,
 }
 
 export default builders

src/react-app-env.d.ts

@@ -58,6 +58,10 @@ type ComponentType =
   | 'RadioGroup'
   | 'Select'
   | 'SimpleGrid'
+  | 'Slider'
+  | 'SliderTrack'
+  | 'SliderFilledTrack'
+  | 'SliderThumb'
   | 'Spinner'
   | 'Stack'
   | 'Switch'
@@ -77,6 +81,7 @@ type MetaComponentType =
   | 'AlertMeta'
   | 'InputGroupMeta'
   | 'BreadcrumbMeta'
+  | 'SliderMeta'
 
 interface IComponent {
   children: string[]

src/utils/defaultProps.tsx

@@ -58,9 +58,10 @@ import {
   TabProps,
   BreadcrumbLinkProps,
   ListProps,
+  SliderProps,
+  SliderTrackProps,
+  SliderThumbProps,
 } from '@chakra-ui/react'
-
-import { ChevronDownIcon } from '@chakra-ui/icons'
 import iconsList from '~iconsList'
 
 type PropsWithForm<T> = T & { form?: T }
@@ -131,6 +132,10 @@ type PreviewDefaultProps = {
   ListItem?: PropsWithForm<any>
   Center?: PropsWithForm<CenterProps>
   Container?: PropsWithForm<ContainerProps>
+  Slider?: PropsWithForm<SliderProps>
+  SliderTrack?: PropsWithForm<SliderTrackProps>
+  SliderFilledTrack?: PropsWithForm<any>
+  SliderThumb?: PropsWithForm<SliderThumbProps>
 }
 
 export const DEFAULT_PROPS: PreviewDefaultProps = {
@@ -261,6 +266,15 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     spacingX: 1,
     spacingY: 1,
   },
+  Slider: {
+    step: 1,
+    size: 'md',
+    defaultValue: 50,
+    'aria-label': 'slider',
+  },
+  SliderFilledTrack: {},
+  SliderThumb: {},
+  SliderTrack: {},
   Stack: {
     spacing: 2,
     form: {

src/utils/editor.ts

@@ -5,6 +5,13 @@ const ALERT_COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'AlertTitle',
 ]
 
+const SLIDER_COMPONENTS: (ComponentType | MetaComponentType)[] = [
+  'Slider',
+  'SliderTrack',
+  'SliderFilledTrack',
+  'SliderThumb',
+]
+
 export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   ...ALERT_COMPONENTS,
   'Avatar',
@@ -43,6 +50,7 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'SimpleGrid',
   'Spinner',
   'Select',
+  ...SLIDER_COMPONENTS,
   'Stack',
   'Switch',
   'Tag',
@@ -70,6 +78,7 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'ListMeta',
   'InputGroupMeta',
   'BreadcrumbMeta',
+  'SliderMeta',
 ]
 
 export const AccordionWhitelist: (
@@ -89,5 +98,8 @@ export const rootComponents = COMPONENTS
         'AccordionButton',
         'AccordionPanel',
         'AccordionIcon',
+        'SliderTrack',
+        'SliderFilledTrack',
+        'SliderThumb',
       ].includes(name),
   )