feat: add modal component

Author: abelflopes

packages/components/modal/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@react-ck/babel-config",
+};

packages/components/modal/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const content: Record<string, string>;
+  export default content;
+}

packages/components/modal/index.ts

@@ -0,0 +1,2 @@
+// Hack for module resolution of non built packages
+export * from "./src/index";

packages/components/modal/jest.config.ts

@@ -0,0 +1 @@
+export { config as default } from "@react-ck/jest-config";

packages/components/modal/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@react-ck/modal",
+  "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/modal#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/button": "^1.2.6",
+    "@react-ck/card": "^1.2.3",
+    "@react-ck/icon": "^1.4.0",
+    "@react-ck/layers": "^1.0.0",
+    "@react-ck/overlay": "^1.1.6",
+    "@react-ck/react-utils": "^1.0.0",
+    "@react-ck/text": "^1.2.6",
+    "@react-ck/theme": "^1.4.1",
+    "classnames": "^2.3.2"
+  }
+}

packages/components/modal/specs/index.snapshot.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Modal } from "../src/index";
+import renderer from "react-test-renderer";
+
+describe("Snapshot Modal", () => {
+  test("renders correctly", async () => {
+    const tree = renderer.create(<Modal>Modal</Modal>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/components/modal/specs/index.unit.test.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Modal } from "../src/index";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Unit Modal", () => {
+  test("renders correctly", async () => {
+    const content = "Modal";
+    render(<Modal>{content}</Modal>);
+    const find = await screen.findByText(content);
+    expect(find).toBeInTheDocument();
+  });
+});

packages/components/modal/src/Modal.tsx

@@ -0,0 +1,72 @@
+import classNames from "classnames";
+import styles from "./styles/index.module.scss";
+import React, { useCallback, useMemo, useState } from "react";
+import { ModalContext, type ModalContextProps, type ModalContextValue } from "./context";
+import { Card } from "@react-ck/card";
+import { Overlay } from "@react-ck/overlay";
+import { Icon } from "@react-ck/icon";
+import { Button } from "@react-ck/button";
+import { Text } from "@react-ck/text";
+import { Layer } from "@react-ck/layers";
+
+interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+// TODO: add annotation
+// TODO: add a11y https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal
+
+/**
+ * @param props - {@link React.HTMLAttributes}
+ * @returns a React element
+ */
+
+export const Modal = ({
+  children,
+  className,
+  ...otherProps
+}: Readonly<ModalProps>): React.ReactElement => {
+  const [props, setProps] = useState<ModalContextValue>({
+    header: undefined,
+    footer: undefined,
+  });
+
+  const setContextValue = useCallback<ModalContextProps["setValue"]>((value) => {
+    setProps((v) => ({ ...v, ...value }));
+  }, []);
+
+  const contextProps = useMemo<ModalContextProps>(
+    () => ({
+      setValue: setContextValue,
+    }),
+    [setContextValue],
+  );
+
+  return (
+    <Layer elevation="overlay">
+      <div {...otherProps} className={classNames(styles.root, className)}>
+        <Overlay />
+        <Card className={styles.card}>
+          <ModalContext.Provider value={contextProps}>
+            {props.header && (
+              <header
+                {...props.header}
+                className={classNames(styles.header, props.header.className)}>
+                <Text type="h3" as="p" margin={false}>
+                  {props.header.heading}
+                </Text>
+
+                <Button skin="ghost" icon={<Icon name="close" />} />
+              </header>
+            )}
+            <main className={styles.content}>{children}</main>
+            {props.footer && (
+              <footer
+                {...props.footer}
+                className={classNames(styles.footer, props.footer.className)}
+              />
+            )}
+          </ModalContext.Provider>
+        </Card>
+      </div>
+    </Layer>
+  );
+};

packages/components/modal/src/ModalFooter.tsx

@@ -0,0 +1,14 @@
+import { useContext, useEffect } from "react";
+import { ModalContext, type ModalContextValue } from "./context";
+
+export const ModalFooter = (props: NonNullable<ModalContextValue["footer"]>): undefined => {
+  const context = useContext(ModalContext);
+
+  useEffect(() => {
+    context.setValue({ footer: props });
+
+    return () => {
+      context.setValue({ footer: undefined });
+    };
+  }, [context, props]);
+};

packages/components/modal/src/ModalHeader.tsx

@@ -0,0 +1,14 @@
+import { useContext, useEffect } from "react";
+import { ModalContext, type ModalContextValue } from "./context";
+
+export const ModalHeader = (props: NonNullable<ModalContextValue["header"]>): undefined => {
+  const context = useContext(ModalContext);
+
+  useEffect(() => {
+    context.setValue({ header: props });
+
+    return () => {
+      context.setValue({ header: undefined });
+    };
+  }, [context, props]);
+};