@uni-design-system/uni-react 0.0.18 → 1.0.0

package/dist/esm/core/border/border.style.js

@@ -1,26 +0,0 @@
-import { getValue } from '@uni-design-system/uni-core';
-export function BorderStyle(border, theme) {
-    if (!border)
-        return {};
-    const borderTopColor = extractColor(theme, border, 'colorTop');
-    const borderBottomColor = extractColor(theme, border, 'colorBottom');
-    const borderLeftColor = extractColor(theme, border, 'colorLeft');
-    const borderRightColor = extractColor(theme, border, 'colorRight');
-    const borderTopWidth = getValue(border, 'widthTop', 'width');
-    const borderBottomWidth = getValue(border, 'widthBottom', 'width');
-    const borderLeftWidth = getValue(border, 'widthLeft', 'width');
-    const borderRightWidth = getValue(border, 'widthRight', 'width');
-    return {
-        borderTopColor,
-        borderBottomColor,
-        borderLeftColor,
-        borderRightColor,
-        borderTopWidth,
-        borderBottomWidth,
-        borderLeftWidth,
-        borderRightWidth,
-    };
-}
-function extractColor(theme, border, key) {
-    return theme.colors[getValue(border, key, 'color')];
-}

package/dist/esm/core/border/index.d.ts

@@ -1 +0,0 @@
-export * from './border.style';

package/dist/esm/core/border/index.js

@@ -1 +0,0 @@
-export * from './border.style';

package/dist/esm/core/container/container.component.d.ts

@@ -1,6 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-export interface ContainerProps {
-    children: ReactNode;
-    style: CSSProperties;
-}
-export default function Container({ children, style, ...rest }: ContainerProps): JSX.Element;

package/dist/esm/core/container/container.component.js

@@ -1,16 +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';
-export default function Container(_a) {
-    var { children, style } = _a, rest = __rest(_a, ["children", "style"]);
-    return (React.createElement("div", Object.assign({ style: style }, rest), children));
-}

package/dist/esm/core/container/index.js

@@ -1 +0,0 @@
-export * from './container.component';

package/dist/esm/core/filter/filter.argTypes.js

@@ -1,101 +0,0 @@
-// https://www.w3schools.com/csSref/css3_pr_filter.php
-export const filterArgTypes = {
-    blur: {
-        control: { type: 'range', min: 0, max: 100, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Applies a blur effect to the image. A larger value will create more blur.\n' +
-            '\n' +
-            'If no value is specified, 0 is used.',
-    },
-    brightness: {
-        control: { type: 'range', min: 0, max: 100, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Adjusts the brightness of the image.\n' +
-            '\n' +
-            '0% will make the image completely black.\n' +
-            '100% (1) is default and represents the original image.\n' +
-            'Values over 100% will provide brighter results.',
-    },
-    contrast: {
-        control: { type: 'range', min: 0, max: 100, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Adjusts the contrast of the image.\n' +
-            '\n' +
-            '0% will make the image completely black.\n' +
-            '100% (1) is default, and represents the original image.\n' +
-            'Values over 100% will provide results with more contrast.',
-    },
-    grayscale: {
-        control: { type: 'range', min: 0, max: 100, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Converts the image to grayscale.\n' +
-            '\n' +
-            '0% (0) is default and represents the original image.\n' +
-            '100% will make the image completely gray (used for black and white images).',
-    },
-    'hue-rotate': {
-        control: { type: 'range', min: 0, max: 360, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.',
-    },
-    invert: {
-        control: { type: 'range', min: 0, max: 100, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Inverts the samples in the image.\n' +
-            '\n' +
-            '0% (0) is default and represents the original image.\n' +
-            '100% will make the image completely inverted.',
-    },
-    opacity: {
-        control: { type: 'range', min: 0, max: 1, step: 0.01 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '1' },
-        },
-        description: 'Sets the opacity level for the image. The opacity-level describes the transparency-level, where:\n' +
-            '\n' +
-            '0% is completely transparent.\n' +
-            '100% (1) is default and represents the original image (no transparency).',
-    },
-    saturate: {
-        control: { type: 'range', min: 0, max: 100, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Saturates the image.\n' +
-            '\n' +
-            '0% (0) will make the image completely un-saturated.\n' +
-            '100% is default and represents the original image.\n' +
-            'Values over 100% provides super-saturated results.',
-    },
-    sepia: {
-        control: { type: 'range', min: 0, max: 100, step: 1 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'Converts the image to sepia.\n' +
-            '\n' +
-            '0% (0) is default and represents the original image.\n' +
-            '100% will make the image completely sepia.',
-    },
-};

package/dist/esm/core/filter/filter.component.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Container from '../container/container.component';
-import { FilterStyle } from './filter.style';
-export const Filter = (filterProps) => {
-    const { children } = filterProps;
-    const style = FilterStyle(filterProps);
-    return React.createElement(Container, { style: style }, children);
-};

package/dist/esm/core/filter/filter.config.d.ts

@@ -1,3 +0,0 @@
-import { FilterConfig } from './filter.model';
-import { FilterType } from './filter.types';
-export declare const FilterConfigs: Record<FilterType, FilterConfig>;

package/dist/esm/core/filter/filter.config.js

@@ -1,65 +0,0 @@
-export const FilterConfigs = {
-    blur: {
-        type: 'blur',
-        unit: 'px',
-        defaultValue: 4,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-    brightness: {
-        type: 'brightness',
-        unit: '%',
-        defaultValue: 250,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-    contrast: {
-        type: 'contrast',
-        unit: '%',
-        defaultValue: 180,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-    grayscale: {
-        type: 'grayscale',
-        unit: '%',
-        defaultValue: 100,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-    'hue-rotate': {
-        type: 'hue-rotate',
-        unit: 'deg',
-        defaultValue: 180,
-        rangeLow: 0,
-        rangeHigh: 360,
-    },
-    invert: {
-        type: 'invert',
-        unit: '%',
-        defaultValue: 100,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-    opacity: {
-        type: 'opacity',
-        unit: '%',
-        defaultValue: 50,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-    saturate: {
-        type: 'saturate',
-        unit: 'num',
-        defaultValue: 7,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-    sepia: {
-        type: 'sepia',
-        unit: '%',
-        defaultValue: 100,
-        rangeLow: 0,
-        rangeHigh: 100,
-    },
-};

package/dist/esm/core/filter/filter.model.d.ts

@@ -1,20 +0,0 @@
-import { FilterType, FilterUnit } from './filter.types';
-export interface FilterProps {
-    blur?: number;
-    brightness?: number;
-    contrast?: number;
-    grayscale?: number;
-    'hue-rotate'?: number;
-    invert?: number;
-    opacity?: number;
-    saturate?: number;
-    sepia?: number;
-}
-export interface FilterConfig {
-    type: FilterType;
-    value?: number;
-    unit?: FilterUnit;
-    defaultValue?: number;
-    rangeLow?: number;
-    rangeHigh?: number;
-}

package/dist/esm/core/filter/filter.model.js

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

package/dist/esm/core/filter/filter.style.d.ts

@@ -1,3 +0,0 @@
-import { CSSProperties } from 'react';
-import { FilterProps } from './filter.model';
-export declare const FilterStyle: (filterSettings: Partial<FilterProps>) => CSSProperties;

package/dist/esm/core/filter/filter.style.js

@@ -1,17 +0,0 @@
-import { FilterConfigs } from './filter.config';
-const getFilterConfig = (filterType) => {
-    return FilterConfigs[filterType];
-};
-const getFilterSetting = (type, value) => {
-    var _a;
-    if (!value)
-        return '';
-    const unit = (_a = getFilterConfig(type)) === null || _a === void 0 ? void 0 : _a.unit;
-    return `${type}(${value}${unit && unit !== 'num' ? unit : ''})`;
-};
-export const FilterStyle = (filterSettings) => {
-    const filterNames = Object.keys(filterSettings);
-    const filterArray = filterNames.map((type) => getFilterSetting(type, filterSettings[type]));
-    console.log(filterArray);
-    return { filter: filterArray.join(' ') };
-};

package/dist/esm/core/filter/filter.types.d.ts

@@ -1,2 +0,0 @@
-export type FilterType = 'blur' | 'brightness' | 'contrast' | 'grayscale' | 'hue-rotate' | 'invert' | 'opacity' | 'saturate' | 'sepia';
-export type FilterUnit = 'px' | '%' | 'deg' | 'num';

package/dist/esm/core/filter/filter.types.js

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

package/dist/esm/core/filter/index.js

@@ -1,4 +0,0 @@
-export * from './filter.component';
-export * from './filter.config';
-export * from './filter.model';
-export * from './filter.types';

package/dist/esm/core/flex/flex.component.js

@@ -1,27 +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 { forwardRef } from 'react';
-/**
- * React component used to create flexbox layouts.
- *
- * It renders a `div` with `display: flex` and
- * comes with helpful style shorthand.
- *
- * @see Docs
- */
-export const Flex = forwardRef((props, ref) => {
-    const { direction, align, justify, wrap, basis, grow, shrink, gap, style } = props, rest = __rest(props, ["direction", "align", "justify", "wrap", "basis", "grow", "shrink", "gap", "style"]);
-    const styles = Object.assign({ display: 'flex', flexDirection: direction, alignItems: align, justifyContent: justify, flexWrap: wrap, flexBasis: basis, flexGrow: grow, flexShrink: shrink, gap }, style);
-    return React.createElement("div", Object.assign({ ref: ref, style: styles }, rest));
-});
-Flex.displayName = 'Flex';

package/dist/esm/core/flex/flex.style.d.ts

@@ -1,28 +0,0 @@
-import { CSSProperties } from 'react';
-import { HorizontalAlign, VerticalAlign } from '@uni-design-system/uni-core';
-export declare const flex: CSSProperties;
-export declare const row: CSSProperties;
-export declare const column: CSSProperties;
-export declare const alignTop: CSSProperties;
-export declare const alignCenter: CSSProperties;
-export declare const alignBottom: CSSProperties;
-export declare const FlexVerticalAlignments: Record<VerticalAlign, CSSProperties>;
-export declare const justifyLeft: CSSProperties;
-export declare const justifyCenter: CSSProperties;
-export declare const justifyRight: CSSProperties;
-export declare const FlexHorizontalAlignments: Record<HorizontalAlign, CSSProperties>;
-export declare const expand: CSSProperties;
-export declare const fix: CSSProperties;
-export declare const rowFlexItem: CSSProperties;
-export declare const rowFixedItem: CSSProperties;
-export declare const flexRowStart: CSSProperties;
-export declare const flexRowCenter: CSSProperties;
-export declare const flexRowEnd: CSSProperties;
-export declare const spaceBetween: CSSProperties;
-export declare const flexRowSpaceBetween: CSSProperties;
-export declare const flexRowSpaceAround: CSSProperties;
-export declare const spaceEvenly: CSSProperties;
-export declare const flexRowSpaceEvenly: CSSProperties;
-export declare const flexColumnCenter: CSSProperties;
-export declare const flexColumnSpaceAround: CSSProperties;
-export declare const flexOff: CSSProperties;

package/dist/esm/core/flex/flex.style.js

@@ -1,83 +0,0 @@
-export const flex = { flex: 1 };
-export const row = {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'row'
-};
-export const column = {
-    flex: 1,
-    flexDirection: 'column'
-};
-export const alignTop = { alignItems: 'flex-start' };
-export const alignCenter = { alignItems: 'center' };
-export const alignBottom = { alignItems: 'flex-end' };
-export const FlexVerticalAlignments = {
-    top: alignTop,
-    middle: alignCenter,
-    bottom: alignBottom
-};
-export const justifyLeft = { justifyContent: 'flex-start' };
-export const justifyCenter = { justifyContent: 'center' };
-export const justifyRight = { justifyContent: 'flex-end' };
-export const FlexHorizontalAlignments = {
-    left: justifyLeft,
-    center: justifyCenter,
-    right: justifyRight
-};
-export const expand = { flexGrow: 1 };
-export const fix = { flex: 0, flexGrow: 0 };
-export const rowFlexItem = {
-    flexGrow: 1
-};
-export const rowFixedItem = {
-    flexGrow: 0
-};
-export const flexRowStart = {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center'
-};
-export const flexRowCenter = {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-};
-export const flexRowEnd = {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    alignItems: 'center'
-};
-export const spaceBetween = {
-    justifyContent: 'space-between'
-};
-export const flexRowSpaceBetween = {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-};
-export const flexRowSpaceAround = {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center'
-};
-export const spaceEvenly = {
-    justifyContent: 'space-evenly'
-};
-export const flexRowSpaceEvenly = {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    alignItems: 'center'
-};
-export const flexColumnCenter = {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center'
-};
-export const flexColumnSpaceAround = {
-    flexDirection: 'column',
-    justifyContent: 'space-around',
-    alignItems: 'center'
-};
-export const flexOff = {
-    position: 'relative'
-};

package/dist/esm/core/flex/index.js

@@ -1,2 +0,0 @@
-export * from './flex.style';
-export * from './flex.component';

package/dist/esm/core/hooks/index.js

@@ -1,2 +0,0 @@
-export * from './use-toggle';
-export * from './use-media';

package/dist/esm/core/hooks/use-media.d.ts

@@ -1 +0,0 @@
-export declare const useMedia: <T>(queries: string[], values: T[], defaultValue: T) => T;

package/dist/esm/core/hooks/use-media.js

@@ -1,25 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useMedia = (queries, values, defaultValue) => {
-    // Array containing a media query list for each query
-    const mediaQueryLists = queries.map((q) => window.matchMedia(q));
-    // Function that gets value based on matching media query
-    const getValue = () => {
-        // Get index of first media query that matches
-        const index = mediaQueryLists.findIndex((mql) => mql.matches);
-        // Return related value or defaultValue if none
-        return (values === null || values === void 0 ? void 0 : values[index]) || defaultValue;
-    };
-    // State and setter for matched value
-    const [value, setValue] = useState(getValue);
-    useEffect(() => {
-        // Event listener callback
-        // Note: By defining getValue outside of useEffect we ensure that it has ...
-        // ... current values of hook args (as this hook callback is created once on mount).
-        const handler = () => setValue(getValue);
-        // Set a listener for each media query with above handler as callback.
-        mediaQueryLists.forEach((mql) => mql.addListener(handler));
-        // Remove listeners on cleanup
-        return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
-    }, []);
-    return value;
-};

package/dist/esm/core/hooks/use-toggle.js

@@ -1,17 +0,0 @@
-import { useMemo, useState } from 'react';
-/**
- * React hook to manage boolean (on - off) states
- *
- * @param initialState the initial boolean state value
- *
- * @see Docs https://chakra-ui.com/docs/hooks/use-boolean
- */
-export function useToggle(initialState = false) {
-    const [value, setValue] = useState(initialState);
-    const callbacks = useMemo(() => ({
-        on: () => setValue(true),
-        off: () => setValue(false),
-        toggle: () => setValue((prev) => !prev),
-    }), []);
-    return [value, callbacks];
-}

package/dist/esm/core/icon/icon.component.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { ContentColorToken } from '@uni-design-system/uni-core';
-import { IconName } from './index';
-export interface IconProps {
-    name?: IconName;
-    color?: ContentColorToken;
-    height?: number;
-    width?: number;
-}
-export declare function Icon({ name, color, height, width }: IconProps): JSX.Element;

package/dist/esm/core/icon/icon.component.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { IconDictionary } from './index';
-import { useTheme } from '../theme';
-export function Icon({ name, color = 'on-surface', height = 24, width = 24 }) {
-    if (!name)
-        return React.createElement(React.Fragment, null);
-    const { colors } = useTheme();
-    const Icon = IconDictionary[name];
-    return React.createElement(Icon, { width: width, height: height, color: colors[color] });
-}

package/dist/esm/core/icon/index.d.ts

@@ -1,2 +0,0 @@
-export { IconDictionary, IconName, IconKeys } from '@uni-design-system/uni-react-icons/dist/esm/heroicons/24/outline';
-export * from './icon.component';

package/dist/esm/core/icon/index.js

@@ -1,2 +0,0 @@
-export { IconDictionary, IconKeys } from '@uni-design-system/uni-react-icons/dist/esm/heroicons/24/outline';
-export * from './icon.component';