feat: add skeleton component

abelflopes · abelflopes · commit 39b589d156ae · 2023-11-27T01:25:59.000Z
diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
@@ -46,7 +46,7 @@ This roadmap is our plan for building a complete front-end framework. Each item
 
 ## Loading & Progress
 
-[ ] **Skeleton:** A placeholder that shows where things will go.
+[x] **Skeleton:** A placeholder that shows where things will go.
 
 [ ] **Spinner:** A spinning thing to show stuff is loading.
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/skeleton/README.md b/packages/components/skeleton/README.md
@@ -0,0 +1,33 @@
+# RCK | React Skeleton Component
+
+> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
+
+The Skeleton component is a versatile and adaptable element designed specifically for React applications, providing developers with a dynamic solution for displaying placeholder content while actual data is loading. This component serves as a visual representation of the content structure, giving users a sense of anticipation and engagement even before the actual data is available.
+
+With the Skeleton component, developers can effortlessly create placeholders for various types of content, such as text blocks, images, or cards. Its customizable features enable developers to define the skeleton's appearance, such as background color, animation style, and spacing, ensuring seamless integration into any user interface design.
+
+
+### Installation 
+
+To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/skeleton` or `yarn add @react-ck/skeleton`.
+
+You will also need to set up the theme provider, install it using npm or yarn: `npm i --save @react-ck/theme` or `yarn add @react-ck/theme`.
+
+Wrap your app root with the theme provider and use this component:
+
+```tsx
+import { ThemeProvider } from "@react-ck/theme";
+import { Skeleton } from "@react-ck/skeleton";
+
+const myApp = () => (
+    <ThemeProvider>
+        <Skeleton ... />
+    </ThemeProvider>
+);
+```
+
+<!-- storybook-ignore -->
+
+---
+
+Check the documentation website - [react-ck.js.org](https://react-ck.js.org).
diff --git a/packages/components/skeleton/babel.config.js b/packages/components/skeleton/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@react-ck/babel-config",
+};
diff --git a/packages/components/skeleton/declarations.d.ts b/packages/components/skeleton/declarations.d.ts
@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const content: Record<string, string>;
+  export default content;
+}
diff --git a/packages/components/skeleton/index.ts b/packages/components/skeleton/index.ts
@@ -0,0 +1,2 @@
+// Hack for module resolution of non built packages
+export * from "./src/index";
diff --git a/packages/components/skeleton/jest.config.ts b/packages/components/skeleton/jest.config.ts
@@ -0,0 +1 @@
+export { config as default } from "@react-ck/jest-config";
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@react-ck/skeleton",
+  "private": false,
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "homepage": "https://github.com/abelflopes/react-ck/tree/master/packages/components/skeleton#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abelflopes/react-ck.git"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production webpack",
+    "lint:typescript": "tsc --noEmit",
+    "test": "npx -y npm-run-all -s test:*",
+    "test:unit": "jest --testPathPattern=\".unit.*\"",
+    "test:snapshot": "jest --testPathPattern=\".snapshot.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
+  },
+  "devDependencies": {
+    "@react-ck/babel-config": "^1.0.0",
+    "@react-ck/jest-config": "^1.0.0",
+    "@react-ck/typescript-config": "^1.0.0",
+    "@react-ck/webpack-config": "^1.0.0",
+    "@types/react": "^18.2.33"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "@react-ck/theme": "^1.3.1",
+    "classnames": "^2.3.2"
+  }
+}
diff --git a/packages/components/skeleton/specs/__snapshots__/index.snapshot.test.tsx.snap b/packages/components/skeleton/specs/__snapshots__/index.snapshot.test.tsx.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Skeleton renders correctly 1`] = `
+<div
+  className="root default"
+  style={{}}
+/>
+`;
diff --git a/packages/components/skeleton/specs/index.snapshot.test.tsx b/packages/components/skeleton/specs/index.snapshot.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { Skeleton } from "../src/index";
+import renderer from "react-test-renderer";
+
+describe("Snapshot Skeleton", () => {
+  test("renders correctly", async () => {
+    const tree = renderer.create(<Skeleton />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/components/skeleton/specs/index.unit.test.tsx b/packages/components/skeleton/specs/index.unit.test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { Skeleton } from "../src/index";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Unit Skeleton", () => {
+  test("renders correctly", async () => {
+    render(<Skeleton data-testid="skeleton" />);
+    const find = await screen.findByTestId("skeleton");
+    expect(find).toBeInTheDocument();
+  });
+});
diff --git a/packages/components/skeleton/src/index.tsx b/packages/components/skeleton/src/index.tsx
@@ -0,0 +1,55 @@
+// React
+import React, { useEffect, useMemo, useState } from "react";
+// Utils
+import classNames from "classnames";
+// Styles
+import styles from "./styles/index.module.scss";
+
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  variation?: "default" | "text";
+}
+
+let n = 1;
+
+/**
+ * A component that renders a skeleton placeholder for loading content.
+ * @param props - {@link SkeletonProps}
+ * @returns
+ */
+
+export const Skeleton = ({
+  variation = "default",
+  className,
+  style,
+  ...otherProps
+}: Readonly<SkeletonProps>): React.ReactElement => {
+  const [index, setIndex] = useState<number | undefined>(undefined);
+  const N = useMemo(() => n++ % 3, []);
+
+  useEffect(() => {
+    if (variation === "default") return;
+
+    setIndex(n++);
+
+    return () => {
+      n--;
+      setIndex(undefined);
+    };
+  }, [variation]);
+
+  return (
+    <div
+      className={classNames(styles.root, styles[variation], className)}
+      style={{
+        ...style,
+        ...(index === undefined
+          ? {}
+          : {
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- necessary as react does not support CSS vars
+              ["--index" as keyof React.CSSProperties]: N,
+            }),
+      }}
+      {...otherProps}
+    />
+  );
+};
diff --git a/packages/components/skeleton/src/styles/index.module.scss b/packages/components/skeleton/src/styles/index.module.scss
@@ -0,0 +1,41 @@
+@import "@react-ck/theme";
+
+.root {
+  background-color: get-color(neutral-100);
+  position: relative;
+  width: 100%;
+  border-radius: 3px;
+  overflow: hidden;
+  height: get-spacing(20);
+
+  &::before {
+    @keyframes move {
+      0% {
+        transform: translateX(-100%);
+      }
+
+      100% {
+        transform: translateX(100%);
+      }
+    }
+
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 0.75;
+    transform: translateX(-100%);
+    animation: move 2s linear infinite;
+    background-image: linear-gradient(90deg, transparent, get-color(neutral-200), transparent);
+    animation-delay: calc(var(--n) * 200ms);
+  }
+}
+
+.large {
+  aspect-ratio: 100/49;
+}
+
+.text {
+  width: calc(100% - (25% * var(--index)));
+  height: 1.2em;
+}
diff --git a/packages/components/skeleton/tsconfig.build.json b/packages/components/skeleton/tsconfig.build.json
@@ -0,0 +1,7 @@
+{
+  "extends": "@react-ck/typescript-config/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["./*.d.ts", "./src/**/*", "./src/index.ts*"]
+}
diff --git a/packages/components/skeleton/tsconfig.json b/packages/components/skeleton/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@react-ck/typescript-config/tsconfig.json",
+  "include": ["./**/*"]
+}
diff --git a/packages/components/skeleton/webpack.config.ts b/packages/components/skeleton/webpack.config.ts
@@ -0,0 +1,6 @@
+import { getWebpackConfig } from "@react-ck/webpack-config";
+import packageJson from "./package.json";
+
+export default getWebpackConfig({
+  cssHashSalt: packageJson.name,
+});
diff --git a/packages/docs/stories/package.json b/packages/docs/stories/package.json
@@ -34,6 +34,7 @@
     "@react-ck/list": "^1.0.0",
     "@react-ck/overlay": "^1.0.0",
     "@react-ck/select": "^1.0.0",
+    "@react-ck/skeleton": "^1.0.0",
     "@react-ck/table": "^1.0.0",
     "@react-ck/text": "^1.0.0",
     "@react-ck/textarea": "^1.0.0",
diff --git a/packages/docs/stories/src/skeleton.stories.tsx b/packages/docs/stories/src/skeleton.stories.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "@react-ck/theme";
+import { configureStory } from "@react-ck/story-config";
+import { Skeleton } from "@react-ck/skeleton/src";
+
+type Story = StoryObj<typeof Skeleton>;
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Loading/Skeleton",
+  ...configureStory(Skeleton, {
+    parameters: {
+      layout: "padded",
+    },
+    decorators: [
+      (Story) => (
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      ),
+    ],
+  }),
+};
+
+export default meta;
+
+export const Component: Story = {
+  args: {
+    variation: "default",
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ extends: "@react-ck/babel-config",`
	`3`	`+};`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+// Hack for module resolution of non built packages`
	`2`	`+export * from "./src/index";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { config as default } from "@react-ck/jest-config";`