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

package/dist/esm/core/transition/fade/fade.component.js

@@ -1,47 +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 { AnimatePresence, motion } from 'framer-motion';
-import { forwardRef } from 'react';
-import { TRANSITION_DEFAULTS, withDelay } from '../transition.utils';
-const variants = {
-    enter: ({ transition, transitionEnd, delay } = {}) => {
-        var _a;
-        return ({
-            opacity: 1,
-            transition: (_a = transition === null || transition === void 0 ? void 0 : transition.enter) !== null && _a !== void 0 ? _a : withDelay.enter(TRANSITION_DEFAULTS.enter, delay),
-            transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.enter,
-        });
-    },
-    exit: ({ transition, transitionEnd, delay } = {}) => {
-        var _a;
-        return ({
-            opacity: 0,
-            transition: (_a = transition === null || transition === void 0 ? void 0 : transition.exit) !== null && _a !== void 0 ? _a : withDelay.exit(TRANSITION_DEFAULTS.exit, delay),
-            transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.exit,
-        });
-    },
-};
-export const fadeConfig = {
-    initial: 'exit',
-    animate: 'enter',
-    exit: 'exit',
-    variants: variants,
-};
-export const Fade = forwardRef(function Fade(props, ref) {
-    const { unmountOnExit, in: isOpen, className, transition, transitionEnd, delay } = props, rest = __rest(props, ["unmountOnExit", "in", "className", "transition", "transitionEnd", "delay"]);
-    const animate = isOpen || unmountOnExit ? 'enter' : 'exit';
-    const show = unmountOnExit ? isOpen && unmountOnExit : true;
-    const custom = { transition, transitionEnd, delay };
-    return (React.createElement(AnimatePresence, { custom: custom }, show && React.createElement(motion.div, Object.assign({ ref: ref, className: 'fade', custom: custom }, fadeConfig, { animate: animate }, rest))));
-});
-Fade.displayName = 'Fade';

package/dist/esm/core/transition/fade/index.d.ts

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

package/dist/esm/core/transition/fade/index.js

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

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

@@ -1,3 +0,0 @@
-export * from './collapse';
-export * from './fade';
-export * from './slide';

package/dist/esm/core/transition/slide/index.js

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

package/dist/esm/core/transition/slide/slide.component.js

@@ -1,48 +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 { AnimatePresence, motion } from 'framer-motion';
-import { forwardRef } from 'react';
-import { getSlideTransition, TRANSITION_EASINGS, withDelay, cx, } from '../transition.utils';
-const defaultTransition = {
-    exit: {
-        duration: 0.15,
-        ease: TRANSITION_EASINGS.easeInOut,
-    },
-    enter: {
-        type: 'spring',
-        damping: 25,
-        stiffness: 180,
-    },
-};
-const variants = {
-    exit: ({ direction, transition, transitionEnd, delay }) => {
-        var _a;
-        const { exit: exitStyles } = getSlideTransition({ direction });
-        return Object.assign(Object.assign({}, exitStyles), { transition: (_a = transition === null || transition === void 0 ? void 0 : transition.exit) !== null && _a !== void 0 ? _a : withDelay.exit(defaultTransition.exit, delay), transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.exit });
-    },
-    enter: ({ direction, transitionEnd, transition, delay }) => {
-        var _a;
-        const { enter: enterStyles } = getSlideTransition({ direction });
-        return Object.assign(Object.assign({}, enterStyles), { transition: (_a = transition === null || transition === void 0 ? void 0 : transition.enter) !== null && _a !== void 0 ? _a : withDelay.enter(defaultTransition.enter, delay), transitionEnd: transitionEnd === null || transitionEnd === void 0 ? void 0 : transitionEnd.enter });
-    },
-};
-export const Slide = forwardRef(function Slide(props, ref) {
-    const { direction = 'right', style, unmountOnExit, in: isOpen, className, transition, transitionEnd, delay, motionProps } = props, rest = __rest(props, ["direction", "style", "unmountOnExit", "in", "className", "transition", "transitionEnd", "delay", "motionProps"]);
-    const transitionStyles = getSlideTransition({ direction });
-    const computedStyle = Object.assign({ position: 'fixed' }, transitionStyles.position, style);
-    const show = unmountOnExit ? isOpen && unmountOnExit : true;
-    const animate = isOpen || unmountOnExit ? 'enter' : 'exit';
-    const custom = { transitionEnd, transition, direction, delay };
-    return (React.createElement(AnimatePresence, { custom: custom }, show && (React.createElement(motion.div, Object.assign({}, rest, { ref: ref, initial: "exit", className: cx('chakra-slide', className), animate: animate, exit: "exit", custom: custom, variants: variants, style: computedStyle }, motionProps)))));
-});
-Slide.displayName = 'Slide';

package/dist/esm/core/transition/transition.argTypes.d.ts

@@ -1,19 +0,0 @@
-export declare const transitionArgTypes: {
-    fadeDuration: {
-        control: {
-            type: string;
-            min: number;
-            max: number;
-            step: number;
-        };
-        table: {
-            type: {
-                summary: string;
-            };
-            defaultValue: {
-                summary: string;
-            };
-        };
-        description: string;
-    };
-};

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

@@ -1,10 +0,0 @@
-export const transitionArgTypes = {
-    fadeDuration: {
-        control: { type: 'range', min: 0, max: 2, step: 0.01 },
-        table: {
-            type: { summary: 'number' },
-            defaultValue: { summary: '0' },
-        },
-        description: 'The amount of time (in seconds) for the fade transition to complete.',
-    },
-};

package/dist/esm/core/transition/transition.utils.js

@@ -1,93 +0,0 @@
-export const TRANSITION_EASINGS = {
-    ease: [0.25, 0.1, 0.25, 1],
-    easeIn: [0.4, 0, 1, 1],
-    easeOut: [0, 0, 0.2, 1],
-    easeInOut: [0.4, 0, 0.2, 1],
-};
-export const TRANSITION_VARIANTS = {
-    scale: {
-        enter: { scale: 1 },
-        exit: { scale: 0.95 },
-    },
-    fade: {
-        enter: { opacity: 1 },
-        exit: { opacity: 0 },
-    },
-    pushLeft: {
-        enter: { x: '100%' },
-        exit: { x: '-30%' },
-    },
-    pushRight: {
-        enter: { x: '-100%' },
-        exit: { x: '30%' },
-    },
-    pushUp: {
-        enter: { y: '100%' },
-        exit: { y: '-30%' },
-    },
-    pushDown: {
-        enter: { y: '-100%' },
-        exit: { y: '30%' },
-    },
-    slideLeft: {
-        position: { left: 0, top: 0, bottom: 0, width: '100%' },
-        enter: { x: 0, y: 0 },
-        exit: { x: '-100%', y: 0 },
-    },
-    slideRight: {
-        position: { right: 0, top: 0, bottom: 0, width: '100%' },
-        enter: { x: 0, y: 0 },
-        exit: { x: '100%', y: 0 },
-    },
-    slideUp: {
-        position: { top: 0, left: 0, right: 0, maxWidth: '100vw' },
-        enter: { x: 0, y: 0 },
-        exit: { x: 0, y: '-100%' },
-    },
-    slideDown: {
-        position: { bottom: 0, left: 0, right: 0, maxWidth: '100vw' },
-        enter: { x: 0, y: 0 },
-        exit: { x: 0, y: '100%' },
-    },
-};
-export function getSlideTransition(options) {
-    var _a;
-    const side = (_a = options === null || options === void 0 ? void 0 : options.direction) !== null && _a !== void 0 ? _a : 'right';
-    switch (side) {
-        case 'right':
-            return TRANSITION_VARIANTS.slideRight;
-        case 'left':
-            return TRANSITION_VARIANTS.slideLeft;
-        case 'bottom':
-            return TRANSITION_VARIANTS.slideDown;
-        case 'top':
-            return TRANSITION_VARIANTS.slideUp;
-        default:
-            return TRANSITION_VARIANTS.slideRight;
-    }
-}
-export const TRANSITION_DEFAULTS = {
-    enter: {
-        duration: 0.2,
-        ease: TRANSITION_EASINGS.easeOut,
-    },
-    exit: {
-        duration: 0.1,
-        ease: TRANSITION_EASINGS.easeIn,
-    },
-};
-export const withDelay = {
-    enter: (transition, delay) => (Object.assign(Object.assign({}, transition), { delay: typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay['enter'] })),
-    exit: (transition, delay) => (Object.assign(Object.assign({}, transition), { delay: typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay['exit'] })),
-};
-// chakra-ui/packages/utilities/shared-utils
-export const cx = (...classNames) => classNames.filter(Boolean).join(' ');
-function isDev() {
-    return process.env.NODE_ENV !== 'production';
-}
-export const warn = (options) => {
-    const { condition, message } = options;
-    if (condition && isDev()) {
-        console.warn(message);
-    }
-};

package/dist/esm/index.js

@@ -1,3 +0,0 @@
-export * from './core';
-export * from './components';
-export * from './utils';

package/dist/esm/layouts/parallax-hero/parallax-hero.component.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ParallaxHeroProps } from './parallax-hero.model';
-export declare const ParallaxHero: ({ layers, children }: ParallaxHeroProps) => JSX.Element;

package/dist/esm/layouts/parallax-hero/parallax-hero.component.js

@@ -1,8 +0,0 @@
-import React from 'react';
-export const ParallaxHero = ({ layers, children }) => {
-    return (React.createElement("div", null,
-        React.createElement("div", { id: "hero" }, layers.map((layer) => (React.createElement("div", { className: layer.name + 'layer', "data-depth": layer.depth, "data-type": "parallax", style: { backgroundImage: layer.src } })))),
-        React.createElement("div", { id: "static-hero" },
-            React.createElement("div", { className: "static-hero-image" })),
-        React.createElement("div", null, children)));
-};

package/dist/esm/layouts/parallax-hero/parallax-hero.model.js

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

package/dist/esm/tools/color-picker/color-picker.component.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface ColorPickerProps {
-    imageUrl: string;
-    imageWidth: number;
-    imageHeight: number;
-    sampleSize: number;
-}
-export declare const ColorPicker: ({ imageUrl, imageWidth, imageHeight, sampleSize }: ColorPickerProps) => JSX.Element;

package/dist/esm/tools/color-picker/color-picker.component.js

@@ -1,111 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ColorSwatch } from '../color-swatch/color-swatch.component';
-export const ColorPicker = ({ imageUrl, imageWidth, imageHeight, sampleSize = 41 }) => {
-    const canvasRef = useRef(null);
-    const [pixelColor, setPixelColor] = useState({ red: 0, green: 0, blue: 0, alpha: 1 });
-    const [averageColor, setAverageColor] = useState({ red: 0, green: 0, blue: 0, alpha: 1 });
-    let canvas;
-    let ctx;
-    let img;
-    useEffect(() => {
-        canvas = canvasRef.current;
-        if (canvas) {
-            ctx = canvas.getContext('2d');
-            canvas.width = imageWidth;
-            canvas.style.width = `${imageWidth}px`;
-            canvas.height = imageHeight;
-            canvas.style.height = `${imageHeight}px`;
-        }
-        img = document.createElement('img');
-        img.crossOrigin = 'Anonymous';
-        img.src = imageUrl;
-        //once the image is loaded, add it to the canvas
-        img.onload = (ev) => {
-            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0);
-            //call the context.getImageData method to get the array of [r,g,b,a] values
-            let imgDataObj = ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, (canvas === null || canvas === void 0 ? void 0 : canvas.width) || 0, (canvas === null || canvas === void 0 ? void 0 : canvas.height) || 0);
-            const data = imgDataObj === null || imgDataObj === void 0 ? void 0 : imgDataObj.data; //data prop is an array
-            if (!!data && !!canvas) {
-                canvas === null || canvas === void 0 ? void 0 : canvas.addEventListener('mousemove', (ev) => {
-                    getPixel(data, ev);
-                });
-            }
-            // canvas?.addEventListener('click', addBox);
-        };
-    }, []);
-    const getPixel = (data, ev) => {
-        if (!canvas)
-            return;
-        //as the mouse moves around the image
-        // let canvas = ev.target;
-        let cols = canvas.width;
-        // let rows = canvas.height;
-        let { offsetX, offsetY } = ev;
-        //call the method to get the r,g,b,a values for current pixel
-        let c = getPixelColor(data, cols, offsetY, offsetX);
-        //save the string to use elsewhere
-        // pixel = clr;
-        setPixelColor(c);
-        //now get the average of the surrounding pixel colours
-        setAverageColor(getAverage(data, ev));
-    };
-    const getAverage = (data, ev) => {
-        if (!ctx)
-            return { red: 0, green: 0, blue: 0, alpha: 1 };
-        //create a 41px by 41px average colour square
-        //replace everything in the canvas with the original image
-        // let canvas = ev.target;
-        let cols = (canvas === null || canvas === void 0 ? void 0 : canvas.width) || 0;
-        let rows = (canvas === null || canvas === void 0 ? void 0 : canvas.height) || 0;
-        //remove the current contents of the canvas to draw the image and box again
-        ctx.clearRect(0, 0, cols, rows);
-        //add the image from memory
-        ctx.drawImage(img, 0, 0);
-        let { offsetX, offsetY } = ev;
-        const inset = Math.round(sampleSize / 2);
-        //inset by 20px as our workable range
-        offsetX = Math.min(offsetX, cols - inset);
-        offsetX = Math.max(inset, offsetX);
-        offsetY = Math.min(offsetY, rows - inset);
-        offsetY = Math.max(offsetY, inset);
-        //create a 41 x 41 pixel square for the average
-        let reds = 0; //total for all the red values in the 41x41 square
-        let greens = 0;
-        let blues = 0;
-        //for anything in the range (x-20, y-20) to (x+20, y+20)
-        for (let x = -1 * inset; x <= inset; x++) {
-            for (let y = -1 * inset; y <= inset; y++) {
-                let c = getPixelColor(data, cols, offsetY + y, offsetX + x);
-                reds += c.red;
-                greens += c.green;
-                blues += c.blue;
-            }
-        }
-        let nums = inset * inset * 4; //total number of pixels in the box
-        let red = Math.round(reds / nums);
-        let green = Math.round(greens / nums);
-        let blue = Math.round(blues / nums);
-        //now draw an overlaying square of that colour
-        //make the square twice as big as the sample area
-        ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
-        ctx.strokeStyle = 'solid 2px #FFFFFF';
-        ctx.strokeRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
-        ctx.fillRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
-        return { red, green, blue, alpha: 1 };
-    };
-    const getPixelColor = (data, cols, x, y) => {
-        let pixel = cols * x + y;
-        let arrayPos = pixel * 4;
-        return {
-            red: data[arrayPos],
-            green: data[arrayPos + 1],
-            blue: data[arrayPos + 2],
-            alpha: data[arrayPos + 3],
-        };
-    };
-    return (React.createElement("div", { style: { padding: 16 } },
-        React.createElement("div", { style: { marginBottom: 16 } },
-            React.createElement("canvas", { ref: canvasRef })),
-        React.createElement(ColorSwatch, { rgba: pixelColor }, "Pixel Color"),
-        React.createElement(ColorSwatch, { rgba: averageColor }, "Average Color")));
-};

package/dist/esm/tools/color-swatch/color-swatch.component.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-import { RGB, ShadowElevation } from '@uni-design-system/uni-core';
-export type CardType = 'elevated' | 'filled' | 'outlined';
-export interface ColorSwatchProps {
-    rgba: RGB;
-    children?: ReactNode;
-    cardType?: CardType;
-    elevation?: ShadowElevation;
-    width?: string | number;
-    height?: string | number;
-}
-export declare function ColorSwatch({ rgba, children, cardType, elevation, width, height }: ColorSwatchProps): JSX.Element;

package/dist/esm/tools/color-swatch/color-swatch.component.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { HSLAToString, RGBToHSL } from '@uni-design-system/uni-core';
-import { BoxShadow, Padding, Text, useTheme } from '../../core';
-export function ColorSwatch({ rgba, children, cardType = 'elevated', elevation, width, height }) {
-    const theme = useTheme();
-    const { borderRadii } = theme.containers.card;
-    const cardStyle = Object.assign(Object.assign({ height,
-        width, display: 'inline-block', backgroundColor: theme.colors['background'], color: theme.colors['on-background'], borderRadius: borderRadii === null || borderRadii === void 0 ? void 0 : borderRadii.sm }, Padding('xs', 'all')), { margin: 8 });
-    if (cardType === 'elevated') {
-        cardStyle.boxShadow = BoxShadow(elevation || 'pressed');
-    }
-    const hsla = RGBToHSL(rgba);
-    const HSLColor = HSLAToString({
-        hue: Math.round(hsla.hue || 0),
-        saturation: Math.round(hsla.hue || 0),
-        lightness: Math.round(hsla.lightness || 0),
-    });
-    const swatchColor = `rgb(${rgba.red}, ${rgba.green}, ${rgba.blue})`;
-    const swatchStyle = {
-        backgroundColor: swatchColor,
-        height: 200,
-        width: 200,
-        display: 'inline-block',
-        borderRadius: borderRadii === null || borderRadii === void 0 ? void 0 : borderRadii.xs,
-    };
-    return (React.createElement("div", { style: cardStyle },
-        React.createElement("div", { style: swatchStyle }),
-        React.createElement(Text, { role: "headline-medium" }, children),
-        React.createElement(Text, { role: "title-small" }, swatchColor),
-        React.createElement(Text, { role: "title-small" }, HSLColor)));
-}

package/dist/esm/utils/index.js

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

package/dist/esm/utils/storage-manager.d.ts

@@ -1,7 +0,0 @@
-export interface StorageManager<T> {
-    type: 'cookie' | 'localStorage';
-    get(init?: T): T | undefined;
-    set(value: T): void;
-}
-export declare const createLocalStorageManager: <T>(key: string) => StorageManager<T>;
-export declare const createCookieStorageManager: (key: string, cookie?: string) => StorageManager<string>;

package/dist/esm/utils/storage-manager.js

@@ -1,44 +0,0 @@
-// Usage
-// export const localStorageManager = createLocalStorageManager(STORAGE_KEY);
-export const createLocalStorageManager = (key) => ({
-    type: 'localStorage',
-    get(init) {
-        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
-            return init;
-        let value;
-        try {
-            value = localStorage.getItem(key) || init;
-        }
-        catch (e) {
-            // no op
-        }
-        return JSON.parse(value) || init;
-    },
-    set(value) {
-        try {
-            localStorage.setItem(key, JSON.stringify(value));
-        }
-        catch (e) {
-            // no op
-        }
-    },
-});
-const parseCookie = (cookie, key) => {
-    const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
-    return match === null || match === void 0 ? void 0 : match[2];
-};
-// Usage
-// export const cookieStorageManager = createCookieStorageManager(STORAGE_KEY);
-export const createCookieStorageManager = (key, cookie) => ({
-    type: 'cookie',
-    get(init) {
-        if (cookie)
-            return parseCookie(cookie, key);
-        if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document))
-            return init;
-        return parseCookie(document.cookie, key) || init;
-    },
-    set(value) {
-        document.cookie = `${key}=${value}; max-age=31536000; path=/`;
-    },
-});