From ac31b8ffc6284a34304f448ceff7e8fa83371f59 Mon Sep 17 00:00:00 2001
From: Hamza Miloud Amar <hamzamiloudamar@gmail.com>
Date: Mon, 1 Jul 2024 18:41:15 +0100
Subject: [PATCH] fix: remove tab stories until I figure a way to solve it

---
 apps/stories/stories/skeleton.stories.tsx     | 291 +++++++++---------
 .../{tabs.stories.tsx => tabs.storiesss.tsx}  |   9 +-
 .../pillar-core/src/core/skeleton/index.tsx   |   6 +-
 packages/pillar-core/src/core/tabs/index.ts   |   1 -
 packages/pillar-core/src/core/tabs/index.tsx  | 157 ++++++++++
 .../pillar-core/src/core/tabs/tabs.type.ts    |   3 +-
 6 files changed, 309 insertions(+), 158 deletions(-)
 rename apps/stories/stories/{tabs.stories.tsx => tabs.storiesss.tsx} (97%)
 delete mode 100644 packages/pillar-core/src/core/tabs/index.ts
 create mode 100644 packages/pillar-core/src/core/tabs/index.tsx

diff --git a/apps/stories/stories/skeleton.stories.tsx b/apps/stories/stories/skeleton.stories.tsx
index 34b4c4bf..536ecdde 100644
--- a/apps/stories/stories/skeleton.stories.tsx
+++ b/apps/stories/stories/skeleton.stories.tsx
@@ -1,159 +1,160 @@
-// import { Avatar, Button, Flex, Skeleton, Text, Grid } from '@pillar-ui/core'
-// import { useBooleanState } from '@pillar-ui/hooks'
-// import { Meta } from '@storybook/react'
-// import React, { useEffect, useRef } from 'react'
-
-import { Skeleton } from '@pillar-ui/core'
+/* eslint-disable @next/next/no-img-element */
+import {
+  Avatar,
+  Button,
+  Flex,
+  Skeleton,
+  Text,
+  Grid,
+  SkeletonText,
+  SkeletonButton,
+  SkeletonAvatar,
+} from '@pillar-ui/core'
+import { useBooleanState } from '@pillar-ui/hooks'
 import { Meta } from '@storybook/react'
+import React, { useEffect, useRef } from 'react'
 
-// const meta: Meta<typeof Skeleton> = {
-//   title: 'Components/Skeleton',
-//   component: Skeleton,
-// }
-
-// export default meta
-
-// function useLoading() {
-//   const { booleanValue: loading, setFalse } = useBooleanState(true)
-//   const timerRef = useRef<NodeJS.Timeout>()
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+}
 
-//   useEffect(() => {
-//     const timerID = setTimeout(setFalse, 2000)
+export default meta
 
-//     timerRef.current = timerID
+function useLoading() {
+  const { booleanValue: loading, setFalse } = useBooleanState(true)
+  const timerRef = useRef<NodeJS.Timeout>()
 
-//     return () => {
-//       clearTimeout(timerRef.current)
-//     }
-//   }, [setFalse])
+  useEffect(() => {
+    const timerID = setTimeout(setFalse, 2000)
 
-//   return loading
-// }
+    timerRef.current = timerID
 
-// export const SkeletonAvatar = () => {
-//   const loading = useLoading()
-//   return (
-//     <Flex items="center" gap="md">
-//       <SkeletonAvatar size="xs" isLoading={loading}>
-//         <Avatar size="xs" variant="image" title="Hello" />
-//       </SkeletonAvatar>
-//       <SkeletonAvatar size="sm" isLoading={loading}>
-//         <Avatar size="sm" variant="image" title="Hello" />
-//       </SkeletonAvatar>
-//       <SkeletonAvatar size="md" isLoading={loading}>
-//         <Avatar size="md" variant="image" title="Hello" />
-//       </SkeletonAvatar>
-//       <SkeletonAvatar size="xl" isLoading={loading}>
-//         <Avatar size="xl" variant="image" title="Hello" />
-//       </SkeletonAvatar>
-//       <SkeletonAvatar size="2xl" isLoading={loading}>
-//         <Avatar size="2xl" variant="image" title="Hello" />
-//       </SkeletonAvatar>
-//     </Flex>
-//   )
-// }
+    return () => {
+      clearTimeout(timerRef.current)
+    }
+  }, [setFalse])
 
-// export const SkeletonTextLines = () => {
-//   const loading = useLoading()
-//   return (
-//     <Flex items="center" gap="md">
-//       <SkeletonText size="xs" isLoading={loading} lines={3}>
-//         <Text size="xs">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="sm" isLoading={loading} lines={3.5}>
-//         <Text size="sm">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="md" isLoading={loading} lines={2.3}>
-//         <Text size="md">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="xl" isLoading={loading} lines={3.3}>
-//         <Text size="xl">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="2xl" isLoading={loading} lines={1.13}>
-//         <Text size="2xl">hello world</Text>
-//       </SkeletonText>
-//     </Flex>
-//   )
-// }
+  return loading
+}
 
-// export const SkeletonTextSizes = () => {
-//   const loading = useLoading()
-//   return (
-//     <Grid grid="1fr 1fr" gap="xl">
-//       <SkeletonText size="3xs" isLoading={loading}>
-//         <Text size="xs">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="2xs" isLoading={loading}>
-//         <Text size="xs">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="xs" isLoading={loading}>
-//         <Text size="xs">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="sm" isLoading={loading}>
-//         <Text size="sm">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="md" isLoading={loading}>
-//         <Text size="md">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="lg" isLoading={loading}>
-//         <Text size="md">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="xl" isLoading={loading}>
-//         <Text size="xl">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="2xl" isLoading={loading}>
-//         <Text size="2xl">hello world</Text>
-//       </SkeletonText>
-//       <SkeletonText size="3xl" isLoading={loading}>
-//         <Text size="2xl">hello world</Text>
-//       </SkeletonText>
-//     </Grid>
-//   )
-// }
+export const Avatars = () => {
+  const loading = useLoading()
+  return (
+    <Flex items="center" gap="md">
+      <SkeletonAvatar size="xs" isLoading={loading}>
+        <Avatar size="xs" variant="image" title="Hello" />
+      </SkeletonAvatar>
+      <SkeletonAvatar size="sm" isLoading={loading}>
+        <Avatar size="sm" variant="image" title="Hello" />
+      </SkeletonAvatar>
+      <SkeletonAvatar size="md" isLoading={loading}>
+        <Avatar size="md" variant="image" title="Hello" />
+      </SkeletonAvatar>
+      <SkeletonAvatar size="xl" isLoading={loading}>
+        <Avatar size="xl" variant="image" title="Hello" />
+      </SkeletonAvatar>
+      <SkeletonAvatar size="2xl" isLoading={loading}>
+        <Avatar size="2xl" variant="image" title="Hello" />
+      </SkeletonAvatar>
+    </Flex>
+  )
+}
 
-// export const SkeletonButton = () => {
-//   const loading = useLoading()
-//   return (
-//     <Flex items="center" gap="md">
-//       <SkeletonButton size="xs" isLoading={loading}>
-//         <Button size="xs">hello world</Button>
-//       </SkeletonButton>
-//       <SkeletonButton size="sm" isLoading={loading}>
-//         <Button size="sm">hello world</Button>
-//       </SkeletonButton>
-//       <SkeletonButton size="md" isLoading={loading}>
-//         <Button size="md">hello world</Button>
-//       </SkeletonButton>
-//       <SkeletonButton size="xl" isLoading={loading}>
-//         <Button size="xl">hello world</Button>
-//       </SkeletonButton>
-//     </Flex>
-//   )
-// }
+export const SkeletonTextLines = () => {
+  const loading = useLoading()
+  return (
+    <Flex items="center" gap="md">
+      <SkeletonText size="xs" isLoading={loading} lines={3}>
+        <Text size="xs">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="sm" isLoading={loading} lines={3.5}>
+        <Text size="sm">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="md" isLoading={loading} lines={2.3}>
+        <Text size="md">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="xl" isLoading={loading} lines={3.3}>
+        <Text size="xl">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="2xl" isLoading={loading} lines={1.13}>
+        <Text size="2xl">hello world</Text>
+      </SkeletonText>
+    </Flex>
+  )
+}
 
-// export const SkeletonBox = () => {
-//   const loading = useLoading()
-//   return (
-//     <Flex items="center" gap="md">
-//       <Skeleton height="300px" isLoading={loading}>
-//         <img src="https://picsum.photos/id/300/300/300" alt="" />
-//       </Skeleton>
-//       <Skeleton height="200px" isLoading={loading}>
-//         <img src="https://picsum.photos/id/300/300/200" alt="" />
-//       </Skeleton>
-//       <Skeleton height="150px" isLoading={loading}>
-//         <img src="https://picsum.photos/id/300/300/150" alt="" />
-//       </Skeleton>
-//       <Skeleton height="450px" isLoading={loading}>
-//         <img src="https://picsum.photos/id/300/300/450" alt="" />
-//       </Skeleton>
-//     </Flex>
-//   )
-// }
+export const SkeletonTextSizes = () => {
+  const loading = useLoading()
+  return (
+    <Grid grid="1fr 1fr" gap="xl">
+      <SkeletonText size="3xs" isLoading={loading}>
+        <Text size="xs">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="2xs" isLoading={loading}>
+        <Text size="xs">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="xs" isLoading={loading}>
+        <Text size="xs">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="sm" isLoading={loading}>
+        <Text size="sm">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="md" isLoading={loading}>
+        <Text size="md">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="lg" isLoading={loading}>
+        <Text size="md">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="xl" isLoading={loading}>
+        <Text size="xl">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="2xl" isLoading={loading}>
+        <Text size="2xl">hello world</Text>
+      </SkeletonText>
+      <SkeletonText size="3xl" isLoading={loading}>
+        <Text size="2xl">hello world</Text>
+      </SkeletonText>
+    </Grid>
+  )
+}
 
-const meta: Meta<typeof Skeleton> = {
-  title: 'Components/Skeleton',
-  component: Skeleton,
+export const Buttons = () => {
+  const loading = useLoading()
+  return (
+    <Flex items="center" gap="md">
+      <SkeletonButton size="xs" isLoading={loading}>
+        <Button size="xs">hello world</Button>
+      </SkeletonButton>
+      <SkeletonButton size="sm" isLoading={loading}>
+        <Button size="sm">hello world</Button>
+      </SkeletonButton>
+      <SkeletonButton size="md" isLoading={loading}>
+        <Button size="md">hello world</Button>
+      </SkeletonButton>
+      <SkeletonButton size="xl" isLoading={loading}>
+        <Button size="xl">hello world</Button>
+      </SkeletonButton>
+    </Flex>
+  )
 }
 
-export default Meta
+export const SkeletonBox = () => {
+  const loading = useLoading()
+  return (
+    <Flex items="center" gap="md">
+      <Skeleton height="300px" isLoading={loading}>
+        <img src="https://picsum.photos/id/300/300/300" alt="" />
+      </Skeleton>
+      <Skeleton height="200px" isLoading={loading}>
+        <img src="https://picsum.photos/id/300/300/200" alt="" />
+      </Skeleton>
+      <Skeleton height="150px" isLoading={loading}>
+        <img src="https://picsum.photos/id/300/300/150" alt="" />
+      </Skeleton>
+      <Skeleton height="450px" isLoading={loading}>
+        <img src="https://picsum.photos/id/300/300/450" alt="" />
+      </Skeleton>
+    </Flex>
+  )
+}
diff --git a/apps/stories/stories/tabs.stories.tsx b/apps/stories/stories/tabs.storiesss.tsx
similarity index 97%
rename from apps/stories/stories/tabs.stories.tsx
rename to apps/stories/stories/tabs.storiesss.tsx
index 8955ca3d..e919921c 100644
--- a/apps/stories/stories/tabs.stories.tsx
+++ b/apps/stories/stories/tabs.storiesss.tsx
@@ -4,9 +4,6 @@
 // import type { TabProps } from '@pillar-ui/core'
 // import { ArrowDown } from '@pillar-ui/icons'
 
-import { Tabs } from '@pillar-ui/core'
-import { Meta } from '@storybook/react'
-
 // const meta: Meta<typeof Chips> = {
 //   title: 'Components/Tabs',
 //   component: Tabs,
@@ -138,8 +135,4 @@ import { Meta } from '@storybook/react'
 //   )
 // }
 
-const meta: Meta<typeof Tabs> = {
-  title: 'Components/Tabs',
-  component: Tabs,
-}
-export const Playground = {}
+export const a = 1
diff --git a/packages/pillar-core/src/core/skeleton/index.tsx b/packages/pillar-core/src/core/skeleton/index.tsx
index 024758a6..644ac284 100644
--- a/packages/pillar-core/src/core/skeleton/index.tsx
+++ b/packages/pillar-core/src/core/skeleton/index.tsx
@@ -9,7 +9,7 @@ import { ForwardRefComponent } from '../../types/polymorphic.type'
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 */
 
-const SkeletonAvatar = forwardRef((props, ref) => {
+export const SkeletonAvatar = forwardRef((props, ref) => {
   const { size = 'xl', corner = 'full', children, isLoading = true, className, ...rest } = props
   const classNames = classnames(`skeleton skeleton--avatar u_size-${size} u_corner-${corner}`, {
     [className!]: !!className,
@@ -25,7 +25,7 @@ SkeletonAvatar.displayName = 'SkeletonAvatar'
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 */
 
-const SkeletonText = forwardRef((props, ref) => {
+export const SkeletonText = forwardRef((props, ref) => {
   const { size = 'md', lines = 2.5, className, children, isLoading = true, as: Tag = 'div', ...rest } = props
   const ceilNumber = Math.ceil(lines)
   const classNames = classnames(`skeleton skeleton--text u_size-${size}`, { [className!]: !!className })
@@ -59,7 +59,7 @@ SkeletonText.displayName = 'SkeletonAvatar'
 ///////////////////////////////////////////////////////////////////////////////////////////////////
 */
 
-const SkeletonButton = forwardRef((props, ref) => {
+export const SkeletonButton = forwardRef((props, ref) => {
   const { size = 'md', as: Tag = 'div', className, isLoading, children, ...rest } = props
   const classNames = classnames(`skeleton skeleton--btn btn__${size}`, { [className!]: !!className })
   const content = <Tag ref={ref} className={classNames} {...rest} />
diff --git a/packages/pillar-core/src/core/tabs/index.ts b/packages/pillar-core/src/core/tabs/index.ts
deleted file mode 100644
index 55f323c5..00000000
--- a/packages/pillar-core/src/core/tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Tabs } from './tabs'
diff --git a/packages/pillar-core/src/core/tabs/index.tsx b/packages/pillar-core/src/core/tabs/index.tsx
new file mode 100644
index 00000000..76d315a0
--- /dev/null
+++ b/packages/pillar-core/src/core/tabs/index.tsx
@@ -0,0 +1,157 @@
+// import { Children, forwardRef, useId } from 'react'
+// import { ForwardRefComponent } from '../../types/polymorphic.type'
+// import type { TabsProps, TabListProps, TabPanelProps, TabsProviderProps, TabProps } from './tabs.type'
+// import { Flex } from '../flex'
+// import { createContext } from '@pillar-ui/utils'
+// import { useRovingIndex } from '@pillar-ui/hooks'
+
+// /*
+// ===============================================================================================
+//     Tab List Core Component
+// ===============================================================================================
+// */
+
+// const [TabsProvider, useTabsContext] = createContext<TabsProviderProps>({ name: 'Tabs' })
+
+// export const TabList = forwardRef(({ children, ...rest }, ref) => {
+//   const { direction, handleKeySelect } = useTabsContext() ?? {}
+//   const flexDirection = direction === 'horizontal' ? ({ direction: 'column' } as const) : {}
+//   return (
+//     <Flex
+//       role="tablist"
+//       {...flexDirection}
+//       aria-orientation={direction}
+//       gap="sm"
+//       onKeyDown={handleKeySelect}
+//       className="tabs--list"
+//       ref={ref}
+//       {...rest}
+//     >
+//       {children}
+//     </Flex>
+//   )
+// }) as ForwardRefComponent<'div', TabListProps>
+// TabList.displayName = 'Pillar-TabList'
+
+// /*
+// ===============================================================================================
+//     Tab  Core Component
+// ===============================================================================================
+// */
+
+// export const Tab = forwardRef(({ title, value, ...rest }, ref) => {
+//   const context = useTabsContext()
+//   const id = `${context?.id}-panel`
+
+//   return (
+//     <button
+//       onClick={() => context?.handleSelect(value)}
+//       type="button"
+//       className={`tab tab__${context?.variant} u_corner-${context?.corner}`}
+//       role="tab"
+//       aria-selected={context?.selected === value}
+//       aria-controls={id}
+//       ref={ref}
+//       {...rest}
+//     >
+//       {title}
+//     </button>
+//   )
+// }) as ForwardRefComponent<'button', TabProps>
+// Tab.displayName = 'Pillar-Tab'
+
+// /*
+// ===============================================================================================
+//     Tab Panel Core Component
+// ===============================================================================================
+// */
+
+// export const TabPanel = forwardRef((props, ref) => {
+//   const { children, value, ...rest } = props
+//   const context = useTabsContext()
+//   const id = `${context?.id}-panel`
+//   if (value !== context?.selected) return null
+//   return (
+//     <div id={id} role="tabpanel" ref={ref} {...rest}>
+//       {children}
+//     </div>
+//   )
+// }) as ForwardRefComponent<'div', TabPanelProps>
+// TabPanel.displayName = 'Pillar-TabPanel'
+
+// /*
+// ===============================================================================================
+//     Tab Panels Core Component
+// ===============================================================================================
+// */
+
+// export const TabPanels = forwardRef((props, ref) => {
+//   const { color = 'surface-12', children, ...rest } = props
+
+//   return (
+//     <div ref={ref} {...rest}>
+//       {children}
+//     </div>
+//   )
+// }) as ForwardRefComponent<'div', TabPanelProps>
+// TabPanels.displayName = 'Pillar-TabPanels'
+
+// /*
+// ===============================================================================================
+//     Tabs Core Component
+// ===============================================================================================
+// */
+
+// export const Tabs = forwardRef(
+//   (
+//     {
+//       children,
+//       direction = 'vertical',
+//       defaultValue,
+//       size,
+//       variant = 'bordered',
+//       corner = 'sm',
+//       color = 'primary',
+//       ...rest
+//     },
+//     ref
+//   ) => {
+//     const id = useId()
+//     const { focusedIndex, handleIndexChange, handleKeyEvent } = useRovingIndex(Children.count(children), {
+//       loop: true,
+//       defaultIndex: defaultValue,
+//       direction: direction,
+//     })
+//     // const [selected, setSelected] = useState<string | undefined>(defaultValue)
+//     // function handleSelect(value: string) {
+//     //   setSelected(value)
+//     // }
+//     const context = {
+//       direction,
+//       selected: focusedIndex,
+//       handleSelect: handleIndexChange,
+//       handleKeySelect: handleKeyEvent,
+//       variant,
+//       corner,
+//       id,
+//     }
+
+//     const flexDirection = direction === 'vertical' ? ({ direction: 'column' } as const) : {}
+
+//     return (
+//       <TabsProvider {...context}>
+//         <Flex {...flexDirection} gap="sm" ref={ref} className={`u_${color} u_size-${size}`} {...rest}>
+//           {children}
+//         </Flex>
+//       </TabsProvider>
+//     )
+//   }
+// ) as ForwardRefComponent<'div', TabsProps>
+
+// Tabs.displayName = 'Pillar-Paper'
+
+// export type { TabsProps, TabListProps, TabPanelProps, TabsProviderProps, TabProps }
+
+export const Tabs = () => {
+  return 'hell'
+}
diff --git a/packages/pillar-core/src/core/tabs/tabs.type.ts b/packages/pillar-core/src/core/tabs/tabs.type.ts
index 3ddb5b38..490276b9 100644
--- a/packages/pillar-core/src/core/tabs/tabs.type.ts
+++ b/packages/pillar-core/src/core/tabs/tabs.type.ts
@@ -7,7 +7,7 @@ interface TabsBase {
   color?: Color
   defaultValue?: number
   size?: Size
-  variant?: Omit<Variant, 'text'> & 'bordered'
+  variant?: Omit<Variant, 'text'> | 'bordered'
   corner?: Corner
   id?: string
 }
@@ -27,5 +27,6 @@ export interface TabListProps {}
 
 export interface TabsProviderProps extends TabsBase {
   handleSelect: (value: number) => void
+  handleKeySelect: ({ key, preventDefault }: KeyboardEvent) => void
   selected: number
 }