@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/README.md

@@ -0,0 +1,26 @@
+# UI Kit for Cube Cloud
+
+## Available Scripts
+
+### yarn start
+
+Runs the test page in the development mode.
+Open http://localhost:8080 to view it in the browser.
+
+The page will reload if you make edits.
+You will also see any lint errors in the console.
+
+### yarn storybook
+
+Run storybook with all the components of UI Kit.
+
+Deployed version of the Storybook from the `main` branch is here: https://cube-uikit-storybook.netlify.app/ 
+
+### yarn build
+
+Builds a static copy of UIKit to the `dist/` folder.
+Your app is ready to be deployed!
+
+### yarn test
+
+Not yet implemented

package/dist/cjs/components/Base.js

@@ -0,0 +1,58 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Base = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const BreakpointsProvider_1 = require("../providers/BreakpointsProvider");
+const responsive_1 = require("../utils/responsive");
+const renderStyles_1 = require("../utils/renderStyles");
+const react_2 = require("../utils/react");
+const BLOCK_MAP = {
+    inline: 'block',
+    'inline-grid': 'grid',
+    'inline-flex': 'flex',
+};
+const INLINE_MAP = {
+    block: 'inline-block',
+    grid: 'inline-grid',
+    flex: 'inline-flex',
+};
+const BaseElement = styled_components_1.default.div(({ css }) => css);
+const Base = function Base(allProps, ref) {
+    let { as, styles: originalStyles, breakpoints, block, mods, inline, isHidden, isDisabled, qa, qaVal, css, element, ...props } = allProps;
+    const styles = { ...originalStyles };
+    if (block) {
+        styles.display =
+            typeof styles.display === 'string'
+                ? BLOCK_MAP[styles.display || 'inline']
+                : 'block';
+    }
+    if (inline) {
+        styles.display =
+            typeof styles.display === 'string'
+                ? INLINE_MAP[styles.display || 'block']
+                : 'inline-block';
+    }
+    const contextBreakpoints = (0, react_1.useContext)(BreakpointsProvider_1.BreakpointsContext);
+    const zones = (0, responsive_1.pointsToZones)(breakpoints || contextBreakpoints);
+    css = `${css ?? ''}${(0, renderStyles_1.renderStyles)(styles, zones)}`;
+    if (mods) {
+        Object.assign(props, (0, react_2.modAttrs)(mods));
+    }
+    return ((0, jsx_runtime_1.jsx)(BaseElement, { as: as, "data-element": element, "data-qa": qa, "data-qaval": qaVal, ...props, hidden: isHidden, disabled: isDisabled, ref: ref, css: css }, void 0));
+};
+const _Base = (0, react_1.forwardRef)(Base);
+exports.Base = _Base;
+
+        

package/dist/cjs/components/Block.js

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Block = exports.CUBE_BLOCK_STYLES = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const list_1 = require("../styles/list");
+const styles_1 = require("../utils/styles");
+const filterBaseProps_1 = require("../utils/filterBaseProps");
+const Base_1 = require("./Base");
+exports.CUBE_BLOCK_STYLES = {
+    display: 'block',
+};
+exports.Block = (0, react_1.forwardRef)((props, ref) => {
+    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, exports.CUBE_BLOCK_STYLES);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+});
+
+        

package/dist/cjs/components/GlobalStyles.js

@@ -0,0 +1,322 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalStyles = void 0;
+const tokens_1 = require("../tokens");
+const styled_components_1 = require("styled-components");
+const BODY_STYLES = {
+    'background-color': 'white !important',
+    'font-family': 'var(--font)',
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+    margin: '0',
+    padding: '0',
+    color: 'rgba(20, 20, 70, .75)',
+    'font-size': '14px',
+    'line-height': '20px',
+    'letter-spacing': '0.02em',
+    'font-weight': '400',
+};
+const fontsProvider = ({ publicUrl = '' }) => `
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(${publicUrl}/fonts/Inter-Regular.woff2) format('woff2'),
+      url(${publicUrl}/fonts/Inter-Regular.woff) format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(${publicUrl}/fonts/Inter-Medium.woff2) format('woff2'),
+      url(${publicUrl}/fonts/Inter-Medium.woff) format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url(${publicUrl}/fonts/Inter-SemiBold.woff2) format('woff2'),
+      url(${publicUrl}/fonts/Inter-SemiBold.woff) format('woff');
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(${publicUrl}/fonts/Inter-Bold.woff2) format('woff2'),
+      url(${publicUrl}/fonts/Inter-Bold.woff) format('woff');
+  }
+  @font-face {
+    font-family: 'Source Code Pro';
+    src: url('${publicUrl}/fonts/SourceCodePro-Regular.woff2') format('woff2'),
+      url('${publicUrl}/fonts/SourceCodePro-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(${publicUrl}/fonts/JetBrainsMono-Regular.woff2) format('woff2'),
+      url(${publicUrl}/fonts/JetBrainsMono-Regular.woff) format('woff');
+  }
+
+  @font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(${publicUrl}/fonts/JetBrainsMono-Bold.woff2) format('woff2'),
+      url(${publicUrl}/fonts/JetBrainsMono-Bold.woff) format('woff');
+  }
+`;
+exports.GlobalStyles = (0, styled_components_1.createGlobalStyle) `
+  body {
+    ${({ applyLegacyTokens }) => {
+    return applyLegacyTokens
+        ? Object.entries(tokens_1.TOKENS)
+            .map(([key, value]) => {
+            return `--${key}: ${value};`;
+        })
+            .join('\n    ')
+        : '';
+}}
+    ${({ bodyStyles }) => {
+    return Object.entries({ ...BODY_STYLES, ...bodyStyles })
+        .map(([key, value]) => {
+        return `${key}: ${value};`;
+    })
+        .join('\n    ');
+}}
+  }
+
+  html {
+    --font: ${({ font }) => font
+    || 'Inter'}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    --monospace-font: ${({ monospaceFont }) => `${monospaceFont ? `${monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;}`}
+
+  .cube-notification-container {
+    min-width: 288px;
+    max-width: 340px;
+    width: calc(100vw - 32px);
+    position: fixed;
+    top: 32px;
+    right: 16px;
+    z-index: 999999;
+  }
+
+  .cube-notifications {
+    display: grid;
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+  }
+
+  .cube-notification-enter {
+    opacity: 0;
+    max-height: 0px;
+    margin-bottom: 0px;
+    transform: translate(100%, 0);
+  }
+
+  .cube-notification-enter-active {
+    opacity: 1;
+    max-height: 56px;
+    margin-bottom: 8px;
+    transform: translate(0, 0);
+    transition: all 300ms ease-in;
+
+    & > * {
+      margin-bottom: 0px;
+    }
+  }
+
+  .cube-notification-exit {
+    opacity: 1;
+    margin-bottom: 8px;
+    max-height: 56px;
+    transform: translate(0, 0);
+  }
+
+  .cube-notification-exit-active {
+    opacity: 0;
+    max-height: 0px;
+    margin-bottom: 0px;
+    transform: translate(100%, 0);
+    transition: all 300ms ease-in;
+
+    & > * {
+      margin-bottom: 0px;
+    }
+  }
+
+  b {
+    font-weight: 600;
+  }
+
+  [type=reset], [type=submit], button, html [type=button] {
+    -webkit-appearance: none;
+  }
+
+  code {
+    font-family: var(--monospace-font);
+  }
+
+  ${({ fonts, publicUrl }) => fonts === false ? '' : fontsProvider({ publicUrl })}
+
+  // Prism Code
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: var(--dark-color);
+    background: none;
+    font-family: "Source Code Pro", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    text-align: left;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    border-radius: 4px;
+    border: none;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    /*background: #b3d4fc;*/
+  }
+
+  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+  code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    /*background: #b3d4fc;*/
+  }
+
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+
+  /* Code blocks */
+  pre[class*="language-"] {
+    overflow: auto;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: transparent;
+  }
+
+  /* Inline code */
+  :not(pre) > code[class*="language-"] {
+    border-radius: .3em;
+    white-space: normal;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: var(--dark-04-color);
+  }
+
+  .token.keyword,
+  .token.tag,
+  .token.operator,
+  .token.punctuation {
+    color: #993388;
+  }
+
+  .namespace {
+    opacity: .7;
+  }
+
+  .token.property,
+  .token.boolean,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: var(--pink-color);
+  }
+
+  .token.entity,
+  .token.number {
+    color: #30A666;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: var(--purple-text-color);
+  }
+
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: var(--dark-color);
+  }
+
+  .token.atrule,
+  .token.attr-value {
+    color: var(--dark-color);
+  }
+
+  .token.atrule,
+  .token.keyword {
+    font-weight: 500;
+  }
+
+  .token.function,
+  .token.class-name {
+    color: var(--pink-color);
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: var(--pink-color);
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+`;
+
+        

package/dist/cjs/components/GridProvider.js

@@ -0,0 +1,84 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const filterBaseProps_1 = require("../utils/filterBaseProps");
+const react_2 = require("../utils/react");
+const Base_1 = require("./Base");
+const DEFAULT_STYLES = {
+    display: 'contents',
+};
+const COLUMN_WIDTH = '((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
+exports.GridProvider = (0, react_1.forwardRef)((props, outerRef) => {
+    let ref = (0, react_2.useCombinedRefs)(outerRef);
+    let { children, columns = 2, gap = '0', width: forcedWidth, initialWidth, } = props;
+    let [width, setWidth] = (0, react_1.useState)(forcedWidth || initialWidth || '100vw');
+    const resizeCallback = (0, react_1.useCallback)(() => {
+        const el = ref?.current?.parentElement;
+        if (!el)
+            return;
+        const computedStyle = getComputedStyle(el);
+        const containerWidth = el.clientWidth
+            - parseFloat(computedStyle.paddingLeft)
+            - parseFloat(computedStyle.paddingRight);
+        setWidth(`${containerWidth}px`);
+    }, [ref, columns, gap]);
+    (0, react_1.useEffect)(() => {
+        if (forcedWidth)
+            return;
+        const el = ref && ref.current && ref.current.parentNode;
+        if (!el)
+            return;
+        let sensor;
+        Promise.resolve().then(() => __importStar(require('../utils/ResizeSensor'))).then((module) => module.ResizeSensor)
+            .then((ResizeSensor) => {
+            sensor = new ResizeSensor(el, resizeCallback);
+        });
+        return () => {
+            if (sensor) {
+                sensor.detach();
+            }
+        };
+    }, [resizeCallback]);
+    (0, react_1.useEffect)(() => {
+        if (forcedWidth)
+            return;
+        resizeCallback();
+    }, [resizeCallback]);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: {
+            ...DEFAULT_STYLES,
+            '--grid-width': width,
+            '--columns-amount': columns,
+            '--column-gap': gap,
+            '--column-width': COLUMN_WIDTH,
+        }, ref: ref, children: children }, void 0));
+});
+
+        

package/dist/cjs/components/HiddenInput.js

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HiddenInput = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.HiddenInput = styled_components_1.default.input `
+  &&&&& {
+    display: block;
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+    overflow: visible;
+    box-sizing: border-box;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0.0001;
+    z-index: 1;
+    cursor: ${({ isButton }) => (isButton ? 'pointer' : 'default')};
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+`;
+
+        

package/dist/cjs/components/OpenTrasition.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenTransition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Transition_1 = __importDefault(require("react-transition-group/Transition"));
+const OPEN_STATES = {
+    entering: false,
+    entered: true,
+};
+/**
+ * Timeout issues adding css animations to enter may be related to
+ * https://github.com/reactjs/react-transition-group/issues/189 or
+ * https://github.com/reactjs/react-transition-group/issues/22
+ * my VM isn't good enough to debug accurately and get a better answer.
+ *
+ * As a result, use enter 0 so that is-open is applied once entered
+ * it doesn't matter if we know when the css-animation is done on entering
+ * for exiting though, give time for the css-animation to play
+ * before removing from the DOM
+ * **note** hitting esc bypasses exit animation for anyone testing.
+ */
+function OpenTransition(props) {
+    return ((0, jsx_runtime_1.jsx)(Transition_1.default, { timeout: { enter: 0, exit: 350 }, ...props, children: (state) => react_1.Children.map(props.children, (child) => child && (0, react_1.cloneElement)(child, { isOpen: !!OPEN_STATES[state] })) }, void 0));
+}
+exports.OpenTransition = OpenTransition;
+
+        

package/dist/cjs/components/Root.js

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Root = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const GlobalStyles_1 = require("./GlobalStyles");
+const Base_1 = require("./Base");
+const portal_1 = require("./portal");
+const list_1 = require("../styles/list");
+const styles_1 = require("../utils/styles");
+const filterBaseProps_1 = require("../utils/filterBaseProps");
+const provider_1 = require("../provider");
+const overlays_1 = require("@react-aria/overlays");
+const styled_components_1 = require("styled-components");
+const tokens_1 = require("../tokens");
+const AlertDialog_1 = require("./overlays/AlertDialog");
+const DEFAULT_STYLES = {
+    display: 'block',
+    preset: 't3',
+    ...Object.keys(tokens_1.TOKENS).reduce((map, key) => {
+        map[`@${key}`] = tokens_1.TOKENS[key];
+        return map;
+    }, {}),
+};
+const STYLES = [...list_1.BASE_STYLES, ...list_1.BLOCK_STYLES];
+const Root = (allProps) => {
+    let { children, 
+    /** Raw css styles for body element */
+    bodyStyles, fonts, publicUrl, router, font, monospaceFont, applyLegacyTokens, ...props } = allProps;
+    const ref = (0, react_1.useRef)(null);
+    const [rootRef, setRootRef] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (!rootRef) {
+            // @ts-ignore
+            setRootRef(ref?.current);
+        }
+    }, []);
+    const styles = (0, styles_1.extractStyles)(props, STYLES, DEFAULT_STYLES);
+    return ((0, jsx_runtime_1.jsx)(provider_1.Provider, { router: router, root: rootRef, children: (0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { disableVendorPrefixes: true, children: (0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: ref, id: "cube-ui-kit-root", className: "root", ...(0, filterBaseProps_1.filterBaseProps)(props, { eventProps: true }), styles: styles, children: [(0, jsx_runtime_1.jsx)(GlobalStyles_1.GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont }, void 0), (0, jsx_runtime_1.jsx)(portal_1.PortalProvider, { value: ref, children: (0, jsx_runtime_1.jsx)(AlertDialog_1.AlertDialogApiProvider, { children: (0, jsx_runtime_1.jsx)(overlays_1.ModalProvider, { children: children }, void 0) }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
+};
+exports.Root = Root;
+
+