@muraldevkit/ui-toolkit 1.0.0

package/README.md

@@ -0,0 +1,4 @@
+# shared-components
+Shared React components for use across the Mural platform.
+
+- [Component standards](./docs/component-standards.md)

package/dist/components/index.d.ts

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

package/dist/components/svg/MrlSvg/MrlSvg.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AttrsObject } from '../../../utils';
+import { SVGSize } from '../constants';
+export interface SvgPropTypes {
+    /** The theme associated to an SVG Component */
+    theme?: string;
+    /** The size of an SVG Component */
+    size?: SVGSize;
+    /** The SVG object to parse into an HTML SVG element */
+    svg: Record<string, unknown> | string;
+    /**
+     * Applies additional HTML attributes to the `svg` element.
+     * When using in a framework wrapper (e.g., React), treat it as an object and don't stringify.
+     * Otherwise, the value object needs to be stringified to not receive `"[Object object]"`.
+     * Example: `attrs='{ "data-foo": "bar" }'`
+     */
+    attrs?: AttrsObject | string;
+    isClone?: boolean;
+}
+/**
+ * Creating and exporting component class for Mural SVG
+ *
+ * @param {SvgPropTypes} props the props for your MrlSvg
+ * @returns {React.ReactElement} a rendered SVG
+ */
+export declare const MrlSvg: (props: SvgPropTypes) => React.ReactElement;

package/dist/components/svg/config.d.ts

@@ -0,0 +1,114 @@
+/** Storybook configurations allowed for the SVG component. */
+export interface SvgArgs {
+    color: string;
+}
+export declare const storyData: {
+    args: {
+        color: string;
+        size: import("./constants").SVGSize;
+        theme: string;
+    };
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                options: string[];
+                type: string;
+            };
+        };
+        theme: {
+            control: {
+                options: string[];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        scans: {
+            size: string[];
+        };
+    };
+    title: string;
+};
+export declare const iconStoryData: {
+    args: {
+        theme: string;
+    };
+    argTypes: {
+        theme: {
+            control: {
+                options: string[];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+        scans: {
+            theme: string[];
+        };
+    };
+    title: string;
+};
+export declare const pictogramStoryData: {
+    args: {
+        theme: string;
+    };
+    argTypes: {
+        theme: {
+            control: {
+                options: string[];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+        scans: {
+            theme: string[];
+        };
+    };
+    title: string;
+};
+export declare const visualThinkingContainerStyles: {
+    display: string;
+    flexDirection: string;
+};
+export declare const brandContainerStyles: {
+    background: string;
+    width: string;
+};
+export declare const headingStyles: {
+    marginTop: string;
+};
+export declare const colorPictoStoryData: {
+    args: {
+        state: string;
+    };
+    argTypes: {
+        state: {
+            control: {
+                options: string[];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+        scans: {
+            state: string[];
+        };
+    };
+    name: string;
+    title: string;
+};

package/dist/components/svg/constants.d.ts

@@ -0,0 +1,23 @@
+import { AttrsObject } from '../../utils';
+export type SVGSize = 'small' | 'medium' | 'large' | 'auto';
+export interface SVGDefaults {
+    attrs: AttrsObject;
+    size: SVGSize;
+    theme: string;
+}
+interface AllowedValues {
+    sizes: Array<string>;
+    themes: Array<string>;
+}
+/**
+ * Defines all of values allowed for attributes with limited values;
+ * used for Storybook and testing
+ */
+export declare const allowedValues: AllowedValues;
+/**
+ * Default values for props on the SVG component;
+ * Shared between the component and Storybook
+ */
+export declare const defaults: SVGDefaults;
+export type SVGObject = Record<string, any>;
+export {};

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

@@ -0,0 +1,2 @@
+export { MrlSvg } from "./MrlSvg/MrlSvg";
+export * from './constants';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./utils";

package/dist/index.js

@@ -0,0 +1 @@
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("react"),require("classnames"));else if("function"==typeof define&&define.amd)define(["React","classnames"],r);else{var t="object"==typeof exports?r(require("react"),require("classnames")):r(e.React,e.classnames);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(self,((e,r)=>(()=>{"use strict";var t={899:(e,r,t)=>{t.d(r,{Z:()=>i});var n=t(81),a=t.n(n),o=t(645),s=t.n(o)()(a());s.push([e.id,".MrlSvg--StPVX{--mrl-svg-size: var(--mrl-spacing-07)}.MrlSvg--small--zP1On{--mrl-svg-size: var(--mrl-spacing-06)}.MrlSvg--large--HeoAa{--mrl-svg-size: var(--mrl-spacing-10)}.MrlSvg--auto--w9gVr{--mrl-svg-size: 100%}.MrlSvg--StPVX{display:inline-block;fill:currentcolor;height:var(--mrl-svg-size);width:var(--mrl-svg-size)}.MrlSvg--StPVX *{pointer-events:none}.MrlSvg--auto--w9gVr{width:100%}",""]),s.locals={MrlSvg:"MrlSvg--StPVX","MrlSvg--small":"MrlSvg--small--zP1On","MrlSvg--large":"MrlSvg--large--HeoAa","MrlSvg--auto":"MrlSvg--auto--w9gVr"};const i=s},645:e=>{e.exports=function(e){var r=[];return r.toString=function(){return this.map((function(r){var t="",n=void 0!==r[5];return r[4]&&(t+="@supports (".concat(r[4],") {")),r[2]&&(t+="@media ".concat(r[2]," {")),n&&(t+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),t+=e(r),n&&(t+="}"),r[2]&&(t+="}"),r[4]&&(t+="}"),t})).join("")},r.i=function(e,t,n,a,o){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(n)for(var i=0;i<this.length;i++){var c=this[i][0];null!=c&&(s[c]=!0)}for(var l=0;l<e.length;l++){var u=[].concat(e[l]);n&&s[u[0]]||(void 0!==o&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=o),t&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=t):u[2]=t),a&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=a):u[4]="".concat(a)),r.push(u))}},r}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var r=[];function t(e){for(var t=-1,n=0;n<r.length;n++)if(r[n].identifier===e){t=n;break}return t}function n(e,n){for(var o={},s=[],i=0;i<e.length;i++){var c=e[i],l=n.base?c[0]+n.base:c[0],u=o[l]||0,f="".concat(l," ").concat(u);o[l]=u+1;var p=t(f),d={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==p)r[p].references++,r[p].updater(d);else{var v=a(d,n);n.byIndex=i,r.splice(i,0,{identifier:f,updater:v,references:1})}s.push(f)}return s}function a(e,r){var t=r.domAPI(r);return t.update(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap&&r.supports===e.supports&&r.layer===e.layer)return;t.update(e=r)}else t.remove()}}e.exports=function(e,a){var o=n(e=e||[],a=a||{});return function(e){e=e||[];for(var s=0;s<o.length;s++){var i=t(o[s]);r[i].references--}for(var c=n(e,a),l=0;l<o.length;l++){var u=t(o[l]);0===r[u].references&&(r[u].updater(),r.splice(u,1))}o=c}}},569:e=>{var r={};e.exports=function(e,t){var n=function(e){if(void 0===r[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}r[e]=t}return r[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(t)}},216:e=>{e.exports=function(e){var r=document.createElement("style");return e.setAttributes(r,e.attributes),e.insert(r,e.options),r}},565:(e,r,t)=>{e.exports=function(e){var r=t.nc;r&&e.setAttribute("nonce",r)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var r=e.insertStyleElement(e);return{update:function(t){!function(e,r,t){var n="";t.supports&&(n+="@supports (".concat(t.supports,") {")),t.media&&(n+="@media ".concat(t.media," {"));var a=void 0!==t.layer;a&&(n+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),n+=t.css,a&&(n+="}"),t.media&&(n+="}"),t.supports&&(n+="}");var o=t.sourceMap;o&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),r.styleTagTransform(n,e,r.options)}(r,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(r)}}}},589:e=>{e.exports=function(e,r){if(r.styleSheet)r.styleSheet.cssText=e;else{for(;r.firstChild;)r.removeChild(r.firstChild);r.appendChild(document.createTextNode(e))}}},200:e=>{e.exports=r},639:r=>{r.exports=e}},n={};function a(e){var r=n[e];if(void 0!==r)return r.exports;var o=n[e]={id:e,exports:{}};return t[e](o,o.exports,a),o.exports}a.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return a.d(r,{a:r}),r},a.d=(e,r)=>{for(var t in r)a.o(r,t)&&!a.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},a.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.nc=void 0;var o={};return(()=>{a.r(o),a.d(o,{MrlSvg:()=>N,allowedValues:()=>v,defaults:()=>m,getCamelCase:()=>s,getUniqueId:()=>d,isObject:()=>i,setAttributes:()=>f,setClasses:()=>u});var e=a(639),r=a.n(e),t=a(200),n=a.n(t),s=function(e){return e.trim().replace(/[-_]+/g," ").replace(/[`"',.;:?!@#$%^&*()~[\]{}|/\\<>]+/g,"").replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(function(e,r){return 0==+e?"":0===r?e.toLowerCase():e.toUpperCase()}))},i=function(e){return(!e||!Array.isArray(e))&&e instanceof Object},c=function(){return c=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},c.apply(this,arguments)},l=function(e){try{return JSON.parse(e)}catch(r){return console.error("The attrs property is not properly-formatted JSON:"),console.error(e),console.error(r),r}},u=function(e,r){var t,n="string"==typeof e?l(e):e;return i(n)&&n.class?c(((t={})["".concat(n.class)]=void 0!==n.class&&n.class.length>0,t),r):r},f=function(e,r,t){void 0===r&&(r={});var a="string"==typeof e?l(e):e;return a?Object.assign({},r,a,{class:n()(t,a.class)}):{}},p=0,d=function(e){return void 0===e&&(e="mrl"),p++,"".concat(e,"-").concat(p)},v={sizes:["medium","small","large","auto"],themes:["classic","default"]},m={attrs:{role:"presentation"},size:"medium",theme:"default"},g=a(379),y=a.n(g),h=a(795),b=a.n(h),S=a(569),M=a.n(S),O=a(565),x=a.n(O),w=a(216),j=a.n(w),A=a(589),P=a.n(A),C=a(899),T={};T.styleTagTransform=P(),T.setAttributes=x(),T.insert=M().bind(null,"head"),T.domAPI=b(),T.insertStyleElement=j(),y()(C.Z,T);const E=C.Z&&C.Z.locals?C.Z.locals:void 0;var z=function(){return z=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},z.apply(this,arguments)},N=function(e){var t,a=e.theme,o=e.size,c=void 0===o?"medium":o,l=e.svg,p=e.attrs,v=void 0===p?{}:p,g=e.isClone,y="There has been an issue rendering your SVG!",h=function(e,t,a){if(void 0===t&&(t={}),"text"===e.type)return e.value;var o=e.name,i=e.attributes||{};return Object.keys(i).forEach((function(e){var r="data-"===e.slice(0,5)?e:s(e);i[r]=i[e],e!==r&&delete i[e]})),"svg"===o?r().createElement("svg",z({},i,t,{className:n()(a),key:d()}),Array.isArray(e.children)&&e.children.map((function(e){return h(e)}))):r().createElement(o,z({},i,{key:d()}),Array.isArray(e.children)&&e.children.map((function(e){return h(e)})))},b=function(e,t,o,s){void 0===t&&(t={});var i=""===o?"This icon":o,c=Object.keys(e).length>0?"".concat(i," has no '").concat(a,"' theme found! Please try another SVG or theme."):"No valid themes found.";return console.warn(y),console.warn(c),r().createElement("span",z({className:n()(s)},t))};if(void 0!==g&&g)return r().createElement("span",null);if(!l)return r().createElement("span",null);var S=f(v,m.attrs),M=u(v,((t={})[E.MrlSvg]=!0,t[E["MrlSvg--".concat(c)]]="medium"!==c,t));delete S.class;var O="string"==typeof l;if(O&&!function(e){try{JSON.parse(e)}catch(r){return console.warn("".concat(y," Invalid SVG code:")),console.warn(e),!1}return!0}(l))return r().createElement("span",null);var x=O?JSON.parse(l):l,w=Object.keys(x),j=function(e){var r=e.indexOf("default")>=0,t=e.indexOf("rebrand")>=0;return"rebrand"!==a||t?a&&""!==a?a:r?"default":null:"default"}(w);return j&&""!==j?x[j]?h(x[j],S,M):i(x[w[0]])?b(x,S,x[w[0]].attributes["data-mrl-svg-name"],M):b(x):h(x,S,M)}})(),o})()));

package/dist/utils/getCamelCase/getCamelCase.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Takes a string and returns a camelCase version of the string
+ *
+ * @param {string} str - a string to set to camelCase
+ * @returns {string} - a string with special characters spaces removed, where words after a space are Uppercase leading
+ */
+export declare const getCamelCase: (str: string) => string;

package/dist/utils/getCamelCase/getCamelCase.test.d.ts

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

package/dist/utils/getCamelCase/index.d.ts

@@ -0,0 +1,2 @@
+import { getCamelCase } from './getCamelCase';
+export { getCamelCase };

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getCamelCase';
+export * from './isObject';
+export * from './setAttributes';

package/dist/utils/isObject/index.d.ts

@@ -0,0 +1,2 @@
+import { Item, isObject } from "./isObject";
+export { type Item, isObject };

package/dist/utils/isObject/isObject.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Item is passed to the `isObject` function.
+ * Since we want to be able to check if anything is an object, we allow
+ * anything to be passed to the function.
+ */
+export type Item = unknown;
+/**
+ * Tests that a variable is actually an object and not an array  or null
+ * which can mistakenly be flagged as an object
+ *
+ * @param {Item} item - variable to tests
+ * @returns {boolean} - value if item is actually an Object
+ */
+export declare const isObject: (item: Item) => boolean;

package/dist/utils/isObject/isObject.test.d.ts

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

package/dist/utils/setAttributes/index.d.ts

@@ -0,0 +1,2 @@
+import { AttrsObject, ClassObject, getUniqueId, setAttributes, setClasses } from './setAttributes';
+export { type AttrsObject, type ClassObject, getUniqueId, setAttributes, setClasses };

package/dist/utils/setAttributes/setAttributes.d.ts

@@ -0,0 +1,33 @@
+export type AttrsObject = Record<string, any>;
+/**
+ * Object that contains all of the classes that can be applied to an element
+ * and a condition that determines if that instance should have it
+ * applied or not. The structure is:
+ * "my-class": !theConditional
+ */
+export type ClassObject = Record<string, boolean>;
+/**
+ * Sets up a classObject to be used by the className prop
+ *
+ * @todo - 2563 - use setClasses across components
+ * @param {string} customClasses - custom classes to apply via the attrs prop
+ * @param {ClassObject} defaultClasses - design system component classes to apply
+ * @returns {ClassObject} - with all classes
+ */
+export declare const setClasses: (customClasses: AttrsObject | string, defaultClasses: ClassObject) => ClassObject;
+/**
+ * Set an object of attributes to be used in a given component.
+ *
+ * @param {AttrsObject | string} attributes - the custom attributes passed to the component
+ * @param {AttrsObject} [defaults={}] - an optional object of the default attributes of a component
+ * @param {string} className - default classes to apply to the component
+ * @returns {AttrsObject} - an object of component attributes
+ */
+export declare const setAttributes: (attributes: AttrsObject | string, defaults?: AttrsObject, className?: string) => AttrsObject;
+/**
+ *  Generates unique identifier
+ *
+ * @param {string} prefix  - prefix for identifier
+ * @returns {string} - prefixed unique identifier
+ */
+export declare const getUniqueId: (prefix?: string) => string;

package/dist/utils/setAttributes/setAttributes.test.d.ts

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

package/package.json

@@ -0,0 +1,117 @@
+{
+	"name": "@muraldevkit/ui-toolkit",
+	"version": "1.0.0",
+	"description": "Mural's UI Toolkit",
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "webpack --mode=production",
+		"compile": "storybook build",
+		"dev": "npm run compile && npm run serve",
+		"lint": "npm run lint:scripts && npm run lint:styles",
+		"lint:config": "eslint '.storybook/*.{js,jsx,ts,tsx}'",
+		"lint:config:fix": "eslint '.storybook/*.{js,jsx,ts,tsx}' --fix",
+		"lint:fix": "npm run lint:scripts:fix && npm run lint:styles:fix",
+		"lint:scripts": "eslint '**/*.{js,jsx,ts,tsx}'",
+		"lint:styles": "stylelint src/components/**/*.{css,scss}",
+		"lint:scripts:fix": "eslint '**/*.{js,jsx,ts,tsx}' --fix",
+		"lint:styles:fix": "stylelint --fix src/components/**/*.{css,scss}",
+		"prebuild": "rimraf dist",
+		"prepare": "husky install",
+		"publish:local": "npm run build && npm pack",
+		"release": "npx semantic-release",
+		"serve": "storybook dev -p 6006",
+		"test": "jest",
+		"test:scan": "npx test-storybook --maxWorkers=2",
+		"test:watch": "jest --watchAll",
+		"test:updateSnapshot": "jest --updateSnapshot"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"license": "https://www.mural.co/terms/developer-addendum",
+	"peerDependencies": {
+		"@muraldevkit/ds-foundation": ">=1.4.0",
+		"@muraldevkit/ds-icons": "1.1.0",
+		"@muraldevkit/ds-utilities": "1.0.3",
+		"classnames": "2.2.5",
+		"react": ">=16.9",
+		"react-dom": ">=16.9"
+	},
+	"devDependencies": {
+		"@babel/core": "7.21.4",
+		"@babel/node": "7.20.7",
+		"@babel/plugin-proposal-class-properties": "7.18.6",
+		"@babel/preset-env": "7.21.4",
+		"@babel/preset-react": "7.18.6",
+		"@babel/preset-typescript": "7.21.4",
+		"@muraldevkit/ds-foundation": "1.4.0",
+		"@storybook/addon-a11y": "7.0.12",
+		"@storybook/addon-essentials": "7.0.12",
+		"@storybook/addon-interactions": "7.0.12",
+		"@storybook/addon-links": "7.0.12",
+		"@storybook/blocks": "7.0.12",
+		"@storybook/react": "7.0.12",
+		"@storybook/react-webpack5": "7.0.12",
+		"@storybook/test-runner": "0.10.0",
+		"@storybook/testing-library": "0.0.14-next.2",
+		"@testing-library/dom": "7.31.0",
+		"@testing-library/jest-dom": "5.16.5",
+		"@testing-library/react": "12.1.2",
+		"@testing-library/user-event": "13.1.9",
+		"@types/classnames": "2.2.5",
+		"@types/jest": "29.5.1",
+		"@types/react": "16.8.25",
+		"@types/react-dom": "16.9.0",
+		"@typescript-eslint/eslint-plugin": "4.33.0",
+		"@typescript-eslint/parser": "4.33.0",
+		"axe-playwright": "1.2.3",
+		"babel-loader": "9.1.2",
+		"css-loader": "6.7.3",
+		"eslint": "7.32.0",
+		"eslint-config-prettier": "8.6.0",
+		"eslint-plugin-import": "2.26.0",
+		"eslint-plugin-jsdoc": "39.6.4",
+		"eslint-plugin-jsx-a11y": "6.7.1",
+		"eslint-plugin-prettier": "3.4.1",
+		"eslint-plugin-react": "7.31.11",
+		"eslint-plugin-react-hooks": "4.6.0",
+		"file-loader": "6.2.0",
+		"html-webpack-plugin": "5.5.1",
+		"husky": "^8.0.0",
+		"identity-obj-proxy": "3.0.0",
+		"jest": "29.5.0",
+		"jest-environment-jsdom": "29.5.0",
+		"path": "^0.12.7",
+		"prettier": "2.8.8",
+		"prop-types": "^15.8.1",
+		"rimraf": "5.0.0",
+		"sass": "1.62.1",
+		"sass-loader": "13.2.2",
+		"semantic-release": "19.0.5",
+		"storybook": "7.0.12",
+		"style-loader": "^3.3.2",
+		"stylelint": "14.16.1",
+		"stylelint-config-prettier": "9.0.4",
+		"stylelint-config-standard": "29.0.0",
+		"stylelint-config-standard-scss": "6.1.0",
+		"stylelint-order": "6.0.0",
+		"stylelint-sassdoc": "0.4.2",
+		"stylelint-scss": "4.6.0",
+		"ts-jest": "29.1.0",
+		"ts-loader": "9.4.2",
+		"webpack": "5.80.0",
+		"webpack-cli": "5.0.1",
+		"webpack-dev-server": "4.13.3"
+	},
+	"dependencies": {
+		"classnames": "2.2.5",
+		"react": ">=16.9",
+		"react-dom": ">=16.9",
+		"typescript": "5.0.4"
+	}
+}