@aic-kits/react-native 0.0.2 → 0.0.4

package/lib/components/Box/StyledBox.js

@@ -0,0 +1,53 @@
+import styled from '@emotion/native';
+import { pick } from 'lodash';
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import config, { customBoxPropsConfig, customBoxPropsKey, flexPropsKey, } from './config';
+export const getThemeValue = (theme, key, props) => {
+    const propConfig = config[key];
+    const propValue = props[key];
+    if (!propValue) {
+        return undefined;
+    }
+    const { scale, property } = propConfig;
+    switch (scale) {
+        case 'colors':
+            return { [property]: theme.colors[propValue] };
+        case 'spaces':
+            return { [property]: theme.spaces[propValue] };
+        case 'radii':
+            return { [property]: theme.radii[propValue] };
+        case 'borderWidths':
+            return {
+                [property]: theme.borderWidths[propValue],
+            };
+    }
+};
+export const mapStylePropToThemeValue = (theme, props) => {
+    const entries = Object.keys(props);
+    return entries.reduce((result, key) => ({
+        ...result,
+        ...getThemeValue(theme, key, props),
+    }), {});
+};
+const mapCustomBoxPropsToStyle = (props) => {
+    return customBoxPropsKey.reduce((result, key) => {
+        if (props[key]) {
+            return { ...result, ...customBoxPropsConfig[key] };
+        }
+        return result;
+    }, {});
+};
+export const configKeys = Object.keys(config);
+export const genBoxStyle = (theme, props) => {
+    const styleProps = pick(props, configKeys);
+    const flexProps = pick(props, [...flexPropsKey]);
+    const customProps = pick(props, [...customBoxPropsKey]);
+    return {
+        ...mapStylePropToThemeValue(theme, styleProps),
+        ...mapCustomBoxPropsToStyle(customProps),
+        ...flexProps,
+    };
+};
+export const StyledBox = styled(View)(({ theme, ...otherProps }) => genBoxStyle(theme, otherProps));
+export const StyledAnimatedBox = styled(Animated.View)(({ theme, ...otherProps }) => genBoxStyle(theme, otherProps));

package/lib/components/Box/config.d.ts

@@ -0,0 +1,359 @@
+import type { ViewStyle } from 'react-native';
+declare const colors: {
+    readonly backgroundColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly bgColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly borderColor: {
+        readonly property: "borderColor";
+        readonly scale: "colors";
+    };
+    readonly borderTopColor: {
+        readonly property: "borderTopColor";
+        readonly scale: "colors";
+    };
+    readonly borderBottomColor: {
+        readonly property: "borderBottomColor";
+        readonly scale: "colors";
+    };
+    readonly borderStartColor: {
+        readonly property: "borderStartColor";
+        readonly scale: "colors";
+    };
+    readonly borderEndColor: {
+        readonly property: "borderEndColor";
+        readonly scale: "colors";
+    };
+    readonly borderLeftColor: {
+        readonly property: "borderLeftColor";
+        readonly scale: "colors";
+    };
+    readonly borderRightColor: {
+        readonly property: "borderRightColor";
+        readonly scale: "colors";
+    };
+};
+declare const spaces: {
+    readonly margin: {
+        readonly property: "margin";
+        readonly scale: "spaces";
+    };
+    readonly marginBottom: {
+        readonly property: "marginBottom";
+        readonly scale: "spaces";
+    };
+    readonly marginEnd: {
+        readonly property: "marginEnd";
+        readonly scale: "spaces";
+    };
+    readonly marginHorizontal: {
+        readonly property: "marginHorizontal";
+        readonly scale: "spaces";
+    };
+    readonly marginLeft: {
+        readonly property: "marginLeft";
+        readonly scale: "spaces";
+    };
+    readonly marginRight: {
+        readonly property: "marginRight";
+        readonly scale: "spaces";
+    };
+    readonly marginStart: {
+        readonly property: "marginStart";
+        readonly scale: "spaces";
+    };
+    readonly marginTop: {
+        readonly property: "marginTop";
+        readonly scale: "spaces";
+    };
+    readonly marginVertical: {
+        readonly property: "marginVertical";
+        readonly scale: "spaces";
+    };
+    readonly padding: {
+        readonly property: "padding";
+        readonly scale: "spaces";
+    };
+    readonly paddingBottom: {
+        readonly property: "paddingBottom";
+        readonly scale: "spaces";
+    };
+    readonly paddingEnd: {
+        readonly property: "paddingEnd";
+        readonly scale: "spaces";
+    };
+    readonly paddingHorizontal: {
+        readonly property: "paddingHorizontal";
+        readonly scale: "spaces";
+    };
+    readonly paddingLeft: {
+        readonly property: "paddingLeft";
+        readonly scale: "spaces";
+    };
+    readonly paddingRight: {
+        readonly property: "paddingRight";
+        readonly scale: "spaces";
+    };
+    readonly paddingStart: {
+        readonly property: "paddingStart";
+        readonly scale: "spaces";
+    };
+    readonly paddingTop: {
+        readonly property: "paddingTop";
+        readonly scale: "spaces";
+    };
+    readonly paddingVertical: {
+        readonly property: "paddingVertical";
+        readonly scale: "spaces";
+    };
+    readonly gap: {
+        readonly property: "gap";
+        readonly scale: "spaces";
+    };
+};
+declare const radii: {
+    readonly borderBottomEndRadius: {
+        readonly property: "borderBottomEndRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomLeftRadius: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomRightRadius: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomStartRadius: {
+        readonly property: "borderBottomStartRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopEndRadius: {
+        readonly property: "borderTopEndRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopLeftRadius: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopRightRadius: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopStartRadius: {
+        readonly property: "borderTopStartRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+};
+declare const borderWidths: {
+    readonly borderWidth: {
+        readonly property: "borderWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderBottomWidth: {
+        readonly property: "borderBottomWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderTopWidth: {
+        readonly property: "borderTopWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderLeftWidth: {
+        readonly property: "borderLeftWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderRightWidth: {
+        readonly property: "borderRightWidth";
+        readonly scale: "borderWidths";
+    };
+};
+declare const config: {
+    readonly borderWidth: {
+        readonly property: "borderWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderBottomWidth: {
+        readonly property: "borderBottomWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderTopWidth: {
+        readonly property: "borderTopWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderLeftWidth: {
+        readonly property: "borderLeftWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderRightWidth: {
+        readonly property: "borderRightWidth";
+        readonly scale: "borderWidths";
+    };
+    readonly borderBottomEndRadius: {
+        readonly property: "borderBottomEndRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomLeftRadius: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomRightRadius: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderBottomStartRadius: {
+        readonly property: "borderBottomStartRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopEndRadius: {
+        readonly property: "borderTopEndRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopLeftRadius: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopRightRadius: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderTopStartRadius: {
+        readonly property: "borderTopStartRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly margin: {
+        readonly property: "margin";
+        readonly scale: "spaces";
+    };
+    readonly marginBottom: {
+        readonly property: "marginBottom";
+        readonly scale: "spaces";
+    };
+    readonly marginEnd: {
+        readonly property: "marginEnd";
+        readonly scale: "spaces";
+    };
+    readonly marginHorizontal: {
+        readonly property: "marginHorizontal";
+        readonly scale: "spaces";
+    };
+    readonly marginLeft: {
+        readonly property: "marginLeft";
+        readonly scale: "spaces";
+    };
+    readonly marginRight: {
+        readonly property: "marginRight";
+        readonly scale: "spaces";
+    };
+    readonly marginStart: {
+        readonly property: "marginStart";
+        readonly scale: "spaces";
+    };
+    readonly marginTop: {
+        readonly property: "marginTop";
+        readonly scale: "spaces";
+    };
+    readonly marginVertical: {
+        readonly property: "marginVertical";
+        readonly scale: "spaces";
+    };
+    readonly padding: {
+        readonly property: "padding";
+        readonly scale: "spaces";
+    };
+    readonly paddingBottom: {
+        readonly property: "paddingBottom";
+        readonly scale: "spaces";
+    };
+    readonly paddingEnd: {
+        readonly property: "paddingEnd";
+        readonly scale: "spaces";
+    };
+    readonly paddingHorizontal: {
+        readonly property: "paddingHorizontal";
+        readonly scale: "spaces";
+    };
+    readonly paddingLeft: {
+        readonly property: "paddingLeft";
+        readonly scale: "spaces";
+    };
+    readonly paddingRight: {
+        readonly property: "paddingRight";
+        readonly scale: "spaces";
+    };
+    readonly paddingStart: {
+        readonly property: "paddingStart";
+        readonly scale: "spaces";
+    };
+    readonly paddingTop: {
+        readonly property: "paddingTop";
+        readonly scale: "spaces";
+    };
+    readonly paddingVertical: {
+        readonly property: "paddingVertical";
+        readonly scale: "spaces";
+    };
+    readonly gap: {
+        readonly property: "gap";
+        readonly scale: "spaces";
+    };
+    readonly backgroundColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly bgColor: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly borderColor: {
+        readonly property: "borderColor";
+        readonly scale: "colors";
+    };
+    readonly borderTopColor: {
+        readonly property: "borderTopColor";
+        readonly scale: "colors";
+    };
+    readonly borderBottomColor: {
+        readonly property: "borderBottomColor";
+        readonly scale: "colors";
+    };
+    readonly borderStartColor: {
+        readonly property: "borderStartColor";
+        readonly scale: "colors";
+    };
+    readonly borderEndColor: {
+        readonly property: "borderEndColor";
+        readonly scale: "colors";
+    };
+    readonly borderLeftColor: {
+        readonly property: "borderLeftColor";
+        readonly scale: "colors";
+    };
+    readonly borderRightColor: {
+        readonly property: "borderRightColor";
+        readonly scale: "colors";
+    };
+};
+export declare const flexPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent", "position", "top", "right", "bottom", "left", "overflow", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "opacity"];
+export declare const customBoxPropsKey: readonly ["absoluteFill", "sharedTransitionTag", "useAnimated", "animatedStyle"];
+export type ColorPropsKeyType = keyof typeof colors;
+export type SpacePropsKeyType = keyof typeof spaces;
+export type RadiiPropsKeyType = keyof typeof radii;
+export type BorderWidthsPropsKeyType = keyof typeof borderWidths;
+export type ConfigType = typeof config;
+export type FlexPropsKeyType = (typeof flexPropsKey)[number];
+export type CustomBoxPropsKeyType = (typeof customBoxPropsKey)[number];
+export declare const customBoxPropsConfig: Record<CustomBoxPropsKeyType, ViewStyle>;
+export default config;
+//# sourceMappingURL=config.d.ts.map

package/lib/components/Box/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/components/Box/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCF,CAAC;AAEX,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EF,CAAC;AAEX,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCD,CAAC;AAEX,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAqBR,CAAC;AAEX,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKF,CAAC;AAEX,eAAO,MAAM,YAAY,ySAyBf,CAAC;AAEX,eAAO,MAAM,iBAAiB,kFAKpB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,MAAM,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,MAAM,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,KAAK,CAAC;AACnD,MAAM,MAAM,wBAAwB,GAAG,MAAM,OAAO,YAAY,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC;AACvC,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAC7D,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvE,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,qBAAqB,EAAE,SAAS,CAWzE,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Box/config.js

@@ -0,0 +1,227 @@
+const colors = {
+    backgroundColor: {
+        property: 'backgroundColor',
+        scale: 'colors',
+    },
+    bgColor: {
+        property: 'backgroundColor',
+        scale: 'colors',
+    },
+    borderColor: {
+        property: 'borderColor',
+        scale: 'colors',
+    },
+    borderTopColor: {
+        property: 'borderTopColor',
+        scale: 'colors',
+    },
+    borderBottomColor: {
+        property: 'borderBottomColor',
+        scale: 'colors',
+    },
+    borderStartColor: {
+        property: 'borderStartColor',
+        scale: 'colors',
+    },
+    borderEndColor: {
+        property: 'borderEndColor',
+        scale: 'colors',
+    },
+    borderLeftColor: {
+        property: 'borderLeftColor',
+        scale: 'colors',
+    },
+    borderRightColor: {
+        property: 'borderRightColor',
+        scale: 'colors',
+    },
+};
+const spaces = {
+    margin: {
+        property: 'margin',
+        scale: 'spaces',
+    },
+    marginBottom: {
+        property: 'marginBottom',
+        scale: 'spaces',
+    },
+    marginEnd: {
+        property: 'marginEnd',
+        scale: 'spaces',
+    },
+    marginHorizontal: {
+        property: 'marginHorizontal',
+        scale: 'spaces',
+    },
+    marginLeft: {
+        property: 'marginLeft',
+        scale: 'spaces',
+    },
+    marginRight: {
+        property: 'marginRight',
+        scale: 'spaces',
+    },
+    marginStart: {
+        property: 'marginStart',
+        scale: 'spaces',
+    },
+    marginTop: {
+        property: 'marginTop',
+        scale: 'spaces',
+    },
+    marginVertical: {
+        property: 'marginVertical',
+        scale: 'spaces',
+    },
+    padding: {
+        property: 'padding',
+        scale: 'spaces',
+    },
+    paddingBottom: {
+        property: 'paddingBottom',
+        scale: 'spaces',
+    },
+    paddingEnd: {
+        property: 'paddingEnd',
+        scale: 'spaces',
+    },
+    paddingHorizontal: {
+        property: 'paddingHorizontal',
+        scale: 'spaces',
+    },
+    paddingLeft: {
+        property: 'paddingLeft',
+        scale: 'spaces',
+    },
+    paddingRight: {
+        property: 'paddingRight',
+        scale: 'spaces',
+    },
+    paddingStart: {
+        property: 'paddingStart',
+        scale: 'spaces',
+    },
+    paddingTop: {
+        property: 'paddingTop',
+        scale: 'spaces',
+    },
+    paddingVertical: {
+        property: 'paddingVertical',
+        scale: 'spaces',
+    },
+    gap: {
+        property: 'gap',
+        scale: 'spaces',
+    },
+};
+const radii = {
+    borderBottomEndRadius: {
+        property: 'borderBottomEndRadius',
+        scale: 'radii',
+    },
+    borderBottomLeftRadius: {
+        property: 'borderBottomLeftRadius',
+        scale: 'radii',
+    },
+    borderBottomRightRadius: {
+        property: 'borderBottomRightRadius',
+        scale: 'radii',
+    },
+    borderBottomStartRadius: {
+        property: 'borderBottomStartRadius',
+        scale: 'radii',
+    },
+    borderTopEndRadius: {
+        property: 'borderTopEndRadius',
+        scale: 'radii',
+    },
+    borderTopLeftRadius: {
+        property: 'borderTopLeftRadius',
+        scale: 'radii',
+    },
+    borderTopRightRadius: {
+        property: 'borderTopRightRadius',
+        scale: 'radii',
+    },
+    borderTopStartRadius: {
+        property: 'borderTopStartRadius',
+        scale: 'radii',
+    },
+    borderRadius: {
+        property: 'borderRadius',
+        scale: 'radii',
+    },
+};
+const borderWidths = {
+    borderWidth: {
+        property: 'borderWidth',
+        scale: 'borderWidths',
+    },
+    borderBottomWidth: {
+        property: 'borderBottomWidth',
+        scale: 'borderWidths',
+    },
+    borderTopWidth: {
+        property: 'borderTopWidth',
+        scale: 'borderWidths',
+    },
+    borderLeftWidth: {
+        property: 'borderLeftWidth',
+        scale: 'borderWidths',
+    },
+    borderRightWidth: {
+        property: 'borderRightWidth',
+        scale: 'borderWidths',
+    },
+};
+const config = {
+    ...colors,
+    ...spaces,
+    ...radii,
+    ...borderWidths,
+};
+export const flexPropsKey = [
+    'alignContent',
+    'alignItems',
+    'alignSelf',
+    'display',
+    'flex',
+    'flexBasis',
+    'flexDirection',
+    'flexGrow',
+    'flexShrink',
+    'flexWrap',
+    'justifyContent',
+    'position',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'overflow',
+    'width',
+    'minWidth',
+    'maxWidth',
+    'height',
+    'minHeight',
+    'maxHeight',
+    'opacity',
+];
+export const customBoxPropsKey = [
+    'absoluteFill',
+    'sharedTransitionTag',
+    'useAnimated',
+    'animatedStyle',
+];
+export const customBoxPropsConfig = {
+    absoluteFill: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    sharedTransitionTag: {},
+    useAnimated: {},
+    animatedStyle: {},
+};
+export default config;

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

@@ -0,0 +1,11 @@
+import { type ForwardedRef } from 'react';
+import { View } from 'react-native';
+import type { BoxProps } from './types';
+declare function PlainBox({ children, style, testID, useAnimated, sharedTransitionTag, animatedStyle, ...otherProps }: BoxProps, ref: ForwardedRef<View>): import("react/jsx-runtime").JSX.Element;
+export declare const Box: (props: BoxProps & {
+    ref?: ForwardedRef<View>;
+}) => ReturnType<typeof PlainBox>;
+export * from './config';
+export * from './types';
+export * from './StyledBox';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,GAAG,UAAU,EACd,EAAE,QAAQ,EACX,GAAG,EAAE,YAAY,CAAC,IAAI,CAAC,2CAqBtB;AAED,eAAO,MAAM,GAAG,EAA2B,CACzC,KAAK,EAAE,QAAQ,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC3C,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEjC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/lib/components/Box/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { StyledAnimatedBox, StyledBox } from './StyledBox';
+function PlainBox({ children, style, testID, useAnimated, sharedTransitionTag, animatedStyle, ...otherProps }, ref) {
+    if (useAnimated || sharedTransitionTag) {
+        return (_jsx(StyledAnimatedBox, { ...otherProps, style: [style, animatedStyle], testID: testID, sharedTransitionTag: sharedTransitionTag, ref: ref, children: children }));
+    }
+    return (_jsx(StyledBox, { ref: ref, ...otherProps, style: style, testID: testID, children: children }));
+}
+export const Box = forwardRef(PlainBox);
+export * from './config';
+export * from './types';
+export * from './StyledBox';