highsoft-ui 1.0.3 → 1.0.4

package/README.md

@@ -7,35 +7,102 @@ npm i
 npm run dev
 ```
 
-`src` contains a test application using the component library located in `lib`.
+This will run the test application located in `src` that uses the component library located in `lib`.
 
-## PHP
+## Usage
+
+1. Install the package:
+
+```sh
+npm i highsoft-ui
+```
+
+2. Load the the css somehow:
+
+```scss
+@import 'highsoft-ui/css';
+```
+
+3. Use the components:
+
+```js
+import { Button } from 'highsoft-ui';
+// ...
+<Button variant="brand" size={300}>Hello</Button>
+```
+
+### PHP
+
+How to use components that need hydration (running client-side react) in PHP.
+This mostly applies to the wordpress block gang.
 
 1. Build script
+
+`ui.ts`:
 ```js
-import { Header, Footer } from 'highsoft-ui';
+import { Header } from 'highsoft-ui';
 import { render } from 'highsoft-ui/php';
 
 render('react.php', {
   header: <Header />,
-  footer: <Footer />
+  some_other_component: <Header
+    subItems={[
+      {
+        title: "Core",
+        url: "https://www.highcharts.com/products/highcharts/",
+        icon: <CoreIcon />,
+      },
+      {
+        title: "Stock",
+        url: "https://www.highcharts.com/products/stock/",
+        icon: <StockIcon />,
+      },
+    ]}
+  />
 });
 ```
 
+Run it with `tsx`:
+```sh
+npx tsx ui.ts
+```
+
 2. PHP template
+
 ```php
-hsui_header();
+include_once 'react.php';
 // ...
-hsui_footer();
+hsui_header();
+?>
+
+<div>
+  <h2>Wordpress <3</h2>
+  <?php hsui_some_other_component(); ?>
+</div>
 ```
 
-3. Client bundle (for things that need hydration)
+3. Client JS bundle
+
 ```js
 import { Header } from 'highsoft-ui';
 import { hydrate } from 'highsoft-ui/php';
 
 hydrate({
-    header: <Header />
+  header: <Header />,
+  some_other_component: <Header
+    subItems={[
+      {
+        title: "Core",
+        url: "https://www.highcharts.com/products/highcharts/",
+        icon: <CoreIcon />,
+      },
+      {
+        title: "Stock",
+        url: "https://www.highcharts.com/products/stock/",
+        icon: <StockIcon />,
+      },
+    ]}
+  />
 });
 ```
 
@@ -78,7 +145,6 @@ hydrate({
 - Turns off all rules that are unnecessary or might conflict with Prettier.
 - this config only turns rules off
 
-
 ### Husky
 
 - Automatically lint your commit messages, code, and run tests upon committing or pushing.

package/dist/components/Button/index.d.ts

@@ -8,4 +8,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     as?: ElementType;
     [prop: string]: any;
 }
-export declare function Button({ children, variant, size, as: Component, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.js

@@ -1,45 +1,46 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
 import { c as i } from "../../clsx-OuTLNxxd.js";
-const r = "_button_q36f8_17", f = "_content_q36f8_33", q = "_neutral_q36f8_40", u = "_white_q36f8_57", z = "_transparent_q36f8_76", l = "_plain_q36f8_98", p = "_brand_q36f8_123", b = "_success_q36f8_140", d = "_attention_q36f8_155", m = "_danger_q36f8_170", t = {
-  button: r,
-  content: f,
-  neutral: q,
-  white: u,
-  transparent: z,
-  plain: l,
-  brand: p,
-  success: b,
-  attention: d,
-  danger: m,
-  "size-50": "_size-50_q36f8_266",
-  "size-100": "_size-100_q36f8_282",
-  "size-200": "_size-200_q36f8_299",
-  "size-300": "_size-300_q36f8_316",
-  "size-400": "_size-400_q36f8_333",
-  "size-500": "_size-500_q36f8_350"
-};
-function w({
-  children: _,
-  variant: s = "neutral",
-  size: e = 200,
-  as: o = "button",
-  className: a,
-  ...c
-}) {
-  return /* @__PURE__ */ n(
-    o,
+const d = "_button_ej6jd_17", u = "_content_ej6jd_33", z = "_neutral_ej6jd_40", l = "_white_ej6jd_57", p = "_transparent_ej6jd_76", b = "_plain_ej6jd_98", m = "_brand_ej6jd_123", f = "_success_ej6jd_140", h = "_attention_ej6jd_155", w = "_danger_ej6jd_170", t = {
+  button: d,
+  content: u,
+  neutral: z,
+  white: l,
+  transparent: p,
+  plain: b,
+  brand: m,
+  success: f,
+  attention: h,
+  danger: w,
+  "size-50": "_size-50_ej6jd_266",
+  "size-100": "_size-100_ej6jd_282",
+  "size-200": "_size-200_ej6jd_299",
+  "size-300": "_size-300_ej6jd_316",
+  "size-400": "_size-400_ej6jd_333",
+  "size-500": "_size-500_ej6jd_350"
+}, y = c(
+  ({
+    children: n,
+    variant: s = "neutral",
+    size: _ = 200,
+    as: j = "button",
+    className: o,
+    ...a
+  }, r) => /* @__PURE__ */ e(
+    j,
     {
       className: i(
-        a,
+        o,
         t.button,
         t[s],
-        t[`size-${e}`]
+        t[`size-${_}`]
       ),
-      ...c,
-      children: /* @__PURE__ */ n("span", { className: t.content, children: _ })
+      ref: r,
+      ...a,
+      children: /* @__PURE__ */ e("span", { className: t.content, children: n })
     }
-  );
-}
+  )
+);
 export {
-  w as Button
+  y as Button
 };

package/dist/components/Header/index.js

@@ -1,22 +1,22 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { useState as k } from "react";
-import { J as x } from "../../index-CMegByeX.js";
-import { _ as c } from "../../extends-hS2Bh-Yp.js";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useState as b, useEffect as x } from "react";
+import { J as S } from "../../index-CMegByeX.js";
+import { _ as u } from "../../extends-hS2Bh-Yp.js";
 import { c as w } from "../../clsx-OuTLNxxd.js";
-import { Button as a } from "../Button/index.js";
+import { Button as d } from "../Button/index.js";
 import { Container as _ } from "../Container/index.js";
 import { ThemedLogo as C } from "../Logo/index.js";
 import { Notification as M } from "../Notification/index.js";
-import { PrefPanel as T } from "../PrefPanel/index.js";
-import { useMediaQuery as N } from "../../utils.js";
-var L = function(n) {
-  return /* @__PURE__ */ t("svg", c({
+import { PrefPanel as N } from "../PrefPanel/index.js";
+import { useMediaQuery as T } from "../../utils.js";
+var L = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, n, {
+  }, r, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -25,14 +25,14 @@ var L = function(n) {
       d: "M3 12h12M3 6h18M3 18h18"
     })
   }));
-}, S = function(n) {
-  return /* @__PURE__ */ t("svg", c({
+}, j = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, n, {
+  }, r, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -41,14 +41,14 @@ var L = function(n) {
       d: "m21 21-4.35-4.35M19 11c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8"
     })
   }));
-}, j = function(n) {
-  return /* @__PURE__ */ t("svg", c({
+}, B = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, n, {
+  }, r, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -57,14 +57,14 @@ var L = function(n) {
       d: "M4.5 22v-5m0-10V2M2 4.5h5m-5 15h5M13 3l-1.7342 4.5089c-.282.7332-.423 1.0998-.6423 1.4082a3 3 0 0 1-.7064.7064c-.3084.2193-.675.3603-1.4082.6423L4 12l4.5089 1.7342c.7332.282 1.0998.423 1.4082.6423.2733.1943.5121.4331.7064.7064.2193.3084.3603.675.6423 1.4082L13 21l1.7342-4.5089c.282-.7332.423-1.0998.6423-1.4082a3 3 0 0 1 .7064-.7064c.3084-.2193.675-.3603 1.4082-.6423L22 12l-4.5089-1.7342c-.7332-.282-1.0998-.423-1.4082-.6423a3 3 0 0 1-.7064-.7064c-.2193-.3084-.3603-.675-.6423-1.4082z"
     })
   }));
-}, B = function(n) {
-  return /* @__PURE__ */ t("svg", c({
+}, J = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, n, {
+  }, r, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -73,14 +73,14 @@ var L = function(n) {
       d: "m7 15 3-3-3-3m6 6h4m-9.2 6h8.4c1.6802 0 2.5202 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 18.7202 21 17.8802 21 16.2V7.8c0-1.6802 0-2.5202-.327-3.162a3 3 0 0 0-1.311-1.311C18.7202 3 17.8802 3 16.2 3H7.8c-1.6802 0-2.5202 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.2798 3 6.1198 3 7.8v8.4c0 1.6802 0 2.5202.327 3.162a3 3 0 0 0 1.311 1.311C5.2798 21 6.1198 21 7.8 21"
     })
   }));
-}, P = function(n) {
-  return /* @__PURE__ */ t("svg", c({
+}, P = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
     fill: "none",
     viewBox: "0 0 24 24"
-  }, n, {
+  }, r, {
     children: /* @__PURE__ */ t("path", {
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -90,23 +90,23 @@ var L = function(n) {
     })
   }));
 };
-const W = "_header_1pbhn_17", H = "_outer_1pbhn_28", q = "_main_1pbhn_37", y = "_container_1pbhn_41", z = "_links_1pbhn_47", G = "_buttons_1pbhn_48", U = "_menu_1pbhn_53", V = "_logo_1pbhn_57", $ = "_sub_1pbhn_69", D = "_subContainer_1pbhn_73", J = "_selected_1pbhn_94", Q = "_subTag_1pbhn_106", R = "_gpt_1pbhn_139", r = {
+const W = "_header_ggk0t_17", y = "_outer_ggk0t_28", H = "_main_ggk0t_37", O = "_container_ggk0t_41", q = "_links_ggk0t_47", z = "_buttons_ggk0t_48", G = "_menu_ggk0t_53", U = "_logo_ggk0t_57", V = "_sub_ggk0t_69", $ = "_subContainer_ggk0t_73", D = "_selected_ggk0t_95", E = "_subTag_ggk0t_107", Q = "_gpt_ggk0t_140", e = {
   header: W,
-  outer: H,
-  main: q,
-  container: y,
-  links: z,
-  buttons: G,
-  menu: U,
-  logo: V,
-  sub: $,
-  subContainer: D,
-  selected: J,
-  subTag: Q,
-  "subTag-success": "_subTag-success_1pbhn_111",
-  "subTag-brand": "_subTag-brand_1pbhn_115",
-  gpt: R
-}, A = [
+  outer: y,
+  main: H,
+  container: O,
+  links: q,
+  buttons: z,
+  menu: G,
+  logo: U,
+  sub: V,
+  subContainer: $,
+  selected: D,
+  subTag: E,
+  "subTag-success": "_subTag-success_ggk0t_112",
+  "subTag-brand": "_subTag-brand_ggk0t_116",
+  gpt: Q
+}, R = [
   {
     title: "Products",
     url: "https://highcharts.com/products/"
@@ -132,102 +132,126 @@ const W = "_header_1pbhn_17", H = "_outer_1pbhn_28", q = "_main_1pbhn_37", y = "
     url: "https://www.highcharts.com/blog/"
   }
 ];
-function E({ items: e }) {
-  return /* @__PURE__ */ t("div", { className: w(r.sub, r.outer), children: /* @__PURE__ */ t(_, { className: r.subContainer, as: "ul", children: e.map(
-    ({ title: n, url: l, icon: o, tag: i, tagVariant: d = "success", link: u = "a" }, h) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ s(u, { href: l, children: [
-      o,
-      /* @__PURE__ */ s("span", { children: [
-        n,
-        i && /* @__PURE__ */ t(
+function A({ items: n }) {
+  return /* @__PURE__ */ t("div", { className: w(e.sub, e.outer), children: /* @__PURE__ */ t(_, { className: e.subContainer, as: "ul", children: n.map(
+    ({ title: r, url: h, icon: c, tag: m, tagVariant: l = "success", link: g = "a" }, p) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ a(g, { href: h, children: [
+      c,
+      /* @__PURE__ */ a("span", { children: [
+        r,
+        m && /* @__PURE__ */ t(
           "span",
           {
             className: w(
-              r.subTag,
-              r[`subTag-${d}`]
+              e.subTag,
+              e[`subTag-${l}`]
             ),
-            children: i
+            children: m
           }
         )
       ] })
-    ] }) }, h)
+    ] }) }, p)
   ) }) });
 }
-function st({
-  subItems: e,
-  children: n,
-  notifications: l,
+function ot({
+  subItems: n,
+  children: r,
+  notifications: h = [],
   // TODO: Fetch these from the internets
-  link: o = "a"
+  link: c = "a"
 }) {
-  const [i, d] = k(l), u = N("(min-width: 850px) and (max-width: 999px)");
-  return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ s("header", { className: r.header, children: [
-    i == null ? void 0 : i.map(
-      ({ id: h, title: p, description: m, variant: b, closable: f }, v) => /* @__PURE__ */ t(
+  const m = T("(min-width: 850px) and (max-width: 999 px)"), [l, g] = b([]);
+  x(() => {
+    if (h.length) {
+      const o = localStorage.getItem("notifications");
+      if (o) {
+        const i = JSON.parse(o);
+        g(
+          h.filter(
+            (s) => !s.id || !i.closed.includes(s.id)
+          )
+        );
+      } else
+        g(h);
+    }
+  }, [h]);
+  const p = (o) => {
+    g(l.filter((s) => !s.id || s.id !== o));
+    const i = localStorage.getItem("notifications");
+    if (i) {
+      const s = JSON.parse(i);
+      s.closed.includes(o) || (s.closed.push(o), localStorage.setItem("notifications", JSON.stringify(s)));
+    } else
+      localStorage.setItem(
+        "notifications",
+        JSON.stringify({
+          closed: [o]
+        })
+      );
+  };
+  return /* @__PURE__ */ t(S, { children: /* @__PURE__ */ a("header", { className: e.header, children: [
+    l == null ? void 0 : l.map(
+      ({ id: o, title: i, description: s, variant: f, closable: k }, v) => /* @__PURE__ */ t(
         M,
         {
-          description: m,
-          variant: b,
-          closable: f,
-          onClose: () => {
-            d(
-              i.filter((g) => !g.id || g.id !== h)
-            );
-          },
-          children: p
+          description: s,
+          variant: f,
+          closable: k,
+          onClose: () => p(o),
+          children: i
         },
         v
       )
     ),
-    /* @__PURE__ */ t("div", { className: w(r.main, r.outer), children: /* @__PURE__ */ s(_, { as: "nav", className: r.container, children: [
-      /* @__PURE__ */ t(o, { className: r.logo, href: "https://www.highcharts.com/", children: /* @__PURE__ */ t(C, { showText: !u }) }),
-      /* @__PURE__ */ t("div", { className: r.links, children: A.map(({ title: h, url: p }, m) => /* @__PURE__ */ t(a, { variant: "plain", size: 300, as: o, href: p, children: h }, m)) }),
-      /* @__PURE__ */ s("div", { className: r.buttons, children: [
-        /* @__PURE__ */ s(
-          a,
+    /* @__PURE__ */ t("div", { className: w(e.main, e.outer), children: /* @__PURE__ */ a(_, { as: "nav", className: e.container, children: [
+      /* @__PURE__ */ t(c, { className: e.logo, href: "https://www.highcharts.com/", children: /* @__PURE__ */ t(C, { showText: !m }) }),
+      /* @__PURE__ */ t("div", { className: e.links, children: R.map(({ title: o, url: i }, s) => /* @__PURE__ */ t(d, { variant: "plain", size: 300, as: c, href: i, children: o }, s)) }),
+      /* @__PURE__ */ a("div", { className: e.buttons, children: [
+        /* @__PURE__ */ a(
+          d,
           {
             variant: "transparent",
-            as: o,
+            as: c,
             href: "https://www.highcharts.com/chat/gpt/",
             children: [
-              /* @__PURE__ */ t("span", { className: r.gpt, children: "Highcharts GPT" }),
-              /* @__PURE__ */ t(j, {})
+              /* @__PURE__ */ t("span", { className: e.gpt, children: "Highcharts GPT" }),
+              /* @__PURE__ */ t(B, {})
             ]
           }
         ),
-        /* @__PURE__ */ t(a, { variant: "transparent", children: /* @__PURE__ */ t(S, {}) }),
-        /* @__PURE__ */ t(T, {}),
-        /* @__PURE__ */ s(a, { variant: "transparent", className: r.menu, children: [
+        /* @__PURE__ */ t(d, { variant: "transparent", children: /* @__PURE__ */ t(j, {}) }),
+        /* @__PURE__ */ t(N, {}),
+        /* @__PURE__ */ a(d, { variant: "transparent", className: e.menu, children: [
           "Menu",
           /* @__PURE__ */ t(L, {})
         ] }),
         /* @__PURE__ */ t(
-          a,
+          d,
           {
             variant: "brand",
-            as: o,
+            as: c,
             href: "https://shop.highcharts.com/account",
             children: /* @__PURE__ */ t(P, {})
           }
         ),
-        /* @__PURE__ */ s(
-          a,
+        /* @__PURE__ */ a(
+          d,
           {
             variant: "success",
-            as: o,
+            as: c,
             href: "https://www.highcharts.com/download/",
             children: [
-              /* @__PURE__ */ t(B, {}),
+              /* @__PURE__ */ t(J, {}),
               "Get started"
             ]
           }
         )
       ] })
     ] }) }),
-    !!(e != null && e.length) && /* @__PURE__ */ t(E, { items: e }),
-    n
+    !!(n != null && n.length) && /* @__PURE__ */ t(A, { items: n }),
+    r
   ] }) });
 }
 export {
-  st as Header,
-  E as SubHeader
+  ot as Header,
+  A as SubHeader
 };