@aic-kits/react-native 0.0.3 → 0.0.4

package/lib/components/Art/EmojiArt.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { isNumber, isString } from 'lodash';
+import { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+import { getArtDimensionValue, isEmoji } from './utils';
+const StyledEmoji = styled(Text)(({ theme, emojiSize }) => ({
+    fontFamily: theme.fonts.neutral.regular,
+    fontSize: emojiSize ? emojiSize / theme.__hd__.art.emoji.scale : undefined,
+    color: theme.colors.black,
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    lineHeight: emojiSize,
+    transform: [{ scale: theme.__hd__.art.emoji.scale }],
+}));
+export const EmojiArt = ({ art: emoji, width, height, size, ...otherProps }) => {
+    const theme = useTheme();
+    const widthValue = useMemo(() => getArtDimensionValue(theme, width, size), [theme, width, size]);
+    const heightValue = useMemo(() => getArtDimensionValue(theme, height, size), [height, size, theme]);
+    const loading = !isString(emoji) || !isEmoji(emoji);
+    return (_jsx(Box, { flexDirection: "column", justifyContent: "center", alignItems: "center", width: isNumber(widthValue) ? widthValue : undefined, height: isNumber(heightValue) ? heightValue : undefined, ...otherProps, children: _jsx(View, { children: _jsx(StyledEmoji, { emojiSize: isNumber(widthValue) ? widthValue : undefined, children: !loading && emoji }) }) }));
+};

package/lib/components/Art/IconArt.d.ts

@@ -0,0 +1,3 @@
+import type { IconArtProps } from './types';
+export declare const IconArt: ({ art, size, color, ...otherProps }: IconArtProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArt.d.ts.map

package/lib/components/Art/IconArt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconArt.d.ts","sourceRoot":"","sources":["../../../src/components/Art/IconArt.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,eAAO,MAAM,OAAO,wCAKjB,YAAY,4CA2Cd,CAAC"}

package/lib/components/Art/IconArt.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MaskedView from '@react-native-masked-view/masked-view';
+import { isNil, omit } from 'lodash';
+import { useEffect, useMemo } from 'react';
+import { isGradientColor, useTheme } from '../../theme';
+import { Box } from '../Box';
+import { Gradient } from '../Gradient';
+import { Icon, isSimpledAIIcon } from '../Icon';
+import { getArtDimensionValue } from './utils';
+export const IconArt = ({ art, size, color = 'grey900', ...otherProps }) => {
+    const theme = useTheme();
+    const themeArtIcon = useMemo(() => theme.__hd__.art.icon, [theme]);
+    const sizeValue = useMemo(() => getArtDimensionValue(theme, size, size), [theme, size]);
+    useEffect(() => {
+        if (isNil(size)) {
+            throw new Error('Size is required for IconArt');
+        }
+        if (!isSimpledAIIcon(art)) {
+            throw new Error('IconArt only supports simple AI icons');
+        }
+    }, [art, size]);
+    if (isGradientColor(color)) {
+        return (_jsx(Box, { ...omit(otherProps, ['width', 'height', 'fit']), children: _jsx(MaskedView, { maskElement: _jsx(Icon, { icon: art, size: sizeValue, color: "grey900" }), children: _jsx(Gradient, { gradient: color, start: themeArtIcon.gradientStart, end: themeArtIcon.gradientEnd, children: _jsx(Box, { opacity: 0, children: _jsx(Icon, { icon: art, size: sizeValue }) }) }) }) }));
+    }
+    return (_jsx(Box, { ...omit(otherProps, ['width', 'height', 'fit']), children: _jsx(Icon, { icon: art, size: sizeValue, color: color }) }));
+};

package/lib/components/Art/ImageArt.d.ts

@@ -0,0 +1,3 @@
+import type { ImageArtProps } from './types';
+export declare const ImageArt: ({ art, width, height, size, fit, color, ...otherProps }: ImageArtProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImageArt.d.ts.map

package/lib/components/Art/ImageArt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageArt.d.ts","sourceRoot":"","sources":["../../../src/components/Art/ImageArt.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAO7C,eAAO,MAAM,QAAQ,4DAQlB,aAAa,4CA2Df,CAAC"}

package/lib/components/Art/ImageArt.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { Canvas, Image, Mask, rect, Rect, useImage, } from '@shopify/react-native-skia';
+import { isNil } from 'lodash';
+import isString from 'lodash/fp/isString';
+import { useMemo } from 'react';
+import { isColor, useTheme } from '../../theme';
+import { Box } from '../Box';
+import { Skeleton } from '../Skeleton';
+import { getArtDimensionValue, isRemoteSource } from './utils';
+const StyledCanvas = styled(Canvas) `
+  flex: 1;
+`;
+export const ImageArt = ({ art, width, height, size, fit, color, ...otherProps }) => {
+    const theme = useTheme();
+    const image = useImage(art);
+    const widthValue = useMemo(() => getArtDimensionValue(theme, width, size) || 0, [theme, width, size]);
+    const heightValue = useMemo(() => getArtDimensionValue(theme, height, size) || 0, [height, size, theme]);
+    const Container = isString(art) && isRemoteSource(art) ? Skeleton : Box;
+    if (!isNil(color) && isColor(color)) {
+        return (_jsx(Container, { loading: isNil(image), ...otherProps, children: _jsx(Box, { width: widthValue, height: heightValue, children: _jsx(StyledCanvas, { children: _jsx(Mask, { mask: _jsx(Image, { image: image, x: 0, y: 0, fit: fit, width: widthValue, height: heightValue }), children: _jsx(Rect, { color: theme.colors[color], rect: rect(0, 0, widthValue, heightValue) }) }) }) }) }));
+    }
+    return (_jsx(Container, { loading: isNil(image), ...otherProps, children: _jsx(Box, { width: widthValue, height: heightValue, children: _jsx(StyledCanvas, { children: _jsx(Image, { image: image, x: 0, y: 0, fit: fit, width: widthValue, height: heightValue }) }) }) }));
+};

package/lib/components/Art/SvgArt.d.ts

@@ -0,0 +1,3 @@
+import type { SvgArtProps } from './types';
+export declare const SvgArt: ({ art, width, height, size, fit, useAnimated, animatedStyle, ...otherProps }: SvgArtProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SvgArt.d.ts.map

package/lib/components/Art/SvgArt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgArt.d.ts","sourceRoot":"","sources":["../../../src/components/Art/SvgArt.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAO3C,eAAO,MAAM,MAAM,iFAShB,WAAW,4CAyFb,CAAC"}

package/lib/components/Art/SvgArt.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/native';
+import { Canvas, fitbox, Group, ImageSVG, rect, Skia, useSVG, } from '@shopify/react-native-skia';
+import { isNil, isString, omit } from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+import { useDerivedValue } from 'react-native-reanimated';
+import { useTheme } from '../../theme';
+import { Box } from '../Box';
+import { Skeleton } from '../Skeleton';
+import { getArtDimensionValue, isRemoteSource } from './utils';
+const StyledCanvas = styled(Canvas) `
+  flex: 1;
+`;
+export const SvgArt = ({ art, width, height, size, fit = 'fill', useAnimated, animatedStyle, ...otherProps }) => {
+    const theme = useTheme();
+    const [svgArt, setSvgArt] = useState();
+    useEffect(() => {
+        if (isString(art) && isRemoteSource(art)) {
+            fetch(art)
+                .then(response => response.text())
+                .then(data => setSvgArt(data))
+                .catch(error => {
+                console.error('Failed to fetch SVG:', error);
+            });
+        }
+        else {
+            setSvgArt(undefined);
+        }
+    }, [art]);
+    const widthValue = useMemo(() => getArtDimensionValue(theme, width, size) || 0, [theme, width, size]);
+    const heightValue = useMemo(() => getArtDimensionValue(theme, height, size) || 0, [height, size, theme]);
+    const localSvg = useSVG(art);
+    const svg = useMemo(() => (isString(art) && isRemoteSource(art) && !isNil(svgArt)
+        ? Skia.SVG.MakeFromString(svgArt)
+        : localSvg), [art, localSvg, svgArt]);
+    const svgWidth = useMemo(() => svg?.width(), [svg]);
+    const svgHeight = useMemo(() => svg?.height(), [svg]);
+    const src = useMemo(() => rect(0, 0, svgWidth || 0, svgHeight || 0), [svgWidth, svgHeight]);
+    const dst = useMemo(() => rect(0, 0, widthValue || 0, heightValue || 0), [heightValue, widthValue]);
+    const fitboxValue = useDerivedValue(() => useAnimated ? [
+        {
+            scaleX: svgWidth ? width.value / svgWidth : 0,
+        },
+        {
+            scaleY: svgHeight ? height.value / svgHeight : 0,
+        },
+    ]
+        : undefined, [height, width, useAnimated, svgWidth, svgHeight]);
+    const Container = isString(art) && isRemoteSource(art) ? Skeleton : Box;
+    return (_jsx(Container, { loading: isNil(svg), ...omit(otherProps, ['fit']), children: _jsx(Box, { width: !useAnimated ? widthValue : undefined, height: !useAnimated ? heightValue : undefined, useAnimated: useAnimated, animatedStyle: animatedStyle, children: _jsx(StyledCanvas, { children: !isNil(svg) && (_jsx(Group, { transform: useAnimated ? fitboxValue : fitbox(fit, src, dst), children: _jsx(ImageSVG, { svg: svg, x: 0, y: 0, width: useAnimated ? width : widthValue, height: useAnimated ? height : heightValue }) })) }) }) }));
+};

package/lib/components/Art/constants.d.ts

@@ -0,0 +1,5 @@
+import type { DataSource } from '@shopify/react-native-skia';
+import type { BrandType } from './types';
+export declare const EMOJI_REGEX: RegExp;
+export declare const BRAND_ARTS: Record<BrandType, DataSource>;
+//# sourceMappingURL=constants.d.ts.map

package/lib/components/Art/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Art/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,WAAW,QAC+M,CAAC;AAExO,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,SAAS,EAAE,UAAU,CAIpD,CAAC"}

package/lib/components/Art/constants.js

@@ -0,0 +1,6 @@
+export const EMOJI_REGEX = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F1E6}-\u{1F1FF}]/u;
+export const BRAND_ARTS = {
+    facebook: require('../../assets/svg/brand-logo/facebook.svg'),
+    google: require('../../assets/svg/brand-logo/google.svg'),
+    apple: require('../../assets/svg/brand-logo/apple.svg'),
+};

package/lib/components/Art/hooks.d.ts

@@ -0,0 +1,3 @@
+import type { Size } from '../../theme';
+export declare const useSizeWidthHeightValidation: (size: number | Size | undefined, width: number | Size | undefined, height: number | Size | undefined) => void;
+//# sourceMappingURL=hooks.d.ts.map

package/lib/components/Art/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/Art/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC,eAAO,MAAM,4BAA4B,SACjC,MAAM,GAAG,IAAI,GAAG,SAAS,SACxB,MAAM,GAAG,IAAI,GAAG,SAAS,UACxB,MAAM,GAAG,IAAI,GAAG,SAAS,SAQlC,CAAC"}

package/lib/components/Art/hooks.js

@@ -0,0 +1,8 @@
+export const useSizeWidthHeightValidation = (size, width, height) => {
+    if (size !== undefined && (width !== undefined || height !== undefined)) {
+        throw new Error('size cannot be used with width or height');
+    }
+    if (size === undefined && width === undefined && height === undefined) {
+        throw new Error('size or width and height must be provided');
+    }
+};

package/lib/components/Art/index.d.ts

@@ -0,0 +1,10 @@
+import { BrandArt as Brand } from './BrandArt';
+import { EmojiArt as Emoji } from './EmojiArt';
+import { IconArt as Icon } from './IconArt';
+import { ImageArt as Image } from './ImageArt';
+import { SvgArt as Svg } from './SvgArt';
+import type { ArtProps } from './types';
+export declare const Art: (props: ArtProps) => import("react/jsx-runtime").JSX.Element;
+export * from './types';
+export { Image, Svg, Emoji, Icon, Brand };
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Art/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Art/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,QAAQ,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,QAAQ,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EACV,QAAQ,EAMT,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,GAAG,UAAW,QAAQ,4CAkBlC,CAAC;AAEF,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC"}

package/lib/components/Art/index.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { isString } from 'lodash';
+import { BrandArt as Brand } from './BrandArt';
+import { EmojiArt as Emoji } from './EmojiArt';
+import { IconArt as Icon } from './IconArt';
+import { ImageArt as Image } from './ImageArt';
+import { SvgArt as Svg } from './SvgArt';
+import { isEmoji, isIcon, isImage, isSvg } from './utils';
+export const Art = (props) => {
+    const { art, type } = props;
+    if (type === 'image' || (isString(art) && isImage(art))) {
+        return Image(props);
+    }
+    if (type === 'svg' || (isString(art) && isSvg(art))) {
+        return Svg(props);
+    }
+    if (type === 'emoji' || (isString(art) && isEmoji(art))) {
+        return Emoji(props);
+    }
+    if (type === 'icon' || (isString(art) && isIcon(art))) {
+        return Icon(props);
+    }
+    if (type === 'brand') {
+        return Brand(props);
+    }
+    return _jsx(_Fragment, {});
+};
+export * from './types';
+export { Image, Svg, Emoji, Icon, Brand };

package/lib/components/Art/types.d.ts

@@ -0,0 +1,157 @@
+import type { DataSource, Fit } from '@shopify/react-native-skia';
+import type { StyleProp } from 'react-native';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
+import type { Color, GradientColor, Size } from '../../theme';
+import type { BorderWidthsPropsKeyType, BoxProps, CustomBoxPropsKeyType, RadiiPropsKeyType, SpacePropsKeyType } from '../Box';
+import type { IconName } from '../Icon';
+export type ArtType = 'image' | 'svg' | 'emoji' | 'icon' | 'brand';
+export type CommonArtProps = Omit<Pick<BoxProps, SpacePropsKeyType | RadiiPropsKeyType | BorderWidthsPropsKeyType | CustomBoxPropsKeyType>, 'width' | 'height' | 'size' | 'animatedStyle' | 'useAnimated'>;
+export type IconArtProps = CommonArtProps & {
+    /**
+     * Art of the Icon Art.
+     */
+    art: IconName;
+    /**
+     * Type of the Art.
+     */
+    type?: 'icon';
+    /**
+   * Color of the Icon.
+   */
+    color?: Color | GradientColor | undefined;
+    /**
+   * Size of the Icon, if width and height are the same.
+   */
+    size?: Size | number | undefined;
+};
+export type AnimatedArtProps = {
+    /**
+     * If true, the Art will use the Animated API from react-native-reanimated.
+     */
+    useAnimated: true;
+    /**
+     * Additional styles for the animated box. Only used if `useAnimated` is true.
+     */
+    animatedStyle?: StyleProp<AnimatedStyle> | undefined;
+    /**
+   * Width of the Art.
+   */
+    width: SharedValue<number>;
+    /**
+   * Height of the Art.
+   */
+    height: SharedValue<number>;
+    /**
+   * Size of the Art, if width and height are the same.
+   */
+    size?: undefined;
+};
+export type NonAnimatedArtProps = {
+    /**
+     * If true, the Art will use the Animated API from react-native-reanimated.
+     */
+    useAnimated?: false | undefined;
+    /**
+     * Additional styles for the animated box. Only used if `useAnimated` is true.
+     */
+    animatedStyle?: undefined;
+    /**
+   * Size of the Art, if width and height are the same.
+   */
+    size?: number | Size | undefined;
+    /**
+   * Width of the Art.
+   */
+    width?: number | Size | undefined;
+    /**
+   * Height of the Art.
+   */
+    height?: number | Size | undefined;
+};
+export type ImageArtProps = CommonArtProps & {
+    /**
+     * Art of the Image.
+     */
+    art: DataSource;
+    /**
+     * Type of the Image.
+     */
+    type?: 'image';
+    /**
+     * Width of the Image.
+     */
+    width?: Size | number | undefined;
+    /**
+     * Height of the Image.
+     */
+    height?: Size | number | undefined;
+    /**
+   * Size of the Image, if width and height are the same.
+   */
+    size?: Size | number | undefined;
+    /**
+     * Fit of the Image.
+     */
+    fit?: Fit;
+    /**
+   * Color of the Image.
+   */
+    color?: Color | GradientColor | undefined;
+    /**
+   * Overflow of the Image.
+   */
+    overflow?: 'hidden' | 'visible' | 'scroll' | undefined;
+};
+export type SvgArtProps = CommonArtProps & (AnimatedArtProps | NonAnimatedArtProps) & {
+    /**
+     * Art of the Svg.
+     */
+    art: DataSource;
+    /**
+     * Type of the Svg.
+     */
+    type?: 'svg';
+    /**
+     * Fit of the Svg.
+     */
+    fit?: Fit;
+};
+export type EmojiArtProps = CommonArtProps & {
+    /**
+     * Art of the Emoji.
+     */
+    art: string;
+    /**
+     * Type of the Emoji.
+     */
+    type?: 'emoji';
+    /**
+   * Width of the Emoji.
+   */
+    width?: Size | number | undefined;
+    /**
+     * Height of the Emoji.
+     */
+    height?: Size | number | undefined;
+    /**
+   * Size of the Emoji, if width and height are the same.
+   */
+    size?: Size | number | undefined;
+};
+export type BrandType = 'facebook' | 'google' | 'apple';
+export type BrandArtProps = CommonArtProps & {
+    /**
+     * Type of the Brand.
+     */
+    type?: 'brand';
+    /**
+     * Art of the Brand.
+     */
+    art: BrandType;
+    /**
+   * Size of the Brand, if width and height are the same.
+   */
+    size?: Size | number | undefined;
+};
+export type ArtProps = IconArtProps | ImageArtProps | SvgArtProps | EmojiArtProps | BrandArtProps;
+//# sourceMappingURL=types.d.ts.map

package/lib/components/Art/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Art/types.ts"],"names":[],"mappings":"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"}

package/lib/components/Art/types.js

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

package/lib/components/Art/utils.d.ts

@@ -0,0 +1,40 @@
+import { type SharedValue } from 'react-native-reanimated';
+import type { Size, Theme } from '../../theme';
+/**
+ * Checks if the image source is a remote URL.
+ * @param {string} src - The source string of the image.
+ * @return {boolean} - Returns true if the source is a remote URL, false if it is local.
+ */
+export declare const isRemoteSource: (src: string) => boolean;
+/**
+ * Checks if the image source is a local asset.
+ * @param {string} src - The source string of the image.
+ * @return {boolean} - Returns true if the source is a local asset, false if it is a remote URL.
+ */
+export declare const isLocalSource: (src: string) => boolean;
+/**
+ * Checks if the image source is an emoji.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is an emoji, false otherwise.
+ */
+export declare const isEmoji: (art: string) => boolean;
+/**
+ * Checks if the image source is an icon.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is an icon, false otherwise.
+ */
+export declare const isIcon: (art: string) => boolean;
+/**
+ * Checks if the image source is a SVG file.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is a SVG file, false otherwise.
+ */
+export declare const isSvg: (art: string) => boolean;
+/**
+ * Checks if the image source is an image file.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is an image file, false otherwise.
+ */
+export declare const isImage: (art: string) => boolean;
+export declare const getArtDimensionValue: (theme: Theme, dimensionValue: Size | SharedValue<number> | number | undefined, size: Size | SharedValue<number> | number | undefined) => number | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/Art/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Art/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAK/C;;;;GAIG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,KAAG,OAI5C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAS,MAAM,KAAG,OAA+B,CAAC;AAE5E;;;;GAIG;AACH,eAAO,MAAM,OAAO,QAAS,MAAM,KAAG,OAErC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM,QAAS,MAAM,KAAG,OAEpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,QAAS,MAAM,KAAG,OAGnC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,OAAO,QAAS,MAAM,YAGlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,UACxB,KAAK,kBACI,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS,QACzD,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,SAAS,KACpD,MAAM,GAAG,SAcX,CAAC"}

package/lib/components/Art/utils.js

@@ -0,0 +1,68 @@
+import { isNumber, isString } from 'lodash';
+import { isSharedValue } from 'react-native-reanimated';
+import { isSize } from '../../theme';
+import { isSimpledAIIcon } from '../Icon';
+import { EMOJI_REGEX } from './constants';
+/**
+ * Checks if the image source is a remote URL.
+ * @param {string} src - The source string of the image.
+ * @return {boolean} - Returns true if the source is a remote URL, false if it is local.
+ */
+export const isRemoteSource = (src) => {
+    // Regular expression to check if the source starts with 'http', 'https', or 'ftp'
+    const remoteUrlPattern = /^(http:|https:|ftp:)/i;
+    return remoteUrlPattern.test(src);
+};
+/**
+ * Checks if the image source is a local asset.
+ * @param {string} src - The source string of the image.
+ * @return {boolean} - Returns true if the source is a local asset, false if it is a remote URL.
+ */
+export const isLocalSource = (src) => !isRemoteSource(src);
+/**
+ * Checks if the image source is an emoji.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is an emoji, false otherwise.
+ */
+export const isEmoji = (art) => {
+    return EMOJI_REGEX.test(art);
+};
+/**
+ * Checks if the image source is an icon.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is an icon, false otherwise.
+ */
+export const isIcon = (art) => {
+    return isSimpledAIIcon(art);
+};
+/**
+ * Checks if the image source is a SVG file.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is a SVG file, false otherwise.
+ */
+export const isSvg = (art) => {
+    const svgPattern = /\.svg$/i;
+    return svgPattern.test(art);
+};
+/**
+ * Checks if the image source is an image file.
+ * @param {string} art - The source string of the image.
+ * @return {boolean} - Returns true if the source is an image file, false otherwise.
+ */
+export const isImage = (art) => {
+    const imagePattern = /\.(jpeg|jpg|gif|png|bmp|tiff)$/i;
+    return imagePattern.test(art);
+};
+export const getArtDimensionValue = (theme, dimensionValue, size) => {
+    if (isSharedValue(dimensionValue) || isSharedValue(size)) {
+        return undefined;
+    }
+    const value = dimensionValue || size;
+    if (isNumber(value)) {
+        return value;
+    }
+    if (isString(value) && isSize(value)) {
+        return theme.sizes[value];
+    }
+    return theme.sizes[theme.__hd__.art.defaultSize];
+};

package/lib/components/Avatar/Wrapper.d.ts

@@ -0,0 +1,11 @@
+interface AvatarWrapperProps {
+    children: React.ReactNode;
+    editable?: boolean;
+    followable?: boolean;
+    followed?: boolean;
+    loading?: boolean;
+    onAvatarChange?: () => void;
+}
+export declare const AvatarWrapper: ({ children, editable, followable, loading, onAvatarChange, }: AvatarWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Wrapper.d.ts.map

package/lib/components/Avatar/Wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Wrapper.tsx"],"names":[],"mappings":"AAaA,UAAU,kBAAkB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,iEAMvB,kBAAkB,4CAsEpB,CAAC"}

package/lib/components/Avatar/Wrapper.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { uuidv4 } from '@firebase/util';
+import { useState } from 'react';
+import { openCropper, openPicker } from 'react-native-image-crop-picker';
+import { auth } from '../../auth';
+import { useTheme } from '../../theme';
+import { Toast } from '../../utils';
+import { Box } from '../Box';
+import { Loading } from '../Loading';
+import { Touchable } from '../Touchable';
+import { useUploadCloudinaryImageApi } from './apiCalls/useUploadCloudinaryImageApi';
+export const AvatarWrapper = ({ children, editable, followable, loading = false, onAvatarChange, }) => {
+    const theme = useTheme();
+    const [isSelectingAvatar, setIsSelectingAvatar] = useState(false);
+    const { uploadImage } = useUploadCloudinaryImageApi({
+        onError: () => {
+            setIsSelectingAvatar(false);
+            Toast.error('Failed to upload avatar');
+        },
+    });
+    const handleOpenPicker = async () => {
+        const { path } = await openPicker({
+            multiple: false,
+            cropperCircleOverlay: true,
+            mediaType: 'photo',
+            includeExif: true,
+        });
+        return await openCropper({
+            path,
+            width: theme.__hd__.avatar.defaultRequiredSize,
+            height: theme.__hd__.avatar.defaultRequiredSize,
+            includeExif: true,
+            mediaType: 'photo',
+        });
+    };
+    const handleSelectAvatar = async () => {
+        try {
+            setIsSelectingAvatar(true);
+            const croppedAvatar = await handleOpenPicker();
+            const avatarPublicId = uuidv4();
+            await uploadImage({
+                path: croppedAvatar.path,
+                publicId: avatarPublicId,
+            });
+            const imageUrl = `https://res.cloudinary.com/dqgkul2ur/image/upload/${avatarPublicId}`;
+            await auth.currentUser?.updateProfile({
+                photoURL: imageUrl,
+            });
+            onAvatarChange?.();
+        }
+        catch (error) {
+            Toast.error('Failed to select avatar');
+        }
+        finally {
+            setIsSelectingAvatar(false);
+        }
+    };
+    const handlePress = () => {
+        if (editable) {
+            handleSelectAvatar();
+        }
+    };
+    if (editable || followable) {
+        return (_jsx(Touchable, { onPress: handlePress, children: _jsx(Loading, { loading: loading || isSelectingAvatar, size: "medium", children: children }) }));
+    }
+    return (_jsx(Box, { children: children }));
+};

package/lib/components/Avatar/apiCalls/useUploadCloudinaryImageApi.d.ts

@@ -0,0 +1,14 @@
+import { type Options } from 'use-http';
+interface UseUploadCloudinaryImageApiParams {
+    onError?: Options['onError'];
+}
+export declare const useUploadCloudinaryImageApi: ({ onError, }: UseUploadCloudinaryImageApiParams) => {
+    uploadImage: ({ path, publicId, }: {
+        path: string;
+        publicId: string;
+    }) => Promise<void>;
+    loading: boolean;
+    error: Error | undefined;
+};
+export {};
+//# sourceMappingURL=useUploadCloudinaryImageApi.d.ts.map

package/lib/components/Avatar/apiCalls/useUploadCloudinaryImageApi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUploadCloudinaryImageApi.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/apiCalls/useUploadCloudinaryImageApi.ts"],"names":[],"mappings":"AAAA,OAAiB,EAAE,KAAK,OAAO,EAAE,MAAM,UAAU,CAAC;AAElD,UAAU,iCAAiC;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,2BAA2B,iBAErC,iCAAiC;uCAY/B;QACD,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB;;;CAmBF,CAAC"}

package/lib/components/Avatar/apiCalls/useUploadCloudinaryImageApi.js

@@ -0,0 +1,24 @@
+import useFetch, {} from 'use-http';
+export const useUploadCloudinaryImageApi = ({ onError, }) => {
+    const { post, loading, error, } = useFetch('https://api.cloudinary.com/v1_1/dqgkul2ur/image/upload', {
+        onError,
+    });
+    const uploadImage = async ({ path, publicId, }) => {
+        const formData = new FormData();
+        formData.append('file', {
+            uri: path,
+            type: 'image/jpeg',
+            name: `${publicId}.jpg`,
+        });
+        formData.append('public_id', publicId);
+        formData.append('upload_preset', 'jf6kaqxr');
+        formData.append('api_key', '856638577287277');
+        formData.append('timestamp', Date.now().toString());
+        await post(formData);
+    };
+    return {
+        uploadImage,
+        loading,
+        error,
+    };
+};