From e154731822fc52977baee278c5e819f5a981a577 Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Mon, 6 May 2024 15:39:14 -0400
Subject: [PATCH] Renaming Placeholder component to Skeleton

---
 .../Placeholder/Placeholder.stories.tsx       | 25 -----------------
 src/components/Placeholder/index.ts           |  1 -
 src/components/Skeleton/Skeleton.stories.tsx  | 27 +++++++++++++++++++
 .../Placeholder.tsx => Skeleton/Skeleton.tsx} |  6 ++---
 src/components/Skeleton/index.ts              |  1 +
 .../{Placeholder => Skeleton}/styles.css.ts   |  8 +++---
 src/components/index.ts                       |  2 +-
 7 files changed, 36 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/Placeholder/Placeholder.stories.tsx
 delete mode 100644 src/components/Placeholder/index.ts
 create mode 100644 src/components/Skeleton/Skeleton.stories.tsx
 rename src/components/{Placeholder/Placeholder.tsx => Skeleton/Skeleton.tsx} (66%)
 create mode 100644 src/components/Skeleton/index.ts
 rename src/components/{Placeholder => Skeleton}/styles.css.ts (80%)

diff --git a/src/components/Placeholder/Placeholder.stories.tsx b/src/components/Placeholder/Placeholder.stories.tsx
deleted file mode 100644
index f7520f118..000000000
--- a/src/components/Placeholder/Placeholder.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { StoryObj, Meta } from '@storybook/react'
-
-import { Box } from '~/components/Box'
-
-import { Placeholder } from './Placeholder'
-
-export default {
-  title: 'Components/Placeholder',
-  component: Placeholder,
-} as Meta<typeof Placeholder>
-
-type Story = StoryObj<typeof Placeholder>
-
-export const Default: Story = {
-  render: () => (
-    <Box gap="2">
-      <Placeholder style={{ width: 72, height: 72 }} />
-      <Box flexDirection="column" gap="2">
-        <Placeholder size="md" />
-        <Placeholder size="sm" />
-        <Placeholder size="sm" />
-      </Box>
-    </Box>
-  ),
-}
diff --git a/src/components/Placeholder/index.ts b/src/components/Placeholder/index.ts
deleted file mode 100644
index 20413aa50..000000000
--- a/src/components/Placeholder/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Placeholder } from './Placeholder'
diff --git a/src/components/Skeleton/Skeleton.stories.tsx b/src/components/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 000000000..930b57f3f
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,27 @@
+import { StoryObj, Meta } from '@storybook/react'
+
+import { Box } from '~/components/Box'
+
+import { Skeleton } from './Skeleton'
+
+export default {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+} as Meta<typeof Skeleton>
+
+type Story = StoryObj<typeof Skeleton>
+
+export const Default: Story = {
+  render: () => (
+    <Box gap="2">
+      <Skeleton gap="2" padding="2">
+        <Skeleton style={{ width: 72, height: 72 }} />
+        <Box flexDirection="column" gap="2">
+          <Skeleton size="md" />
+          <Skeleton size="sm" />
+          <Skeleton size="sm" />
+        </Box>
+      </Skeleton>
+    </Box>
+  ),
+}
diff --git a/src/components/Placeholder/Placeholder.tsx b/src/components/Skeleton/Skeleton.tsx
similarity index 66%
rename from src/components/Placeholder/Placeholder.tsx
rename to src/components/Skeleton/Skeleton.tsx
index 43cbe7b8d..08b8dc023 100644
--- a/src/components/Placeholder/Placeholder.tsx
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -6,15 +6,15 @@ import { Box, BoxProps } from '../Box'
 
 import * as styles from './styles.css'
 
-type PlaceholderProps = BoxProps & styles.PlaceholderVariants
+type SkeletonProps = BoxProps & styles.SkeletonVariants
 
-export const Placeholder = (props: PlaceholderProps) => {
+export const Skeleton = (props: SkeletonProps) => {
   const { size, ...rest } = props
 
   return (
     <Box
       as={motion.div}
-      className={styles.placeholder({ size })}
+      className={styles.skeleton({ size })}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       borderRadius="sm"
diff --git a/src/components/Skeleton/index.ts b/src/components/Skeleton/index.ts
new file mode 100644
index 000000000..ff95a22e2
--- /dev/null
+++ b/src/components/Skeleton/index.ts
@@ -0,0 +1 @@
+export { Skeleton, Skeleton as Placeholder /* deprecated */ } from './Skeleton'
diff --git a/src/components/Placeholder/styles.css.ts b/src/components/Skeleton/styles.css.ts
similarity index 80%
rename from src/components/Placeholder/styles.css.ts
rename to src/components/Skeleton/styles.css.ts
index 6de472e8c..49ec5ae66 100644
--- a/src/components/Placeholder/styles.css.ts
+++ b/src/components/Skeleton/styles.css.ts
@@ -3,7 +3,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes'
 
 import { vars } from '~/css'
 
-const placeholderBackgroundAnimation = keyframes({
+const skeletonAnimation = keyframes({
   '0%': {
     backgroundPosition: '0% 50%',
   },
@@ -15,12 +15,12 @@ const placeholderBackgroundAnimation = keyframes({
   },
 })
 
-export const placeholder = recipe({
+export const skeleton = recipe({
   base: {
     backgroundImage: `linear-gradient(-45deg, transparent, ${vars.colors.backgroundSecondary}, transparent)`,
     backgroundSize: '400% 400%',
     backgroundRepeat: 'no-repeat',
-    animation: `${placeholderBackgroundAnimation} 1s ease infinite`,
+    animation: `${skeletonAnimation} 1s ease infinite`,
   },
 
   variants: {
@@ -49,4 +49,4 @@ export const placeholder = recipe({
   },
 })
 
-export type PlaceholderVariants = RecipeVariants<typeof placeholder>
+export type SkeletonVariants = RecipeVariants<typeof skeleton>
diff --git a/src/components/index.ts b/src/components/index.ts
index 83d83241a..b5714ca19 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -34,7 +34,7 @@ export { Image } from './Image'
 export { ModalPrimitive, Modal } from './Modal'
 export { NumericInput } from './NumericInput'
 export { PINCodeInput } from './PINCodeInput'
-export { Placeholder } from './Placeholder'
+export { Skeleton, Placeholder /* deprecated */ } from './Skeleton'
 export { Progress } from './Progress'
 export { ControlledRadioGroup, RadioGroup } from './RadioGroup'
 export { Scroll } from './Scroll'