@canonical/maas-react-components 1.0.0 → 1.1.0

package/README.md

@@ -1,11 +1,23 @@
+<div align="center">
+
 # MAAS React Components
 
-This project is a library of React components for use in MAAS UI projects.
+<br />
+<img src="https://assets.ubuntu.com/v1/142ae045-Canonical%20MAAS.png" alt="Canonical MAAS" width="180" />
+
+<br />
+<br />
+
+Library of React components for use in MAAS UI projects.
 
-It contains components that are either specific to, or only used in MAAS. General purpose components should be added to
+It contains components that are either specific to, or only used in MAAS. <br /> General purpose components should be added to
 [@canonical/react-components](https://github.com/canonical/react-components) instead.
 
-Read more in [Project philosophy and guidelines](GUIDELINES.md).
+ **[Storybook](https://canonical.github.io/maas-react-components/)** | **[Philosophy and guidelines](GUIDELINES.md)**
+
+<hr />
+
+</div>
 
 ## Getting started
 

package/dist/@canonical/maas-react-components.es.js

@@ -0,0 +1,189 @@
+import { jsxs as _, jsx as d, Fragment as $ } from "react/jsx-runtime";
+import { useRef as E, useState as j, useEffect as O, useCallback as B } from "react";
+import { useListener as M, Link as D } from "@canonical/react-components";
+function L(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var y = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(e) {
+  (function() {
+    var r = {}.hasOwnProperty;
+    function s() {
+      for (var n = [], o = 0; o < arguments.length; o++) {
+        var t = arguments[o];
+        if (t) {
+          var l = typeof t;
+          if (l === "string" || l === "number")
+            n.push(t);
+          else if (Array.isArray(t)) {
+            if (t.length) {
+              var i = s.apply(null, t);
+              i && n.push(i);
+            }
+          } else if (l === "object") {
+            if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]")) {
+              n.push(t.toString());
+              continue;
+            }
+            for (var u in t)
+              r.call(t, u) && t[u] && n.push(u);
+          }
+        }
+      }
+      return n.join(" ");
+    }
+    e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
+  })();
+})(y);
+var W = y.exports;
+const k = /* @__PURE__ */ L(W);
+const f = {
+  caution: "#F99B11",
+  light: "#F7F7F7",
+  linkFaded: "#D3E4ED",
+  link: "#0066CC",
+  negative: "#C7162B",
+  positiveFaded: "#B7CCB9",
+  positiveMid: "#4DAB4D",
+  positive: "#0E8420"
+}, J = [
+  f.link,
+  f.positive,
+  f.negative,
+  f.caution
+], A = f.linkFaded, R = f.caution, z = f.light, C = 2, w = 1, S = (e, r, s) => {
+  var t, l;
+  const n = ((l = (t = e == null ? void 0 : e.current) == null ? void 0 : t.getBoundingClientRect()) == null ? void 0 : l.width) || 0, o = n > r * C ? n / r : C;
+  s(o);
+}, p = {
+  bar: "meter-bar",
+  container: "meter-container",
+  filled: "meter-filled",
+  label: "meter-label",
+  meteroverflow: "meter-overflow",
+  segments: "meter-segments"
+}, I = ({
+  data: e,
+  datumWidths: r,
+  maximum: s,
+  overColor: n,
+  segmentWidth: o,
+  separatorColor: t
+}) => {
+  const l = () => e.reduce((m, a) => m + a.value, 0) > s, i = (m, a) => ({
+    backgroundColor: m.color,
+    left: `${r.reduce(
+      (v, c, h) => a > h ? v + c : v,
+      0
+    )}%`,
+    width: `${r[a]}%`
+  }), u = () => ({
+    background: `repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent ${o - w}px,
+      ${t} ${o - w}px,
+      ${t} ${o}px
+    )`
+  });
+  return /* @__PURE__ */ _($, { children: [
+    l() ? /* @__PURE__ */ d(
+      "div",
+      {
+        className: "p-meter__filled",
+        "data-testid": p.meteroverflow,
+        style: { backgroundColor: n, width: "100%" }
+      }
+    ) : e.map((m, a) => /* @__PURE__ */ d(
+      "div",
+      {
+        className: "p-meter__filled",
+        "data-testid": p.filled,
+        style: i(m, a)
+      },
+      `meter-${a}`
+    )),
+    o > 0 && /* @__PURE__ */ d(
+      "div",
+      {
+        className: "p-meter__separators",
+        "data-testid": p.segments,
+        style: u()
+      }
+    )
+  ] });
+}, P = ({
+  labelClassName: e,
+  label: r
+}) => /* @__PURE__ */ d(
+  "div",
+  {
+    className: k("p-meter__label", e),
+    "data-testid": p.label,
+    children: r
+  }
+), K = ({
+  className: e,
+  data: r,
+  emptyColor: s = A,
+  label: n,
+  labelClassName: o,
+  max: t,
+  overColor: l = R,
+  segmented: i = !1,
+  separatorColor: u = z,
+  small: m = !1
+}) => {
+  const a = E(null), v = r.reduce((g, N) => g + N.value, 0), c = t || v, h = r.map((g) => g.value / c * 100), [F, b] = j(0);
+  O(() => {
+    i && S(a, c, b);
+  }, [c, i]);
+  const x = B(() => {
+    S(a, c, b);
+  }, [a, c, b]);
+  return M(window, x, "resize", !0, i), /* @__PURE__ */ _(
+    "div",
+    {
+      className: k("p-meter", { "p-meter--small": m }, e),
+      "data-testid": p.container,
+      ref: a,
+      children: [
+        /* @__PURE__ */ d(
+          "div",
+          {
+            className: "p-meter__bar",
+            "data-testid": p.bar,
+            style: { backgroundColor: s },
+            children: /* @__PURE__ */ d(
+              I,
+              {
+                data: r,
+                datumWidths: h,
+                maximum: c,
+                overColor: l,
+                segmentWidth: F,
+                separatorColor: u
+              }
+            )
+          }
+        ),
+        n && /* @__PURE__ */ d(P, { label: n, labelClassName: o })
+      ]
+    }
+  );
+}, Q = ({ children: e, to: r, ...s }) => /* @__PURE__ */ d(D, { ...s, href: r, rel: "noreferrer noopener", target: "_blank", children: e });
+export {
+  Q as ExternalLink,
+  K as Meter,
+  A as defaultEmptyColor,
+  J as defaultFilledColors,
+  R as defaultOverColor,
+  z as defaultSeparatorColor,
+  f as meterColor,
+  p as testIds
+};

package/dist/@canonical/maas-react-components.umd.js

@@ -0,0 +1,11 @@
+(function(n,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("@canonical/react-components")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@canonical/react-components"],r):(n=typeof globalThis<"u"?globalThis:n||self,r(n["@canonical/maas-react-components"]={},n["react/jsx-runtime"],n.React,n["@canonical/react-components"]))})(this,function(n,r,h,S){"use strict";function $(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var w={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/(function(e){(function(){var s={}.hasOwnProperty;function o(){for(var a=[],l=0;l<arguments.length;l++){var t=arguments[l];if(t){var c=typeof t;if(c==="string"||c==="number")a.push(t);else if(Array.isArray(t)){if(t.length){var u=o.apply(null,t);u&&a.push(u)}}else if(c==="object"){if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]")){a.push(t.toString());continue}for(var m in t)s.call(t,m)&&t[m]&&a.push(m)}}}return a.join(" ")}e.exports?(o.default=o,e.exports=o):window.classNames=o})()})(w);var M=w.exports;const _=$(M),I="",d={caution:"#F99B11",light:"#F7F7F7",linkFaded:"#D3E4ED",link:"#0066CC",negative:"#C7162B",positiveFaded:"#B7CCB9",positiveMid:"#4DAB4D",positive:"#0E8420"},B=[d.link,d.positive,d.negative,d.caution],k=d.linkFaded,F=d.caution,j=d.light,E=2,N=1,O=(e,s,o)=>{var t,c;const a=((c=(t=e==null?void 0:e.current)==null?void 0:t.getBoundingClientRect())==null?void 0:c.width)||0,l=a>s*E?a/s:E;o(l)},p={bar:"meter-bar",container:"meter-container",filled:"meter-filled",label:"meter-label",meteroverflow:"meter-overflow",segments:"meter-segments"},x=({data:e,datumWidths:s,maximum:o,overColor:a,segmentWidth:l,separatorColor:t})=>{const c=()=>e.reduce((v,i)=>v+i.value,0)>o,u=(v,i)=>({backgroundColor:v.color,left:`${s.reduce((b,f,C)=>i>C?b+f:b,0)}%`,width:`${s[i]}%`}),m=()=>({background:`repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent ${l-N}px,
+      ${t} ${l-N}px,
+      ${t} ${l}px
+    )`});return r.jsxs(r.Fragment,{children:[c()?r.jsx("div",{className:"p-meter__filled","data-testid":p.meteroverflow,style:{backgroundColor:a,width:"100%"}}):e.map((v,i)=>r.jsx("div",{className:"p-meter__filled","data-testid":p.filled,style:u(v,i)},`meter-${i}`)),l>0&&r.jsx("div",{className:"p-meter__separators","data-testid":p.segments,style:m()})]})},D=({labelClassName:e,label:s})=>r.jsx("div",{className:_("p-meter__label",e),"data-testid":p.label,children:s}),L=({className:e,data:s,emptyColor:o=k,label:a,labelClassName:l,max:t,overColor:c=F,segmented:u=!1,separatorColor:m=j,small:v=!1})=>{const i=h.useRef(null),b=s.reduce((y,z)=>y+z.value,0),f=t||b,C=s.map(y=>y.value/f*100),[q,g]=h.useState(0);h.useEffect(()=>{u&&O(i,f,g)},[f,u]);const A=h.useCallback(()=>{O(i,f,g)},[i,f,g]);return S.useListener(window,A,"resize",!0,u),r.jsxs("div",{className:_("p-meter",{"p-meter--small":v},e),"data-testid":p.container,ref:i,children:[r.jsx("div",{className:"p-meter__bar","data-testid":p.bar,style:{backgroundColor:o},children:r.jsx(x,{data:s,datumWidths:C,maximum:f,overColor:c,segmentWidth:q,separatorColor:m})}),a&&r.jsx(D,{label:a,labelClassName:l})]})},W=({children:e,to:s,...o})=>r.jsx(S.Link,{...o,href:s,rel:"noreferrer noopener",target:"_blank",children:e});n.ExternalLink=W,n.Meter=L,n.defaultEmptyColor=k,n.defaultFilledColors=B,n.defaultOverColor=F,n.defaultSeparatorColor=j,n.meterColor=d,n.testIds=p,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './src/lib/index'

package/dist/src/lib/elements/ExternalLink/ExternalLink.d.ts

@@ -0,0 +1,7 @@
+import { LinkProps } from "@canonical/react-components";
+import type { LinkProps as RouterLinkProps } from "react-router-dom";
+type ExternalLinkProps = Pick<LinkProps, "children"> & Omit<RouterLinkProps, "children"> & {
+    to: string;
+};
+export declare const ExternalLink: ({ children, to, ...props }: ExternalLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/lib/elements/ExternalLink/ExternalLink.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta } from "@storybook/react";
+import { ExternalLink } from ".";
+declare const meta: Meta<typeof ExternalLink>;
+export default meta;
+export declare const Example: {
+    args: {
+        children: string;
+        to: string;
+    };
+};

package/dist/src/lib/elements/ExternalLink/ExternalLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/elements/ExternalLink/index.d.ts

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

package/dist/src/lib/elements/Meter/Meter.d.ts

@@ -0,0 +1,40 @@
+export declare const meterColor: {
+    readonly caution: "#F99B11";
+    readonly light: "#F7F7F7";
+    readonly linkFaded: "#D3E4ED";
+    readonly link: "#0066CC";
+    readonly negative: "#C7162B";
+    readonly positiveFaded: "#B7CCB9";
+    readonly positiveMid: "#4DAB4D";
+    readonly positive: "#0E8420";
+};
+export declare const defaultFilledColors: ("#F99B11" | "#0066CC" | "#C7162B" | "#0E8420")[];
+export declare const defaultEmptyColor: "#D3E4ED";
+export declare const defaultOverColor: "#F99B11";
+export declare const defaultSeparatorColor: "#F7F7F7";
+type MeterDatum = {
+    color?: string;
+    value: number;
+};
+type Props = {
+    className?: string;
+    data: MeterDatum[];
+    emptyColor?: string;
+    label?: string | JSX.Element;
+    labelClassName?: string;
+    max?: number;
+    overColor?: string;
+    segmented?: boolean;
+    separatorColor?: string;
+    small?: boolean;
+};
+export declare const testIds: {
+    bar: string;
+    container: string;
+    filled: string;
+    label: string;
+    meteroverflow: string;
+    segments: string;
+};
+export declare const Meter: ({ className, data, emptyColor, label, labelClassName, max, overColor, segmented, separatorColor, small, }: Props) => JSX.Element;
+export {};

package/dist/src/lib/elements/Meter/Meter.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta } from "@storybook/react";
+import { Meter } from ".";
+declare const meta: Meta<typeof Meter>;
+export default meta;
+export declare const Example: {
+    args: {
+        data: {
+            value: number;
+            color: string;
+        }[];
+    };
+};
+export declare const NoItems: {
+    args: {
+        data: never[];
+    };
+};

package/dist/src/lib/elements/Meter/Meter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/elements/Meter/index.d.ts

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

package/dist/src/lib/elements/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Meter";
+export * from "./ExternalLink";

package/dist/src/lib/index.d.ts

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

package/dist/style.css

@@ -0,0 +1 @@
+.p-meter{margin-bottom:.75rem;padding-top:.375rem}.p-meter__bar{border-radius:.875rem;height:.875rem;overflow:hidden;position:relative;width:100%;border:1px solid #999}.p-meter__label{display:flex;justify-content:space-between;margin-bottom:-.125rem;padding-top:.25rem}.p-meter__filled{height:100%;position:absolute;width:0%}.p-meter__separators{height:100%;position:absolute;width:100%;z-index:1}.p-meter--small{margin-bottom:.875rem;padding-top:.375rem}.p-meter--small .p-meter__bar{border-radius:.75rem;height:.75rem;margin-bottom:.375rem}.p-meter--small .p-meter__label{margin-bottom:0;padding-top:0}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/canonical/maas-react-components.git"
@@ -39,13 +39,25 @@
     "test:ui": "vitest --ui",
     "test:watch": "vitest",
     "semantic-release": "semantic-release",
-    "semantic-release-dry-run": "semantic-release --dry-run --no-ci"
+    "semantic-release-dry-run": "semantic-release --dry-run --no-ci",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
+    "@etchteam/storybook-addon-status": "^4.2.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -62,11 +74,17 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.14",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "8.0.0",
+    "jsdom": "^22.1.0",
     "prettier": "^3.0.3",
+    "prop-types": "^15.8.1",
     "sass": "^1.68.0",
+    "sb-addon-permutation-table": "^1.0.21",
     "semantic-release": "^22.0.5",
+    "storybook": "^7.4.6",
+    "storybook-addon-tags": "^0.0.1",
     "vite": "^4.4.9",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^0.34.5"
@@ -76,11 +94,13 @@
     "@types/react-dom": "18.2.6"
   },
   "peerDependencies": {
+    "classnames": "^2.3.2",
     "@canonical/react-components": "^0.47.0",
     "@types/react": "^17.0.2 || ^18.0.0",
     "@types/react-dom": "^17.0.2 || ^18.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.0.0",
     "vanilla-framework": "^4.3.0"
   }
 }