pentatrion-design 0.0.1

package/src/tailwind/pentatrionTw.ts

@@ -0,0 +1,147 @@
+import plugin from "tailwindcss/plugin";
+import { keyframes } from "./keyframes";
+
+import defaultTheme from "tailwindcss/defaultTheme";
+
+export default plugin(
+  ({ addVariant }) => {
+    addVariant("active-full", ["&:active", "&.active"]);
+    // addVariant("focus-full", ["&:focus-within", "&.focus", "&:focus"]);
+    addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus"]);
+  },
+  {
+    theme: {
+      zIndex: {
+        auto: "auto",
+        0: "0",
+        10: "10",
+        20: "20",
+        30: "30",
+        40: "40",
+        50: "50",
+        dialog: "100",
+        overlay: "100",
+        tooltip: "100",
+        "context-menu": "90",
+        notification: "80",
+      },
+      transitionDuration: {
+        ...defaultTheme.transitionDuration,
+        DEFAULT: "300ms",
+      },
+      colors: {
+        transparent: "transparent",
+        current: "currentColor",
+        black: "rgb(var(--color-black) / <alpha-value>)",
+        white: "rgb(var(--color-white) / <alpha-value>)",
+
+        yellow: {
+          1: "rgb(var(--color-yellow-1) / <alpha-value>)",
+          2: "rgb(var(--color-yellow-2) / <alpha-value>)",
+          3: "rgb(var(--color-yellow-3) / <alpha-value>)",
+          4: "rgb(var(--color-yellow-4) / <alpha-value>)",
+          5: "rgb(var(--color-yellow-5) / <alpha-value>)",
+          // color of the text when bg is yellow 3
+          text: "rgb(var(--color-yellow-text) / <alpha-value>)",
+        },
+        green: {
+          1: "rgb(var(--color-green-1) / <alpha-value>)",
+          2: "rgb(var(--color-green-2) / <alpha-value>)",
+          3: "rgb(var(--color-green-3) / <alpha-value>)",
+          4: "rgb(var(--color-green-4) / <alpha-value>)",
+          5: "rgb(var(--color-green-5) / <alpha-value>)",
+          // color of the text when bg is green
+          text: "rgb(var(--color-green-text) / <alpha-value>)",
+        },
+        blue: {
+          1: "rgb(var(--color-blue-1) / <alpha-value>)",
+          2: "rgb(var(--color-blue-2) / <alpha-value>)",
+          3: "rgb(var(--color-blue-3) / <alpha-value>)",
+          4: "rgb(var(--color-blue-4) / <alpha-value>)",
+          5: "rgb(var(--color-blue-5) / <alpha-value>)",
+          // color of the text when bg is blue
+          text: "rgb(var(--color-blue-text) / <alpha-value>)",
+        },
+        orange: {
+          1: "rgb(var(--color-orange-1) / <alpha-value>)",
+          2: "rgb(var(--color-orange-2) / <alpha-value>)",
+          3: "rgb(var(--color-orange-3) / <alpha-value>)",
+          4: "rgb(var(--color-orange-4) / <alpha-value>)",
+          5: "rgb(var(--color-orange-5) / <alpha-value>)",
+          // color of the text when bg is orange
+          text: "rgb(var(--color-orange-text) / <alpha-value>)",
+        },
+        red: {
+          1: "rgb(var(--color-red-1) / <alpha-value>)",
+          2: "rgb(var(--color-red-2) / <alpha-value>)",
+          3: "rgb(var(--color-red-3) / <alpha-value>)",
+          4: "rgb(var(--color-red-4) / <alpha-value>)",
+          5: "rgb(var(--color-red-5) / <alpha-value>)",
+          // color of the text when bg is red
+          text: "rgb(var(--color-red-text) / <alpha-value>)",
+        },
+        gray: {
+          0: "rgb(var(--color-gray-0) / <alpha-value>)",
+          1: "rgb(var(--color-gray-1) / <alpha-value>)",
+          2: "rgb(var(--color-gray-2) / <alpha-value>)",
+          3: "rgb(var(--color-gray-3) / <alpha-value>)",
+          4: "rgb(var(--color-gray-4) / <alpha-value>)",
+          5: "rgb(var(--color-gray-5) / <alpha-value>)",
+          6: "rgb(var(--color-gray-6) / <alpha-value>)",
+          7: "rgb(var(--color-gray-7) / <alpha-value>)",
+          8: "rgb(var(--color-gray-8) / <alpha-value>)",
+          // color of the text when bg is gray
+          text: "rgb(var(--color-gray-text) / <alpha-value>)",
+        },
+      },
+      boxShadow: {
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.1)",
+        DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
+        xl: "0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15)",
+        "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.35)",
+        inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.1)",
+        dark: "0 0 0 1px rgb(var(--color-gray-2))",
+        none: "none",
+      },
+      fontFamily: {
+        sans: ["ui-sans-serif", "system-ui", "sans-serif"],
+        fontello: ["fontello"],
+        serif: defaultTheme.fontFamily.serif,
+        mono: defaultTheme.fontFamily.mono,
+      },
+
+      extend: {
+        // https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js
+        backgroundSize: {
+          full: "100%",
+        },
+        dropShadow: {
+          arrow: "0 1px 3px rgb(var(--color-gray-3))",
+        },
+        transitionProperty: {
+          "color-shadow":
+            "color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow",
+        },
+        gridTemplateColumns: {
+          "repeat-fill-300": "repeat(auto-fill, minmax(300px, 1fr))",
+          "repeat-fill-160": "repeat(auto-fill, minmax(160px, 1fr))",
+        },
+        animation: {
+          ripple: "ripple .9s linear",
+          "fade-in": "fade-in 250ms ease both",
+          "fade-in-list": "fade-in-list 150ms ease both",
+          "fade-out": "fade-out 250ms ease both",
+          "fade-in-opacity": "fade-in-opacity 250ms ease both",
+          flash: "flash 1000ms ease both infinite",
+          "loader-stroke": "loader-stroke 1s linear infinite",
+        },
+        fontSize: {
+          "2xs": ["0.688rem", { lineHeight: "1rem" }],
+        },
+        keyframes,
+      },
+    },
+  },
+);

package/src/tailwind/utilities-dialog.css

@@ -0,0 +1,103 @@
+[data-placement^="top"] {
+  @apply origin-bottom;
+  /* border-top-width: 4px; */
+
+  & .p8n-arrow {
+    @apply w-0 h-0 absolute border-x-8 border-t-8 border-x-transparent border-t-current top-full drop-shadow-arrow dark:drop-shadow-[0_1px_0_rgb(var(--color-gray-2))];
+    clip: rect(0px, 16px, 12px, 0px);
+  }
+}
+
+[data-placement="top-start"] {
+  @apply origin-bottom-left;
+}
+
+[data-placement="top-end"] {
+  @apply origin-bottom-right;
+}
+
+[data-placement^="bottom"] {
+  @apply origin-top;
+  /* border-bottom-width: 4px; */
+
+  & .p8n-arrow {
+    @apply w-0 h-0 absolute border-x-8 border-b-8 border-x-transparent border-b-current bottom-full drop-shadow-arrow dark:drop-shadow-[0_-1px_0_rgb(var(--color-gray-2))];
+    clip: rect(-4px, 16px, 8px, 0px);
+  }
+}
+
+[data-placement="bottom-start"] {
+  @apply origin-top-left;
+}
+
+[data-placement="bottom-end"] {
+  @apply origin-top-right;
+}
+
+[data-placement^="left"] {
+  @apply origin-right;
+  /* border-left-width: 4px; */
+
+  & .p8n-arrow {
+    @apply w-0 h-0 absolute border-y-8 border-l-8 border-y-transparent border-l-current left-full drop-shadow-arrow dark:drop-shadow-[1px_0_0_rgb(var(--color-gray-2))];
+    clip: rect(0px, 12px, 16px, 0px);
+  }
+}
+
+[data-placement="left-start"] {
+  @apply origin-top-right;
+}
+
+[data-placement="left-end"] {
+  @apply origin-bottom-right;
+}
+
+[data-placement^="right"] {
+  /* border-right-width: 4px; */
+  @apply origin-left;
+
+  & .p8n-arrow {
+    @apply w-0 h-0 absolute border-y-8 border-r-8 border-y-transparent border-r-current right-full drop-shadow-arrow dark:drop-shadow-[-1px_0_0_rgb(var(--color-gray-2))];
+    clip: rect(0px, 8px, 16px, -4px);
+  }
+}
+
+[data-placement="right-start"] {
+  @apply origin-top-left;
+}
+
+[data-placement="right-end"] {
+  @apply origin-bottom-left;
+}
+
+[data-placement][data-color="yellow"] .p8n-arrow {
+  @apply text-gray-0;
+}
+
+[data-placement][data-color="gray"] .p8n-arrow {
+  @apply text-gray-0;
+}
+
+[data-placement][data-color="red"] .p8n-arrow {
+  @apply text-red-1;
+}
+
+[data-placement][data-color="orange"] .p8n-arrow {
+  @apply text-orange-1;
+}
+
+[data-placement][data-color="blue"] .p8n-arrow {
+  @apply text-blue-1;
+}
+
+[data-placement][data-color="green"] .p8n-arrow {
+  @apply text-green-1;
+}
+
+.option[data-nested][data-open]:not([data-focus-inside]) {
+  @apply bg-gray-2;
+}
+
+.option[data-focus-inside][data-open] {
+  @apply bg-gray-1;
+}

package/src/tailwind/utilities.css

@@ -0,0 +1,3 @@
+.flex-center {
+  @apply flex items-center justify-center;
+}

package/src/types.d.ts

@@ -0,0 +1,12 @@
+export type ThemeColor = "yellow" | "gray" | "red" | "orange" | "green" | "blue";
+
+export type MessageOptions = Partial<Omit<Message, "message" | "id">>;
+
+export interface Message {
+  id: string;
+  content: string;
+  expiration: number; // in ms. if -1 never expire
+  color: ThemeColor;
+  canClose: boolean;
+  withLoader: boolean;
+}

package/tailwind.config.js

@@ -0,0 +1,18 @@
+import pentatrionTw from "./src/tailwind/pentatrionTw";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    `./src/components/**/*.{ts,tsx}`,
+    `./src/hooks/**/*.{ts,tsx}`,
+    `./src/lib/**/*.{ts,tsx}`,
+    `./src/redux/**/*.{ts,tsx}`,
+    `./src/styles/**/*.{ts,tsx}`,
+  ],
+  darkMode: ["class"],
+  theme: {
+    extend: {},
+  },
+  safelist: ["light", "dark"],
+  plugins: [pentatrionTw],
+};

package/tests/README.md

@@ -0,0 +1,32 @@
+Testing library
+
+## Matchers
+
+custom Matchers : https://github.com/testing-library/jest-dom
+
+`expect(...).toBeDisabled()`
+
+- toBeDisabled
+- toBeEnabled
+- toBeEmptyDOMElement
+- toBeInTheDocument
+- toBeInvalid
+- toBeRequired
+- toBeValid
+- toBeVisible
+- toContainElement
+- toContainHTML
+- toHaveAccessibleDescription
+- toHaveAccessibleErrorMessage
+- toHaveAccessibleName
+- toHaveAttribute
+- toHaveClass
+- toHaveFocus
+- toHaveFormValues
+- toHaveStyle
+- toHaveTextContent
+- toHaveValue
+- toHaveDisplayValue
+- toBeChecked
+- toBePartiallyChecked
+- toHaveErrorMessage

package/tests/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "declaration": true,
+    "skipLibCheck": true,
+    "types": ["react/experimental", "@testing-library/jest-dom"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "exclude": ["**/node_modules", "./dist"],
+  "include": ["src", "tests", ".storybook"]
+}

package/tsup.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["./src/index.ts", "./src/redux/index.ts"],
+  dts: true,
+  format: ["esm"],
+  esbuildOptions(options) {
+    options.external = [
+      "@floating-ui/react",
+      "clsx",
+      "react",
+      "react-dom",
+      "react-polymorphic-types",
+      "react-sortablejs",
+      "tailwindcss",
+      "react-redux",
+      "@reduxjs/toolkit",
+    ];
+  },
+  splitting: false,
+  shims: true,
+  clean: true,
+});

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react-swc";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const projectDir = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "~": resolve(projectDir, "src"),
+    },
+  },
+  test: {
+    // globals: true
+    environment: "jsdom",
+    setupFiles: ["./tests/setup.ts"],
+
+    // you might want to disable it, if you don't have tests that rely on CSS
+    // since parsing CSS is slow
+    css: false,
+  },
+});