From e6c96f97938f70bf562272d0e7547a1519fb351e Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Tue, 5 Nov 2024 17:04:22 +0100
Subject: [PATCH] refactor(skeleton): refacto skeleton API

---
 e2e/a11y/pages/Skeleton.tsx                   |   6 +-
 package-lock.json                             |   2 +-
 packages/components/skeleton/package.json     |   1 -
 .../components/skeleton/src/Skeleton.doc.mdx  |  31 ++--
 .../skeleton/src/Skeleton.stories.tsx         | 144 ++++--------------
 .../skeleton/src/Skeleton.styles.ts           |   2 +-
 packages/components/skeleton/src/Skeleton.tsx |  10 +-
 .../skeleton/src/SkeletonGroup.styles.ts      |  29 ----
 .../components/skeleton/src/SkeletonGroup.tsx |  37 -----
 .../skeleton/src/SkeletonItem.styles.ts       |  13 +-
 .../components/skeleton/src/SkeletonItem.tsx  |   8 +-
 packages/components/skeleton/src/index.ts     |   4 -
 12 files changed, 52 insertions(+), 235 deletions(-)
 delete mode 100644 packages/components/skeleton/src/SkeletonGroup.styles.ts
 delete mode 100644 packages/components/skeleton/src/SkeletonGroup.tsx

diff --git a/e2e/a11y/pages/Skeleton.tsx b/e2e/a11y/pages/Skeleton.tsx
index a80c01c2b..280268bc4 100644
--- a/e2e/a11y/pages/Skeleton.tsx
+++ b/e2e/a11y/pages/Skeleton.tsx
@@ -3,13 +3,13 @@ import React from 'react'
 
 export const A11ySkeleton = () => (
   <section>
-    <Skeleton gap="lg">
+    <Skeleton className="gap-lg">
       <Skeleton.Rectangle height={128} />
 
-      <Skeleton.Group gap="lg">
+      <div className="flex flex-wrap gap-lg">
         <Skeleton.Circle size={64} />
         <Skeleton.Line gap="md" lines={3} />
-      </Skeleton.Group>
+      </div>
     </Skeleton>
   </section>
 )
diff --git a/package-lock.json b/package-lock.json
index 106746377..cbd92b499 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1890,6 +1890,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -30526,7 +30527,6 @@
       "license": "MIT",
       "dependencies": {
         "@spark-ui/internal-utils": "^6.3.8",
-        "@spark-ui/radio-group": "^6.3.8",
         "@spark-ui/visually-hidden": "^6.3.8",
         "class-variance-authority": "0.7.0"
       },
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
index e9d6e834f..90cb72dee 100644
--- a/packages/components/skeleton/package.json
+++ b/packages/components/skeleton/package.json
@@ -23,7 +23,6 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@spark-ui/radio-group": "^6.3.8",
     "@spark-ui/internal-utils": "^6.3.8",
     "@spark-ui/visually-hidden": "^6.3.8",
     "class-variance-authority": "0.7.0"
diff --git a/packages/components/skeleton/src/Skeleton.doc.mdx b/packages/components/skeleton/src/Skeleton.doc.mdx
index a362ea875..023639ff0 100644
--- a/packages/components/skeleton/src/Skeleton.doc.mdx
+++ b/packages/components/skeleton/src/Skeleton.doc.mdx
@@ -30,10 +30,6 @@ import { Skeleton } from '@spark-ui/skeleton'
   of={Skeleton}
   description="A container for all Skeleton parts."
   subcomponents={{
-    'Skeleton.Group': {
-      of: Skeleton.Group,
-      description: 'A wrapper to group Skeleton components, for advanced layouts.',
-    },
     'Skeleton.Circle': {
       of: Skeleton.Circle,
       description: 'A specific Skeleton component, for circular content.',
@@ -55,27 +51,20 @@ import { Skeleton } from '@spark-ui/skeleton'
 
 <Canvas of={stories.Default} />
 
-### Size
+### Sizing
 
 For `<Skeleton.Rectangle />` component you can use `width|height` props to define the size.
 
-For `<Skeleton.Circle />` component you can use `size` prop to define the size.
-
-For `<Skeleton.Line />` component you can use `lines` prop to define the number of lines, which will be equivalent to size in this specific usecase.
-
-<Canvas of={stories.Size} />
+<Canvas of={stories.RectangleSize} />
 
-### Gap
-
-Use `gap` property to set gaps between group items, or lines.
-
-<Canvas of={stories.Gap} />
+For `<Skeleton.Circle />` component you can use `size` prop to define the size.
 
-### Alignment
+<Canvas of={stories.CircleSize} />
 
-Use `alignment` property to set alignments for group items, or lines.
+For `<Skeleton.Line />` component you can use `lines` prop to define the number of lines, which will
+be equivalent to size in this specific usecase. To handle spacing between these lines, use `gap` specific prop.
 
-<Canvas of={stories.Alignment} />
+<Canvas of={stories.LineSize} />
 
 ### Animation
 
@@ -85,11 +74,11 @@ Use `isAnimated` prop display an animation on your `<Skeleton />` content.
 
 ## Advanced usage
 
-### Group
+### Composing layouts
 
-For advanced `<Skeleton />` layouts you can group items to fit your specific needs. You can then define gaps, direction and alignment properties for this group, using dedicated properties `gap`, `direction` and `alignment`.
+For specific needs you may want to build an entire layout using skeleton items (eg. cards, ...). You may then simply add your own solution (such as a specific markup using flexbox or grid CSS modules) in your implementation.
 
-<Canvas of={stories.Group} />
+<Canvas of={stories.Layout} />
 
 ## Accessibility
 
diff --git a/packages/components/skeleton/src/Skeleton.stories.tsx b/packages/components/skeleton/src/Skeleton.stories.tsx
index f73aa782c..d3cfdd204 100644
--- a/packages/components/skeleton/src/Skeleton.stories.tsx
+++ b/packages/components/skeleton/src/Skeleton.stories.tsx
@@ -1,10 +1,7 @@
 import { StoryLabel } from '@docs/helpers/StoryLabel'
-import { RadioGroup } from '@spark-ui/radio-group'
 import { Meta, StoryFn } from '@storybook/react'
-import { useState } from 'react'
 
 import { Skeleton } from '.'
-import { SkeletonGroupProps } from './SkeletonGroup'
 
 const meta: Meta<typeof Skeleton> = {
   title: 'Experimental/Skeleton',
@@ -14,140 +11,57 @@ const meta: Meta<typeof Skeleton> = {
 export default meta
 
 export const Default: StoryFn = _args => (
-  <Skeleton>
+  <Skeleton label="Loading...">
     <Skeleton.Rectangle height={128} />
   </Skeleton>
 )
 
-export const Size: StoryFn = _args => (
-  <div className="grid grid-cols-2 gap-xl md:grid-cols-3">
-    <div>
-      <Skeleton gap="xl">
-        <Skeleton.Circle size={32} />
-        <Skeleton.Circle size={64} />
-        <Skeleton.Circle size={128} />
-      </Skeleton>
-    </div>
-
-    <div>
-      <Skeleton gap="xl">
-        <Skeleton.Rectangle height={32} />
-        <Skeleton.Rectangle height={64} />
-        <Skeleton.Rectangle height={128} />
-      </Skeleton>
-    </div>
-
-    <div>
-      <Skeleton gap="xl">
-        <Skeleton.Line />
-        <Skeleton.Line lines={3} />
-        <Skeleton.Line lines={6} />
-      </Skeleton>
-    </div>
-  </div>
+export const CircleSize: StoryFn = _args => (
+  <Skeleton label="Loading...">
+    <Skeleton.Circle size={128} />
+  </Skeleton>
 )
 
-const gaps: ExcludeNull<SkeletonGroupProps['gap']>[] = ['sm', 'md', 'lg', 'xl', '2xl', '3xl']
-export const Gap: StoryFn = _args => {
-  return (
-    <div className="grid grid-cols-2 gap-xl md:grid-cols-3">
-      {gaps.map(gap => (
-        <div key={gap}>
-          <StoryLabel>{gap}</StoryLabel>
-          <Skeleton key={`skeleton_${gap}`}>
-            <Skeleton.Line gap={gap} lines={3} />
-          </Skeleton>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-const alignments: ExcludeNull<SkeletonGroupProps['align']>[] = ['start', 'center', 'end']
-export const Alignment: StoryFn = _args => (
-  <div className="grid grid-cols-2 gap-xl md:grid-cols-3">
-    {alignments.map(alignment => (
-      <div key={alignment}>
-        <StoryLabel>{alignment}</StoryLabel>
-        <Skeleton gap="lg">
-          <Skeleton.Line gap="md" align={alignment} lines={3} />
-        </Skeleton>
-      </div>
-    ))}
-  </div>
+export const RectangleSize: StoryFn = _args => (
+  <Skeleton label="Loading...">
+    <Skeleton.Rectangle width="50%" height={64} />
+  </Skeleton>
 )
 
-export const Group: StoryFn = _args => {
-  const [alignment, setAlignment] = useState<SkeletonGroupProps['align']>('start')
-
-  return (
-    <div>
-      <RadioGroup
-        className="mb-lg flex gap-md"
-        value={alignment}
-        orientation="horizontal"
-        onValueChange={value => setAlignment(value as SkeletonGroupProps['align'])}
-      >
-        <RadioGroup.Radio value="start">Start</RadioGroup.Radio>
-        <RadioGroup.Radio value="center">Center</RadioGroup.Radio>
-        <RadioGroup.Radio value="end">End</RadioGroup.Radio>
-      </RadioGroup>
-
-      <div className="grid grid-cols-2 gap-xl">
-        <div>
-          <StoryLabel>with direction `row` (default)</StoryLabel>
-          <Skeleton gap="lg">
-            <Skeleton.Group gap="lg" align={alignment}>
-              <Skeleton.Rectangle height={128} />
-              <Skeleton.Rectangle height={48} />
-              <Skeleton.Rectangle height={64} />
-            </Skeleton.Group>
-          </Skeleton>
-        </div>
-
-        <div>
-          <StoryLabel>with direction `column`</StoryLabel>
-          <Skeleton gap="lg">
-            <Skeleton.Group gap="lg" direction="column" align={alignment}>
-              <Skeleton.Rectangle height={32} width="90%" />
-              <Skeleton.Rectangle height={32} width="75%" />
-              <Skeleton.Rectangle height={32} />
-            </Skeleton.Group>
-          </Skeleton>
-        </div>
-      </div>
-
-      <div className="mt-2xl">
-        <StoryLabel>with specific gaps</StoryLabel>
-        <Skeleton gap="xl">
-          <Skeleton.Rectangle height={128} />
-
-          <Skeleton.Group gap="xl">
-            <Skeleton.Circle size={64} />
-
-            <Skeleton.Line gap="md" lines={3} />
-          </Skeleton.Group>
-        </Skeleton>
-      </div>
-    </div>
-  )
-}
+export const LineSize: StoryFn = _args => (
+  <Skeleton label="Loading...">
+    <Skeleton.Line lines={5} gap="md" />
+  </Skeleton>
+)
 
 export const Animation: StoryFn = _args => (
   <div className="grid grid-cols-2 gap-xl">
     <div>
       <StoryLabel>with animation (default)</StoryLabel>
 
-      <Skeleton gap="lg">
+      <Skeleton label="Loading..." className="gap-lg">
         <Skeleton.Rectangle height={128} />
       </Skeleton>
     </div>
 
     <div>
       <StoryLabel>without animation</StoryLabel>
-      <Skeleton isAnimated={false} gap="lg">
+      <Skeleton label="Loading..." isAnimated={false} className="gap-lg">
         <Skeleton.Rectangle height={128} />
       </Skeleton>
     </div>
   </div>
 )
+
+export const Layout: StoryFn = _args => (
+  <Skeleton label="Loading..." className="flex flex-col gap-xl">
+    <div className="flex w-1/2 gap-lg">
+      <Skeleton.Circle size={40} />
+      <Skeleton.Line lines={2} />
+    </div>
+
+    <Skeleton.Rectangle height={64} />
+
+    <Skeleton.Line lines={5} />
+  </Skeleton>
+)
diff --git a/packages/components/skeleton/src/Skeleton.styles.ts b/packages/components/skeleton/src/Skeleton.styles.ts
index 9841376b0..f04efed94 100644
--- a/packages/components/skeleton/src/Skeleton.styles.ts
+++ b/packages/components/skeleton/src/Skeleton.styles.ts
@@ -1,6 +1,6 @@
 import { cva, VariantProps } from 'class-variance-authority'
 
-export const skeletonStyles = cva(['flex flex-row !flex-wrap'], {
+export const skeletonStyles = cva([], {
   variants: {
     isAnimated: {
       true: [
diff --git a/packages/components/skeleton/src/Skeleton.tsx b/packages/components/skeleton/src/Skeleton.tsx
index f15736975..af52d1df1 100644
--- a/packages/components/skeleton/src/Skeleton.tsx
+++ b/packages/components/skeleton/src/Skeleton.tsx
@@ -2,12 +2,8 @@ import { VisuallyHidden } from '@spark-ui/visually-hidden'
 import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
 
 import { type SkeletonStyleProps, skeletonStyles } from './Skeleton.styles'
-import { SkeletonGroup, type SkeletonGroupProps } from './SkeletonGroup'
 
-export interface SkeletonProps
-  extends ComponentPropsWithoutRef<'div'>,
-    SkeletonStyleProps,
-    SkeletonGroupProps {
+export interface SkeletonProps extends ComponentPropsWithoutRef<'div'>, SkeletonStyleProps {
   /**
    * Displays an animated light effect.
    * @default true
@@ -21,7 +17,7 @@ export interface SkeletonProps
 
 export const Skeleton = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonProps>>(
   ({ isAnimated = true, label, className, children, ...rest }, forwardedRef) => (
-    <SkeletonGroup
+    <div
       ref={forwardedRef}
       data-spark-component="skeleton"
       className={skeletonStyles({ isAnimated, className })}
@@ -30,7 +26,7 @@ export const Skeleton = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonPro
       {children}
 
       {label && <VisuallyHidden>{label}</VisuallyHidden>}
-    </SkeletonGroup>
+    </div>
   )
 )
 
diff --git a/packages/components/skeleton/src/SkeletonGroup.styles.ts b/packages/components/skeleton/src/SkeletonGroup.styles.ts
deleted file mode 100644
index 58b109aa8..000000000
--- a/packages/components/skeleton/src/SkeletonGroup.styles.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cva, VariantProps } from 'class-variance-authority'
-
-export const skeletonGroupStyles = cva(['flex flex-nowrap flex-auto'], {
-  variants: {
-    gap: {
-      sm: 'gap-sm',
-      md: 'gap-md',
-      lg: 'gap-lg',
-      xl: 'gap-xl',
-      '2xl': 'gap-2xl',
-      '3xl': 'gap-3xl',
-    },
-    direction: {
-      row: 'flex-row',
-      column: 'flex-col',
-    },
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-    },
-  },
-  defaultVariants: {
-    direction: 'row',
-    align: 'start',
-  },
-})
-
-export type SkeletonGroupStyleProps = ExcludeNull<VariantProps<typeof skeletonGroupStyles>>
diff --git a/packages/components/skeleton/src/SkeletonGroup.tsx b/packages/components/skeleton/src/SkeletonGroup.tsx
deleted file mode 100644
index f159d8132..000000000
--- a/packages/components/skeleton/src/SkeletonGroup.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ComponentPropsWithoutRef, forwardRef, PropsWithChildren } from 'react'
-
-import { type SkeletonGroupStyleProps, skeletonGroupStyles } from './SkeletonGroup.styles'
-
-export interface SkeletonGroupProps
-  extends ComponentPropsWithoutRef<'div'>,
-    SkeletonGroupStyleProps {
-  /**
-   * Sets the main axis direction.
-   * @default row
-   */
-  direction?: 'row' | 'column'
-  /**
-   * Sets the default alignement.
-   * @default start
-   */
-  align?: 'start' | 'center' | 'end'
-  /**
-   * Sets the gaps between group items.
-   */
-  gap?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
-}
-
-export const SkeletonGroup = forwardRef<HTMLDivElement, PropsWithChildren<SkeletonGroupProps>>(
-  ({ gap, direction = 'row', align = 'start', className, children, ...rest }, forwardedRef) => (
-    <div
-      ref={forwardedRef}
-      data-part="group"
-      className={skeletonGroupStyles({ gap, direction, align, className })}
-      {...rest}
-    >
-      {children}
-    </div>
-  )
-)
-
-SkeletonGroup.displayName = 'Skeleton.Group'
diff --git a/packages/components/skeleton/src/SkeletonItem.styles.ts b/packages/components/skeleton/src/SkeletonItem.styles.ts
index a7a1f448e..bea28fff1 100644
--- a/packages/components/skeleton/src/SkeletonItem.styles.ts
+++ b/packages/components/skeleton/src/SkeletonItem.styles.ts
@@ -3,9 +3,9 @@ import { cva, VariantProps } from 'class-variance-authority'
 export const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'], {
   variants: {
     shape: {
-      line: ['flex', 'w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],
-      rectangle: ['flex', 'rounded-sm'],
-      circle: ['inline-flex flex-none', 'rounded-full'],
+      line: ['w-full [&:last-child:not(:first-child)]:w-5/6', 'rounded-lg'],
+      rectangle: ['rounded-sm'],
+      circle: ['flex-none', 'rounded-full'],
     },
   },
   defaultVariants: {
@@ -15,11 +15,6 @@ export const skeletonItemStyles = cva(['bg-neutral/dim-4', 'min-h-lg min-w-lg'],
 
 export const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {
   variants: {
-    align: {
-      start: 'items-start',
-      center: 'items-center',
-      end: 'items-end',
-    },
     gap: {
       sm: 'gap-sm',
       md: 'gap-md',
@@ -30,7 +25,7 @@ export const skeletonLineStyles = cva(['flex flex-col', 'w-full'], {
     },
   },
   defaultVariants: {
-    align: 'start',
+    gap: 'md',
   },
 })
 
diff --git a/packages/components/skeleton/src/SkeletonItem.tsx b/packages/components/skeleton/src/SkeletonItem.tsx
index 4b62f8451..6bcc581ca 100644
--- a/packages/components/skeleton/src/SkeletonItem.tsx
+++ b/packages/components/skeleton/src/SkeletonItem.tsx
@@ -15,11 +15,6 @@ export type SkeletonRectangleProps = Omit<SkeletonItemProps, 'shape'> & {
 export type SkeletonCircleProps = Omit<SkeletonItemProps, 'shape'> & { size: string | number }
 export type SkeletonLineProps = Omit<SkeletonItemProps, 'shape'> & {
   lines?: number
-  /**
-   * Sets the default alignement.
-   * @default start
-   */
-  align?: 'start' | 'center' | 'end'
   /**
    * Sets the gaps between group items.
    */
@@ -75,14 +70,13 @@ export const SkeletonCircle = ({ size, ...rest }: SkeletonCircleProps) => (
 export const SkeletonLine = ({
   lines = 1,
   gap: gapProp,
-  align = 'start',
   className,
   ...rest
 }: SkeletonLineProps) => {
   const gap = gapProp || 'md'
 
   return (
-    <div className={skeletonLineStyles({ align, gap, className })} data-part="linegroup">
+    <div className={skeletonLineStyles({ gap, className })} data-part="linegroup">
       {[...new Array(lines)].map((_, index) => (
         <SkeletonItem key={`line_${index}`} {...rest} shape="line" data-part="line" />
       ))}
diff --git a/packages/components/skeleton/src/index.ts b/packages/components/skeleton/src/index.ts
index 4ec2ca1a0..5b8c76e47 100644
--- a/packages/components/skeleton/src/index.ts
+++ b/packages/components/skeleton/src/index.ts
@@ -1,5 +1,4 @@
 import { Skeleton as Root } from './Skeleton'
-import { SkeletonGroup as Group } from './SkeletonGroup'
 import {
   SkeletonCircle as Circle,
   SkeletonLine as Line,
@@ -10,16 +9,13 @@ export const Skeleton: typeof Root & {
   Circle: typeof Circle
   Line: typeof Line
   Rectangle: typeof Rectangle
-  Group: typeof Group
 } = Object.assign(Root, {
   Circle,
   Line,
   Rectangle,
-  Group,
 })
 
 Skeleton.displayName = 'Skeleton'
-Group.displayName = 'Skeleton.Group'
 Line.displayName = 'Skeleton.Line'
 Circle.displayName = 'Skeleton.Circle'
 Rectangle.displayName = 'Skeleton.Rectangle'