dune-react 0.0.1

package/README.md

@@ -0,0 +1,49 @@
+# dune-react
+
+前端业务组件库项目
+
+框架：react + vite + storybook
+
+[story 文档 ](https://storybook.js.org/docs/react/addons/addons-api#addonssetconfigconfig)
+
+### 开发
+
+```
+ yarn storybook
+```
+
+### 打包
+
+```
+ yarn build
+```
+
+### 发布 npm
+
+```
+  npm publish
+```
+
+### 使用组件库
+
+```
+  npm install dune-react
+
+  // 在入口文件如_app.js中引入style
+  import 'dune-react/dist/style.css'
+
+  // 在目标页面中
+  import {xxx} from dune-react
+```
+
+### 发布到 github 静态页
+
+使用[@storybook/storybook-deployer 文档](https://github.com/storybook-eol/storybook-deployer)发布到 github
+
+```
+    yarn build-storybook
+
+    // 在storybook-static 文件夹中添加.nojekyll文件
+
+    yarn deploy-storybook -- --existing-output-dir=storybook-static
+```

package/dist/_virtual/_commonjsHelpers.js

@@ -0,0 +1,8 @@
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  commonjsGlobal,
+  getDefaultExportFromCjs
+};

package/dist/_virtual/index.js

@@ -0,0 +1,4 @@
+var fileType = { exports: {} };
+export {
+  fileType as __module
+};

package/dist/_virtual/sha1.js

@@ -0,0 +1,4 @@
+var sha1 = { exports: {} };
+export {
+  sha1 as __module
+};

package/dist/_virtual/util.js

@@ -0,0 +1,4 @@
+var util = {};
+export {
+  util as __exports
+};

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+import Background from "./ui-custom/background.tsx";
+import { Cover } from "./ui-custom/cover.tsx";
+import { SparklesCore } from "./ui-custom/sparkles.tsx";
+export { Background, Cover, SparklesCore };

package/dist/components/ui-custom/background.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+interface IBlurryBackgroundProps {
+    children?: ReactNode;
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+export default function Background({ children, primaryColor, secondaryColor, }: IBlurryBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui-custom/background.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function Background({
+  children,
+  primaryColor = "bg-primary-500",
+  secondaryColor = "bg-primary-400"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-base-100 fixed z-[-10] flex h-full w-full", children: /* @__PURE__ */ jsxs("div", { className: "bg-base-100 flex h-full w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-3/6 w-2/5 translate-y-1/2 opacity-40", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full opacity-70 blur-2xl", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full blur-2xl", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-full w-full ${primaryColor} blur-2xl`,
+          style: {
+            transform: "rotate(30deg)",
+            clipPath: "polygon(40% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%)"
+          }
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-2/6 w-1/6 translate-x-3/4 -translate-y-40 opacity-40", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full opacity-80 blur-2xl", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full blur-2xl", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-full w-full rotate-45 ${secondaryColor}`,
+          style: {
+            clipPath: "polygon(60% 0%, 100% 40%, 70% 100%, 30% 100%, 0% 40%)"
+          }
+        }
+      ) }) }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-96 -right-40 h-2/6 w-1/5 opacity-40",
+          style: { transform: "translateY(-50%)" },
+          children: /* @__PURE__ */ jsx("div", { className: "h-full w-full opacity-60 blur-2xl", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full blur-2xl", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-full w-full ${secondaryColor} blur-2xl`,
+              style: {
+                transform: "rotate(12deg)",
+                clipPath: "polygon(50% 0%, 100% 20%, 80% 100%, 20% 100%, 0% 20%)"
+              }
+            }
+          ) }) })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "relative z-10 w-full", children })
+  ] });
+}
+export {
+  Background as default
+};

package/dist/components/ui-custom/cover.d.ts

@@ -0,0 +1,17 @@
+import { motion } from "motion/react";
+import React from "react";
+export declare const Cover: ({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Beam: ({ className, delay, duration, hovered, width, ...svgProps }: {
+    className?: string;
+    delay?: number;
+    duration?: number;
+    hovered?: boolean;
+    width?: number;
+} & React.ComponentProps<typeof motion.svg>) => import("react/jsx-runtime").JSX.Element;
+export declare const CircleIcon: ({ className, }: {
+    className?: string;
+    delay?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui-custom/cover.js

@@ -0,0 +1,231 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/css-utils.js";
+import { SparklesCore } from "./sparkles.js";
+import { useState, useRef, useEffect, useId } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+const Cover = ({
+  children,
+  className
+}) => {
+  const [hovered, setHovered] = useState(false);
+  const ref = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [beamPositions, setBeamPositions] = useState([]);
+  useEffect(() => {
+    var _a, _b;
+    if (ref.current) {
+      setContainerWidth(((_a = ref.current) == null ? void 0 : _a.clientWidth) ?? 0);
+      const height = ((_b = ref.current) == null ? void 0 : _b.clientHeight) ?? 0;
+      const numberOfBeams = Math.floor(height / 10);
+      const positions = Array.from(
+        { length: numberOfBeams },
+        (_, i) => (i + 1) * (height / (numberOfBeams + 1))
+      );
+      setBeamPositions(positions);
+    }
+  }, [ref.current]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      ref,
+      className: "group/cover relative inline-block rounded-sm bg-neutral-100 px-2 py-2 transition duration-200 hover:bg-neutral-900 dark:bg-neutral-900",
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: hovered && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: {
+              opacity: {
+                duration: 0.2
+              }
+            },
+            className: "absolute inset-0 h-full w-full overflow-hidden",
+            children: /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                animate: {
+                  translateX: ["-50%", "0%"]
+                },
+                transition: {
+                  translateX: {
+                    duration: 10,
+                    ease: "linear",
+                    repeat: Infinity
+                  }
+                },
+                className: "flex h-full w-[200%]",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SparklesCore,
+                    {
+                      background: "transparent",
+                      minSize: 0.4,
+                      maxSize: 1,
+                      particleDensity: 500,
+                      className: "h-full w-full",
+                      particleColor: "#FFFFFF"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    SparklesCore,
+                    {
+                      background: "transparent",
+                      minSize: 0.4,
+                      maxSize: 1,
+                      particleDensity: 500,
+                      className: "h-full w-full",
+                      particleColor: "#FFFFFF"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }),
+        beamPositions.map((position, index) => /* @__PURE__ */ jsx(
+          Beam,
+          {
+            hovered,
+            duration: Math.random() * 2 + 1,
+            delay: Math.random() * 2 + 1,
+            width: containerWidth,
+            style: {
+              top: `${position}px`
+            }
+          },
+          index
+        )),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            animate: {
+              scale: hovered ? 0.8 : 1,
+              x: hovered ? [0, -30, 30, -30, 30, 0] : 0,
+              y: hovered ? [0, 30, -30, 30, -30, 0] : 0
+            },
+            exit: {
+              filter: "none",
+              scale: 1,
+              x: 0,
+              y: 0
+            },
+            transition: {
+              duration: 0.2,
+              x: {
+                duration: 0.2,
+                repeat: Infinity,
+                repeatType: "loop"
+              },
+              y: {
+                duration: 0.2,
+                repeat: Infinity,
+                repeatType: "loop"
+              },
+              scale: {
+                duration: 0.2
+              },
+              filter: {
+                duration: 0.2
+              }
+            },
+            className: cn(
+              "relative z-20 inline-block text-neutral-900 transition duration-200 group-hover/cover:text-white dark:text-white",
+              className
+            ),
+            children
+          },
+          String(hovered)
+        ),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -top-[2px] -right-[2px]" }),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -right-[2px] -bottom-[2px]", delay: 0.4 }),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -top-[2px] -left-[2px]", delay: 0.8 }),
+        /* @__PURE__ */ jsx(CircleIcon, { className: "absolute -bottom-[2px] -left-[2px]", delay: 1.6 })
+      ]
+    }
+  );
+};
+const Beam = ({
+  className,
+  delay,
+  duration,
+  hovered,
+  width = 600,
+  ...svgProps
+}) => {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      width: width ?? "600",
+      height: "1",
+      viewBox: `0 0 ${width ?? "600"} 1`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("absolute inset-x-0 w-full", className),
+      ...svgProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            d: `M0 0.5H${width ?? "600"}`,
+            stroke: `url(#svgGradient-${id})`
+          }
+        ),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          motion.linearGradient,
+          {
+            id: `svgGradient-${id}`,
+            gradientUnits: "userSpaceOnUse",
+            initial: {
+              x1: "0%",
+              x2: hovered ? "-10%" : "-5%",
+              y1: 0,
+              y2: 0
+            },
+            animate: {
+              x1: "110%",
+              x2: hovered ? "100%" : "105%",
+              y1: 0,
+              y2: 0
+            },
+            transition: {
+              duration: hovered ? 0.5 : duration ?? 2,
+              ease: "linear",
+              repeat: Infinity,
+              delay: hovered ? Math.random() * (1 - 0.2) + 0.2 : 0,
+              repeatDelay: hovered ? Math.random() * (2 - 1) + 1 : delay ?? 1
+            },
+            children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#2EB9DF", stopOpacity: "0" }),
+              /* @__PURE__ */ jsx("stop", { stopColor: "#3b82f6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#3b82f6", stopOpacity: "0" })
+            ]
+          },
+          String(hovered)
+        ) })
+      ]
+    }
+  );
+};
+const CircleIcon = ({
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        `group pointer-events-none h-2 w-2 animate-pulse rounded-full bg-neutral-600 opacity-20 group-hover/cover:hidden group-hover/cover:bg-white group-hover/cover:opacity-100 dark:bg-white`,
+        className
+      )
+    }
+  );
+};
+export {
+  Beam,
+  CircleIcon,
+  Cover
+};

package/dist/components/ui-custom/sparkles.d.ts

@@ -0,0 +1,13 @@
+type ParticlesProps = {
+    id?: string;
+    className?: string;
+    background?: string;
+    particleSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    speed?: number;
+    particleColor?: string;
+    particleDensity?: number;
+};
+export declare const SparklesCore: (props: ParticlesProps) => import("react/jsx-runtime").JSX.Element;
+export {};