pentatrion-design 0.0.1

package/src/lib/fetch.ts

@@ -0,0 +1,115 @@
+export type CustomFetchOptions = Omit<RequestInit, "body"> & {
+  body?: BodyInit | { [key: string]: unknown };
+  urlParams?: {
+    [key: string]: string | number;
+  };
+  query?: {
+    [key: string]: unknown;
+  };
+};
+
+export async function fetchAPI(
+  urlObjOrString: string | URL,
+  enhancedOptions: CustomFetchOptions = {},
+  baseUrl?: string,
+  baseOptions?: RequestInit,
+) {
+  const { urlParams, query, body, ...rest } = enhancedOptions;
+
+  let options: RequestInit = rest;
+
+  let url: URL;
+
+  if (urlObjOrString instanceof URL) {
+    url = urlObjOrString;
+  } else {
+    const origin = baseUrl ? new URL(baseUrl).origin : window.location.origin;
+    let prefix = baseUrl ? new URL(baseUrl).pathname : "";
+    if (prefix === "/") {
+      prefix = "";
+    }
+    url = new URL(`${prefix}${urlObjOrString}`, origin);
+  }
+
+  if (urlParams) {
+    for (const [name, value] of Object.entries(urlParams)) {
+      // %7B -> `{`
+      // %7D -> `}`
+      url.pathname = url.pathname.replace(`%7B${name}%7D`, value.toString());
+    }
+  }
+
+  if (query) {
+    for (const [name, value] of Object.entries(query)) {
+      url.searchParams.set(
+        name,
+        typeof value === "object" ? JSON.stringify(value) : (value as any).toString(),
+      );
+    }
+  }
+
+  if (body && typeof body !== "string" && !(body instanceof FormData)) {
+    options.headers = {
+      ...(options.headers = {}),
+      "Content-Type": "application/json",
+    };
+    options.body = JSON.stringify(body);
+  }
+
+  if (baseOptions) {
+    const { headers: baseHeaders = {}, ...baseRest } = baseOptions;
+    options = {
+      ...baseRest,
+      ...options,
+      headers: {
+        ...baseHeaders,
+        ...options.headers,
+      },
+    };
+  }
+
+  const response = await fetch(url.toString(), options);
+
+  if (response.status === 204) {
+    return null;
+  }
+
+  const contentType = response.headers.get("content-type");
+
+  if (contentType?.includes("application/json") || contentType?.includes("application/geo+json")) {
+    const dataJson = await response.json();
+
+    if (response.ok) {
+      return dataJson;
+    }
+
+    let errorMessage = "request Error";
+
+    if (dataJson.message) {
+      errorMessage = dataJson.message;
+    }
+    if (dataJson.error?.message) {
+      errorMessage = dataJson.error?.message;
+    }
+    throw new FetchError(errorMessage, response.status, dataJson);
+  }
+
+  const dataText = await response.text();
+
+  if (response.ok) {
+    return dataText;
+  }
+
+  throw new FetchError(`${response.status} ${response.statusText}`, response.status, dataText);
+}
+
+export class FetchError extends Error {
+  constructor(
+    message: string,
+    public status: number,
+    public data?: unknown,
+  ) {
+    super(message);
+    this.name = "FetchError";
+  }
+}

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from "./arrUtil";
+export * from "./fetch";
+export * from "./error";

package/src/lib/tailwindVariants.ts

@@ -0,0 +1,35 @@
+import { ThemeColor } from "../types.d";
+
+type Variant = {
+  border: string;
+  text: string;
+};
+
+export const colorVariants: {
+  [key in ThemeColor]: Variant;
+} = {
+  yellow: {
+    border: "border-yellow-3",
+    text: "text-yellow-4",
+  },
+  gray: {
+    border: "border-gray-3",
+    text: "text-gray-4",
+  },
+  red: {
+    border: "border-red-3",
+    text: "text-red-4",
+  },
+  orange: {
+    border: "border-orange-3",
+    text: "text-orange-4",
+  },
+  green: {
+    border: "border-green-3",
+    text: "text-green-4",
+  },
+  blue: {
+    border: "border-blue-3",
+    text: "text-blue-4",
+  },
+};

package/src/redux/index.ts

@@ -0,0 +1 @@
+export * from "./notification";

package/src/redux/notification/components/NotificationConsumer.tsx

@@ -0,0 +1,52 @@
+import { ReactNode, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { messageRemoved, selectMessages } from "../notificationSlice";
+import { nanoid } from "@reduxjs/toolkit";
+import Snack from "~/components/snack/Snack";
+import { Message } from "~/types.d";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function NotificationConsumer({ children }: Props) {
+  const container = useRef<HTMLDivElement>(null!);
+  if (!container.current) {
+    container.current = document.createElement("div");
+    container.current.id = nanoid();
+    container.current.classList.add("ll-snack-bar");
+    document.body.append(container.current);
+  }
+
+  if (!container.current.parentElement) {
+    console.log("NotificationConsumer n'a pas de parent !!", container);
+    document.body.append(container.current);
+  }
+
+  useEffect(() => {
+    return () => {
+      container.current && container.current.remove();
+    };
+  }, []);
+
+  const messages = useSelector(selectMessages) as Message[];
+  const dispatch = useDispatch();
+  return (
+    <>
+      {children}
+      {createPortal(
+        <div className="snack-bar-inner">
+          {messages.map((message) => (
+            <Snack
+              key={message.id}
+              {...message}
+              onRemove={() => dispatch(messageRemoved(message.id))}
+            />
+          ))}
+        </div>,
+        container.current,
+      )}
+    </>
+  );
+}

package/src/redux/notification/errorCatcherMiddleware.ts

@@ -0,0 +1,17 @@
+import { Action, Middleware } from "@reduxjs/toolkit";
+import { messageAdded } from "./notificationSlice";
+import { parseError } from "~/lib";
+
+export const errorCatcherMiddleware: Middleware =
+  ({ dispatch }) =>
+  (next) =>
+  async (action) => {
+    if (typeof action !== "function" && (action as Action).type.endsWith("/rejected")) {
+      const errorMessage = parseError((action as any).error || {});
+      if (errorMessage) {
+        dispatch(messageAdded(...errorMessage));
+      }
+    }
+
+    return next(action);
+  };

package/src/redux/notification/hooks/useNotification.ts

@@ -0,0 +1,26 @@
+import { parseError } from "~/lib";
+import { MessageOptions } from "~/types.d";
+
+import { messageAdded } from "../notificationSlice";
+import { useDispatch } from "react-redux";
+
+export default function useNotification() {
+  const dispatch = useDispatch();
+
+  const notify = (content: string, options?: MessageOptions) => {
+    dispatch(messageAdded(content, options));
+  };
+
+  const notifyError = (err: unknown) => {
+    const errorMessage = parseError(err);
+    if (errorMessage) {
+      dispatch(messageAdded(...errorMessage));
+    } else {
+      throw err;
+    }
+  };
+  return {
+    notify,
+    notifyError,
+  };
+}

package/src/redux/notification/index.ts

@@ -0,0 +1,5 @@
+export * from "./notificationSlice";
+export { default as notificationSlice } from "./notificationSlice";
+export * from "./errorCatcherMiddleware";
+export { default as NotificationConsumer } from "./components/NotificationConsumer";
+export { default as useNotification } from "./hooks/useNotification";

package/src/redux/notification/notificationSlice.ts

@@ -0,0 +1,68 @@
+import { createSlice, nanoid, PayloadAction } from "@reduxjs/toolkit";
+import { parseError } from "~/lib";
+import { Message, MessageOptions } from "~/types.d";
+
+type NotificationState = {
+  messages: Message[];
+};
+
+const initialState: NotificationState = {
+  messages: [],
+};
+
+const notificationSlice = createSlice({
+  name: "notification",
+  initialState,
+  reducers: {
+    errorAdded: {
+      reducer(state, action: PayloadAction<Message>) {
+        state.messages.push(action.payload);
+      },
+      prepare(err: any) {
+        const errorMessage = parseError(err);
+        if (errorMessage) {
+          const [content, options] = errorMessage;
+          const {
+            expiration = 5000,
+            color = "red",
+            canClose = true,
+            withLoader = false,
+          } = options || {};
+          const id = nanoid();
+          return {
+            payload: { id, content, expiration, color, canClose, withLoader },
+          };
+        } else {
+          throw err;
+        }
+      },
+    },
+    messageAdded: {
+      reducer(state, action: PayloadAction<Message>) {
+        state.messages.push(action.payload);
+      },
+      prepare(content: string, options?: MessageOptions) {
+        const {
+          expiration = 5000,
+          color = "yellow",
+          canClose = true,
+          withLoader = false,
+        } = options || {};
+        const id = nanoid();
+        return {
+          payload: { id, content, expiration, color, canClose, withLoader },
+        };
+      },
+    },
+    messageRemoved(state, action: PayloadAction<string>) {
+      const messageId = action.payload;
+      state.messages = state.messages.filter((m) => m.id !== messageId);
+    },
+  },
+});
+
+export default notificationSlice.reducer;
+
+export const { messageAdded, messageRemoved, errorAdded } = notificationSlice.actions;
+
+export const selectMessages: (state: any) => Message[] = (state) => state.notification.messages;

package/src/styles/Animation.stories.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Button, useIsClosing } from "..";
+import clsx from "clsx";
+
+export default {
+  title: "Styles/Animation",
+};
+
+export const Basic = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <div>
+        <Button onClick={() => setIsOpen((v) => !v)}>{isOpen ? "Masquer" : "Afficher"}</Button>
+      </div>
+      {isOpen && (
+        <div className="shadow-xl w-[300px] h-[300px] animate-fade-in origin-top-left flex-center">
+          Modal
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const InOut = () => {
+  const { isOpen, isClosing, setIsOpen } = useIsClosing(false);
+  const classNames = clsx([
+    "shadow-xl w-[300px] h-[300px]",
+    "origin-top-left",
+    "flex-center",
+    isClosing ? "animate-fade-out" : "animate-fade-in",
+  ]);
+
+  return (
+    <div>
+      <div>
+        <Button onClick={() => setIsOpen(!isOpen)}>{isOpen ? "Masquer" : "Afficher"}</Button>
+      </div>
+      {isOpen && <div className={classNames}>Modal</div>}
+    </div>
+  );
+};

package/src/styles/Shadow.stories.tsx

@@ -0,0 +1,43 @@
+import Code from "../components/code/Code";
+
+export default {
+  title: "Styles",
+};
+
+export const Shadow = () => {
+  const shadows = [
+    "shadow-sm",
+    "shadow",
+    "shadow-md",
+    "shadow-lg",
+    "shadow-xl",
+    "shadow-2xl",
+    "shadow-inner",
+  ];
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gap: "2rem",
+        marginBottom: "2rem",
+        gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
+      }}
+    >
+      {shadows.map((s) => (
+        <div
+          key={s}
+          className={`${s} dark:shadow-dark`}
+          style={{
+            height: "200px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Code className="text-xs">.{s}</Code>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/styles/Themes.stories.tsx

@@ -0,0 +1,31 @@
+export default {
+  title: "Styles/Themes",
+};
+
+export const TextColors = () => {
+  const colors = ["gray", "yellow", "green", "blue", "orange", "red"];
+
+  return (
+    <div className="grid mt-4 grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] sm:grid-cols-1 gap-8">
+      {colors.map((color) => (
+        <div key={color}>
+          <div className="text-sm font-semibold">{color}</div>
+          <div className="grid mt-2 grid-cols-1 sm:grid-cols-5 gap-2">
+            {[1, 2, 3, 4, 5].map((variant) => (
+              <div className="">
+                <div
+                  className="h-10 w-10 sm:w-full rounded"
+                  style={{ backgroundColor: `rgb(var(--color-${color}-${variant}))` }}
+                ></div>
+                <div className="px-0.5">
+                  <div className="w-6 font-medium text-xs">{variant}</div>
+                  <div className="text-xs font-mono">{`--color-${color}-${variant}`}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/styles/Typography.stories.tsx

@@ -0,0 +1,101 @@
+import Href from "../components/href/Href";
+import Code from "../components/code/Code";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "../components/table";
+
+export default {
+  title: "Styles/Typography",
+};
+
+type HeaderTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export const Headers = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Usage</TableHeaderCell>
+        <TableHeaderCell>Example</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {[1, 2, 3, 4, 5, 6].map((level) => {
+        const HeaderTag = `h${level}` as HeaderTag;
+        return (
+          <TableRow key={level}>
+            <TableCell label="Usage">
+              <Code>{`h${level}`}</Code>
+            </TableCell>
+            <TableCell label="Example">
+              <HeaderTag>Lorem ipsum</HeaderTag>
+            </TableCell>
+          </TableRow>
+        );
+      })}
+    </TableBody>
+  </Table>
+);
+
+export const TextSizes = () => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHeaderCell>Usage</TableHeaderCell>
+        <TableHeaderCell>Example</TableHeaderCell>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {[
+        "text-5xl",
+        "text-4xl",
+        "text-3xl",
+        "text-2xl",
+        "text-xl",
+        "text-lg",
+        "text-base",
+        "text-sm",
+        "text-xs",
+      ].map((sizeClass) => {
+        return (
+          <TableRow key={sizeClass}>
+            <TableCell label="Usage">
+              <Code>{`.${sizeClass}`}</Code>
+            </TableCell>
+            <TableCell label="Example">
+              <span className={sizeClass}>Lorem ipsum</span>
+            </TableCell>
+          </TableRow>
+        );
+      })}
+    </TableBody>
+  </Table>
+);
+
+export const Content = () => (
+  <div>
+    <p>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+      been the industry's standard <a href="#">dummy text</a> ever since the 1500s, when an unknown
+      printer took a galley of type and scrambled it to make a type specimen book. It has survived.
+      Visit the Lonlat website, not only five centuries, but also the leap into electronic
+      typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
+      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
+      software like Aldus PageMaker including versions of Lorem Ipsum.
+    </p>
+    <p>
+      There is a{" "}
+      <Href ghost={true} href="#">
+        ghost
+      </Href>{" "}
+      link.
+    </p>
+    <p>
+      Click <span className="can-copy">HERE</span> to copy to clipboard
+    </p>
+  </div>
+);