add keyboard key component (premieroctet#152)

* add keyboard key component * add defaultProps
sangkyunyoon · Sep 14, 2022 · a25d7b9 · a25d7b9
1 parent 26f08c3
commit a25d7b9
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 0 deletions.
diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx
@@ -58,6 +58,7 @@ const ComponentPreview: React.FC<{
     case 'Radio':
     case 'ListItem':
     case 'BreadcrumbLink':
+    case 'Kbd':
       return (
         <PreviewContainer
           component={component}

diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx
@@ -49,6 +49,7 @@ import AspectRatioPanel from '~components/inspector/panels/components/AspectRati
 import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbPanel'
 import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel'
 import HighlightPanel from '~components/inspector/panels/components/HighlightPanel'
+import KbdPanel from './components/KbdPanel'
 
 const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
   component,
@@ -114,6 +115,7 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
       {type === 'Breadcrumb' && <BreadcrumbPanel />}
       {type === 'BreadcrumbItem' && <BreadcrumbItemPanel />}
       {type === 'BreadcrumbLink' && <LinkPanel />}
+      {type === 'Kbd' && <KbdPanel />}
     </>
   )
 }

diff --git a/src/components/inspector/panels/components/KbdPanel.tsx b/src/components/inspector/panels/components/KbdPanel.tsx
@@ -0,0 +1,10 @@
+import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
+
+const KdbPanel = () => (
+  <>
+    <ChildrenControl />
+  </>
+)
+
+export default memo(KdbPanel)
diff --git a/src/componentsList.ts b/src/componentsList.ts
@@ -86,6 +86,7 @@ export const menuItems: MenuItems = {
       ListItem: {},
     },
   },
+  Kbd: {},
   NumberInput: {},
   Progress: {},
   Radio: {},
@@ -152,6 +153,7 @@ export const componentsList: ComponentType[] = [
   'InputLeftElement',
   'InputRightAddon',
   'InputRightElement',
+  'Kbd',
   'Link',
   'List',
   'ListIcon',

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -52,6 +52,7 @@ type ComponentType =
   | 'List'
   | 'ListItem'
   | 'ListIcon'
+  | 'Kbd'
   | 'Menu'
   | 'NumberInput'
   | 'Progress'

diff --git a/src/utils/defaultProps.tsx b/src/utils/defaultProps.tsx
@@ -59,6 +59,7 @@ import {
   BreadcrumbLinkProps,
   ListProps,
   HighlightProps,
+  KbdProps,
 } from '@chakra-ui/react'
 
 import iconsList from '~iconsList'
@@ -132,6 +133,7 @@ type PreviewDefaultProps = {
   ListItem?: PropsWithForm<any>
   Center?: PropsWithForm<CenterProps>
   Container?: PropsWithForm<ContainerProps>
+  Kbd?: PropsWithForm<KbdProps>
 }
 
 export const DEFAULT_PROPS: PreviewDefaultProps = {
@@ -239,6 +241,7 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     },
   },
   ListItem: { children: 'list' },
+  Kbd: { children: 'shift' },
   Progress: {
     value: 60,
     min: 0,

diff --git a/src/utils/editor.ts b/src/utils/editor.ts
@@ -48,6 +48,7 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'Switch',
   'Tag',
   'Text',
+  'Kbd',
   'Textarea',
   'Tab',
   'Accordion',
-Original file line number
+Diff line change
@@ Expand Up @@
       'Switch',
       'Tag',
       'Text',
+      'Kbd',
       'Textarea',
       'Tab',
       'Accordion',
@@ Expand Down @@