@particle-network/ui-native 0.0.2

package/README.md

@@ -0,0 +1,57 @@
+![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
+
+# getting started
+
+```sh
+npx create-expo-app --template expo-template-storybook AwesomeStorybook
+```
+
+or
+
+```sh
+yarn create expo-app --template expo-template-storybook AwesomeStorybook
+```
+
+# app
+
+```sh
+yarn start
+```
+
+# RN Storybook (ondevice)
+
+In this template you can now run `yarn storybook` to start ondevice storybook or `yarn start` to start your expo app.
+This works via env variables and expo constants.
+
+```sh
+# either
+yarn storybook
+
+# ios
+yarn storybook:ios
+
+# android
+yarn storybook:android
+```
+
+If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader
+
+To update the stories one time
+
+```sh
+yarn storybook-generate
+```
+
+# Web
+
+Start react native web storybook:
+
+```
+yarn storybook:web
+```
+
+build react native web storybook:
+
+```sh
+yarn build-storybook
+```

package/dist/components/ProgressWrapper/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { UXForegroundColor, UXRadius } from '@particle-network/ui-shared';
+import { type FlexProps } from '..';
+export interface ProgressWrapperProps extends Omit<FlexProps, 'radius' | 'width' | 'height' | 'w' | 'h'> {
+    /**
+     * 进度 (%)
+     */
+    value?: number;
+    /**
+     * 宽度
+     */
+    width?: number;
+    /**
+     * 高度
+     */
+    height?: number;
+    /**
+     * 进度条宽度
+     */
+    strokeWidth?: number;
+    /**
+     * 圆角
+     */
+    radius?: UXRadius | number;
+    /**
+     * 进度条颜色
+     */
+    color?: UXForegroundColor | 'transparent';
+    /**
+     * SVG 样式
+     */
+    svgStyle?: StyleProp<ViewStyle>;
+}
+export declare const ProgressWrapper: React.FC<ProgressWrapperProps>;

package/dist/components/ProgressWrapper/index.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import react_native_svg, { Path } from "react-native-svg";
+import { Flex } from "../index.js";
+import { useColors, useRadius } from "../../hooks/index.js";
+const ProgressWrapper = ({ style, svgStyle, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, ...restProps })=>{
+    const { getColor } = useColors();
+    const { getRadius } = useRadius();
+    const autoLayout = !width && !height;
+    const [childWidth, setChildWidth] = useState(0);
+    const [childHeight, setChildHeight] = useState(0);
+    const widthValue = useMemo(()=>{
+        if (width) return width;
+        return childWidth + 2 * strokeWidth;
+    }, [
+        childWidth,
+        strokeWidth,
+        width
+    ]);
+    const heightValue = useMemo(()=>{
+        if (height) return height;
+        return childHeight + 2 * strokeWidth;
+    }, [
+        childHeight,
+        strokeWidth,
+        height
+    ]);
+    const clampedProgress = Math.max(0, Math.min(100, value));
+    const rectWidth = widthValue - strokeWidth;
+    const rectHeight = heightValue - strokeWidth;
+    const rectXY = strokeWidth / 2;
+    const perimeter = 2 * (rectWidth + rectHeight);
+    const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
+    const colorValue = 'transparent' === color ? 'transparent' : getColor(color);
+    const trackColor = 'transparent' === color ? 'transparent' : `${colorValue}40`;
+    const radiusValue = getRadius(radius);
+    const createPathData = (x, y, w, h, r)=>{
+        if (0 === r) return `
+        M ${x + w} ${y + h}
+        L ${x} ${y + h}
+        L ${x} ${y}
+        L ${x + w} ${y}
+        Z
+      `;
+        return `
+        M ${x + w - r} ${y + h}
+        L ${x + r} ${y + h}
+        Q ${x} ${y + h} ${x} ${y + h - r}
+        L ${x} ${y + r}
+        Q ${x} ${y} ${x + r} ${y}
+        L ${x + w - r} ${y}
+        Q ${x + w} ${y} ${x + w} ${y + r}
+        L ${x + w} ${y + h - r}
+        Q ${x + w} ${y + h} ${x + w - r} ${y + h}
+        Z
+      `;
+    };
+    const pathData = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
+    const styles = StyleSheet.create({
+        container: {
+            width: widthValue,
+            height: heightValue
+        },
+        svg: {
+            position: 'absolute',
+            left: 0,
+            top: 0
+        }
+    });
+    const handleLayout = (event)=>{
+        const { width, height } = event.nativeEvent.layout;
+        setChildWidth(width);
+        setChildHeight(height);
+    };
+    return /*#__PURE__*/ jsxs(Flex, {
+        center: true,
+        h: heightValue,
+        style: [
+            styles.container,
+            style
+        ],
+        w: widthValue,
+        ...restProps,
+        children: [
+            /*#__PURE__*/ jsxs(react_native_svg, {
+                height: heightValue,
+                style: [
+                    styles.svg,
+                    svgStyle
+                ],
+                width: widthValue,
+                children: [
+                    /*#__PURE__*/ jsx(Path, {
+                        d: pathData,
+                        fill: "none",
+                        stroke: trackColor,
+                        strokeWidth: strokeWidth
+                    }),
+                    /*#__PURE__*/ jsx(Path, {
+                        d: pathData,
+                        fill: "none",
+                        stroke: colorValue,
+                        strokeDasharray: perimeter,
+                        strokeDashoffset: strokeDashoffset,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: strokeWidth
+                    })
+                ]
+            }),
+            autoLayout ? /*#__PURE__*/ jsx(View, {
+                onLayout: handleLayout,
+                children: children
+            }) : children
+        ]
+    });
+};
+ProgressWrapper.displayName = 'UXProgressWrapper';
+export { ProgressWrapper };

package/dist/components/Text/index.d.ts

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

package/dist/components/Text/index.js

@@ -0,0 +1,2 @@
+export * from "./text.js";
+export * from "./text.types.js";

package/dist/components/Text/text.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import { type TextProps } from './text.types';
+export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<RNText>>;

package/dist/components/Text/text.js

@@ -0,0 +1,196 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Box, HStack, useBoxStyle } from "../index.js";
+import { useColors } from "../../hooks/index.js";
+import { textStyles } from "./text.types.js";
+const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, style, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, underlineStyle, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, ...restProps } = props;
+    const [textWidth, setTextWidth] = useState(0);
+    const { getColor } = useColors();
+    const boxStyle = useBoxStyle({
+        fullWidth,
+        fullHeight,
+        h,
+        minH,
+        maxH,
+        w,
+        minW,
+        maxW,
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        ms,
+        me,
+        mh,
+        mv,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        ps,
+        pe,
+        ph,
+        pv,
+        borderStyle,
+        border,
+        borderTop,
+        borderRight,
+        borderBottom,
+        borderLeft,
+        borderStart,
+        borderEnd,
+        borderColor,
+        borderTopColor,
+        borderRightColor,
+        borderBottomColor,
+        borderLeftColor,
+        borderStartColor,
+        borderEndColor,
+        radius,
+        topLeftRadius,
+        topRightRadius,
+        bottomLeftRadius,
+        bottomRightRadius,
+        topStartRadius,
+        topEndRadius,
+        bottomStartRadius,
+        bottomEndRadius,
+        position,
+        top,
+        right,
+        bottom,
+        left,
+        start,
+        end,
+        bg,
+        bgOpacity,
+        opacity,
+        zIndex,
+        overflow
+    });
+    const variantStyle = useMemo(()=>{
+        if (h1) return textStyles.variant.h1;
+        if (h2) return textStyles.variant.h2;
+        if (h3) return textStyles.variant.h3;
+        if (body1) return textStyles.variant.body1;
+        if (body1Bold) return textStyles.variant.body1Bold;
+        if (body2) return textStyles.variant.body2;
+        if (body2Bold) return textStyles.variant.body2Bold;
+        if (body3) return textStyles.variant.body3;
+        if (body3Bold) return textStyles.variant.body3Bold;
+        if (caption1) return textStyles.variant.caption1;
+        if (caption1Bold) return textStyles.variant.caption1Bold;
+        return textStyles.variant[variant];
+    }, [
+        h1,
+        h2,
+        h3,
+        body1,
+        body1Bold,
+        body2,
+        body2Bold,
+        body3,
+        body3Bold,
+        caption1,
+        caption1Bold,
+        variant
+    ]);
+    const textStyle = useMemo(()=>({
+            ...variantStyle,
+            ...fontWeight && {
+                fontWeight: textStyles.fontWeight[fontWeight]
+            },
+            ...lineHeight && {
+                lineHeight: textStyles.lineHeight[lineHeight] * variantStyle.fontSize
+            },
+            textAlign: textStyles.align[align],
+            color: getColor(color)
+        }), [
+        variantStyle,
+        fontWeight,
+        lineHeight,
+        align,
+        color,
+        getColor
+    ]);
+    if ([
+        'dotted',
+        'dashed'
+    ].includes(underlineStyle ?? '')) {
+        const dotCount = Math.max(1, Math.floor(textWidth / 3));
+        const dashCount = Math.max(1, Math.floor(textWidth / 6));
+        const dotStyle = StyleSheet.create({
+            position: {
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: 1,
+                paddingHorizontal: 1,
+                width: textWidth
+            },
+            dot: {
+                width: 1,
+                height: 1,
+                backgroundColor: getColor(color),
+                borderRadius: 0.5
+            },
+            dash: {
+                width: 3,
+                height: 1,
+                backgroundColor: getColor(color)
+            }
+        });
+        return /*#__PURE__*/ jsxs(Box, {
+            position: "relative",
+            children: [
+                /*#__PURE__*/ jsx(Text, {
+                    style: [
+                        boxStyle,
+                        textStyle,
+                        style
+                    ],
+                    onLayout: (e)=>{
+                        setTextWidth(e.nativeEvent.layout.width);
+                    },
+                    ...restProps
+                }),
+                /*#__PURE__*/ jsxs(HStack, {
+                    justify: "between",
+                    style: dotStyle.position,
+                    children: [
+                        'dotted' === underlineStyle && Array.from({
+                            length: dotCount
+                        }).map((_, index)=>/*#__PURE__*/ jsx(View, {
+                                style: dotStyle.dot
+                            }, index)),
+                        'dashed' === underlineStyle && Array.from({
+                            length: dashCount
+                        }).map((_, index)=>/*#__PURE__*/ jsx(View, {
+                                style: dotStyle.dash
+                            }, index))
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsx(Text, {
+        ref: ref,
+        style: [
+            boxStyle,
+            textStyle,
+            underlineStyle && {
+                textDecorationLine: 'underline',
+                textDecorationStyle: underlineStyle
+            },
+            style
+        ],
+        ...restProps
+    });
+});
+text_Text.displayName = 'UXText';
+export { text_Text as Text };

package/dist/components/Text/text.types.d.ts

@@ -0,0 +1,109 @@
+import type { TextProps as RNTextProps, TextStyle } from 'react-native';
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+import type { UseBoxProps } from '..';
+type TextVariant = 'h1' | 'h2' | 'h3' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'caption1' | 'caption1Bold';
+type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+type TextLineHeight = '1' | '1.4';
+type TextAlign = 'left' | 'center' | 'right';
+export interface TextProps extends RNTextProps, UseBoxProps {
+    /**
+     * | variant      | font-size | font-weight |
+     * | :----------- | :-------- | :---------- |
+     * | h1           | 24px      | 600         |
+     * | h2           | 20px      | 600         |
+     * | h3           | 16px      | 600         |
+     * | body1        | 14px      | 400         |
+     * | body1Bold    | 14px      | 500         |
+     * | body2        | 12px      | 400         |
+     * | body2Bold    | 12px      | 500         |
+     * | body3        | 10px      | 400         |
+     * | body3Bold    | 10px      | 500         |
+     * | caption1     | 8px       | 400         |
+     * | caption1Bold | 8px       | 500         |
+     */
+    variant?: TextVariant;
+    /**
+     * `24px 600`
+     */
+    h1?: boolean;
+    /**
+     * `20px 600`
+     */
+    h2?: boolean;
+    /**
+     * `16px 600`
+     */
+    h3?: boolean;
+    /**
+     * `14px 400`
+     */
+    body1?: boolean;
+    /**
+     * `14px 500`
+     */
+    body1Bold?: boolean;
+    /**
+     * `12px 400`
+     */
+    body2?: boolean;
+    /**
+     * `12px 500`
+     */
+    body2Bold?: boolean;
+    /**
+     * `11px 400`
+     */
+    body3?: boolean;
+    /**
+     * `11px 500`
+     */
+    body3Bold?: boolean;
+    /**
+     * `10px 400`
+     */
+    caption1?: boolean;
+    /**
+     * `10px 500`
+     */
+    caption1Bold?: boolean;
+    /**
+     * | weight    | font-weight |
+     * | :-------- | :---------: |
+     * | normal    | 400         |
+     * | medium    | 500         |
+     * | semibold  | 600         |
+     * | bold      | 700         |
+     * | extrabold | 800         |
+     */
+    fontWeight?: TextWeight;
+    /**
+     * | color      | dark      | light     |
+     * | :--------- | :-------- | :-------- |
+     * | default    | #FFFFFF   | #000000   |
+     * | foreground | #FFFFFF   | #000000   |
+     * | white      | #FFFFFF   | #FFFFFF  |
+     * | secondary  | #A1A1AA   | #767A80   |
+     * | tertiary   | #4E4E56   | #C0C0C9   |
+     * | primary    | #D745FF   | #000000   |
+     * | success    | #45B167   | #2E9F4A   |
+     * | danger     | #E84A5A   | #DE4A40   |
+     * | alert      | #F57733   | #E65E16   |
+     * | warning    | #FF9821   | #FF9821   |
+     * | gold       | #FFB800   | #F38300   |
+     */
+    color?: UXForegroundColor;
+    lineHeight?: TextLineHeight;
+    align?: TextAlign;
+    underlineStyle?: TextStyle['textDecorationStyle'];
+}
+export declare const textStyles: {
+    variant: Record<TextVariant, {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: TextStyle['fontWeight'];
+    }>;
+    fontWeight: Record<TextWeight, TextStyle['fontWeight']>;
+    lineHeight: Record<TextLineHeight, number>;
+    align: Record<TextAlign, TextStyle['textAlign']>;
+};
+export {};

package/dist/components/Text/text.types.js

@@ -0,0 +1,77 @@
+import { ms } from "react-native-size-matters";
+const textStyles = {
+    variant: {
+        h1: {
+            fontSize: ms(24),
+            lineHeight: ms(28),
+            fontWeight: '600'
+        },
+        h2: {
+            fontSize: ms(20),
+            lineHeight: ms(24),
+            fontWeight: '600'
+        },
+        h3: {
+            fontSize: ms(16),
+            lineHeight: ms(20),
+            fontWeight: '600'
+        },
+        body1Bold: {
+            fontSize: ms(14),
+            lineHeight: ms(18),
+            fontWeight: '500'
+        },
+        body1: {
+            fontSize: ms(14),
+            lineHeight: ms(18),
+            fontWeight: '400'
+        },
+        body2Bold: {
+            fontSize: ms(12),
+            lineHeight: ms(16),
+            fontWeight: '500'
+        },
+        body2: {
+            fontSize: ms(12),
+            lineHeight: ms(16),
+            fontWeight: '400'
+        },
+        body3Bold: {
+            fontSize: ms(11),
+            lineHeight: ms(16),
+            fontWeight: '500'
+        },
+        body3: {
+            fontSize: ms(11),
+            lineHeight: ms(16),
+            fontWeight: '400'
+        },
+        caption1Bold: {
+            fontSize: ms(10),
+            lineHeight: ms(14),
+            fontWeight: '500'
+        },
+        caption1: {
+            fontSize: ms(10),
+            lineHeight: ms(14),
+            fontWeight: '400'
+        }
+    },
+    fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+        extrabold: '800'
+    },
+    lineHeight: {
+        1: 1,
+        '1.4': 1.4
+    },
+    align: {
+        left: 'left',
+        center: 'center',
+        right: 'right'
+    }
+};
+export { textStyles };

package/dist/components/UXButton/button.d.ts

@@ -0,0 +1,3 @@
+import { type View } from 'react-native';
+import type { UXButtonProps } from './button.types';
+export declare const UXButton: import("react").ForwardRefExoticComponent<UXButtonProps & import("react").RefAttributes<View>>;

package/dist/components/UXButton/button.js

@@ -0,0 +1,74 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { ActivityIndicator, Keyboard } from "react-native";
+import { Text, UXPressable } from "../index.js";
+import { triggerHapticFeedback } from "../../utils/triggerHapticFeedback.js";
+import { useStyles } from "./button.styles.js";
+const UXButton = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { style, size, radius, color, variant, onPress, isDisabled, isLoading, startContent, endContent, fullWidth, fill, width, isIconOnly, children, ...restProps } = props;
+    const handlePress = (e)=>{
+        Keyboard.dismiss();
+        triggerHapticFeedback();
+        onPress?.(e);
+    };
+    const { styles, textColor } = useStyles({
+        size,
+        radius,
+        color,
+        variant,
+        isDisabled,
+        isLoading,
+        fullWidth,
+        isIconOnly,
+        width,
+        fill
+    });
+    const content = useMemo(async ()=>{
+        if ('string' == typeof children || 'number' == typeof children) return /*#__PURE__*/ jsx(Text, {
+            style: styles.title,
+            children: children.toString()
+        });
+        return children;
+    }, [
+        children,
+        styles.title
+    ]);
+    const renderChildren = useMemo(()=>{
+        if (isLoading && isIconOnly) return /*#__PURE__*/ jsx(ActivityIndicator, {
+            color: textColor,
+            size: "small"
+        });
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                isLoading ? /*#__PURE__*/ jsx(ActivityIndicator, {
+                    color: textColor,
+                    size: "small"
+                }) : null,
+                startContent,
+                content,
+                endContent
+            ]
+        });
+    }, [
+        isLoading,
+        content,
+        textColor,
+        startContent,
+        endContent,
+        isIconOnly
+    ]);
+    return /*#__PURE__*/ jsx(UXPressable, {
+        ref: ref,
+        disabled: isDisabled || isLoading,
+        style: ({ pressed })=>[
+                styles.button,
+                pressed && styles.buttonPressed,
+                style
+            ],
+        onPress: handlePress,
+        ...restProps,
+        children: renderChildren
+    });
+});
+UXButton.displayName = 'UXButton';
+export { UXButton };