@broxus/react-uikit 0.1.0

package/dist/esm/components/ConfrigProvider/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { BreakpointsConfig } from '../../types';
+export declare type ColorMode = 'light' | 'dark';
+export declare type ConfigContextConsumerProps = {
+    breakpoints?: Exclude<BreakpointsConfig<number>, 'default'>;
+    cardPrimaryColorMode?: ColorMode;
+    cardSecondaryColorMode?: ColorMode;
+    cardTertiaryColorMode?: ColorMode;
+    direction?: string;
+    inverseGlobalColorMode?: ColorMode;
+    prefixCls: string;
+    sectionPrimaryColorMode?: ColorMode;
+    sectionSecondaryColorMode?: ColorMode;
+    sectionTertiaryColorMode?: ColorMode;
+    tilePrimaryColorMode?: ColorMode;
+    tileSecondaryColorMode?: ColorMode;
+    tileTertiaryColorMode?: ColorMode;
+    [k: string]: any;
+};
+export interface ConfigContextProviderProps extends ConfigContextConsumerProps {
+    children: React.ReactNode | React.ReactNode[];
+}
+export declare const ConfigContext: React.Context<ConfigContextConsumerProps>;
+export declare function useConfig(): ConfigContextConsumerProps;
+export declare function ConfigContextProvider(props: Partial<ConfigContextProviderProps>): JSX.Element;

package/dist/esm/components/ConfrigProvider/index.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export const ConfigContext = React.createContext({
+    breakpoints: {
+        l: 960,
+        m: 768,
+        s: 480,
+        xl: 1200,
+        xs: 320,
+    },
+    // cardPrimaryColorMode: 'light',
+    // cardSecondaryColorMode: 'light',
+    // cardTertiaryColorMode: 'light',
+    // inverseGlobalColorMode: 'light',
+    prefixCls: 'uk',
+    // sectionPrimaryColorMode: 'light',
+    // sectionSecondaryColorMode: 'light',
+    // sectionTertiaryColorMode: 'light',
+    // tilePrimaryColorMode: 'light',
+    // tileSecondaryColorMode: 'light',
+    // tileTertiaryColorMode: 'light',
+});
+export function useConfig() {
+    return React.useContext(ConfigContext);
+}
+export function ConfigContextProvider(props) {
+    const { children, ...restProps } = props;
+    const context = React.useMemo(() => ({
+        ...useConfig(),
+        direction: document.dir,
+        ...restProps,
+    }), [restProps]);
+    return (React.createElement(ConfigContext.Provider, { value: context }, children));
+}

package/dist/esm/components/Container/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export interface ContainerOwnProps {
+    expandLeft?: boolean;
+    expandRight?: boolean;
+    size?: 'xsmall' | 'small' | 'large' | 'xlarge' | 'expand';
+}
+export declare type ContainerProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, ContainerOwnProps>;
+declare const defaultElement = "div";
+export declare function Container<E extends React.ElementType = typeof defaultElement>(props: ContainerProps<E>): JSX.Element;
+export {};

package/dist/esm/components/Container/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import './index.scss';
+const defaultElement = 'div';
+export function Container(props) {
+    const { className, expandLeft, expandRight, size, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames('uk-container', {
+            [`uk-container-${size}`]: size !== undefined,
+            'uk-container-expand-left': expandLeft,
+            'uk-container-expand-right': expandRight,
+        }, className), component: defaultElement, ...restProps }));
+}

package/dist/esm/components/Container/index.scss

@@ -0,0 +1,234 @@
+// Name:            Container
+// Description:     Component to align and center your site and grid content
+//
+// Component:       `uk-container`
+//
+// Modifier:        `uk-container-xsmall`
+//                  `uk-container-small`
+//                  `uk-container-large`
+//                  `uk-container-xlarge`
+//                  `uk-container-expand`
+//                  `uk-container-expand-left`
+//                  `uk-container-expand-right`
+//                  `uk-container-item-padding-remove-left`
+//                  `uk-container-item-padding-remove-right`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Container
+ ========================================================================== */
+
+/*
+ * 1. Box sizing has to be `content-box` so the max-width is always the same and
+ *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
+ */
+
+.uk-container {
+    /* 1 */
+    box-sizing: content-box;
+    display: flow-root;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--container-max-width);
+    padding-left: var(--container-padding-horizontal);
+    padding-right: var(--container-padding-horizontal);
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+    .uk-container {
+        padding-left: var(--container-padding-horizontal-s);
+        padding-right: var(--container-padding-horizontal-s);
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-container {
+        padding-left: var(--container-padding-horizontal-m);
+        padding-right: var(--container-padding-horizontal-m);
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-container > :last-child {
+    margin-bottom: 0;
+}
+
+/*
+ * Remove padding from nested containers
+ */
+
+.uk-container .uk-container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-container-xsmall {
+    max-width: var(--container-xsmall-max-width);
+}
+
+.uk-container-small {
+    max-width: var(--container-small-max-width);
+}
+
+.uk-container-large {
+    max-width: var(--container-large-max-width);
+}
+
+.uk-container-xlarge {
+    max-width: var(--container-xlarge-max-width);
+}
+
+.uk-container-expand {
+    max-width: none;
+}
+
+
+/* Expand modifier
+ ========================================================================== */
+
+/*
+ * Expand one side only
+ */
+
+.uk-container-expand-left {
+    margin-left: 0;
+}
+
+.uk-container-expand-right {
+    margin-right: 0;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+    .uk-container-expand-left.uk-container-xsmall,
+    .uk-container-expand-right.uk-container-xsmall {
+        max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-s));
+    }
+
+    .uk-container-expand-left.uk-container-small,
+    .uk-container-expand-right.uk-container-small {
+        max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-s));
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-container-expand-left,
+    .uk-container-expand-right {
+        max-width: calc(50% + (var(--container-max-width) / 2) - var(--container-padding-horizontal-m));
+    }
+
+    .uk-container-expand-left.uk-container-xsmall,
+    .uk-container-expand-right.uk-container-xsmall {
+        max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal-m));
+    }
+
+    .uk-container-expand-left.uk-container-small,
+    .uk-container-expand-right.uk-container-small {
+        max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal-m));
+    }
+
+    .uk-container-expand-left.uk-container-large,
+    .uk-container-expand-right.uk-container-large {
+        max-width: calc(50% + (var(--container-large-max-width) / 2) - var(--container-padding-horizontal-m));
+    }
+
+    .uk-container-expand-left.uk-container-xlarge,
+    .uk-container-expand-right.uk-container-xlarge {
+        max-width: calc(50% + (var(--container-xlarge-max-width) / 2) - var(--container-padding-horizontal-m));
+    }
+}
+
+
+/* Item
+ ========================================================================== */
+
+/*
+ * Utility classes to reset container padding on the left or right side
+ * Note: It has to be negative margin on the item, because it's specific to the item.
+ */
+
+.uk-container-item-padding-remove-left,
+.uk-container-item-padding-remove-right {
+    width: calc(100% + var(--container-padding-horizontal));
+}
+
+.uk-container-item-padding-remove-left {
+    margin-left: calc(var(--container-padding-horizontal) * -1);
+}
+
+.uk-container-item-padding-remove-right {
+    margin-right: calc(var(--container-padding-horizontal) * -1);
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+    .uk-container-item-padding-remove-left,
+    .uk-container-item-padding-remove-right {
+        width: calc(100% + var(--container-padding-horizontal-s));
+    }
+
+    .uk-container-item-padding-remove-left {
+        margin-left: calc(var(--container-padding-horizontal-s) * -1);
+    }
+
+    .uk-container-item-padding-remove-right {
+        margin-right: calc(var(--container-padding-horizontal-s) * -1);
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-container-item-padding-remove-left,
+    .uk-container-item-padding-remove-right {
+        width: calc(100% + var(--container-padding-horizontal-m));
+    }
+
+    .uk-container-item-padding-remove-left {
+        margin-left: calc(var(--container-padding-horizontal-m) * -1);
+    }
+
+    .uk-container-item-padding-remove-right {
+        margin-right: calc(var(--container-padding-horizontal-m) * -1);
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-container-misc) {
+    @include hook-container-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --container-max-width: #{$container-max-width};
+    --container-xsmall-max-width: #{$container-xsmall-max-width};
+    --container-small-max-width: #{$container-small-max-width};
+    --container-large-max-width: #{$container-large-max-width};
+    --container-xlarge-max-width: #{$container-xlarge-max-width};
+    --container-padding-horizontal: #{$container-padding-horizontal};
+    --container-padding-horizontal-s: var(--global-gutter);
+    --container-padding-horizontal-m: var(--global-medium-gutter);
+}

package/dist/esm/components/Control/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { CheckboxProps } from './types';
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Control/Checkbox/Checkbox.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import RcCheckbox from 'rc-checkbox';
+import { useConfig } from '../../ConfrigProvider';
+import { useCheckboxGroup } from './Context';
+export const Checkbox = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const checkboxGroup = useCheckboxGroup();
+    const { block, children, className, direction = config.direction, prefixCls = config.prefixCls, size, skipGroup, style, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const prevValue = React.useRef(restProps.value);
+    const [internalChecked, setInternalChecked,] = React.useState(restProps.checked || restProps.defaultChecked);
+    const onChange = (event) => {
+        setInternalChecked(!internalChecked);
+        restProps.onChange?.(event);
+    };
+    React.useEffect(() => {
+        checkboxGroup?.registerValue(restProps.value);
+    }, []);
+    React.useEffect(() => {
+        if (skipGroup) {
+            return;
+        }
+        if (restProps.value !== prevValue.current) {
+            checkboxGroup?.cancelValue(prevValue.current);
+            checkboxGroup?.registerValue(restProps.value);
+        }
+        // eslint-disable-next-line consistent-return
+        return () => checkboxGroup?.cancelValue(restProps.value);
+    }, [restProps.value]);
+    React.useEffect(() => {
+        setInternalChecked(restProps.checked || restProps.defaultChecked);
+    }, [restProps.checked, restProps.defaultChecked]);
+    const checkboxProps = React.useMemo(() => ({
+        ...restProps,
+        checked: internalChecked,
+        onChange,
+    }), [restProps, internalChecked]);
+    if (checkboxGroup && !skipGroup) {
+        checkboxProps.onChange = (...args) => {
+            onChange(...args);
+            checkboxGroup.toggleOption?.({
+                label: children,
+                value: restProps.value,
+            });
+        };
+        checkboxProps.checked = checkboxGroup.value?.indexOf(restProps.value) > -1;
+        checkboxProps.disabled = restProps.disabled || checkboxGroup.disabled;
+        checkboxProps.name = checkboxGroup.name;
+    }
+    const rootPrefixCls = React.useMemo(() => `${prefixCls}-checkbox`, [prefixCls]);
+    const controlPrefixCls = React.useMemo(() => `${prefixCls}-control`, [prefixCls]);
+    const wrapperClasses = React.useMemo(() => classNames({
+        [controlPrefixCls]: block,
+        [`${controlPrefixCls}-checkbox`]: block,
+        [`${controlPrefixCls}-${size}`]: block && size,
+        [`${rootPrefixCls}-wrapper`]: true,
+        [`${rootPrefixCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls}-checked`]: internalChecked,
+        [`${prefixCls}-disabled`]: checkboxProps.disabled,
+    }, className), [checkboxProps, block, size, direction]);
+    const checkboxClasses = React.useMemo(() => classNames({
+        [`${rootPrefixCls}-indeterminate`]: checkboxProps.indeterminate,
+    }), [checkboxProps.indeterminate, rootPrefixCls]);
+    return (React.createElement("label", { className: wrapperClasses, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+        React.createElement(RcCheckbox, { ...checkboxProps, prefixCls: rootPrefixCls, className: checkboxClasses, 
+            // @ts-ignore
+            ref: ref }),
+        children !== undefined && (React.createElement("span", { className: `${rootPrefixCls}-label` }, children))));
+});
+Checkbox.displayName = 'Checkbox';

package/dist/esm/components/Control/Checkbox/Context.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { CheckboxGroupConsumerProps } from './types';
+export declare const Context: React.Context<CheckboxGroupConsumerProps | null>;
+export declare function useCheckboxGroup(): CheckboxGroupConsumerProps | null;

package/dist/esm/components/Control/Checkbox/Context.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const Context = React.createContext(null);
+export function useCheckboxGroup() {
+    return React.useContext(Context);
+}

package/dist/esm/components/Control/Checkbox/Group.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { CheckboxGroupProps } from './types';
+export declare const Group: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Control/Checkbox/Group.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Checkbox } from './Checkbox';
+import { Context } from './Context';
+export const Group = React.forwardRef((props, ref) => {
+    const { block, children, className, defaultValue, direction, options = [], size, stack, style, onChange, ...restProps } = props;
+    const [value, setValue] = React.useState(restProps.value || defaultValue || []);
+    const [registeredValues, setRegisteredValues] = React.useState([]);
+    const getOptions = React.useCallback(() => options?.map((option) => {
+        if (typeof option === 'string') {
+            return {
+                label: option,
+                value: option,
+            };
+        }
+        return option;
+    }), [options]);
+    const cancelValue = React.useCallback((val) => {
+        setRegisteredValues(prevValues => prevValues.filter(v => v !== val));
+    }, [registeredValues]);
+    const registerValue = React.useCallback((val) => {
+        setRegisteredValues(prevValues => [...prevValues, val]);
+    }, [registeredValues]);
+    const toggleOption = (option) => {
+        const optionIndex = value.indexOf(option.value);
+        const newValue = [...value];
+        if (optionIndex === -1) {
+            newValue.push(option.value);
+        }
+        else {
+            newValue.splice(optionIndex, 1);
+        }
+        if (!('value' in restProps)) {
+            setValue(newValue);
+        }
+        const opts = getOptions();
+        onChange?.(newValue.filter(val => registeredValues.indexOf(val) !== -1)
+            .sort((a, b) => {
+            const indexA = opts.findIndex(opt => opt.value === a);
+            const indexB = opts.findIndex(opt => opt.value === b);
+            return indexA - indexB;
+        }));
+    };
+    React.useEffect(() => {
+        if ('value' in restProps) {
+            setValue(restProps.value || []);
+        }
+    }, [restProps.value]);
+    const checkboxGroupClasses = React.useMemo(() => classNames('uk-checkbox-group', {
+        'uk-checkbox-group-rtl': direction === 'rtl',
+        'uk-checkbox-group-stack': stack,
+    }, className), [direction, stack]);
+    const context = React.useMemo(() => ({
+        cancelValue,
+        disabled: restProps.disabled,
+        name: restProps.name,
+        registerValue,
+        toggleOption,
+        value,
+    }), [
+        cancelValue,
+        restProps.disabled,
+        restProps.name,
+        registerValue,
+        toggleOption,
+        value,
+    ]);
+    return (React.createElement("div", { className: checkboxGroupClasses, style: style, ...restProps, ref: ref },
+        React.createElement(Context.Provider, { value: context }, options?.length > 0 ? getOptions().map(option => (React.createElement(Checkbox, { key: option.value.toString(), block: block, checked: value.indexOf(option.value) > -1, direction: direction, disabled: 'disabled' in option ? option.disabled : restProps.disabled, size: size, value: option.value, className: "uk-checkbox-group-item", style: option.style, onChange: option.onChange }, option.label))) : children)));
+});
+Group.displayName = 'Checkbox.Group';

package/dist/esm/components/Control/Checkbox/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Group } from './Group';
+import type { CheckboxProps } from './types';
+import './index.scss';
+export * from './types';
+export interface CompoundedCheckbox extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
+    Group: typeof Group;
+}
+export declare const Checkbox: CompoundedCheckbox;

package/dist/esm/components/Control/Checkbox/index.js

@@ -0,0 +1,6 @@
+import { Checkbox as InternalCheckbox } from './Checkbox';
+import { Group } from './Group';
+import './index.scss';
+export * from './types';
+export const Checkbox = InternalCheckbox;
+Checkbox.Group = Group;