npm - @js-empire/emperor-ui - Versions diffs - 1.3.10 → 1.3.12 - Mend

@js-empire/emperor-ui 1.3.10 → 1.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (586) hide show

package/dist/src-UW24ZMRV-DQtCWsbT.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { d as a } from "./index-DXWNWGH3.js";
+var r = a;
+export {
+  r as default
+};

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,34 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+export default defineConfig([
+  globalIgnores(["dist"]),
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  reactHooks.configs.flat.recommended,
+  reactRefresh.configs.vite,
+  ...storybook.configs["flat/recommended"],
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
+]);

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>emperor-ui</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,23 +1,19 @@
 {
   "name": "@js-empire/emperor-ui",
   "description": "They provide the atoms, we provide the empire.",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "author": "JS Empire - Mustafa Alhasanat",
   "license": "ISC",
   "type": "module",
-  "main": "./dist/emperor-ui.js",
-  "module": "./dist/emperor-ui.js",
-  "types": "./dist/src/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "main": "dist/emperor-ui-umd.cjs",
+  "module": "dist/emperor-ui.js",
+  "types": "dist/index.d.ts",
   "keywords": [],
   "exports": {
     ".": {
-      "types": "./dist/src/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/emperor-ui.js",
-      "default": "./dist/emperor-ui.js"
+      "require": "./dist/emperor-ui-umd.cjs"
     },
     "./globals.css": "./dist/globals.css"
   },
@@ -51,52 +47,7 @@
   "resolutions": {
     "jackspeak": "2.1.1"
   },
-  "peerDependencies": {
-    "@heroui/autocomplete": "^2.3.33",
-    "@heroui/avatar": "^2.2.25",
-    "@heroui/button": "^2.2.31",
-    "@heroui/card": "^2.2.27",
-    "@heroui/checkbox": "^2.3.31",
-    "@heroui/chip": "^2.2.24",
-    "@heroui/date-picker": "^2.3.32",
-    "@heroui/divider": "^2.2.23",
-    "@heroui/drawer": "^2.2.28",
-    "@heroui/dropdown": "^2.3.31",
-    "@heroui/image": "^2.2.19",
-    "@heroui/input": "^2.4.32",
-    "@heroui/link": "^2.2.25",
-    "@heroui/modal": "^2.2.28",
-    "@heroui/pagination": "^2.2.26",
-    "@heroui/radio": "^2.3.31",
-    "@heroui/scroll-shadow": "^2.3.19",
-    "@heroui/select": "^2.4.32",
-    "@heroui/skeleton": "^2.2.18",
-    "@heroui/slider": "^2.4.28",
-    "@heroui/spinner": "^2.2.28",
-    "@heroui/switch": "^2.2.26",
-    "@heroui/system": "^2.4.27",
-    "@heroui/theme": "^2.4.25",
-    "@heroui/toast": "^2.0.21",
-    "@heroui/tooltip": "^2.2.28",
-    "@hookform/resolvers": "^5.2.2",
-    "@internationalized/date": "^3.11.0",
-    "browser-image-compression": "^2.0.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.23.26",
-    "lucide-react": "^0.560.0",
-    "motion": "^12.26.2",
-    "next-themes": "^0.4.6",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "react-hook-form": "^7.71.1",
-    "tailwind-merge": "^3.4.0",
-    "tailwind-scrollbar-hide": "^4.0.0",
-    "tailwindcss": "^4.1.17",
-    "use-debounce": "^10.1.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
+  "dependencies": {
     "@heroui/autocomplete": "^2.3.33",
     "@heroui/avatar": "^2.2.25",
     "@heroui/button": "^2.2.31",
@@ -144,7 +95,10 @@
     "tailwindcss": "^4.1.17",
     "use-debounce": "^10.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "zod": "^4.3.6",
+    "xlsx": "^0.18.5",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/js": "^9.39.1",
     "@storybook/addon-a11y": "^10.1.6",

package/public/icons/emperor-ui-logo.ico ADDED Viewed

Binary file

package/public/images/avatar-female.jpg ADDED Viewed

Binary file

package/public/images/avatar-male.jpg ADDED Viewed

Binary file

package/public/images/emperor-ui-logo.png ADDED Viewed

Binary file

package/src/animations/blink.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { Variants } from "framer-motion";
+/**
+ * ? In order to work, the parent container must have the blinkContainer variants
+ * ? and each of the children must have the blinkItem variants
+ */
+export const blinkContainer: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.12,
+      delayChildren: 0.08,
+    },
+  },
+};
+export const blinkItem: Variants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: "easeOut" },
+  },
+};

package/src/animations/floating.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Variants } from "framer-motion";
+export const floating: Variants = {
+  animate: {
+    y: [0, -6, 0],
+    transition: {
+      duration: 3,
+      repeat: Infinity,
+      ease: "easeInOut",
+    },
+  },
+};

package/src/animations/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./floating";
2	+ export * from "./blink";

package/src/components/atoms/brand/brand.stories.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Brand } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+const meta: Meta<typeof Brand> = {
+  title: "Atoms/Brand",
+  component: Brand,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    src: "/images/emperor-ui-logo.png",
+  },
+};

package/src/components/atoms/brand/brand.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import type { BrandProps } from "@/types";
+import { cn } from "@/utils";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, forwardRef } from "react";
+import { Row } from "@/components";
+import { brandStyles } from "./styles";
+import { Image } from "@heroui/image";
+export const Brand = forwardRef<
+  HTMLElement,
+  ComponentProps<"div"> & VariantProps<typeof brandStyles> & BrandProps
+>(
+  (
+    {
+      className,
+      variant,
+      src,
+      alt = "Emperor UI",
+      name = "Emperor UI",
+      isIconOnly = false,
+      classNames,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Row
+        ref={ref}
+        data-slot="emperor-brand"
+        className={cn(
+          brandStyles({ variant, className: cn(className, classNames?.base) }),
+        )}
+        {...props}
+      >
+        {src && (
+          <Image
+            data-slot="emperor-brand-logo"
+            src={src}
+            alt={alt}
+            radius="md"
+            className={cn("min-w-7 min-h-7 size-7", classNames?.logo)}
+          />
+        )}
+        {name && !isIconOnly && (
+          <p
+            data-slot="emperor-brand-name"
+            className={cn("font-semibold text-lg", classNames?.name)}
+          >
+            {name}
+          </p>
+        )}
+      </Row>
+    );
+  },
+);

package/src/components/atoms/brand/index.ts ADDED Viewed

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

package/src/components/atoms/brand/styles/classes.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { cva } from "class-variance-authority";
+export const brandStyles = cva([""], {
+  variants: {
+    variant: {},
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});

package/src/components/atoms/brand/styles/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from "./classes";
2	+ export * from "./styles";

package/src/components/atoms/brand/styles/styles.ts ADDED Viewed

File without changes

package/src/components/atoms/color-picker/color-picker.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+"use client";
+import type { ColorPickerProps } from "@/types";
+import { FreeColorPicker, PresetColorPicker } from "@/components";
+export function ColorPicker({ ...props }: ColorPickerProps) {
+  if (props?.inputType === "preset") {
+    return <PresetColorPicker {...props} />;
+  }
+  return <FreeColorPicker {...props} />;
+}

package/src/components/atoms/color-picker/free-color-picker.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+"use client";
+import { useMemo } from "react";
+import { Input } from "@heroui/input";
+import { cn } from "@/utils";
+import type { ColorPickerProps } from "@/types";
+import { CopyButton } from "@/components";
+import { useEmperorUI } from "@/hooks";
+export function FreeColorPicker({
+  className,
+  classNames,
+  value = "#000000",
+  onChange,
+  defaultValue,
+  inputType = "free",
+  ...props
+}: ColorPickerProps) {
+  const { config } = useEmperorUI();
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+  const locale = locales?.[lang ?? "en"];
+  const errorMessage = locale?.atoms?.colorPicker?.invalidColorFormat;
+  const isInvalid = useMemo(() => {
+    if (!value) return true;
+    const HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+    return !HEX_COLOR_REGEX.test(value);
+  }, [value]);
+  return (
+    <Input
+      labelPlacement="outside"
+      variant="faded"
+      className={cn(className)}
+      classNames={{ label: "font-bold", input: "h-12", ...classNames }}
+      defaultValue={defaultValue}
+      value={value}
+      onValueChange={onChange}
+      isInvalid={isInvalid}
+      errorMessage={isInvalid ? errorMessage : undefined}
+      endContent={<CopyButton value={value} />}
+      startContent={
+        <input
+          type="color"
+          className="color-swatch"
+          value={value}
+          onChange={(e) => {
+            onChange?.(e.target.value as string);
+          }}
+        />
+      }
+      {...props}
+    />
+  );
+}

package/src/components/atoms/color-picker/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from "./color-picker";
+export * from "./free-color-picker";
+export * from "./preset-color-picker";

package/src/components/atoms/color-picker/preset-color-picker.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "@/utils";
+import type { ColorPickerProps } from "@/types";
+import { Select, SelectItem } from "@heroui/select";
+import { CopyButton } from "@/components";
+export function PresetColorPicker({
+  className,
+  classNames,
+  value = "#000000",
+  onChange,
+  defaultValue,
+  inputType,
+  presets = [],
+  ...props
+}: ColorPickerProps) {
+  if (inputType === "preset" && (!presets || presets?.length === 0))
+    throw new Error(
+      "Presets array is required in the ColorPicker when the input type is 'preset'.",
+    );
+  return (
+    <Select
+      labelPlacement="outside"
+      variant="faded"
+      className={cn(className)}
+      classNames={{
+        label: "font-bold",
+        input: "h-12",
+        trigger: "min-w-52",
+        ...classNames,
+      }}
+      selectedKeys={value ? [value] : undefined}
+      defaultSelectedKeys={defaultValue ? [defaultValue] : undefined}
+      onSelectionChange={(value) => onChange?.(value?.currentKey ?? "")}
+      endContent={<CopyButton value={value} />}
+      renderValue={() => {
+        return (
+          <div className="flex items-center gap-2 text-gray-600">
+            <div
+              style={{ backgroundColor: value }}
+              className="size-4 rounded-full border border-gray-300"
+            />
+            {value}
+          </div>
+        );
+      }}
+      {...props}
+    >
+      {Array.from(new Set(presets))?.map((preset) => (
+        <SelectItem
+          key={preset}
+          startContent={
+            <div
+              style={{ backgroundColor: preset }}
+              className="size-4 rounded-full border border-gray-300"
+            />
+          }
+        >
+          {preset}
+        </SelectItem>
+      ))}
+    </Select>
+  );
+}

package/src/components/atoms/color-picker/stories/color-picker.stories.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ColorPicker } from "@/components";
+import { useState } from "react";
+import { getStorybookDecorators } from "@/utils";
+const meta: Meta<typeof ColorPicker> = {
+  title: "Atoms/ColorPicker",
+  component: ColorPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState("#000000");
+    return (
+      <section className="flex flex-col gap-4">
+        <ColorPicker
+          inputType="free"
+          value={value}
+          onChange={setValue}
+          defaultValue="#000000"
+        />
+        <p className="text-xs text-gray-500">Value: {value}</p>
+      </section>
+    );
+  },
+};
+export const WithPresets: Story = {
+  render: () => {
+    const [value, setValue] = useState("#000000");
+    return (
+      <section className="flex flex-col gap-4">
+        <ColorPicker
+          inputType="preset"
+          presets={["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"]}
+          value={value}
+          onChange={setValue}
+          defaultValue="#000000"
+        />
+        <p className="text-xs text-gray-500">Value: {value}</p>
+      </section>
+    );
+  },
+};

package/src/components/atoms/column/column.stories.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Column } from "@/components";
+import type { ColumnProps } from "@/types";
+import { getStorybookDecorators } from "@/utils";
+const meta: Meta<typeof Column> = {
+  title: "Atoms/Column",
+  component: Column,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {},
+  render: (args: ColumnProps) => (
+    <Column {...args}>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={index} className="bg-blue-300 p-2 rounded-md">
+          Item {index + 1}
+        </div>
+      ))}
+    </Column>
+  ),
+};

package/src/components/atoms/column/column.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import type { ColumnProps } from "@/types";
+import { cn } from "@/utils";
+import { cva, VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+const columnStyles = cva(["flex flex-col gap-3"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+export const Column = forwardRef<
+  HTMLElement,
+  ComponentProps<"section"> & VariantProps<typeof columnStyles> & ColumnProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <section ref={ref} className={cn(columnStyles({ className }))} {...props}>
+      {children}
+    </section>
+  );
+});

package/src/components/atoms/column/index.ts ADDED Viewed

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

package/src/components/atoms/container/column.stories.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Container } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import type { ContainerProps } from "@/types";
+const meta: Meta<typeof Container> = {
+  title: "Atoms/Container",
+  component: Container,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    className: "h-screen flex items-center justify-center",
+  },
+  render: (args: ContainerProps) => (
+    <Container {...args}>
+      <div className="bg-blue-300 p-2 text-center rounded-md w-full h-fit">
+        Responsive contained content
+      </div>
+    </Container>
+  ),
+};

package/src/components/atoms/container/container.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import type { ContainerProps } from "@/types";
+import { cn } from "@/utils";
+import { cva, VariantProps } from "class-variance-authority";
+import { forwardRef, ComponentProps } from "react";
+const containerStyles = cva(["flex w-full container p-4 mx-auto"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+export const Container = forwardRef<
+  HTMLElement,
+  ComponentProps<"section"> &
+    VariantProps<typeof containerStyles> &
+    ContainerProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <section
+      ref={ref}
+      data-slot="container"
+      className={cn(containerStyles({ className }))}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+});

package/src/components/atoms/container/index.ts ADDED Viewed

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