skillgrid 0.0.1 → 0.0.2

package/dist/index.es6.js

@@ -1,67 +1,180 @@
-import { j as s } from "./index.es13.js";
-import { forwardRef as c } from "react";
-import a from "./index.es14.js";
-import x from "./index.es15.js";
-const j = c(
-  ({
-    size: e = 24,
-    variant: t = "accent",
-    className: r,
-    "data-testid": n = "loader",
-    style: o,
-    ...i
-  }, d) => {
-    const l = x(
-      a.loader,
-      a[t],
-      a[`size-${e}`],
-      r
-    );
-    return /* @__PURE__ */ s.jsx(
-      "svg",
+import { j as e } from "./index.es13.js";
+import { forwardRef as Y } from "react";
+import { isAsLink as Z, isAsButton as tt } from "./index.es17.js";
+import t from "./index.es18.js";
+import R from "./index.es14.js";
+const k = ({
+  isLoading: a,
+  showBadge: u,
+  badgeValue: d,
+  badgeSize: s,
+  icon: o,
+  children: l,
+  postfix: m,
+  showSubcaption: p,
+  subcaption: _,
+  size: h
+}) => {
+  if (a)
+    return /* @__PURE__ */ e.jsx("span", { className: t.loader, "data-testid": "button-loader", "aria-hidden": "true" });
+  const n = s === "extra-small", i = parseInt(String(d), 10), x = !isNaN(i) && i >= 0 && i <= 9;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    u && (d || n) && /* @__PURE__ */ e.jsx(
+      "span",
+      {
+        "data-testid": "button-badge",
+        className: R(
+          t.badge,
+          t[`badge${n ? "ExtraSmall" : s === "medium" ? "Medium" : "Small"}`],
+          { [t.circular]: x && !n }
+        ),
+        children: !n && d
+      }
+    ),
+    p && h !== "s" && h !== "xs" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx("span", { "data-testid": "button-label", className: t.label, children: l }),
+      /* @__PURE__ */ e.jsx("span", { "data-testid": "button-subcaption", className: t.subcaption, children: _ })
+    ] }) : l ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      /* @__PURE__ */ e.jsx("span", { "data-testid": "button-label", className: t.label, children: l }),
+      /* @__PURE__ */ e.jsxs("div", { "data-testid": "button-right-group", className: t.rightGroup, children: [
+        o && /* @__PURE__ */ e.jsx("span", { "data-testid": "button-icon", className: t.icon, children: o }),
+        m && /* @__PURE__ */ e.jsx("span", { "data-testid": "button-postfix", className: t.postfix, children: m })
+      ] })
+    ] }) : /* @__PURE__ */ e.jsx("span", { "data-testid": "button-icon", className: t.icon, children: o })
+  ] });
+}, dt = Y((a, u) => {
+  const {
+    mode: d = "primary",
+    size: s = "m",
+    buttonStyle: o = "neutral",
+    loading: l = !1,
+    disabled: m = !1,
+    showBadge: p = !1,
+    badgeSize: _ = "small",
+    badgeValue: h,
+    showSubcaption: n = !1,
+    subcaption: i,
+    stretched: x = !1,
+    spaceBetween: V = !1,
+    icon: I,
+    postfix: v,
+    className: E,
+    children: y
+  } = a, c = m, r = l, g = !c && !r, F = !!I && !y, C = R(
+    t.button,
+    t[s],
+    t[d],
+    t[o],
+    {
+      [t.disabled]: c,
+      [t.loading]: r,
+      [t.stretched]: x,
+      [t.spaceBetween]: V && x,
+      [t.withSubcaption]: n && i && s !== "s" && s !== "xs",
+      [t.iconOnly]: F
+    },
+    E
+  ), z = {
+    isLoading: r,
+    showBadge: p,
+    badgeValue: h,
+    badgeSize: _,
+    icon: I,
+    children: y,
+    postfix: v,
+    showSubcaption: n,
+    subcaption: i,
+    size: s
+  };
+  if (Z(a)) {
+    const {
+      href: f,
+      onClick: b,
+      mode: A,
+      size: L,
+      buttonStyle: O,
+      loading: T,
+      disabled: D,
+      showBadge: G,
+      badgeSize: M,
+      badgeValue: P,
+      showSubcaption: $,
+      subcaption: q,
+      stretched: H,
+      spaceBetween: J,
+      icon: K,
+      postfix: Q,
+      className: U,
+      tabIndex: W,
+      children: X,
+      "data-testid": N,
+      style: S,
+      ...j
+    } = a, w = (B) => {
+      g && b && b(B);
+    };
+    return /* @__PURE__ */ e.jsx(
+      "a",
       {
-        ref: d,
-        className: l,
-        fill: "none",
-        viewBox: "0 0 16 16",
-        xmlns: "http://www.w3.org/2000/svg",
-        "data-testid": n,
-        style: o,
-        ...i,
-        children: /* @__PURE__ */ s.jsx(
-          "path",
-          {
-            d: "M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeWidth: "1.33333"
-          }
-        )
+        ref: u,
+        className: C,
+        href: g ? f : void 0,
+        tabIndex: a.tabIndex,
+        onClick: w,
+        "data-testid": N,
+        "aria-disabled": c || r,
+        style: S,
+        ...j,
+        children: /* @__PURE__ */ e.jsx(k, { ...z })
       }
     );
   }
-), p = c((e, t) => {
-  const {
-    loading: r = !1,
-    size: n = 24,
-    variant: o = "accent",
-    children: i,
-    className: d,
-    style: l,
-    "data-testid": m,
-    ...f
-  } = e, h = x(a.container, d);
-  return /* @__PURE__ */ s.jsxs("div", { ref: t, className: h, style: l, "data-testid": m, ...f, children: [
-    i,
-    r && /* @__PURE__ */ s.jsx("div", { className: a.overlay, children: /* @__PURE__ */ s.jsx(j, { size: n, variant: o, "data-testid": `${m}-spinner` }) })
-  ] });
-}), w = c((e, t) => e.children ? /* @__PURE__ */ s.jsx(
-  p,
-  {
-    ref: t,
-    ...e
+  if (tt(a)) {
+    const {
+      type: f = "button",
+      onClick: b,
+      mode: A,
+      size: L,
+      buttonStyle: O,
+      loading: T,
+      disabled: D,
+      showBadge: G,
+      badgeSize: M,
+      badgeValue: P,
+      showSubcaption: $,
+      subcaption: q,
+      stretched: H,
+      spaceBetween: J,
+      icon: K,
+      postfix: Q,
+      className: U,
+      tabIndex: W,
+      children: X,
+      "data-testid": N,
+      style: S,
+      ...j
+    } = a, w = (B) => {
+      g && b && b(B);
+    };
+    return /* @__PURE__ */ e.jsx(
+      "button",
+      {
+        ref: u,
+        type: f,
+        className: C,
+        disabled: c,
+        tabIndex: a.tabIndex,
+        onClick: w,
+        "data-testid": N,
+        "aria-disabled": c || r,
+        style: S,
+        ...j,
+        children: /* @__PURE__ */ e.jsx(k, { ...z })
+      }
+    );
   }
-) : /* @__PURE__ */ s.jsx(j, { ref: t, ...e }));
+  return null;
+});
 export {
-  w as Loader
+  dt as Button
 };

package/dist/index.es7.js

@@ -1,24 +1,75 @@
-import { j as o } from "./index.es13.js";
-import n from "./index.es15.js";
-import { ConfigContext as m } from "./index.es8.js";
-import a from "./index.es20.js";
-const j = ({
-  locale: t = {},
-  theme: r,
-  children: e,
-  className: s
-}) => {
-  const i = r ? { ...Object.fromEntries(Object.entries(r)) } : {};
-  return /* @__PURE__ */ o.jsx(
-    "div",
+import { j as a } from "./index.es13.js";
+import { forwardRef as L, useState as S, useCallback as p, useEffect as $, Fragment as b } from "react";
+import l from "./index.es19.js";
+import k from "./index.es14.js";
+import { PlaceholderImageIcon as v } from "./index.es20.js";
+import { Loader as z } from "./index.es8.js";
+const q = L((x, h) => {
+  const {
+    alt: m = "",
+    loading: j = "lazy",
+    src: e,
+    isLoading: c = !1,
+    className: u,
+    "data-testid": r = "image",
+    onError: s,
+    onLoad: o,
+    ...I
+  } = x, [i, t] = S("loading"), g = i === "error", f = (c || i === "loading") && !g, N = i === "loaded" && !c, w = k(
+    l.image,
     {
-      "data-testid": "ConfigProvider-component",
-      style: i,
-      className: n(a.wrapper, s),
-      children: /* @__PURE__ */ o.jsx(m.Provider, { value: { locale: t }, children: e })
+      [l.loading]: f
+    },
+    u
+  ), y = p(
+    (n) => {
+      t("loaded"), o == null || o(n);
+    },
+    [o]
+  ), E = p(
+    (n) => {
+      t("error"), s == null || s(n);
+    },
+    [s]
+  ), d = {
+    loader: /* @__PURE__ */ a.jsxs(b, { children: [
+      /* @__PURE__ */ a.jsx(z, { size: 48, variant: "special", "data-testid": `${r}-loader` }),
+      /* @__PURE__ */ a.jsx(
+        "img",
+        {
+          alt: m,
+          src: e,
+          onLoad: y,
+          onError: E,
+          style: { display: "none" }
+        }
+      )
+    ] }),
+    error: /* @__PURE__ */ a.jsx(v, { "data-testid": `${r}-fallback` }),
+    image: /* @__PURE__ */ a.jsx(
+      "img",
+      {
+        ref: h,
+        alt: m,
+        "data-testid": r,
+        loading: j,
+        src: e,
+        className: w
+      }
+    )
+  };
+  return $(() => {
+    if (!e) {
+      t("error");
+      return;
     }
-  );
-};
+    t("loading");
+  }, [e]), /* @__PURE__ */ a.jsxs("div", { className: l.container, "data-testid": `${r}-container`, ...I, children: [
+    f && d.loader,
+    g && d.error,
+    N && d.image
+  ] });
+});
 export {
-  j as ConfigProvider
+  q as Image
 };

package/dist/index.es8.js

@@ -1,18 +1,67 @@
-import { createContext as t, useContext as e } from "react";
-import n from "./index.es9.js";
-const r = t({
-  locale: n
-}), c = () => {
-  const o = e(r);
-  if (!o)
-    throw new Error("useConfig must be used within a ConfigProvider");
-  return o;
-}, u = () => {
-  const { locale: o } = c();
-  return o;
-};
+import { j as s } from "./index.es13.js";
+import { forwardRef as c } from "react";
+import a from "./index.es22.js";
+import x from "./index.es14.js";
+const j = c(
+  ({
+    size: e = 24,
+    variant: t = "accent",
+    className: r,
+    "data-testid": n = "loader",
+    style: o,
+    ...i
+  }, d) => {
+    const l = x(
+      a.loader,
+      a[t],
+      a[`size-${e}`],
+      r
+    );
+    return /* @__PURE__ */ s.jsx(
+      "svg",
+      {
+        ref: d,
+        className: l,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-testid": n,
+        style: o,
+        ...i,
+        children: /* @__PURE__ */ s.jsx(
+          "path",
+          {
+            d: "M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeWidth: "1.33333"
+          }
+        )
+      }
+    );
+  }
+), p = c((e, t) => {
+  const {
+    loading: r = !1,
+    size: n = 24,
+    variant: o = "accent",
+    children: i,
+    className: d,
+    style: l,
+    "data-testid": m,
+    ...f
+  } = e, h = x(a.container, d);
+  return /* @__PURE__ */ s.jsxs("div", { ref: t, className: h, style: l, "data-testid": m, ...f, children: [
+    i,
+    r && /* @__PURE__ */ s.jsx("div", { className: a.overlay, children: /* @__PURE__ */ s.jsx(j, { size: n, variant: o, "data-testid": `${m}-spinner` }) })
+  ] });
+}), w = c((e, t) => e.children ? /* @__PURE__ */ s.jsx(
+  p,
+  {
+    ref: t,
+    ...e
+  }
+) : /* @__PURE__ */ s.jsx(j, { ref: t, ...e }));
 export {
-  r as ConfigContext,
-  c as useConfig,
-  u as useLocale
+  w as Loader
 };

package/dist/index.es9.js

@@ -1,4 +1,24 @@
-const a = {};
+import { j as o } from "./index.es13.js";
+import n from "./index.es14.js";
+import { ConfigContext as m } from "./index.es10.js";
+import a from "./index.es21.js";
+const j = ({
+  locale: t = {},
+  theme: r,
+  children: e,
+  className: s
+}) => {
+  const i = r ? { ...Object.fromEntries(Object.entries(r)) } : {};
+  return /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      "data-testid": "ConfigProvider-component",
+      style: i,
+      className: n(a.wrapper, s),
+      children: /* @__PURE__ */ o.jsx(m.Provider, { value: { locale: t }, children: e })
+    }
+  );
+};
 export {
-  a as default
+  j as ConfigProvider
 };

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "skillgrid",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Skillgrid Components Library",
   "keywords": ["react", "ui", "components"],
   "author": "Skillaz Dev.",
-  "license": "MIT",
+  "license": "SEE LICENSE IN ./LICENCE.md",
   "repository": "https://gitlab.dev.skillaz.ru/frontend/skillgrid",
   "homepage": "https://skillaz.ru/",
   "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -16,8 +19,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
+  "style": "./dist/styles.css",
   "files": [
     "dist"
   ],