@noxickon/onyx 0.0.3 → 0.0.4-dev.3

package/dist/pages/pages.cjs.js

@@ -1,7 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/jsx-runtime-CITbqOLs.js");require("react");const i=require("../chunks/Button-CU-zvMVL.js"),t=require("../chunks/Input-C5dK8VSu.js"),p=require("../chunks/useForm-cxgyAiOs.js"),m=require("../chunks/index-DGjVEo0G.js"),c=m.gql`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/jsx-runtime-CITbqOLs.js");require("react");const o=require("../chunks/Button-D-v4l8ZE.js"),n=require("../chunks/Input-CLi1H63d.js"),a=require("../chunks/useAuth-DPnpY3XC.js"),p=require("../chunks/useForm-DUviJ7xS.js"),g=require("../chunks/errorHelper-DaP_XxEx.js"),h=a.gql`
   mutation Login($input: LoginInput!) {
     login(input: $input) {
-      isAuthenticated
+      success
+      me {
+        id
+        username
+        email
+        role
+      }
     }
   }
-`,g=({className:o,mutation:a=c,onSubmit:n,subtitle:u="",title:d="noxickon"})=>{const e=p.useForm({initialData:{username:"",password:""},validationRules:{username:["required"],password:["required"]},operation:a}),l=async s=>{s.preventDefault(),e.submit({onSuccess:x=>{n==null||n(x)}})};return r.jsxRuntimeExports.jsx("div",{className:i.twMerge("w-80",o),children:r.jsxRuntimeExports.jsxs("div",{className:"rounded-lg border border-neutral-700 bg-zinc-900/50 p-6 backdrop-blur-xl",children:[r.jsxRuntimeExports.jsxs("div",{className:"mb-4 text-center",children:[r.jsxRuntimeExports.jsx("h1",{className:"px-2 font-mono text-2xl text-white",children:d}),r.jsxRuntimeExports.jsx("p",{className:"px-2 py-1 font-mono text-xs text-neutral-400",children:u})]}),r.jsxRuntimeExports.jsxs(t.OxForm,{className:"space-y-6",onSubmit:l,children:[r.jsxRuntimeExports.jsx(t.OxInput,{autoComplete:"off",disabled:e.isLoading,error:e.hasError("username"),icon:"mdiAccount",label:"username",name:"username",placeholder:"Enter your username",required:!0,type:"text",value:e.data.username,onChange:s=>e.setData("username",s.target.value)}),r.jsxRuntimeExports.jsx(t.OxInput,{autoComplete:"off",disabled:e.isLoading,error:e.hasError("password"),icon:"mdiLockOutline",label:"password",name:"password",placeholder:"Enter your password",required:!0,type:"password",value:e.data.password,onChange:s=>e.setData("password",s.target.value)}),e.hasErrors&&r.jsxRuntimeExports.jsx(t.OxErrorMessage,{icon:"mdiAlertCircleOutline",children:"username or password is wrong"}),r.jsxRuntimeExports.jsx(i.OxButton,{disabled:e.isLoading,fullWidth:!0,isLoading:e.isLoading,size:"md",type:"submit",variant:"primary",children:e.isLoading?"Signing in...":"Sign In"})]})]})})};exports.OxLogin=g;
+`,j=({className:i,mutation:u=h,onSubmit:l,subtitle:d="",title:m="noxickon"})=>{const{setUser:x}=a.useOxAuth(),e=p.useForm({initialData:{username:"",password:""},validationRules:{username:["required"],password:["required"]},operation:u}),c=async s=>{s.preventDefault(),e.submit({onError:t=>{g.OxHandleGraphQLFormErrors(t,e)},onSuccess:t=>{x(t.data?t.data.login.me:null),l?.(t)}})};return r.jsxRuntimeExports.jsx("div",{className:o.twMerge("w-80",i),children:r.jsxRuntimeExports.jsxs("div",{className:"rounded-lg border border-neutral-700 bg-zinc-900/50 p-6 backdrop-blur-xl",children:[r.jsxRuntimeExports.jsxs("div",{className:"mb-4 text-center",children:[r.jsxRuntimeExports.jsx("h1",{className:"px-2 font-mono text-2xl text-white",children:m}),r.jsxRuntimeExports.jsx("p",{className:"px-2 py-1 font-mono text-xs text-neutral-400",children:d})]}),r.jsxRuntimeExports.jsxs(n.OxForm,{className:"space-y-6",onSubmit:c,children:[r.jsxRuntimeExports.jsx(n.OxInput,{autoComplete:"off",disabled:e.isLoading,error:e.hasError("username"),icon:"mdiAccount",label:"username",name:"username",placeholder:"Enter your username",required:!0,type:"text",value:e.data.username,onChange:s=>e.setData("username",s.target.value)}),r.jsxRuntimeExports.jsx(n.OxInput,{autoComplete:"off",disabled:e.isLoading,error:e.hasError("password"),icon:"mdiLockOutline",label:"password",name:"password",placeholder:"Enter your password",required:!0,type:"password",value:e.data.password,onChange:s=>e.setData("password",s.target.value)}),e.hasErrors&&r.jsxRuntimeExports.jsx(n.OxErrorMessage,{icon:"mdiAlertCircleOutline",children:"username or password is wrong"}),r.jsxRuntimeExports.jsx(o.OxButton,{disabled:e.isLoading,fullWidth:!0,isLoading:e.isLoading,size:"md",type:"submit",variant:"primary",children:e.isLoading?"Signing in...":"Sign In"})]})]})})};exports.OxLogin=j;

package/dist/pages/pages.es.js

@@ -1,23 +1,30 @@
 import { j as r } from "../chunks/jsx-runtime--oOP9f8K.js";
 import "react";
-import { t as m, O as p } from "../chunks/Button-BV4_pmoH.js";
-import { O as c, a as o, b as x } from "../chunks/Input-BraK4lDE.js";
-import { u as g } from "../chunks/useForm-BAbY8X4X.js";
-import { g as h } from "../chunks/index-DnVdNmco.js";
-const f = h`
+import { t as p, O as c } from "../chunks/Button-bARrxYyo.js";
+import { O as x, a as o, b as g } from "../chunks/Input-dfvmdIHi.js";
+import { g as h, u as b } from "../chunks/useAuth-DDRXztKj.js";
+import { u as f } from "../chunks/useForm-D4co95Vn.js";
+import { b as w } from "../chunks/errorHelper--G-SWQzN.js";
+const O = h`
   mutation Login($input: LoginInput!) {
     login(input: $input) {
-      isAuthenticated
+      success
+      me {
+        id
+        username
+        email
+        role
+      }
     }
   }
-`, y = ({
+`, C = ({
   className: t,
-  mutation: n = f,
-  onSubmit: a,
-  subtitle: i = "",
-  title: d = "noxickon"
+  mutation: n = O,
+  onSubmit: i,
+  subtitle: d = "",
+  title: l = "noxickon"
 }) => {
-  const e = g({
+  const { setUser: u } = b(), e = f({
     initialData: {
       username: "",
       password: ""
@@ -27,19 +34,22 @@ const f = h`
       password: ["required"]
     },
     operation: n
-  }), l = async (s) => {
-    s.preventDefault(), e.submit({
-      onSuccess: (u) => {
-        a == null || a(u);
+  }), m = async (a) => {
+    a.preventDefault(), e.submit({
+      onError: (s) => {
+        w(s, e);
+      },
+      onSuccess: (s) => {
+        u(s.data ? s.data.login.me : null), i?.(s);
       }
     });
   };
-  return /* @__PURE__ */ r.jsx("div", { className: m("w-80", t), children: /* @__PURE__ */ r.jsxs("div", { className: "rounded-lg border border-neutral-700 bg-zinc-900/50 p-6 backdrop-blur-xl", children: [
+  return /* @__PURE__ */ r.jsx("div", { className: p("w-80", t), children: /* @__PURE__ */ r.jsxs("div", { className: "rounded-lg border border-neutral-700 bg-zinc-900/50 p-6 backdrop-blur-xl", children: [
     /* @__PURE__ */ r.jsxs("div", { className: "mb-4 text-center", children: [
-      /* @__PURE__ */ r.jsx("h1", { className: "px-2 font-mono text-2xl text-white", children: d }),
-      /* @__PURE__ */ r.jsx("p", { className: "px-2 py-1 font-mono text-xs text-neutral-400", children: i })
+      /* @__PURE__ */ r.jsx("h1", { className: "px-2 font-mono text-2xl text-white", children: l }),
+      /* @__PURE__ */ r.jsx("p", { className: "px-2 py-1 font-mono text-xs text-neutral-400", children: d })
     ] }),
-    /* @__PURE__ */ r.jsxs(c, { className: "space-y-6", onSubmit: l, children: [
+    /* @__PURE__ */ r.jsxs(x, { className: "space-y-6", onSubmit: m, children: [
       /* @__PURE__ */ r.jsx(
         o,
         {
@@ -53,7 +63,7 @@ const f = h`
           required: !0,
           type: "text",
           value: e.data.username,
-          onChange: (s) => e.setData("username", s.target.value)
+          onChange: (a) => e.setData("username", a.target.value)
         }
       ),
       /* @__PURE__ */ r.jsx(
@@ -69,12 +79,12 @@ const f = h`
           required: !0,
           type: "password",
           value: e.data.password,
-          onChange: (s) => e.setData("password", s.target.value)
+          onChange: (a) => e.setData("password", a.target.value)
         }
       ),
-      e.hasErrors && /* @__PURE__ */ r.jsx(x, { icon: "mdiAlertCircleOutline", children: "username or password is wrong" }),
+      e.hasErrors && /* @__PURE__ */ r.jsx(g, { icon: "mdiAlertCircleOutline", children: "username or password is wrong" }),
       /* @__PURE__ */ r.jsx(
-        p,
+        c,
         {
           disabled: e.isLoading,
           fullWidth: !0,
@@ -89,5 +99,5 @@ const f = h`
   ] }) });
 };
 export {
-  y as OxLogin
+  C as OxLogin
 };

package/dist/utils/utils.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/formatTimestamp-TTsNcy7u.js"),r=require("../chunks/errorHelper-DaP_XxEx.js");exports.formatTimestamp=e.formatTimestamp;exports.OxHandleFormErrors=r.OxHandleFormErrors;exports.OxHandleGraphQLFormErrors=r.OxHandleGraphQLFormErrors;exports.OxParseGraphQLErrors=r.OxParseGraphQLErrors;

package/dist/utils/utils.es.js

@@ -0,0 +1,8 @@
+import { f as o } from "../chunks/formatTimestamp-CMxOnPo1.js";
+import { a as m, b as e, O as p } from "../chunks/errorHelper--G-SWQzN.js";
+export {
+  m as OxHandleFormErrors,
+  e as OxHandleGraphQLFormErrors,
+  p as OxParseGraphQLErrors,
+  o as formatTimestamp
+};

package/dist/utils.d.ts

@@ -0,0 +1,29 @@
+export declare const formatTimestamp: (date: Date) => string;
+
+export declare interface OxFormState {
+    setError: (field: string, message: string) => void;
+}
+
+export declare interface OxGraphQLError {
+    extensions?: {
+        code?: string;
+        field?: string;
+    };
+    message: string;
+    path?: string[];
+}
+
+export declare const OxHandleFormErrors: (errors: OxParsedError[], formState: OxFormState) => void;
+
+export declare const OxHandleGraphQLFormErrors: (errors: OxGraphQLError[], formState: OxFormState) => void;
+
+export declare interface OxParsedError {
+    code: string;
+    field?: string;
+    message: string;
+    path?: string[];
+}
+
+export declare const OxParseGraphQLErrors: (errors: OxGraphQLError[]) => OxParsedError[];
+
+export { }

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@noxickon/onyx",
-  "version": "0.0.3",
+  "version": "0.0.4-dev.3",
   "type": "module",
+  "readme": "./NPM_README.md",
   "main": "./dist/onyx.umd.js",
   "module": "./dist/onyx.es.js",
   "types": "./dist/index.d.ts",
@@ -27,6 +28,10 @@
       "types": "./dist/layout.d.ts",
       "import": "./dist/layout/layout.es.js"
     },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils/utils.es.js"
+    },
     "./styles": "./dist/onyx.css",
     "./shared": "./dist/shared.css"
   },
@@ -36,7 +41,8 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "tsc -b && vite build",
-    "prepublishOnly": "npm run test:coverage && npm run build",
+    "prepublishOnly": " npm run build",
+    "publish:dev": "npm version prerelease --preid=dev --no-git-tag-version && npm publish --tag dev",
     "lint": "eslint .",
     "preview": "vite preview",
     "build:storybook": "npm run build && storybook build",
@@ -50,56 +56,55 @@
     "@apollo/client": "^3.13.8",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
-    "@tailwindcss/vite": "^4.1.7",
-    "axios": "^1.10.0",
-    "es-toolkit": "^1.39.6",
+    "@tailwindcss/vite": "^4.1.11",
+    "axios": "^1.11.0",
+    "es-toolkit": "^1.39.8",
     "graphql": "^16.11.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "recharts": "^2.15.3",
+    "recharts": "^3.1.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.7",
-    "zod": "^3.25.76"
+    "tailwindcss": "^4.1.11",
+    "zod": "^4.0.10"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",
-    "@eslint/js": "^9.25.0",
+    "@eslint/js": "^9.32.0",
     "@storybook/addon-docs": "^9.0.18",
     "@storybook/addon-onboarding": "^9.0.18",
     "@storybook/addon-vitest": "^9.0.18",
     "@storybook/react-vite": "^9.0.18",
     "@tailwindcss/typography": "^0.5.16",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jest-axe": "^3.5.9",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@types/testing-library__jest-dom": "^5.14.9",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/browser": "^3.1.4",
-    "@vitest/coverage-v8": "^3.1.4",
-    "canvas": "^3.1.0",
-    "eslint": "^9.25.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "canvas": "^3.1.2",
+    "eslint": "^9.32.0",
     "eslint-plugin-perfectionist": "^4.15.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^16.0.0",
+    "globals": "^16.3.0",
     "jest-axe": "^10.0.0",
     "jsdom": "^26.1.0",
-    "playwright": "^1.52.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "playwright": "^1.54.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "storybook": "^9.0.18",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^7.0.6",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^3.1.4"
+    "vitest": "^3.2.4"
   },
   "eslintConfig": {
     "extends": [