From 16fe163ed912be06d8ec18ef5f63886da54a50be Mon Sep 17 00:00:00 2001
From: AlejoYarce <alejo.yarce990@gmail.com>
Date: Tue, 12 Nov 2024 09:18:31 -0500
Subject: [PATCH] lint updates

---
 .../Layer/LayerGroup/LayerGroup.stories.tsx   | 85 ++++++++++++++-----
 .../Layer/LayerGroup/LayerGroupContainer.tsx  |  6 +-
 src/components/Layer/LayerGroup/index.tsx     | 22 +++--
 src/components/Layer/LayerGroup/types.ts      |  3 +-
 src/components/Layer/LayerPanel/index.tsx     | 31 +++++++
 src/components/Layer/LayerPanel/styled.ts     | 34 ++++++++
 src/components/Layer/LayerPanel/types.ts      | 11 +++
 src/components/TabBar/TabBar.stories.tsx      | 32 +++----
 src/components/TabBar/index.tsx               | 14 +--
 src/components/TabBar/types.ts                |  9 +-
 src/components/index.ts                       |  1 +
 11 files changed, 188 insertions(+), 60 deletions(-)
 create mode 100644 src/components/Layer/LayerPanel/index.tsx
 create mode 100644 src/components/Layer/LayerPanel/styled.ts
 create mode 100644 src/components/Layer/LayerPanel/types.ts

diff --git a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
index c8b536f..594e2b4 100644
--- a/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
+++ b/src/components/Layer/LayerGroup/LayerGroup.stories.tsx
@@ -17,8 +17,7 @@ type Story = StoryObj<typeof meta>
 export const LayerGroupOpen: Story = {
   args: {
     defaultIndex: [0],
-    allowMultiple: true,
-    allowToggle: true,
+    allowMultipleOpen: true,
     children: (
       <>
         <LayerGroup
@@ -27,12 +26,12 @@ export const LayerGroupOpen: Story = {
           layerItems={[
             {
               name: 'layer-1-item-1',
-              label: 'Layer name 1',
+              label: 'Layer 1 name 1',
               caption: 'Caption',
             },
             {
               name: 'layer-1-item-2',
-              label: 'Layer name 2',
+              label: 'Layer 1 name 2',
               caption: 'Caption',
             },
           ]}
@@ -43,12 +42,12 @@ export const LayerGroupOpen: Story = {
           layerItems={[
             {
               name: 'layer-2-item-1',
-              label: 'Layer name 1',
+              label: 'Layer 2 name 1',
               caption: 'Caption',
             },
             {
               name: 'layer-2-item-2',
-              label: 'Layer name 2',
+              label: 'Layer 2 name 2',
               caption: 'Caption',
             },
           ]}
@@ -61,41 +60,87 @@ export const LayerGroupOpen: Story = {
 export const LayerGroupWithRadios: Story = {
   args: {
     defaultIndex: [0],
-    allowMultiple: true,
-    allowToggle: true,
+    allowMultipleOpen: true,
     children: (
       <>
         <LayerGroup
-          label='Title 1'
-          caption='Caption 1'
+          label='Title 3'
+          caption='Caption 3'
           layerItems={[
             {
-              name: 'layer-1-item-11',
-              label: 'Layer name 1',
+              name: 'layer-3-item-1',
+              label: 'Layer 3 name 1',
               caption: 'Caption',
             },
             {
-              name: 'layer-1-item-12',
-              label: 'Layer name 2',
+              name: 'layer-3-item-2',
+              label: 'Layer 3 name 2',
               caption: 'Caption',
             },
           ]}
         />
         <LayerGroup
-          label='Title 2'
-          caption='Caption 2'
+          label='Title 4'
+          caption='Caption 4'
+          layerItems={[
+            {
+              name: 'layer-4-item-1',
+              label: 'Layer 4 name 1',
+              caption: 'Caption',
+              variant: 'radio',
+            },
+            {
+              name: 'layer-4-item-2',
+              label: 'Layer 4 name 2',
+              caption: 'Caption',
+              variant: 'radio',
+            },
+          ]}
+        />
+      </>
+    ),
+  },
+}
+
+export const LayerGroupDefaultSelected: Story = {
+  args: {
+    defaultIndex: [0],
+    allowMultipleOpen: true,
+    children: (
+      <>
+        <LayerGroup
+          label='Title 5'
+          caption='Caption 5'
+          layerItems={[
+            {
+              name: 'layer-5-item-1',
+              label: 'Layer 5 name 1',
+              caption: 'Caption',
+            },
+            {
+              name: 'layer-5-item-2',
+              label: 'Layer 5 name 2',
+              caption: 'Caption',
+              isDefaultSelected: true,
+            },
+          ]}
+        />
+        <LayerGroup
+          label='Title 6'
+          caption='Caption 6'
           layerItems={[
             {
-              name: 'layer-2-item-21',
-              label: 'Layer name 1',
+              name: 'layer-6-item-1',
+              label: 'Layer 6 name 1',
               caption: 'Caption',
               variant: 'radio',
             },
             {
-              name: 'layer-2-item-22',
-              label: 'Layer name 2',
+              name: 'layer-6-item-2',
+              label: 'Layer 6 name 2',
               caption: 'Caption',
               variant: 'radio',
+              isDefaultSelected: true,
             },
           ]}
         />
diff --git a/src/components/Layer/LayerGroup/LayerGroupContainer.tsx b/src/components/Layer/LayerGroup/LayerGroupContainer.tsx
index 1e724e4..8c63756 100644
--- a/src/components/Layer/LayerGroup/LayerGroupContainer.tsx
+++ b/src/components/Layer/LayerGroup/LayerGroupContainer.tsx
@@ -3,15 +3,13 @@ import { LayerGroupContainerProps } from './types'
 
 const LayerGroupContainer = ({
   children,
-  allowMultiple = true,
-  allowToggle = true,
+  allowMultipleOpen = true,
   defaultIndex = [0],
   ...rest
 }: LayerGroupContainerProps) => (
   <div style={{ width: '300px' }}>
     <Accordion
-      allowMultiple={allowMultiple}
-      allowToggle={allowToggle}
+      allowMultiple={allowMultipleOpen}
       defaultIndex={defaultIndex}
       {...rest}
     >
diff --git a/src/components/Layer/LayerGroup/index.tsx b/src/components/Layer/LayerGroup/index.tsx
index a1abcc5..608d32f 100644
--- a/src/components/Layer/LayerGroup/index.tsx
+++ b/src/components/Layer/LayerGroup/index.tsx
@@ -4,7 +4,6 @@ import {
   AccordionPanel,
   AccordionIcon,
   useTheme,
-  RadioGroup,
 } from '@chakra-ui/react'
 import { useEffect, useState } from 'react'
 import { LayerGroupProps } from './types'
@@ -12,20 +11,30 @@ import { LayerGroupCaption, LayerGroupTitle } from './styled'
 import { getThemedColor } from '../../../lib/theme'
 import ActiveTag from '../../Tag/ActiveTag'
 import LayerItem from '../LayerItem'
+import RadioGroup from '../../Radio/RadioGroup'
+import { LayerItemProps } from '../LayerItem/types'
+
+const getDefaultValue = (layerItems: LayerItemProps[]) => {
+  const defaultSelected = layerItems.find(item => item.variant === 'radio' && item.isDefaultSelected)
+  return defaultSelected?.name
+}
 
 const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
   const [activeItems, setActiveItems] = useState<{
     key?: string
     value?: boolean
   }>({})
+  const [defaultValue] = useState(getDefaultValue(layerItems))
   const theme = useTheme()
 
   useEffect(() => {
     let newActiveItems = { ...activeItems }
     layerItems.forEach((item) => {
-      newActiveItems = {
-        ...newActiveItems,
-        [item.name]: item.isDefaultSelected,
+      if (item.isDefaultSelected) {
+        newActiveItems = {
+          ...newActiveItems,
+          [item.variant === 'radio' ? label : item.name]: item.isDefaultSelected,
+        }
       }
     })
 
@@ -57,7 +66,7 @@ const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
       <AccordionItem>
         <h2>
           <AccordionButton
-            style={{ alignItems: 'flex-start' }}
+            style={{ alignItems: 'flex-start', paddingTop: '16px', paddingBottom: 0 }}
             _hover={{ backgroundColor: 'transparent' }}
           >
             <LayerGroupTitle as='span' flex='1'>
@@ -73,9 +82,10 @@ const LayerGroup = ({ label, caption, layerItems }: LayerGroupProps) => {
         </h2>
         <LayerGroupCaption>{caption}</LayerGroupCaption>
         <AccordionPanel pb={0}>
-          <RadioGroup name={label}>
+          <RadioGroup name={label} defaultValue={defaultValue}>
             {layerItems.map((layerItem) => (
               <LayerItem
+                key={layerItem.label}
                 {...layerItem}
                 onChange={(e) => handleOnChange(e, layerItem.onChange)}
               />
diff --git a/src/components/Layer/LayerGroup/types.ts b/src/components/Layer/LayerGroup/types.ts
index b082792..3cd3070 100644
--- a/src/components/Layer/LayerGroup/types.ts
+++ b/src/components/Layer/LayerGroup/types.ts
@@ -2,8 +2,7 @@ import { AccordionProps } from '@chakra-ui/react'
 import { LayerItemProps } from '../LayerItem/types'
 
 export type LayerGroupContainerProps = Omit<AccordionProps, 'onChange'> & {
-  allowMultiple?: boolean
-  allowToggle?: boolean
+  allowMultipleOpen?: boolean
   defaultIndex?: number[]
 }
 
diff --git a/src/components/Layer/LayerPanel/index.tsx b/src/components/Layer/LayerPanel/index.tsx
new file mode 100644
index 0000000..4c8ecd3
--- /dev/null
+++ b/src/components/Layer/LayerPanel/index.tsx
@@ -0,0 +1,31 @@
+import TabBar from '../../TabBar'
+import { LayerPanelDescription, LayerPanelContainer, LayerPanelHeader, LayerPanelTitle } from './styled'
+import { LayerPanelProps } from './types'
+
+const LayerPanel = ({
+  title,
+  description,
+  tabBarVariant = 'panel',
+  buttonTabs,
+  defaultActiveTabLabel,
+  onTabClick,
+  children,
+}: LayerPanelProps) => (
+  <LayerPanelContainer>
+    <LayerPanelHeader>
+      <LayerPanelTitle>{title}</LayerPanelTitle>
+      <LayerPanelDescription>{description}</LayerPanelDescription>
+    </LayerPanelHeader>
+    {buttonTabs && buttonTabs.length > 0 ? (
+      <TabBar
+        variant={tabBarVariant}
+        defaultActiveTabLabel={defaultActiveTabLabel}
+        tabs={buttonTabs}
+        onTabClick={onTabClick}
+      />
+    ) : null}
+    {children}
+  </LayerPanelContainer>
+)
+
+export default LayerPanel
diff --git a/src/components/Layer/LayerPanel/styled.ts b/src/components/Layer/LayerPanel/styled.ts
new file mode 100644
index 0000000..2eb9938
--- /dev/null
+++ b/src/components/Layer/LayerPanel/styled.ts
@@ -0,0 +1,34 @@
+import styled from '@emotion/styled'
+import { getThemedColor, ThemeProps } from '../../../lib/theme'
+
+export const LayerPanelContainer = styled.div<{
+  theme?: ThemeProps
+}>`
+  width: 300px;
+  background-color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 100)};
+`
+
+export const LayerPanelHeader = styled.div<{
+  theme?: ThemeProps
+}>`
+  padding: 16px 16px 20px 16px;
+  border-bottom: 1px solid ${({ theme }) => getThemedColor(theme.colors, 'neutral', 300)};
+`
+
+export const LayerPanelTitle = styled.p<{
+  theme?: ThemeProps
+}>`
+  color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 700)};
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 28px;
+`
+
+export const LayerPanelDescription = styled.p<{
+  theme?: ThemeProps
+}>`
+  color: ${({ theme }) => getThemedColor(theme.colors, 'neutral', 600)};
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+`
diff --git a/src/components/Layer/LayerPanel/types.ts b/src/components/Layer/LayerPanel/types.ts
new file mode 100644
index 0000000..304aa5e
--- /dev/null
+++ b/src/components/Layer/LayerPanel/types.ts
@@ -0,0 +1,11 @@
+import { TabBarItemProps } from '../../TabBar/types'
+
+export type LayerPanelProps = {
+  title: string
+  description: string
+  tabBarVariant?: 'panel' | 'view'
+  buttonTabs?: TabBarItemProps[]
+  defaultActiveTabLabel?: string
+  onTabClick?: (tabLabel: string) => void
+  children: React.ReactNode
+}
diff --git a/src/components/TabBar/TabBar.stories.tsx b/src/components/TabBar/TabBar.stories.tsx
index cc8352f..607ff25 100644
--- a/src/components/TabBar/TabBar.stories.tsx
+++ b/src/components/TabBar/TabBar.stories.tsx
@@ -18,9 +18,9 @@ export const PanelTab: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two' },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two' },
+      { label: 'Three' },
     ],
   },
 }
@@ -29,9 +29,9 @@ export const ViewTab: Story = {
   args: {
     variant: 'view',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two' },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two' },
+      { label: 'Three' },
     ],
   },
 }
@@ -40,11 +40,11 @@ export const PanelTabWithDefaultActive: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two' },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two' },
+      { label: 'Three' },
     ],
-    defaultActiveTabId: 'three',
+    defaultActiveTabLabel: 'Three',
   },
 }
 
@@ -52,9 +52,9 @@ export const PanelTabDisabled: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'One' },
-      { id: 'two', label: 'Two', isDisabled: true },
-      { id: 'three', label: 'Three' },
+      { label: 'One' },
+      { label: 'Two', isDisabled: true },
+      { label: 'Three' },
     ],
   },
 }
@@ -63,9 +63,9 @@ export const PanelTabWitIcons: Story = {
   args: {
     variant: 'panel',
     tabs: [
-      { id: 'one', label: 'Label' },
-      { id: 'two', label: 'Label' },
-      { id: 'three', label: 'Label', leftIcon: <SettingsIcon /> },
+      { label: 'Label' },
+      { label: 'Label' },
+      { label: 'Label', leftIcon: <SettingsIcon /> },
     ],
   },
 }
diff --git a/src/components/TabBar/index.tsx b/src/components/TabBar/index.tsx
index 1e3fca6..3f7c93d 100644
--- a/src/components/TabBar/index.tsx
+++ b/src/components/TabBar/index.tsx
@@ -5,18 +5,18 @@ import { TabBarProps } from './types'
 const TabBar = ({
   variant = 'panel',
   tabs,
-  defaultActiveTabId,
+  defaultActiveTabLabel,
   onTabClick,
 }: TabBarProps) => {
   const [selectedTab, setSelectedTab] = useState(
-    defaultActiveTabId || tabs?.[0]?.id,
+    defaultActiveTabLabel || tabs?.[0]?.label,
   )
 
-  const handleOnTabClick = (id: string) => {
-    setSelectedTab(id)
+  const handleOnTabClick = (label: string) => {
+    setSelectedTab(label)
 
     if (onTabClick) {
-      onTabClick(id)
+      onTabClick(label)
     }
   }
 
@@ -26,8 +26,8 @@ const TabBar = ({
         <TabBarItem
           key={tab.label}
           variant={variant}
-          isSelected={selectedTab === tab.id}
-          onClick={() => handleOnTabClick(tab.id)}
+          isSelected={selectedTab === tab.label}
+          onClick={() => handleOnTabClick(tab.label)}
           aria-label={tab['aria-label'] || tab.label}
           {...tab}
         >
diff --git a/src/components/TabBar/types.ts b/src/components/TabBar/types.ts
index 462d477..9c358e2 100644
--- a/src/components/TabBar/types.ts
+++ b/src/components/TabBar/types.ts
@@ -2,15 +2,14 @@ import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react'
 
 export type TabBarItemProps = Omit<
   ChakraButtonProps,
-  'size' | 'variant' | 'colorScheme'
+  'size' | 'variant' | 'colorScheme' | 'id'
 > & {
-  id: string
-  label?: string
+  label: string
 }
 
 export type TabBarProps = {
   variant: 'panel' | 'view'
   tabs: TabBarItemProps[]
-  defaultActiveTabId?: string
-  onTabClick?: (tabId: string) => void
+  defaultActiveTabLabel?: string
+  onTabClick?: (tabLabel: string) => void
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index 5b43127..379f131 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,3 +8,4 @@ export { default as LayerItem } from './Layer/LayerItem'
 export { default as Checkbox } from './Checkbox'
 export { default as LayerGroup } from './Layer/LayerGroup'
 export { default as LayerGroupContainer } from './Layer/LayerGroup/LayerGroupContainer'
+export { default as LayerPanel } from './Layer/LayerPanel'