@via-profit/ui-kit 0.3.0 → 0.5.0

package/Button/buttonVariants.js

@@ -0,0 +1,168 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariantStyles = void 0;
+const react_1 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const parseColor = (color, fallback) => {
+    try {
+        return Color_1.default.fromString(color);
+    }
+    catch (err) {
+        console.error(`invalid color value «${color}»`);
+        return fallback;
+    }
+};
+/**
+ * Text and background colors of the standard variant
+ */
+const getStandardColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return {
+                $color: theme.color.accentSecondaryContrast,
+                $background: theme.color.accentSecondary,
+            };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return { $background: theme.color.surface, $color: theme.color.textPrimary };
+        default: {
+            const $background = parseColor(String(color), theme.color.surface);
+            return {
+                $background,
+                $color: $background.getContrast(theme.color.textPrimary) > 5
+                    ? theme.color.textPrimary
+                    : theme.color.surface,
+            };
+        }
+    }
+};
+/**
+ * The main color of the outlined and plain variants (text and border)
+ */
+const getAccentColor = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return theme.color.accentPrimary;
+        case color === 'secondary':
+            return theme.color.accentSecondary;
+        case typeof color === 'undefined':
+        case color === 'default':
+            return theme.color.textPrimary;
+        default:
+            return parseColor(String(color), theme.color.textPrimary);
+    }
+};
+const focusOutlineColor = (color, theme) => color.rgbString() === theme.color.accentPrimary.rgbString()
+    ? theme.color.textPrimary.toString()
+    : theme.color.accentPrimary.toString();
+const standardStyles = ({ $color, $background, disabled, theme }) => (0, react_1.css) `
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background-color: ${disabled
+    ? $background.darken(40).toString()
+    : $background.darken(10).toString()};
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      background-color: ${$background.darken(30).toString()};
+    }
+    &:active {
+      background-color: ${$background.darken(80).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($background, theme)};
+    }
+  `}
+`;
+const outlinedStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
+  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
+  border-color: ${disabled
+    ? theme.color.surface.darken(80).alpha(0.4).toString()
+    : $color.toString()};
+  background-color: transparent;
+  border-style: solid;
+  border-width: 0.14em;
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      background-color: ${$color.darken(20).alpha(0.1).toString()};
+    }
+    &:active {
+      background-color: ${$color.darken(50).alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+const plainStyles = ({ $color, disabled, theme }) => (0, react_1.css) `
+  box-shadow: none;
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.toString()};
+  background: none;
+
+  ${!disabled &&
+    (0, react_1.css) `
+    &:hover {
+      color: ${$color.darken(30).toString()};
+      background-color: ${$color.alpha(0.1).toString()};
+    }
+    &:active {
+      color: ${$color.darken(80).toString()};
+      background-color: ${$color.alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
+/**
+ * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
+ * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
+ */
+const groupStyles = ({ $group, $variant, $color }) => $group &&
+    (0, react_1.css) `
+    border-style: solid;
+    border-width: 0.14em;
+    ${$variant !== 'outlined' &&
+        (0, react_1.css) `
+      border-color: transparent;
+    `}
+    ${$variant === 'standard' &&
+        (0, react_1.css) `
+      [data-group-variant='standard'] + & {
+        ${$group === 'vertical' ? 'border-top-color' : 'border-left-color'}: ${$color
+            .alpha(0.25)
+            .toString()};
+      }
+    `}
+  `;
+/**
+ * The styles of the variant. They are applied inside the Container part,
+ * so the theme styles and the `styled(ButtonContainer)` of the user go after them and win
+ */
+const buttonVariantStyles = (params) => {
+    const { variant, color, disabled, group, theme } = params;
+    const colors = variant === 'standard'
+        ? getStandardColors(color, theme)
+        : { $color: getAccentColor(color, theme), $background: getAccentColor(color, theme) };
+    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, disabled, theme });
+    return (0, react_1.css) `
+    ${variant === 'outlined'
+        ? outlinedStyles(props)
+        : variant === 'plain'
+            ? plainStyles(props)
+            : standardStyles(props)}
+    ${groupStyles(props)}
+  `;
+};
+exports.buttonVariantStyles = buttonVariantStyles;

package/Button/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { ButtonStandardProps } from './ButtonStandard';
-import { ButtonOutlinedProps } from './ButtonOutlined';
-import { ButtonPlainProps } from './ButtonPlain';
+import type { ButtonStandardProps } from './ButtonStandard';
+import type { ButtonOutlinedProps } from './ButtonOutlined';
+import type { ButtonPlainProps } from './ButtonPlain';
 export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps | ButtonPlainProps) & {
     /**
      * Button style variant\
-     * Allowed variants: `standard` ,`outlined` or `plain`\
+     * Allowed variants: `standard`, `outlined` or `plain`\
      * \
      * **Default**: `standard`
      */
@@ -14,7 +14,7 @@ export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps | ButtonPla
 declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").ButtonBaseProps & {
     /**
      * Button style variant\
-     * Allowed variants: `standard` ,`outlined` or `plain`\
+     * Allowed variants: `standard`, `outlined` or `plain`\
      * \
      * **Default**: `standard`
      */

package/Button/index.js

@@ -1,31 +1,29 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const ButtonStandard_1 = __importDefault(require("./ButtonStandard"));
-const ButtonOutlined_1 = __importDefault(require("./ButtonOutlined"));
-const ButtonPlain_1 = __importDefault(require("./ButtonPlain"));
+const ButtonStyled_1 = __importDefault(require("./ButtonStyled"));
+const ButtonGroupContext_1 = __importDefault(require("../ButtonGroup/ButtonGroupContext"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+/**
+ * The props the ButtonGroup gives to its buttons. Inside the group the theme does not set them:
+ * the own props of the button win, then the group, then the theme
+ */
+const GROUP_PROPS = ['variant', 'color', 'disabled'];
+// One component for all the variants, so changing the variant does not remount the button
 const Button = (props, ref) => {
-    const { variant } = props, buttonProps = __rest(props, ["variant"]);
-    if (variant === 'outlined') {
-        return react_1.default.createElement(ButtonOutlined_1.default, Object.assign({}, buttonProps, { ref: ref }));
-    }
-    if (variant === 'plain') {
-        return react_1.default.createElement(ButtonPlain_1.default, Object.assign({}, buttonProps, { ref: ref }));
+    const group = react_1.default.useContext(ButtonGroupContext_1.default);
+    const themedProps = (0, useThemeProps_1.default)('Button', props);
+    if (!group) {
+        return react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, themedProps, { ref: ref }));
     }
-    return react_1.default.createElement(ButtonStandard_1.default, Object.assign({}, buttonProps, { ref: ref }));
+    const ownProps = props;
+    const buttonProps = Object.assign({}, themedProps);
+    GROUP_PROPS.forEach(key => {
+        buttonProps[key] = ownProps[key];
+    });
+    return react_1.default.createElement(ButtonStyled_1.default, Object.assign({}, buttonProps, { ref: ref }));
 };
 exports.default = react_1.default.forwardRef(Button);

package/ButtonGroup/ButtonGroupContext.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ButtonVariant } from '../Button/ButtonStyled';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+export type ButtonGroupContextValue = {
+    readonly variant: ButtonVariant;
+    readonly color?: string;
+    readonly selectedColor: string;
+    readonly disabled?: boolean;
+    readonly orientation: ButtonGroupOrientation;
+    /**
+     * `true` when the group has the selection (value, defaultValue or onChange is passed)
+     */
+    readonly selectable: boolean;
+    readonly isSelected: (value: string) => boolean;
+    readonly toggle: (value: string) => void;
+};
+/**
+ * Buttons inside the ButtonGroup read the common props and the selection from this context
+ */
+declare const ButtonGroupContext: React.Context<ButtonGroupContextValue | null>;
+export default ButtonGroupContext;

package/ButtonGroup/ButtonGroupContext.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * Buttons inside the ButtonGroup read the common props and the selection from this context
+ */
+const ButtonGroupContext = react_1.default.createContext(null);
+exports.default = ButtonGroupContext;

package/ButtonGroup/index.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { ButtonVariant } from '../Button/ButtonStyled';
+import { ButtonGroupOrientation } from './ButtonGroupContext';
+export type { ButtonGroupOrientation };
+type ButtonGroupSelectionSingle = {
+    /**
+     * Only one button can be selected
+     */
+    readonly multiple?: false;
+    /**
+     * The value of the selected button (controlled)
+     */
+    readonly value?: string | null;
+    /**
+     * The value of the initially selected button (uncontrolled)
+     */
+    readonly defaultValue?: string | null;
+    /**
+     * Called with the value of the new selected button
+     */
+    readonly onChange?: (value: string | null) => void;
+};
+type ButtonGroupSelectionMultiple = {
+    /**
+     * Several buttons can be selected
+     */
+    readonly multiple: true;
+    /**
+     * The values of the selected buttons (controlled)
+     */
+    readonly value?: readonly string[];
+    /**
+     * The values of the initially selected buttons (uncontrolled)
+     */
+    readonly defaultValue?: readonly string[];
+    /**
+     * Called with the values of the selected buttons
+     */
+    readonly onChange?: (value: string[]) => void;
+};
+export type ButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'color'> & (ButtonGroupSelectionSingle | ButtonGroupSelectionMultiple) & {
+    /**
+     * The variant of the buttons. In the selection mode — of the not selected buttons\
+     * **Default:** `outlined`
+     */
+    readonly variant?: ButtonVariant;
+    /**
+     * The color of the buttons. In the selection mode — of the not selected buttons\
+     * **Default:** `default`
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * The color of the selected buttons. The selected button is always the `standard` variant\
+     * **Default:** `primary`
+     */
+    readonly selectedColor?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Disables all the buttons
+     */
+    readonly disabled?: boolean;
+    /**
+     * **Default:** `horizontal`
+     */
+    readonly orientation?: ButtonGroupOrientation;
+    /**
+     * The group takes the full width, the buttons share it equally
+     */
+    readonly fullWidth?: boolean;
+    /**
+     * Single selection only: clicking the selected button clears the selection\
+     * **Default:** `false`
+     */
+    readonly deselectable?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/ButtonGroup/index.js

@@ -0,0 +1,132 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const ButtonGroupContext_1 = __importDefault(require("./ButtonGroupContext"));
+/**
+ * The buttons are glued: the inner corners are square and the borders overlap.
+ * `:not(...)` raises the specificity above the own styles of the button.
+ * `-of-type`, not `-child`: with SSR emotion inserts <style> elements between the children
+ */
+const StyledGroup = styled_1.default.div `
+  display: ${({ $fullWidth }) => ($fullWidth ? 'flex' : 'inline-flex')};
+  flex-direction: ${({ $orientation }) => ($orientation === 'vertical' ? 'column' : 'row')};
+  vertical-align: middle;
+
+  & > * {
+    position: relative;
+  }
+
+  & > *:hover,
+  & > [aria-pressed='true'] {
+    z-index: 1;
+  }
+
+  & > *:focus-visible {
+    z-index: 2;
+  }
+
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? (0, react_2.css) `
+          & > *:not(:first-of-type) {
+            margin-top: -0.14em;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+          }
+          & > *:not(:last-of-type) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        `
+    : (0, react_2.css) `
+          & > *:not(:first-of-type) {
+            margin-left: -0.14em;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+          & > *:not(:last-of-type) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        `}
+
+  ${({ $fullWidth, $orientation }) => $fullWidth &&
+    (0, react_2.css) `
+      & > * {
+        ${$orientation === 'vertical' ? 'width: 100%;' : 'flex: 1 1 0; justify-content: center;'}
+      }
+    `}
+`;
+const toArray = (value) => {
+    if (typeof value === 'undefined' || value === null) {
+        return [];
+    }
+    return typeof value === 'string' ? [value] : value;
+};
+const ButtonGroup = (props, ref) => {
+    const { children, multiple, value, defaultValue, onChange, variant = 'outlined', color, selectedColor = 'primary', disabled, orientation = 'horizontal', fullWidth = false, deselectable = false } = props, nativeProps = __rest(props, ["children", "multiple", "value", "defaultValue", "onChange", "variant", "color", "selectedColor", "disabled", "orientation", "fullWidth", "deselectable"]);
+    const selectable = typeof value !== 'undefined' ||
+        typeof defaultValue !== 'undefined' ||
+        typeof onChange !== 'undefined';
+    const isControlled = typeof value !== 'undefined';
+    const [internalValue, setInternalValue] = react_1.default.useState(() => toArray(defaultValue));
+    const selected = isControlled ? toArray(value) : internalValue;
+    // The latest values for the toggle callback, so the context value does not change on every render
+    const latest = react_1.default.useRef({ selected, multiple, deselectable, isControlled, onChange });
+    latest.current = { selected, multiple, deselectable, isControlled, onChange };
+    const toggle = react_1.default.useCallback((buttonValue) => {
+        var _a;
+        const { selected, multiple, deselectable, isControlled, onChange } = latest.current;
+        const isSelected = selected.includes(buttonValue);
+        let next;
+        if (multiple) {
+            next = isSelected
+                ? selected.filter(item => item !== buttonValue)
+                : [...selected, buttonValue];
+        }
+        else {
+            if (isSelected && !deselectable) {
+                return;
+            }
+            next = isSelected ? [] : [buttonValue];
+        }
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        if (multiple) {
+            onChange === null || onChange === void 0 ? void 0 : onChange([...next]);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange((_a = next[0]) !== null && _a !== void 0 ? _a : null);
+        }
+    }, []);
+    const selectedKey = selected.join('\u0000');
+    const contextValue = react_1.default.useMemo(() => ({
+        variant,
+        color,
+        selectedColor,
+        disabled,
+        orientation,
+        selectable,
+        isSelected: buttonValue => selectedKey !== '' && selectedKey.split('\u0000').includes(buttonValue),
+        toggle,
+    }), [variant, color, selectedColor, disabled, orientation, selectable, selectedKey, toggle]);
+    return (react_1.default.createElement(ButtonGroupContext_1.default.Provider, { value: contextValue },
+        react_1.default.createElement(StyledGroup, Object.assign({ role: "group" }, nativeProps, { "$orientation": orientation, "$fullWidth": fullWidth, ref: ref }), children)));
+};
+exports.default = react_1.default.forwardRef(ButtonGroup);