@loomhq/lens 10.102.1 → 10.102.2

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.102.1",
+  "version": "10.102.2",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
     "start:next": "next start",
     "prepublishOnly": "yarn build:ts",
-    "build:app": "rm -rf dist && NODE_ENV=production babel --no-babelrc --presets=@babel/preset-react,@babel/preset-env --plugins=@babel/proposal-class-properties,transform-remove-console src --out-dir dist --copy-files",
-    "build:ts": "rm -rf dist && tsc -p tsconfig.build.json",
+    "build:app": "rm -rf dist && esbuild ./src/index.ts --outdir=dist --bundle --loader:.js=jsx --format=esm && yarn build:app:icons && yarn build:ts",
+    "build:app:icons": "esbuild ./src/components/icon/available-icons/* --outdir=dist/icons --bundle --loader:.js=jsx --format=esm",
+    "build:ts": "tsc -p tsconfig.build.json && yarn build:ts:icons",
+    "build:ts:icons": "tsc -p tsconfig.build-icons.json",
     "deploy": "next export -o docs && touch docs/.nojekyll && cp ./CNAME docs/",
     "lint": "eslint src",
-    "lint:ts": "tsc -p tsconfig.build.json --noEmit",
+    "lint:ts": "tsc -p tsconfig.build.json",
     "lint:all": "yarn lint && yarn lint:ts",
     "test": "echo \"no tests\"",
     "semantic-release": "semantic-release",
@@ -47,6 +49,7 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.22.15",
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
@@ -63,6 +66,7 @@
     "babel-plugin-transform-remove-console": "^6.9.4",
     "commitlint": "^17.1.2",
     "conventional-changelog-conventionalcommits": "^5.0.0",
+    "esbuild": "^0.19.9",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-import-resolver-alias": "^1.1.2",
@@ -88,8 +92,8 @@
     "typeface-inter": "^3.11.2",
     "typescript": "^4.2.3"
   },
-  "main": "dist",
-  "module": "dist",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "exports": {
     ".": {
       "import": "./dist/index.js"

package/dist/colors.js

@@ -1,151 +0,0 @@
-const BaseColors = [
-    'red',
-    'blurpleLight',
-    'blurpleMedium',
-    'blurple',
-    'blurpleDark',
-    'offWhite',
-    'blueLight',
-    'blue',
-    'blueDark',
-    'orangeLight',
-    'orange',
-    'orangeDark',
-    'tealLight',
-    'teal',
-    'tealDark',
-    'yellowLight',
-    'yellow',
-    'yellowDark',
-];
-const GreyColors = [
-    'grey8',
-    'grey7',
-    'grey6',
-    'grey5',
-    'grey4',
-    'grey3',
-    'grey2',
-    'grey1',
-    'white',
-];
-const SharedColors = [
-    'focusRing',
-    'record',
-    'recordHover',
-    'recordActive',
-    'info',
-    'success',
-    'warning',
-    'danger',
-    'dangerHover',
-    'dangerActive',
-    'backdrop',
-    'backdropDark',
-    'backdropTwilight',
-    'disabledContent',
-    'highlight',
-];
-const SemanticColors = [
-    'primary',
-    'primaryHover',
-    'primaryActive',
-    'body',
-    'bodyDimmed',
-    'background',
-    'backgroundHover',
-    'backgroundActive',
-    'backgroundSecondary',
-    'backgroundSecondary2',
-    'overlay',
-    'border',
-    'disabledBackground',
-    'formFieldBorder',
-    'formFieldBackground',
-    'buttonBorder',
-    'upgrade',
-    'upgradeHover',
-    'upgradeActive',
-    'tabBackground',
-    'discoveryBackground',
-    'discoveryLightBackground',
-    'discoveryTitle',
-    'discoveryHighlight',
-];
-const percent = (number, percentage) => Math.round((number * percentage) / 100);
-export const darken = (color, percentage) => (Object.assign(Object.assign({}, color), { l: color.l - percent(color.l, percentage) }));
-export const lighten = (color, percentage) => (Object.assign(Object.assign({}, color), { l: color.l + percent(color.l, percentage) }));
-export const saturate = (color, percentage) => (Object.assign(Object.assign({}, color), { s: color.s + percent(color.s, percentage) }));
-export const alpha = (color, alpha) => (Object.assign(Object.assign({}, color), { a: alpha }));
-const hoverIncrease = 15.8;
-const activeIncrease = 31.6;
-const borderAlpha = 0.2;
-const backdropAlpha = 0.5;
-const backdropDarkAlpha = 0.9;
-const backdropTwilightAlpha = 0.8;
-const focusRingAlpha = 0.5;
-const buttonBorderAlpha = 0.25;
-const tabBackgroundAlpha = 0.15;
-export const hslaBaseColors = {
-    red: { h: 11, s: 80, l: 45, a: 1 },
-    blurpleLight: { h: 240, s: 83.3, l: 95.3, a: 1 },
-    blurpleMedium: { h: 242, s: 81.0, l: 87.6, a: 1 },
-    blurple: { h: 242, s: 88.4, l: 66.3, a: 1 },
-    blurpleDark: { h: 242, s: 87.6, l: 62.0, a: 1 },
-    offWhite: { h: 45, s: 36.4, l: 95.7, a: 1 },
-    blueLight: { h: 206, s: 58.3, l: 85.9, a: 1 },
-    blue: { h: 206, s: 100.0, l: 73.3, a: 1 },
-    blueDark: { h: 206, s: 29.5, l: 33.9, a: 1 },
-    orangeLight: { h: 6, s: 100.0, l: 89.6, a: 1 },
-    orange: { h: 11, s: 100.0, l: 62.2, a: 1 },
-    orangeDark: { h: 11, s: 79.9, l: 64.9, a: 1 },
-    tealLight: { h: 180, s: 20.0, l: 67.6, a: 1 },
-    teal: { h: 180, s: 51.4, l: 51.6, a: 1 },
-    tealDark: { h: 180, s: 16.2, l: 22.9, a: 1 },
-    yellowLight: { h: 39, s: 100.0, l: 87.8, a: 1 },
-    yellow: { h: 50, s: 100.0, l: 57.3, a: 1 },
-    yellowDark: { h: 39, s: 100.0, l: 68.0, a: 1 },
-};
-export const hslaGreys = {
-    grey8: { h: 0, s: 0, l: 13, a: 1 },
-    grey7: { h: 246, s: 16, l: 26, a: 1 },
-    grey6: { h: 252, s: 13, l: 46, a: 1 },
-    grey5: { h: 240, s: 7, l: 62, a: 1 },
-    grey4: { h: 259, s: 12, l: 75, a: 1 },
-    grey3: { h: 260, s: 11, l: 85, a: 1 },
-    grey2: { h: 260, s: 11, l: 95, a: 1 },
-    grey1: { h: 240, s: 7, l: 97, a: 1 },
-    white: { h: 0, s: 0, l: 100, a: 1 },
-};
-const themeSharedColors = {
-    focusRing: alpha(hslaBaseColors.blurple, focusRingAlpha),
-    record: hslaBaseColors.orange,
-    recordHover: darken(hslaBaseColors.orange, hoverIncrease),
-    recordActive: darken(hslaBaseColors.orange, activeIncrease),
-    info: hslaBaseColors.blue,
-    success: hslaBaseColors.teal,
-    warning: hslaBaseColors.yellowDark,
-    danger: hslaBaseColors.red,
-    dangerHover: darken(hslaBaseColors.red, hoverIncrease),
-    dangerActive: darken(hslaBaseColors.red, activeIncrease),
-    backdrop: alpha(hslaGreys.grey8, backdropAlpha),
-    backdropDark: alpha(hslaGreys.grey8, backdropDarkAlpha),
-    backdropTwilight: alpha({ h: 245, s: 44.8, l: 46.9, a: 1 }, backdropTwilightAlpha),
-    disabledContent: hslaGreys.grey5,
-    highlight: {
-        h: hslaBaseColors.blurpleLight.h,
-        s: hslaBaseColors.blurpleLight.s,
-        l: 66.3,
-        a: 0.15,
-    },
-};
-// This object has a specific spread order for documentation purposes
-export const themeColors = {
-    light: Object.assign(Object.assign({ primary: hslaBaseColors.blurple, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey8, bodyDimmed: hslaGreys.grey6, background: hslaGreys.white, backgroundHover: alpha(hslaGreys.grey7, 0.1), backgroundActive: alpha(hslaGreys.grey7, 0.3), backgroundSecondary: alpha(hslaGreys.grey7, 0.04), backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 }, overlay: hslaGreys.white, border: alpha(hslaGreys.grey6, borderAlpha) }, themeSharedColors), { disabledBackground: hslaGreys.grey2, formFieldBorder: hslaGreys.grey3, formFieldBackground: hslaGreys.white, buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha), upgrade: { h: 206, s: 100, l: 93, a: 1 }, upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17), tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 100, l: 93, a: 1 }, discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 }, discoveryTitle: hslaGreys.grey8, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
-    dark: Object.assign(Object.assign({ primary: { h: 242, s: 87, l: 73, a: 1 }, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey1, bodyDimmed: hslaGreys.grey5, background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(hslaGreys.white, 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
-};
-export const hslaColors = Object.assign(Object.assign({}, hslaBaseColors), hslaGreys);
-export const colorsNames = [
-    ...Object.keys(hslaColors),
-    ...Object.keys(themeColors.light),
-];

package/dist/components/align/align.js

@@ -1,60 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { getResponsiveOneOf } from '../../utilities';
-import styled from '@emotion/styled';
-const alignmentsPlaceItems = {
-    topLeft: 'start',
-    topCenter: 'start center',
-    topRight: 'start end',
-    centerLeft: 'center start',
-    center: 'center',
-    centerRight: 'center end',
-    bottomLeft: 'end start',
-    bottomCenter: 'end center',
-    bottomRight: 'end',
-};
-const getPlaceItems = (alignment) => {
-    if (Array.isArray(alignment)) {
-        return alignment.map(alignmentArrayItem => alignmentsPlaceItems[alignmentArrayItem]);
-    }
-    if (typeof alignment === 'object') {
-        const alignmentsPlaceItemsObject = {};
-        Object.entries(alignment).forEach(([key, value]) => {
-            return (alignmentsPlaceItemsObject[key] = alignmentsPlaceItems[value]);
-        });
-        return alignmentsPlaceItemsObject;
-    }
-    return alignmentsPlaceItems[alignment];
-};
-const AlignWrapper = styled.div `
-  width: 100%;
-  height: 100%;
-  display: grid;
-  ${props => getResponsiveOneOf('place-items', getPlaceItems(props.alignment))};
-`;
-const Align = (_a) => {
-    var { children, alignment = 'center', htmlTag = 'div' } = _a, props = __rest(_a, ["children", "alignment", "htmlTag"]);
-    return (React.createElement(AlignWrapper, Object.assign({ alignment: alignment, as: htmlTag }, props), children));
-};
-export const availableAlignments = Object.keys(alignmentsPlaceItems);
-export const availableHtmlTags = [
-    'div',
-    'header',
-    'article',
-    'section',
-    'nav',
-    'aside',
-    'footer',
-    'main',
-];
-export default Align;

package/dist/components/arrange/arrange.js

@@ -1,51 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { getResponsiveOneOf, getSize } from '../../utilities';
-import React from 'react';
-import { customStylesWarning } from '../../console-messages';
-import { getResponsiveGridSections } from '../../utilities/responsive';
-import styled from '@emotion/styled';
-const ArrangeWrapper = styled.div `
-  display: grid;
-  ${props => getResponsiveOneOf('align-items', props.alignItems)};
-  ${props => getResponsiveOneOf('justify-content', props.justifyContent)};
-  ${props => props.justifyItems &&
-    getResponsiveOneOf('justify-items', props.justifyItems)};
-  ${props => props.alignContent &&
-    getResponsiveOneOf('align-content', props.alignContent)};
-  ${props => !props.columns &&
-    !props.rows &&
-    !props.autoFlow &&
-    'grid-auto-flow: column'};
-  ${props => getResponsiveGridSections(props.columns, 'columns')};
-  ${props => getResponsiveGridSections(props.rows, 'rows')};
-  ${props => getSize('gap', props.gap)};
-  ${props => getSize('width', props.width)};
-  ${props => getSize('height', props.height)};
-  ${props => getSize('min-width', props.minWidth)};
-  ${props => getSize('min-height', props.minHeight)};
-  ${props => getSize('max-width', props.maxWidth)};
-  ${props => getSize('max-height', props.maxHeight)};
-
-  ${props => props.autoFlow && getResponsiveOneOf('grid-auto-flow', props.autoFlow)};
-  ${props => props.columns &&
-    props.autoFlow &&
-    getResponsiveOneOf('grid-auto-flow', props.autoFlow)};
-`;
-const Arrange = (_a) => {
-    var { children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems = 'center', justifyContent = 'start', justifyItems, alignContent, autoFlow, className, style } = _a, props = __rest(_a, ["children", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "gap", "columns", "rows", "alignItems", "justifyContent", "justifyItems", "alignContent", "autoFlow", "className", "style"]);
-    if (className || style) {
-        console.warn(customStylesWarning);
-    }
-    return (React.createElement(ArrangeWrapper, Object.assign({ alignItems: alignItems, justifyContent: justifyContent, justifyItems: justifyItems, alignContent: alignContent, gap: gap, columns: columns, rows: rows, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, autoFlow: autoFlow }, props), children));
-};
-export default Arrange;

package/dist/components/avatar/avatar.js

@@ -1,114 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { getRadius, getSizeValue, u } from '../../utilities';
-import React from 'react';
-import styled from '@emotion/styled';
-const getLetterSize = wrapperSize => `calc(${wrapperSize} / 1.75)`;
-const getAvatarSize = avatarSize => {
-    let width;
-    let height;
-    if (avatarSize === 'medium') {
-        width = u(4);
-        height = u(4);
-    }
-    else if (avatarSize === 'large') {
-        width = u(7);
-        height = u(7);
-    }
-    else {
-        const sizeValue = getSizeValue(avatarSize);
-        width = sizeValue;
-        height = sizeValue;
-    }
-    const fontSize = getLetterSize(width);
-    return {
-        width,
-        height,
-        fontSize,
-    };
-};
-const AvatarWrapper = styled.span `
-  display: block;
-  color: var(--lns-color-orangeDark);
-  background-color: var(--lns-color-background);
-  ${getRadius('full')};
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  font-weight: var(--lns-fontWeight-bold);
-  width: ${props => {
-    const { width } = getAvatarSize(props.size);
-    return width;
-}};
-  height: ${props => {
-    const { height } = getAvatarSize(props.size);
-    return height;
-}};
-  font-size: ${props => {
-    const { fontSize } = getAvatarSize(props.size);
-    return fontSize;
-}};
-  position: relative;
-  z-index: 0;
-
-  &:after {
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    opacity: 0.2;
-    z-index: -1;
-    ${props => props.hasBackgroundColor &&
-    `background-color: var(--lns-color-orangeDark)`};
-  }
-`;
-const AvatarImage = styled.img `
-  max-width: 100%;
-  width: ${props => {
-    const { width } = getAvatarSize(props.size);
-    return width;
-}};
-  height: ${props => {
-    const { height } = getAvatarSize(props.size);
-    return height;
-}};
-  font-size: ${props => {
-    const { fontSize } = getAvatarSize(props.size);
-    return fontSize;
-}};
-`;
-const Avatar = (_a) => {
-    var { altText = '', size = 4, letter, imageSrc, children } = _a, props = __rest(_a, ["altText", "size", "letter", "imageSrc", "children"]);
-    const getContent = () => {
-        if (children) {
-            return children;
-        }
-        if (imageSrc) {
-            const height = getAvatarSize(size).height;
-            const width = getAvatarSize(size).width;
-            return (React.createElement(AvatarImage, { size: size, alt: altText, src: imageSrc, height: height, width: width }));
-        }
-        if (letter) {
-            if (altText) {
-                return React.createElement("span", { "aria-label": altText }, letter);
-            }
-            return letter;
-        }
-    };
-    const hasBackgroundColor = letter && !imageSrc && !children;
-    return (React.createElement(AvatarWrapper, Object.assign({ hasBackgroundColor: hasBackgroundColor, size: size }, props), getContent()));
-};
-export default Avatar;

package/dist/components/backdrop/backdrop.js

@@ -1,42 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { getColorValue } from '../../utilities';
-import styled from '@emotion/styled';
-import { useTransition } from 'transition-hook';
-import usePreventScroll from '../../hooks/use-prevent-scroll';
-const duration = 300;
-const BackdropWrapper = styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100vh;
-  background: ${props => getColorValue(props.backgroundColor)};
-  z-index: ${props => props.zIndex};
-  overflow: hidden;
-`;
-const ChildrenWrapper = styled.div `
-  overflow: auto;
-  height: 100%;
-`;
-const Backdrop = (_a) => {
-    var { children, isOpen, zIndex = 1000, backgroundColor = 'backdropDark' } = _a, props = __rest(_a, ["children", "isOpen", "zIndex", "backgroundColor"]);
-    const { stage, shouldMount } = useTransition(isOpen, duration);
-    usePreventScroll('html', isOpen);
-    return (React.createElement(React.Fragment, null, shouldMount && (React.createElement(BackdropWrapper, Object.assign({ backgroundColor: backgroundColor, zIndex: zIndex, style: {
-            transition: `opacity ${duration}ms`,
-            opacity: stage === 'enter' ? 1 : 0,
-        } }, props),
-        React.createElement(ChildrenWrapper, null, children)))));
-};
-export default Backdrop;

package/dist/components/base-styles/base-styles.js

@@ -1,40 +0,0 @@
-import { Global, css } from '@emotion/core';
-import { getAllCssVarsString, getThemeStylesString } from '../../css-variables';
-import { getColorValue, getTextSize } from '../../utilities';
-import React from 'react';
-import { cssUtilities } from '../../css-utilities';
-const buildGlobalStylesheet = (rootElement = ':root', bodyElement = 'body') => {
-    return `
-    ${rootElement} {
-      font-size: 100%;
-    }
-    ${bodyElement} {
-      font-family: circular, -apple-system, BlinkMacSystemFont, Segoe UI,
-        sans-serif;
-      color: ${getColorValue('body')};
-      ${getTextSize('medium')};
-      font-feature-settings: 'ss08' on;
-    }
-
-    ${bodyElement} *,
-    ${bodyElement} *:before,
-    ${bodyElement} *:after {
-      box-sizing: border-box;
-    }
-
-    ${bodyElement} * {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      letter-spacing: calc(0.6px - 0.05em);
-    }
-
-    ${getThemeStylesString(rootElement)}
-
-    ${getAllCssVarsString(rootElement)}
-
-    ${cssUtilities()}
-  `;
-};
-const BaseStyles = () => React.createElement(Global, { styles: css(buildGlobalStylesheet()) });
-export default BaseStyles;
-export { BaseStyles, buildGlobalStylesheet };