@canonical/maas-react-components 1.0.0 → 1.0.1

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

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

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

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.0.1",
   "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,6 +94,7 @@
     "@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",