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

package/dist/esm/components/draggable/SortableList/mockData.js

@@ -1,50 +0,0 @@
-export const findManyChannelStatus = [
-    {
-        id: 'ckj03ha63t2760708sl9i1wrt',
-        name: 'Open',
-    },
-    {
-        id: 'ckkis9tk41bjc07776r52w8vi',
-        name: 'Arrived',
-    },
-    {
-        id: 'cl0myohr5153501vkyhdttc84',
-        name: 'Completed Workflow',
-    },
-    {
-        id: 'ckziqok792091401wchnc8w0x6',
-        name: 'Confirmed',
-    },
-    {
-        id: 'cl0hr30kt2157201za2zu4z22e',
-        name: 'Connect Request',
-    },
-    {
-        id: 'cl8ow0o5q14155je153hnxnkep',
-        name: 'Service Reminder Response',
-    },
-    {
-        id: 'ckkisaejj1bkp0777q7tz03en',
-        name: 'Needs Consult',
-    },
-    {
-        id: 'cl0hqr4x91927701zaaqtpeq97',
-        name: 'Scheduled',
-    },
-    {
-        id: 'clalb5upd6062601xqa9ww3zi4',
-        name: 'Incoming Triage',
-    },
-    {
-        id: 'clcnp56pq489001wka1zxwm0k',
-        name: 'Survey Sent',
-    },
-    {
-        id: 'clcgj0vp75288301yy99juvg1f',
-        name: 'Closed w/comments',
-    },
-    {
-        id: 'ckj03ha67t2780708l1lccn1a',
-        name: 'Archived',
-    },
-];

package/dist/esm/components/draggable/SortableList/sortableList.component.d.ts

@@ -1,13 +0,0 @@
-import { CSSProperties } from 'react';
-import type { ReactNode } from 'react';
-import type { UniqueIdentifier } from '@dnd-kit/core';
-export interface SortableItemProps {
-    id: UniqueIdentifier;
-}
-export interface SortableProps<T extends SortableItemProps> {
-    items: T[];
-    onChange(items: T[]): void;
-    renderItem(item: T, index?: number): ReactNode;
-    style?: CSSProperties;
-}
-export declare const SortableList: <T extends SortableItemProps>({ items, onChange, renderItem, style: userStyle, }: SortableProps<T>) => JSX.Element;

package/dist/esm/components/draggable/SortableList/sortableList.component.js

@@ -1,30 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import { SortableOverlay } from './components';
-export const SortableList = ({ items, onChange, renderItem, style: userStyle, }) => {
-    const [active, setActive] = useState(null);
-    const activeItem = useMemo(() => items.find((item) => item.id === (active === null || active === void 0 ? void 0 : active.id)), [active, items]);
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }));
-    const style = {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: 0,
-        listStyle: 'none',
-    };
-    return (React.createElement(DndContext, { sensors: sensors, onDragStart: ({ active }) => {
-            setActive(active);
-        }, onDragEnd: ({ active, over }) => {
-            if (over && active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
-                const activeIndex = items.findIndex(({ id }) => id === active.id);
-                const overIndex = items.findIndex(({ id }) => id === over.id);
-                onChange(arrayMove(items, activeIndex, overIndex));
-            }
-            setActive(null);
-        }, onDragCancel: () => setActive(null) },
-        React.createElement(SortableContext, { items: items },
-            React.createElement("ul", { style: style }, items.map((item, index) => (React.createElement(React.Fragment, { key: item.id }, renderItem(item, index)))))),
-        React.createElement(SortableOverlay, null, activeItem ? renderItem(activeItem) : null)));
-};

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

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

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

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

package/dist/esm/components/draggable/utilities/createRange.d.ts

@@ -1 +0,0 @@
-export declare function createRange<T = number>(length: number, initializer?: (index: number) => any): T[];

package/dist/esm/components/draggable/utilities/createRange.js

@@ -1,4 +0,0 @@
-const defaultInitializer = (index) => index;
-export function createRange(length, initializer = defaultInitializer) {
-    return [...new Array(length)].map((_, index) => initializer(index));
-}

package/dist/esm/components/draggable/utilities/index.d.ts

@@ -1 +0,0 @@
-export { createRange } from './createRange';

package/dist/esm/components/draggable/utilities/index.js

@@ -1 +0,0 @@
-export { createRange } from './createRange';

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

@@ -1 +0,0 @@
-export * from './text-input';

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

@@ -1 +0,0 @@
-export * from './text-input';

package/dist/esm/components/forms/text-input/index.js

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

package/dist/esm/components/forms/text-input/text-input.component.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface TextInputProps {
-    value: string;
-    onChange: () => void;
-}
-export declare const TextInput: ({ value, onChange }: TextInputProps) => JSX.Element;

package/dist/esm/components/forms/text-input/text-input.component.js

@@ -1,5 +0,0 @@
-import React from 'react';
-export const TextInput = ({ value, onChange }) => {
-    return (React.createElement("div", null,
-        React.createElement("input", { type: "text", value: value, onChange: onChange })));
-};

package/dist/esm/components/forms/utils/validations.d.ts

@@ -1,2 +0,0 @@
-export type ValidationRule = 'email' | 'required' | 'numeric' | 'alphaNumeric' | 'alphabetic' | 'maxLength' | 'minLength';
-export declare const validations: Record<ValidationRule, unknown>;

package/dist/esm/components/forms/utils/validations.js

@@ -1,52 +0,0 @@
-export const validations = {
-    email: {
-        rule: () => /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
-        formatter(fieldName) {
-            return `${fieldName} is not valid email`;
-        },
-    },
-    required: {
-        rule: () => /\S/,
-        formatter(fieldName) {
-            return `${fieldName} is required.`;
-        },
-    },
-    numeric: {
-        rule: () => /^\d+$/,
-        formatter(fieldName) {
-            return `${fieldName} should contain only numbers.`;
-        },
-    },
-    alphaNumeric: {
-        rule: () => /^[a-z0-9]+$/i,
-        formatter(fieldName) {
-            return `${fieldName} should not contain special characters, please use only alphabets and numbers.`;
-        },
-    },
-    alphabetic: {
-        rule: () => /^[a-z]+$/i,
-        formatter(fieldName) {
-            return `${fieldName} should contain only alphabets.`;
-        },
-    },
-    maxLength: {
-        rule: (number) => ({
-            test: (value) => value.length <= number,
-        }),
-        formatter(fieldName, number) {
-            return number
-                ? `${fieldName} can contain maximum ${number} characters.`
-                : `${fieldName} contains more characters than expected.`;
-        },
-    },
-    minLength: {
-        rule: (number) => ({
-            test: (value) => value.length >= number,
-        }),
-        formatter(fieldName, number) {
-            return number
-                ? `${fieldName} should contain minimum ${number} characters.`
-                : `${fieldName} contains less characters than expected.`;
-        },
-    },
-};

package/dist/esm/components/grainy-gradient-background/grainy-gradient-background.component.js

@@ -1,35 +0,0 @@
-import React from 'react';
-export const GrainyGradientBackground = ({ children, noiseFrequency = 0.65, noiseOctaves = 3, minHeight, size = 740, angle = 20, gradientColor = 'rebeccapurple', backgroundColor = 'moccasin', }) => {
-    const gradient = `linear-gradient(${angle}deg, ${gradientColor}, transparent)`;
-    const image = `url("data:image/svg+xml,%3Csvg viewBox='0 0 ${size} ${size}' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${noiseFrequency}' numOctaves='${noiseOctaves}' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`;
-    const container = {};
-    const content = {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-    };
-    const noise = {
-        filter: 'contrast(290%) brightness(1000%)',
-        background: gradient + ', ' + image,
-        minHeight,
-    };
-    const isolate = {
-        isolation: 'isolate',
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-    };
-    const overlay = {
-        position: 'absolute',
-        top: 0,
-        width: '100%',
-        height: '100%',
-        background: backgroundColor,
-        mixBlendMode: 'multiply',
-    };
-    return (React.createElement("div", { style: container },
-        React.createElement("div", { style: isolate },
-            React.createElement("div", { style: noise }),
-            React.createElement("div", { style: overlay })),
-        React.createElement("div", { style: content }, children)));
-};

package/dist/esm/components/icon-text-row/icon-text-row.component.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { getValue } from '@uni-design-system/uni-core';
-import { alignCenter, expand, fix, row, Text, Icon, useTheme } from '../../core';
-export const IconTextRow = ({ iconName, color, align = 'left', text, textRole = 'title-medium', children, }) => {
-    const theme = useTheme();
-    const textProps = getValue(theme, `typography.${textRole}`, theme.typography['title-medium']);
-    const textHeight = textProps.fontSize;
-    const textLineHeight = textProps.lineHeight || textHeight;
-    const textMargin = text || children ? textLineHeight - textHeight : 0;
-    function RowIcon() {
-        return (React.createElement("div", { style: Object.assign(Object.assign({}, fix), { maxHeight: textLineHeight }) },
-            React.createElement(Icon, { name: iconName, width: textLineHeight, height: textLineHeight, color: color })));
-    }
-    function RowText() {
-        return (React.createElement("div", { style: Object.assign(Object.assign({}, expand), { paddingLeft: textMargin, paddingRight: textMargin }) },
-            React.createElement(Text, { align: align, colorToken: color, role: textRole }, text || children)));
-    }
-    function RowCenter() {
-        return align === 'center' ? React.createElement("div", { style: Object.assign({}, expand) }) : null;
-    }
-    return ['left', 'center'].includes(align) ? (React.createElement("div", { style: Object.assign(Object.assign({}, row), alignCenter) },
-        React.createElement(RowCenter, null),
-        React.createElement(RowIcon, null),
-        React.createElement(RowText, null),
-        React.createElement(RowCenter, null))) : (React.createElement("div", { style: Object.assign(Object.assign({}, row), alignCenter) },
-        React.createElement(RowText, null),
-        React.createElement(RowIcon, null)));
-};

package/dist/esm/components/icon-text-row/index.js

@@ -1 +0,0 @@
-export * from './icon-text-row.component';

package/dist/esm/components/index.js

@@ -1,7 +0,0 @@
-export * from './button';
-export * from './card';
-export * from './draggable';
-export * from './forms';
-export * from './icon-text-row';
-export * from './modal';
-export * from './switch';

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

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

package/dist/esm/components/modal/modal-close-button.component.d.ts

@@ -1,3 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { ButtonProps } from '../button';
-export declare const ModalCloseButton: ({ ...rest }: PropsWithChildren<ButtonProps>) => JSX.Element;

package/dist/esm/components/modal/modal-close-button.component.js

@@ -1,23 +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 { Button } from '../button';
-export const ModalCloseButton = (_a) => {
-    var rest = __rest(_a, []);
-    const style = {
-        position: 'absolute',
-        top: '8px',
-        right: '8px',
-        padding: '8px',
-    };
-    return React.createElement(Button, Object.assign({ buttonType: "icon", iconName: "xMark", style: style }, rest));
-};

package/dist/esm/components/modal/modal.component.d.ts

@@ -1,13 +0,0 @@
-import React, { ReactNode } from 'react';
-type ModalSize = 'sm' | 'md' | 'lg';
-export interface ModalProps {
-    size: ModalSize;
-    children: ReactNode;
-    isOpen: boolean;
-}
-export interface ModalOverlayProps {
-    children?: React.ReactNode;
-    fadeDuration?: number;
-}
-export declare const Modal: ({ children, isOpen, size }: ModalProps) => JSX.Element;
-export {};

package/dist/esm/components/modal/modal.component.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Card } from '../card';
-import { Overlay } from '../../core';
-import { motion } from 'framer-motion';
-const ModalSizes = {
-    sm: 260,
-    md: 320,
-    lg: 500,
-};
-export const Modal = ({ children, isOpen, size = 'lg' }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Overlay, { isOpen: isOpen },
-            React.createElement(motion.div, { style: { position: 'fixed' }, initial: { y: 36, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 36, opacity: 0 }, transition: { duration: 0.2 } },
-                React.createElement(Card, { colorToken: "background", width: ModalSizes[size], cardType: "elevated", elevation: "modal" }, children)))));
-};

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

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

package/dist/esm/components/switch/switch.component.js

@@ -1,38 +0,0 @@
-import { motion } from 'framer-motion';
-import React, { useState } from 'react';
-import { RoleHues } from '@uni-design-system/uni-core';
-import { SwitchConfigs } from './switch.config';
-export const Switch = ({ size = 'sm', on = false, onChange }) => {
-    const [isOn, setIsOn] = useState(on);
-    const successColor = `hsl(${RoleHues.success.default}, 32%, 50%)`;
-    const toggleSwitch = () => {
-        setIsOn(!isOn);
-        onChange && onChange(!isOn);
-    };
-    const spring = {
-        type: 'spring',
-        stiffness: 700,
-        damping: 30,
-    };
-    const config = SwitchConfigs[size];
-    const handleDiameter = config.radius * 2;
-    const switchWidth = config.radius * 4;
-    const switchStyle = {
-        cursor: 'pointer',
-        display: 'flex',
-        justifyContent: isOn ? 'flex-end' : 'flex-start',
-        backgroundColor: isOn ? successColor : 'rgba(0, 0, 0, 0.4)',
-        width: switchWidth,
-        height: handleDiameter,
-        padding: config.padding,
-        borderRadius: config.radius + config.padding,
-    };
-    const handleStyle = {
-        width: handleDiameter,
-        height: handleDiameter,
-        backgroundColor: 'white',
-        borderRadius: config.radius,
-    };
-    return (React.createElement("div", { style: switchStyle, className: "switch", "data-isOn": isOn, onClick: toggleSwitch },
-        React.createElement(motion.div, { style: handleStyle, className: "handle", layout: true, transition: spring })));
-};

package/dist/esm/components/switch/switch.config.d.ts

@@ -1,5 +0,0 @@
-import { Size } from '@uni-design-system/uni-core';
-export declare const SwitchConfigs: Record<Size, {
-    radius: number;
-    padding: number;
-}>;

package/dist/esm/components/switch/switch.config.js

@@ -1,22 +0,0 @@
-export const SwitchConfigs = {
-    xs: {
-        radius: 6,
-        padding: 2,
-    },
-    sm: {
-        radius: 8,
-        padding: 2,
-    },
-    md: {
-        radius: 10,
-        padding: 3,
-    },
-    lg: {
-        radius: 12,
-        padding: 4,
-    },
-    xl: {
-        radius: 14,
-        padding: 5,
-    },
-};

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

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-import { Property } from 'csstype';
-export interface BackgroundProps {
-    className?: string;
-    children?: ReactNode;
-    image?: Property.BackgroundImage;
-    imageUrl?: string;
-    gradiant?: Property.BackgroundImage;
-    position?: Property.BackgroundPosition;
-    size?: Property.BackgroundSize;
-    attachment?: 'fixed' | 'local' | 'scroll';
-    minHeight?: Property.MinHeight;
-    color?: string;
-}
-export declare const Background: ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }: BackgroundProps) => JSX.Element;

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

@@ -1,15 +0,0 @@
-import React from 'react';
-export const Background = ({ children, image, imageUrl, gradiant, position, size, attachment, className, minHeight, color, }) => {
-    if (!!imageUrl) {
-        image = `url(${imageUrl})`;
-    }
-    const style = {
-        backgroundColor: color,
-        backgroundImage: image || gradiant,
-        backgroundPosition: position,
-        backgroundSize: size,
-        minHeight,
-        backgroundAttachment: attachment,
-    };
-    return (React.createElement("div", { className: className, style: style }, children));
-};

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

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

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

@@ -1,3 +0,0 @@
-import { Border, Theme } from '@uni-design-system/uni-core';
-import { CSSProperties } from 'react';
-export declare function BorderStyle(border: Border | undefined, theme: Theme): CSSProperties;

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.js

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

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

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