feat: add overlay spinner component

Author: abelflopes

package-lock.json

@@ -30,9 +30,11 @@
     "@react-ck/button": "^1.4.8",
     "@react-ck/icon": "^1.5.8",
     "@react-ck/layers": "^1.1.13",
+    "@react-ck/overlay": "^1.1.17",
     "@react-ck/react-utils": "^1.2.8",
     "@react-ck/scss-utils": "^1.1.4",
     "@react-ck/skeleton": "^1.1.11",
+    "@react-ck/spinner": "^1.1.13",
     "@react-ck/text": "^1.4.8",
     "classnames": "*"
   }

packages/components/_provisional/package.json

@@ -15,3 +15,5 @@ export * from "./position-engine";
 export * from "./top-bar";
 
 export * from "./snackbar";
+
+export * from "./overlay-spinner";

packages/components/_provisional/src/index.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+
+export type OverlaySpinnerContainerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const OverlaySpinnerContainer = ({
+  className,
+  ...otherProps
+}: Readonly<React.HTMLAttributes<HTMLDivElement>>): React.ReactElement => (
+  <div className={classNames(styles.container, className)} {...otherProps} />
+);

packages/components/_provisional/src/overlay-spinner/Container.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+import { Overlay, type OverlayProps } from "@react-ck/overlay";
+import { Spinner } from "@react-ck/spinner";
+import { OverlaySpinnerContainer } from "./Container";
+
+interface OverlaySpinnerProps extends OverlayProps {
+  active?: boolean;
+}
+
+const OverlaySpinner = ({
+  active = true,
+  className,
+  ...otherProps
+}: Readonly<OverlaySpinnerProps>): React.ReactElement => (
+  <Overlay
+    skin="light"
+    {...otherProps}
+    className={classNames(styles.overlay, className, {
+      [`${styles.overlay__active}`]: active,
+    })}>
+    <Spinner />
+  </Overlay>
+);
+
+OverlaySpinner.Container = OverlaySpinnerContainer;
+
+export { type OverlaySpinnerProps, OverlaySpinner };

packages/components/_provisional/src/overlay-spinner/index.tsx

@@ -0,0 +1,18 @@
+@import "@react-ck/theme";
+@import "@react-ck/text";
+
+.container {
+  position: relative;
+}
+
+.overlay {
+  backdrop-filter: blur(5px);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  pointer-events: none;
+
+  &__active {
+    opacity: 1;
+    pointer-events: all;
+  }
+}

packages/components/_provisional/src/overlay-spinner/styles/index.module.scss

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./styles/index.module.scss";
 import classNames from "classnames";
 
-export interface OverlayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+export interface OverlayProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Specifies the visual style of the overlay  */
   skin?: "light" | "dark";
 }

packages/components/overlay/src/index.tsx

@@ -8,6 +8,9 @@
   left: 0;
   height: 100%;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 @each $variation in (dark, light) {

packages/components/overlay/src/styles/index.module.scss

@@ -0,0 +1,38 @@
+import React from "react";
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Manager } from "@react-ck/manager";
+import { configureStory } from "@react-ck/story-config";
+import { OverlaySpinner } from "@react-ck/provisional/src";
+import { faker } from "@faker-js/faker";
+import { Text } from "@react-ck/text";
+
+type Story = StoryObj<typeof OverlaySpinner>;
+
+const meta: Meta<typeof OverlaySpinner> = {
+  title: "Loading/Overlay Spinner",
+  ...configureStory(OverlaySpinner, {
+    parameters: {
+      layout: "padded",
+      // FIXME: not working https://storybook.js.org/docs/api/doc-block-source#excludedecorators
+      // docs: { source: { type: "auto", excludeDecorators: false } },
+    },
+    decorators: [
+      (Story): React.ReactElement => (
+        <Manager>
+          <OverlaySpinner.Container>
+            <Text>{faker.lorem.paragraphs(5)}</Text>
+            <Story />
+          </OverlaySpinner.Container>
+        </Manager>
+      ),
+    ],
+  }),
+};
+
+export default meta;
+
+export const Component: Story = {
+  args: {
+    active: true,
+  },
+};

packages/docs/stories/src/overlay-spinner.stories.tsx

@@ -30,7 +30,7 @@ export const defaultTheme: Theme = {
     "status-negative-light": "#fed7d7",
     "status-negative": "#ed6d6d",
     "status-negative-dark": "#9b2c2c",
-    "overlay-light": "rgba(255,255,255, .2)",
+    "overlay-light": "rgba(255,255,255, .4)",
     "overlay-dark": "rgba(0,0,0,.2)",
   },
   font: {