add tabs component (premieroctet#154)

* add tabs component

* add defaultProps size

src/components/inspector/panels/Panels.tsx

@@ -50,6 +50,7 @@ import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbP
 import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel'
 import HighlightPanel from '~components/inspector/panels/components/HighlightPanel'
 import KbdPanel from './components/KbdPanel'
+import TabPanel from './components/TabPanel'
 
 const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
   component,
@@ -95,6 +96,7 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
       {type === 'Stack' && <StackPanel />}
       {type === 'FormControl' && <FormControlPanel />}
       {type === 'Tabs' && <TabsPanel />}
+      {type === 'Tab' && <TabPanel />}
       {type === 'Input' && <InputPanel />}
       {type === 'Radio' && <RadioPanel />}
       {type === 'RadioGroup' && <RadioGroupPanel />}

src/components/inspector/panels/components/TabPanel.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import SwitchControl from '~components/inspector/controls/SwitchControl'
+import TextControl from '~components/inspector/controls/TextControl'
+
+const TabPanel = () => {
+  return (
+    <>
+      <SwitchControl label="Is Disabled" name="isDisabled" />
+      <SwitchControl label="Is Selected" name="isSelected" />
+      <TextControl name="panelId" label="Panel Id" />
+    </>
+  )
+}
+
+export default TabPanel

src/components/inspector/panels/components/TabsPanel.tsx

@@ -12,11 +12,13 @@ const TabsPanel = () => {
   const variant = usePropsSelector('variant')
   const orientation = usePropsSelector('orientation')
   const size = usePropsSelector('size')
+  const align = usePropsSelector('align')
 
   return (
     <>
       <SwitchControl label="Manual" name="isManual" />
       <SwitchControl label="Fitted" name="isFitted" />
+      <SwitchControl label="Lazy" name="isLazy" />
 
       <FormControl label="Variant" htmlFor="variant">
         <Select
@@ -35,6 +37,20 @@ const TabsPanel = () => {
         </Select>
       </FormControl>
 
+      <FormControl label="Align" htmlFor="align">
+        <Select
+          name="align"
+          id="align"
+          size="sm"
+          value={align || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>center</option>
+          <option>end</option>
+          <option>start</option>
+        </Select>
+      </FormControl>
+
       <FormControl label="Orientation" htmlFor="orientation">
         <Select
           name="orientation"

src/componentsList.ts

@@ -98,15 +98,19 @@ export const menuItems: MenuItems = {
   Select: {},
   Stack: {},
   Switch: {},
+  Tabs: {
+    children: {
+      Tabs: {},
+      Tab: {},
+      TabList: {},
+      TabPanel: {},
+      TabPanels: {},
+    },
+  },
   Tag: {},
   Text: {},
   Textarea: {},
   Menu: { soon: true },
-  Tab: { soon: true },
-  /*"Tabs",
-  "TabList",
-  "TabPanel",
-  "TabPanels"*/
 }
 
 export const componentsList: ComponentType[] = [

src/core/models/composer/builder.ts

@@ -89,6 +89,44 @@ export const buildAccordion = (parent: string): ComposedComponent => {
   }
 }
 
+export const buildTabs = (parent: string): ComposedComponent => {
+  const composer = new Composer('Tabs')
+
+  const nodeId = composer.addNode({ type: 'Tabs', parent })
+  const tabListId = composer.addNode({ type: 'TabList', parent: nodeId })
+  const tabPanelsId = composer.addNode({ type: 'TabPanels', parent: nodeId })
+
+  composer.addNode({
+    type: 'Tab',
+    parent: tabListId,
+    props: { children: 'One' },
+  })
+  composer.addNode({
+    type: 'Tab',
+    parent: tabListId,
+    props: { children: 'Two' },
+  })
+
+  composer.addNode({
+    type: 'TabPanel',
+    parent: tabPanelsId,
+    props: { children: 'One !' },
+  })
+  composer.addNode({
+    type: 'TabPanel',
+    parent: tabPanelsId,
+    props: { children: 'Two !' },
+  })
+
+  const components = composer.getComponents()
+
+  return {
+    components,
+    root: nodeId,
+    parent,
+  }
+}
+
 export const buildList = (parent: string): ComposedComponent => {
   const composer = new Composer('List')
 
@@ -147,6 +185,7 @@ const builders: ComposerBuilders = {
   ListMeta: buildList,
   InputGroupMeta: buildInputGroup,
   BreadcrumbMeta: buildBreadcrumb,
+  TabsMeta: buildTabs,
 }
 
 export default builders

src/react-app-env.d.ts

@@ -79,6 +79,7 @@ type MetaComponentType =
   | 'AlertMeta'
   | 'InputGroupMeta'
   | 'BreadcrumbMeta'
+  | 'TabsMeta'
 
 interface IComponent {
   children: string[]

src/utils/defaultProps.tsx

@@ -279,6 +279,7 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     isChecked: false,
   },
   Tab: { children: 'Tab' },
+  Tabs: { children: '', size: 'md' },
   TabPanel: { children: 'Tab' },
   Tag: {
     children: 'Tag name',

src/utils/editor.ts

@@ -65,13 +65,19 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'AccordionIcon',
   'InputRightElement',
   'InputLeftElement',
+  'Tab',
+  'TabList',
+  'TabPanel',
+  'TabPanels',
+  'Tabs',
   // Allow meta components
   'AlertMeta',
   'FormControlMeta',
   'AccordionMeta',
   'ListMeta',
   'InputGroupMeta',
   'BreadcrumbMeta',
+  'TabsMeta',
 ]
 
 export const AccordionWhitelist: (