Skeleton component page (#107)

* #85 Skeleton examples

* #85 tests

* #85 rename LoaderSkeleton to Skeleton

* #85 upgrade deps

Author: mwarman

package-lock.json

@@ -32,40 +32,40 @@
     "@fortawesome/react-fontawesome": "0.2.2",
     "@hookform/resolvers": "4.1.3",
     "@react-spring/web": "9.7.5",
-    "@tailwindcss/vite": "4.0.13",
-    "@tanstack/react-query": "5.67.3",
-    "@tanstack/react-query-devtools": "5.67.3",
+    "@tailwindcss/vite": "4.0.14",
+    "@tanstack/react-query": "5.69.0",
+    "@tanstack/react-query-devtools": "5.69.0",
     "@tanstack/react-table": "8.21.2",
-    "axios": "1.8.3",
+    "axios": "1.8.4",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
-    "i18next": "24.2.2",
+    "i18next": "24.2.3",
     "i18next-browser-languagedetector": "8.0.4",
     "lodash": "4.17.21",
     "qs": "6.14.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "7.54.2",
     "react-i18next": "15.4.1",
-    "react-router-dom": "7.3.0",
+    "react-router-dom": "7.4.0",
     "recharts": "2.15.1",
     "tailwind-merge": "3.0.2",
-    "tailwindcss": "4.0.13",
+    "tailwindcss": "4.0.14",
     "uuid": "11.1.0",
     "yup": "1.6.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "3.2.5",
+    "@chromatic-com/storybook": "3.2.6",
     "@eslint/js": "9.22.0",
-    "@storybook/addon-essentials": "8.6.4",
-    "@storybook/addon-interactions": "8.6.4",
-    "@storybook/addon-onboarding": "8.6.4",
-    "@storybook/addon-themes": "8.6.4",
-    "@storybook/blocks": "8.6.4",
-    "@storybook/react": "8.6.4",
-    "@storybook/react-vite": "8.6.4",
-    "@storybook/test": "8.6.4",
+    "@storybook/addon-essentials": "8.6.7",
+    "@storybook/addon-interactions": "8.6.7",
+    "@storybook/addon-onboarding": "8.6.7",
+    "@storybook/addon-themes": "8.6.7",
+    "@storybook/blocks": "8.6.7",
+    "@storybook/react": "8.6.7",
+    "@storybook/react-vite": "8.6.7",
+    "@storybook/test": "8.6.7",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
@@ -76,21 +76,21 @@
     "@types/react-dom": "18.3.1",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "3.0.8",
+    "@vitest/coverage-v8": "3.0.9",
     "eslint": "9.22.0",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-react-refresh": "0.4.19",
-    "eslint-plugin-storybook": "0.11.4",
+    "eslint-plugin-storybook": "0.11.6",
     "globals": "16.0.0",
     "jsdom": "26.0.0",
     "msw": "2.7.3",
     "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "0.6.11",
     "rimraf": "6.0.1",
-    "storybook": "8.6.4",
-    "typescript": "5.7.3",
-    "typescript-eslint": "8.26.1",
-    "vite": "6.2.1",
-    "vitest": "3.0.8"
+    "storybook": "8.6.7",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.27.0",
+    "vite": "6.2.2",
+    "vitest": "3.0.9"
   }
 }

package.json

@@ -0,0 +1,22 @@
+import { cn } from 'common/utils/css';
+import { BaseComponentProps } from 'common/utils/types';
+
+/**
+ * Properties for the `Skeleton` component.
+ */
+export interface SkeletonProps extends BaseComponentProps {}
+
+/**
+ * The `Skeleton` component renders an animated loader which pulses
+ * faintly. Typically used when initially loading some data asynchronously.
+ */
+const Skeleton = ({ className, testId = 'skeleton' }: SkeletonProps): JSX.Element => {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-neutral-200 dark:bg-neutral-700', className)}
+      data-testid={testId}
+    />
+  );
+};
+
+export default Skeleton;

src/common/components/Loader/LoaderSkeleton.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import LoaderSkeleton from '../LoaderSkeleton';
+import Skeleton from '../Skeleton';
 
 const meta = {
-  title: 'Common/Loader/LoaderSkeleton',
-  component: LoaderSkeleton,
+  title: 'Common/Loader/Skeleton',
+  component: Skeleton,
   parameters: {
     layout: 'centered',
   },
@@ -13,7 +13,7 @@ const meta = {
     className: { description: 'Additional CSS classes.' },
     testId: { description: 'The test identifier.' },
   },
-} satisfies Meta<typeof LoaderSkeleton>;
+} satisfies Meta<typeof Skeleton>;
 
 export default meta;
 

src/common/components/Loader/Skeleton.tsx

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from 'test/test-utils';
+
+import Skeleton from '../Skeleton';
+
+describe('Skeleton', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<Skeleton />);
+    await screen.findByTestId('skeleton');
+
+    // ASSERT
+    expect(screen.getByTestId('skeleton')).toBeDefined();
+  });
+
+  it('should render custom testId', async () => {
+    // ARRANGE
+    render(<Skeleton testId="test" />);
+    await screen.findByTestId('test');
+
+    // ASSERT
+    expect(screen.getByTestId('test')).toBeDefined();
+  });
+
+  it('should render custom class name', async () => {
+    // ARRANGE
+    render(<Skeleton className="my-class" />);
+    await screen.findByTestId('skeleton');
+
+    // ASSERT
+    expect(screen.getByTestId('skeleton').classList).toContain('my-class');
+  });
+});

…r/__stories__/LoaderSkeleton.stories.tsx …/Loader/__stories__/Skeleton.stories.tsxsrc/common/components/Loader/__stories__/LoaderSkeleton.stories.tsx renamed to src/common/components/Loader/__stories__/Skeleton.stories.tsx src/common/components/Loader/__stories__/LoaderSkeleton.stories.tsx renamed to src/common/components/Loader/__stories__/Skeleton.stories.tsx

@@ -42,6 +42,7 @@ const SearchInputComponents = lazy(
   () => import('pages/Components/components/SearchInputComponents'),
 );
 const SelectComponents = lazy(() => import('pages/Components/components/SelectComponents'));
+const SkeletonComponents = lazy(() => import('pages/Components/components/SkeletonComponents'));
 const TabsComponents = lazy(() => import('pages/Components/components/TabsComponents'));
 const TextComponents = lazy(() => import('pages/Components/components/TextComponents'));
 const TextareaComponents = lazy(() => import('pages/Components/components/TextareaComponents'));
@@ -170,6 +171,10 @@ export const routes: RouteObject[] = [
                 path: 'select',
                 element: withSuspense(<SelectComponents />),
               },
+              {
+                path: 'skeleton',
+                element: withSuspense(<SkeletonComponents />),
+              },
               {
                 path: 'tabs',
                 element: withSuspense(<TabsComponents />),

src/common/components/Loader/__tests__/LoaderSkeleton.test.tsx

@@ -82,6 +82,9 @@ const ComponentsPage = (): JSX.Element => {
             <MenuNavLink to="select" styleActive>
               Select
             </MenuNavLink>
+            <MenuNavLink to="skeleton" styleActive>
+              Skeleton
+            </MenuNavLink>
             <MenuNavLink to="tabs" styleActive>
               Tabs
             </MenuNavLink>