From d7af59ee6a83afa7994f4507e5bd76f92fce25ec Mon Sep 17 00:00:00 2001
From: yoshi6jp <yoshi6jp@gmail.com>
Date: Wed, 29 Nov 2023 05:18:00 +0900
Subject: [PATCH] feat(Skeleton): Add skeleton component (#429)

---
 src/Skeleton/Skeleton.stories.tsx | 47 +++++++++++++++++++++++++++++++
 src/Skeleton/Skeleton.tsx         | 47 +++++++++++++++++++++++++++++++
 src/Skeleton/index.ts             |  5 ++++
 3 files changed, 99 insertions(+)
 create mode 100644 src/Skeleton/Skeleton.stories.tsx
 create mode 100644 src/Skeleton/Skeleton.tsx
 create mode 100644 src/Skeleton/index.ts

diff --git a/src/Skeleton/Skeleton.stories.tsx b/src/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 00000000..e9a85931
--- /dev/null
+++ b/src/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { StoryFn as Story, Meta } from '@storybook/react'
+
+import Skeleton, { SkeletonProps } from '.'
+
+const meta: Meta = {
+  title: 'Feedback/Skeleton',
+  component: Skeleton,
+  parameters: {
+    controls: { expanded: true },
+  },
+}
+
+export default meta
+
+export const Default: Story<SkeletonProps> = (args) => {
+  return <Skeleton {...args} />
+}
+Default.args = {
+  className: 'w-32 h-32',
+}
+
+export const CircleWithContent: Story<SkeletonProps> = ({ dataTheme }) => {
+  return (
+    <div className="flex flex-col gap-4 w-52" data-theme={dataTheme}>
+      <div className="flex gap-4 items-center">
+        <Skeleton className="w-16 h-16 rounded-full shrink-0"></Skeleton>
+        <div className="flex flex-col gap-4">
+          <Skeleton className="h-4 w-20"></Skeleton>
+          <Skeleton className="h-4 w-28"></Skeleton>
+        </div>
+      </div>
+      <Skeleton className="h-32 w-full"></Skeleton>
+    </div>
+  )
+}
+
+export const RectangleWithContent: Story<SkeletonProps> = ({ dataTheme }) => {
+  return (
+    <div className="flex flex-col gap-4 w-52" data-theme={dataTheme}>
+      <Skeleton className="h-32 w-full"></Skeleton>
+      <Skeleton className="h-4 w-28"></Skeleton>
+      <Skeleton className="h-4 w-full"></Skeleton>
+      <Skeleton className="h-4 w-full"></Skeleton>
+    </div>
+  )
+}
diff --git a/src/Skeleton/Skeleton.tsx b/src/Skeleton/Skeleton.tsx
new file mode 100644
index 00000000..f6539ad6
--- /dev/null
+++ b/src/Skeleton/Skeleton.tsx
@@ -0,0 +1,47 @@
+import React, { forwardRef, ReactNode } from 'react'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+import {
+  IComponentBaseProps,
+} from '../types'
+
+export type SkeletonProps = 
+  & React.HTMLAttributes<HTMLDivElement>
+  & IComponentBaseProps 
+  & {
+}
+
+const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  (
+    {
+      dataTheme,
+      className,
+      children,
+      ...props
+      },
+      ref
+  ): JSX.Element => {
+    const classes = twMerge(
+      'skeleton',
+      clsx({
+        }),
+        className,
+    )
+
+    return (
+      <div
+        {...props}
+        data-theme={dataTheme}
+        className={classes}
+        ref={ref}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Skeleton.displayName = "Skeleton"
+
+export default Skeleton
diff --git a/src/Skeleton/index.ts b/src/Skeleton/index.ts
new file mode 100644
index 00000000..12ec9d50
--- /dev/null
+++ b/src/Skeleton/index.ts
@@ -0,0 +1,5 @@
+export * from './Skeleton';
+
+import Skeleton, { SkeletonProps as TSkeletonProps } from './Skeleton'
+export type SkeletonProps = TSkeletonProps
+export default Skeleton