Feat visu skeleton

.vscode/tsx.code-snippets

@@ -15,7 +15,7 @@
     "scope": "typescriptreact",
     "prefix": "reactcomp",
     "body": [
-      "import { clsx } from 'clsx'",
+      "import { cn } from '@/src/utils/class-merge.helper'",
       "import {",
       "  FC,",
       "  HTMLAttributes,",
@@ -33,7 +33,7 @@
       "    useImperativeHandle(ref, () => elementRef.current)",
       "",
       "    return (",
-      "      <div className={clsx('', className)} ref={elementRef} {...rest}>",
+      "      <div className={cn('', className)} ref={elementRef} {...rest}>",
       "        {children}",
       "      </div>",
       "    )",

apps/docs/src/stories/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,53 @@
+import { Skeleton, SkeletonProps } from '@droz-js/visu'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<SkeletonProps> = {
+  title: 'Skeleton/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    children: {
+      control: 'none',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+      type: { name: 'other', required: false, value: 'React.ReactNode' },
+    },
+    className: {
+      control: 'text',
+      description: 'Aplica o className em SkeletonSkeleton',
+      table: {
+        type: { summary: 'text' },
+      },
+      type: { name: 'string', required: false },
+    },
+    repeat: {
+      control: 'number',
+      description: 'Aplica o repeat em SkeletonSkeleton',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 1 },
+      },
+      type: { name: 'number', required: false },
+      defaultValue: 1 as SkeletonProps['repeat'],
+    },
+  },
+  args: {
+    children: '',
+    className: 'h-32 w-32',
+  },
+} as Meta<SkeletonProps>
+
+export default meta
+type SkeletonSkeletonStory = StoryObj<SkeletonProps>
+
+export const Comum: SkeletonSkeletonStory = {
+  render: (args) => {
+    return (
+      <div className="h-32 w-32">
+        <Skeleton {...args} />
+      </div>
+    )
+  },
+}

package.json

@@ -19,7 +19,8 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "lint": "turbo run lint",
     "prepare": "husky install",
-    "test": "turbo run test"
+    "test": "turbo run test",
+    "test:watch": "turbo run test -- --watch"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

packages/visu/package.json

@@ -108,4 +108,4 @@
     "vite-plugin-dts": "^3.4.0",
     "zod": "^3.21.4"
   }
-}
+}

packages/visu/src/App.tsx

@@ -1,5 +1,5 @@
 import LayoutDefault from './layout/Default'
-import { Accordion } from './library'
+import { Skeleton } from './library'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Eraser } from 'phosphor-react'
 import { useState } from 'react'
@@ -32,15 +32,10 @@ function App() {
     <LayoutDefault asChild terminal={[watch(), test]} buttons={[{ icon: <Eraser />, onClick: clearState }]}>
       <form onSubmit={handleSubmit(onSubmit)}>
         {/* ================================= TEST AREA ================================= */}
-        <Accordion.Root type="single" collapsible>
-          <Accordion.Item value="default">
-            <Accordion.Header>
-              <span>XXX</span>
-              <Accordion.Trigger />
-            </Accordion.Header>
-            <Accordion.Content>YYY</Accordion.Content>
-          </Accordion.Item>
-        </Accordion.Root>
+        <div className="flex h-full w-full flex-col gap-4 ">
+          <Skeleton className="h-32 w-full" repeat={4} />
+        </div>
+
         {/* ================================= TEST AREA ================================= */}
       </form>
     </LayoutDefault>

packages/visu/src/__tests__/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from '@library'
+import { render, screen } from '@testing-library/react'
+import clsx from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('SkeletonSkeleton tests', () => {
+  it('Should render a SkeletonSkeleton element', () => {
+    render(<Skeleton data-testid="element" />)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+
+  it('Should render a SkeletonSkeleton element n-times', () => {
+    render(
+      <div data-testid="element">
+        <Skeleton repeat={4} />
+      </div>,
+    )
+    const element = screen.queryByTestId('element')
+
+    expect(element?.children.length).toBe(4)
+  })
+})

packages/visu/src/library/Skeleton/index.tsx

@@ -0,0 +1,15 @@
+import { cn } from '@/src/utils/class-merge.helper'
+import { FC, HTMLAttributes } from 'react'
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  repeat?: number
+}
+
+const Skeleton: FC<SkeletonProps> = ({ repeat = 1, className, ...rest }) =>
+  [...Array(repeat)].map((item, index) => (
+    <div key={index} className={cn('animate-pulse rounded bg-gray-300', className)} {...rest} />
+  ))
+
+Skeleton.displayName = 'Skeleton.'
+
+export default Skeleton

packages/visu/src/library/index.ts

@@ -70,3 +70,6 @@ export type * from './Toast'
 
 export { default as Accordion } from './Accordion'
 export type * from './Accordion'
+
+export { default as Skeleton } from './Skeleton'
+export type * from './Skeleton'