react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.21

package/components/DatePickerInline/types.ts

@@ -1,11 +1,12 @@
 import type { MemoExoticComponent } from 'react';
 import type { ViewStyle } from 'react-native';
 
+import type { DatePickerLocale } from '../DatePicker/context';
 import type { CalendarHeaderProps } from './DatePickerInlineHeader';
 import type { DisableWeekDaysType } from './dateUtils';
 
 export interface BaseMonthProps {
-    locale: undefined | string;
+    locale: DatePickerLocale | undefined;
     scrollMode: 'horizontal' | 'vertical';
     disableWeekDays?: DisableWeekDaysType;
     mode: ModeType;
@@ -13,6 +14,7 @@ export interface BaseMonthProps {
     onPressDate: (date: Date) => any;
     validRange?: ValidRangeType;
     customMonthStyles?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // some of these should be required in final implementation
     date?: CalendarDate;
@@ -46,13 +48,15 @@ export type ValidRangeType = {
 };
 
 export type BaseDatePickerProps = {
-    locale?: string;
+    locale?: DatePickerLocale;
     disableWeekDays?: DisableWeekDaysType;
     validRange?: ValidRangeType;
     startYear?: number;
     endYear?: number;
     HeaderComponent?: MemoExoticComponent<CalendarHeaderProps | any>;
+    headerLayout?: 'inline' | 'docked';
     monthStyle?: Record<string, any>;
+    showOutsideDays?: boolean;
 
     // here they are optional but in final implemenation they are required
     date?: CalendarDate;

package/components/DatePickerInline/utils.ts

@@ -3,11 +3,13 @@ import { StyleSheet } from 'react-native-unistyles';
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { daySize } from './dateUtils';
 
-export const dayNamesHeight = 44;
+export const dayNamesHeight = 48;
 
 // TODO make it flexible
-export const weekMargin = 6;
-export const weekSize = daySize + weekMargin;
+export const cellSize = 48;
+export const cellVerticalPadding = (cellSize - daySize) / 2;
+export const weekMargin = 0;
+export const weekSize = cellSize + weekMargin;
 export const montHeaderHeight = 56;
 export const monthHeaderSingleMarginTop = 4;
 export const monthHeaderSingleMarginBottom = 8 + 22 + 12;
@@ -33,8 +35,7 @@ const datePickerMonthStylesDefault = StyleSheet.create(theme => ({
         backgroundColor: theme.colors.surface,
     },
     monthLabel: {
-        ...theme.typescale.bodyMedium,
-        opacity: 0.7,
+        ...theme.typescale.labelLarge,
     },
     yearButton: {
         alignSelf: 'flex-start',
@@ -89,6 +90,30 @@ const datePickerYearPickerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
+export const datePickerDayStateLayerStyles = StyleSheet.create(theme => ({
+    stateLayer: {
+        variants: {
+            state: {
+                hovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                todayAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.primary,
+                },
+                outsideAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+                selectedAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onPrimary,
+                },
+                inRangeAndHovered: {
+                    backgroundColor: theme.colors.stateLayer.hover.onSurface,
+                },
+            },
+        },
+    },
+}));
+
 const datePickerDayStylesDefault = StyleSheet.create(theme => ({
     containerStyle: {
         flex: 1,
@@ -102,6 +127,9 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 disabled: {
                     opacity: 0.3,
                 },
+                outside: {
+                    opacity: 0.38,
+                },
             },
         },
     },
@@ -117,7 +145,7 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 inRange: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: 'transparent',
                 },
             },
         },
@@ -140,12 +168,13 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 },
 
                 inRange: {
-                    borderColor: theme.colors.primary,
+                    borderWidth: 0,
+                    borderColor: 'transparent',
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                     today: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                 },
             },
@@ -156,15 +185,17 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 inRange: {
-                    borderColor: theme.colors.primary,
+                    borderWidth: 0,
+                    borderColor: 'transparent',
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                 },
             },
         },
     },
     text: {
+        ...theme.typescale.bodyLarge,
         variants: {
             state: {
                 selected: {
@@ -175,16 +206,16 @@ const datePickerDayStylesDefault = StyleSheet.create(theme => ({
                 },
 
                 inRange: {
-                    color: theme.colors.onPrimary,
+                    color: theme.colors.onSecondaryContainer,
 
                     day: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                     button: {
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: 'transparent',
                     },
                     today: {
-                        borderColor: theme.colors.primary,
+                        borderColor: 'transparent',
                     },
                 },
             },
@@ -205,7 +236,7 @@ const datePickerDayEmptyStylesDefault = StyleSheet.create({
 const datePickerWeekStylesDefault = StyleSheet.create({
     root: {
         flexDirection: 'row',
-        height: daySize,
+        height: cellSize,
     },
 });
 
@@ -214,7 +245,7 @@ const datePickerHeaderStylesDefault = StyleSheet.create(theme => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        marginHorizontal: theme.spacings['5'],
+        padding: theme.spacings['2'],
     },
     buttonContainer: {
         height: 56,
@@ -226,8 +257,7 @@ const datePickerHeaderStylesDefault = StyleSheet.create(theme => ({
     buttonWrapper: {},
     spacer: { flex: 1 },
     yearLabelStyle: {
-        ...theme.typescale.bodyMedium,
-        opacity: 0.7,
+        ...theme.typescale.labelLarge,
     },
     yearButtonStyle: {
         alignSelf: 'flex-start',
@@ -249,24 +279,25 @@ const dateDayNameStylesDefault = StyleSheet.create(theme => ({
         alignItems: 'center',
         backgroundColor: theme.colors.surface,
     },
-    dayName: { flex: 1, alignItems: 'center' },
+    dayName: { flex: 1, alignItems: 'center', ...theme.typescale.bodyLarge },
     dayNameLabel: {
-        opacity: 0.7,
-        ...theme.typescale.bodyMedium,
+        ...theme.typescale.bodyLarge,
     },
 }));
 
 const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
     container: {
+        position: 'absolute',
+        top: cellVerticalPadding,
+        bottom: cellVerticalPadding,
+        left: 0,
+        right: 0,
         flexDirection: 'row',
 
         variants: {
             state: {
-                bothWays: {
-                    borderRadius: daySize / 2,
-                },
                 inRange: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
                 isCrop: {
                     backgroundColor: undefined,
@@ -280,7 +311,7 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 isRightCrop: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
             },
         },
@@ -291,13 +322,13 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
         variants: {
             state: {
                 isLeftCrop: {
-                    backgroundColor: theme.colors.primary,
+                    backgroundColor: theme.colors.secondaryContainer,
                 },
             },
         },
     },
     centerCrop: {
-        backgroundColor: theme.colors.primary,
+        backgroundColor: theme.colors.secondaryContainer,
         minWidth: daySize,
         minHeight: daySize,
 
@@ -317,7 +348,13 @@ const datePickerDayRangeStylesDefault = StyleSheet.create(theme => ({
 }));
 
 const datePickerYearItemStylesDefault = StyleSheet.create(theme => ({
+    content: {
+        alignItems: 'center',
+    },
     yearButton: {
+        borderRadius: theme.shapes.corner.full,
+        paddingHorizontal: 0,
+        overflow: 'hidden',
         variants: {
             state: {
                 selected: {

package/components/Drawer/Drawer.tsx

@@ -3,25 +3,36 @@ import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
-import { useSubcomponents } from '../../hooks';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
 export type Props = Omit<ViewProps, 'children'> & {
     children: ReactElement | ReactElement[];
 };
 
-const allowedChildren = ['Drawer_Footer', 'Drawer_Header', 'Drawer_Content'];
+const allowedChildren = [
+    { name: 'Drawer_Footer', allowMultiple: false },
+    { name: 'Drawer_Header', allowMultiple: false },
+    { name: 'Drawer_Content', allowMultiple: false },
+];
 
 const Drawer = ({ style, children, ...rest }: Props) => {
-    const { Drawer_Header, Drawer_Footer, Drawer_Content } = useSubcomponents({
+    const {
+        Drawer_Header,
+        Drawer_Footer,
+        Drawer_Content,
+        rest: restChildren,
+    } = extractSubcomponents({
         children,
         allowedChildren,
+        includeRest: true,
     });
 
     return (
         <View style={[drawerStyles.root, style]} {...rest}>
-            {Drawer_Header[0]}
-            {Drawer_Content[0]}
-            {Drawer_Footer[0]}
+            {Drawer_Header}
+            {Drawer_Content}
+            {Drawer_Footer}
+            {restChildren}
         </View>
     );
 };

package/components/ElementGroup/ElementGroup.tsx

@@ -1,6 +1,7 @@
 import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { isNil } from '../../utils/lodash';
 import { elementGroupStyles } from './utils';
 
@@ -44,24 +45,25 @@ export const ElementGroup = (
             borderTopRightRadius,
             borderBottomLeftRadius,
             borderBottomRightRadius,
-            ...restStyle
-        } = elementGroupStyles.root as any;
-        const {
-            borderTopLeftRadius: _borderTopLeftRadius,
-            borderTopRightRadius: _borderTopRightRadius,
-            borderBottomLeftRadius: _borderBottomLeftRadius,
-            borderBottomRightRadius: _borderBottomRightRadius,
-            ..._restStyle
-        } = style ?? {};
+        } = extractPropertiesFromStyles(
+            [elementGroupStyles.root, style],
+            [
+                'borderRadius',
+                'borderTopLeftRadius',
+                'borderTopRightRadius',
+                'borderBottomLeftRadius',
+                'borderBottomRightRadius',
+            ],
+        );
 
         return {
-            containerStyle: [restStyle, _restStyle],
+            containerStyle: [elementGroupStyles.root, style],
             borderRadius: borderRadiusProp || _borderRadius,
             borderRadiuses: {
-                borderTopLeftRadius: borderTopLeftRadius || _borderTopLeftRadius,
-                borderTopRightRadius: borderTopRightRadius || _borderTopRightRadius,
-                borderBottomLeftRadius: borderBottomLeftRadius || _borderBottomLeftRadius,
-                borderBottomRightRadius: borderBottomRightRadius || _borderBottomRightRadius,
+                borderTopLeftRadius: borderTopLeftRadius,
+                borderTopRightRadius: borderTopRightRadius,
+                borderBottomLeftRadius: borderBottomLeftRadius,
+                borderBottomRightRadius: borderBottomRightRadius,
             },
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/components/FilePicker/FilePicker.tsx

@@ -1,15 +1,17 @@
-import { forwardRef, memo, type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
+import useControlledValue from '../../hooks/useControlledValue';
 import useFilePicker from '../../hooks/useFilePicker';
 import type { DocumentPickerOptions, DocumentResult } from '../../utils/DocumentPicker';
-import { ActivityIndicator } from '../ActivityIndicator';
 import { IconButton } from '../IconButton';
 import { TextInput, type TextInputProps } from '../TextInput';
+import { FilePickerContext } from './utils';
 
 export type OmitProp =
     | 'editable'
     | 'multiline'
     | 'onChangeText'
+    | 'onChange'
     | 'keyboardType'
     | 'defaultValue'
     | 'value'
@@ -24,45 +26,39 @@ export type Props = Omit<TextInputProps, OmitProp> &
          */
         multiple?: boolean;
         /**
-         * Displays the Spinner on the right side in place of the default upload icon
-         * @default false
+         * Default value for uncontrolled usage
          */
-        loading?: boolean;
-        left?: ReactNode;
-        right?: ReactNode;
+        defaultValue?: DocumentResult[];
         /**
          * To Control the value
          */
-        value?: DocumentResult | DocumentResult[];
+        value?: DocumentResult[];
         /**
          * The Callback function to return the selected files as an array or object
          */
-        onChange?: (result: DocumentResult | DocumentResult[]) => any;
-        /**
-         * To replace the default progress indicator
-         */
-        progressIndicator?: ReactNode;
+        onChange?: (result: DocumentResult[] | undefined) => any;
     };
 
-const FilePicker = (
-    {
-        loading,
-        right: rightProp,
-        progressIndicator,
-        type,
-        multiple,
-        transitionStyle,
-        mode,
-        presentationStyle,
-        value,
-        onChange = () => {},
-        onCancel,
-        onError,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const [displayText, setDisplayText] = useState('');
+const FilePicker = ({
+    ref,
+    type,
+    multiple,
+    transitionStyle,
+    mode,
+    presentationStyle,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    onCancel,
+    onError,
+    children,
+    ...rest
+}: Props) => {
+    const [value, onValueChange] = useControlledValue<DocumentResult[] | undefined>({
+        value: valueProp,
+        defaultValue,
+        onChange,
+    });
 
     const { openFilePicker } = useFilePicker({
         type,
@@ -74,60 +70,34 @@ const FilePicker = (
         onError,
     });
 
-    const onSetInputValue = useCallback(
-        (response: DocumentResult | DocumentResult[] | undefined) => {
-            if (Array.isArray(response)) {
-                if (response.length > 1) {
-                    setDisplayText(`${response.length} file${response.length > 1 ? 's' : ''}`);
-                    return;
-                }
+    const displayText = useMemo(() => {
+        if (!value) return '';
 
-                setDisplayText(response[0].name || '');
-                return;
-            }
-
-            setDisplayText(response?.name || '');
-        },
-        [],
-    );
+        if (value.length > 1) {
+            return `${value.length} files`;
+        }
+        return value[0]?.name || '';
+    }, [value]);
 
     const onPress = useCallback(() => {
         openFilePicker(response => {
-            onSetInputValue(response);
-
-            onChange?.(response);
+            onValueChange(response);
         });
-    }, [onChange, onSetInputValue, openFilePicker]);
-
-    const rightElement = useMemo(() => {
-        if (!loading) {
-            return (
-                <>
-                    {rightProp || (
-                        <IconButton type="material-community" name="upload" onPress={onPress} />
-                    )}
-                </>
-            );
-        } else {
-            return <>{progressIndicator || <ActivityIndicator />}</>;
-        }
-    }, [loading, onPress, progressIndicator, rightProp]);
+    }, [onValueChange, openFilePicker]);
 
-    // if the value changes, we only want file name or the length of the array to display the text
-    useEffect(() => {
-        onSetInputValue(value);
-    }, [onSetInputValue, value]);
+    const contextValue = useMemo(() => ({ onPressTrigger: onPress }), [onPress]);
 
     return (
-        <TextInput
-            label="Choose file"
-            {...rest}
-            value={displayText}
-            editable={false}
-            right={rightElement}
-            ref={ref}
-        />
+        <FilePickerContext value={contextValue}>
+            <TextInput value={displayText} {...rest} editable={false} ref={ref}>
+                <TextInput.Label>Choose file</TextInput.Label>
+                <TextInput.Right>
+                    <IconButton type="material-community" name="upload" onPress={onPress} />
+                </TextInput.Right>
+                {children}
+            </TextInput>
+        </FilePickerContext>
     );
 };
 
-export default memo(forwardRef(FilePicker));
+export default memo(FilePicker);

package/components/FilePicker/index.tsx

@@ -4,4 +4,5 @@ import FilePickerDefault from './FilePicker';
 export const FilePicker = getRegisteredComponentWithFallback('FilePicker', FilePickerDefault);
 
 export type { Props as FilePickerProps } from './FilePicker';
-export { defaultStyles } from './utils';
+export type { FilePickerContextType } from './utils';
+export { defaultStyles, FilePickerContext } from './utils';

package/components/FilePicker/utils.ts

@@ -1,7 +1,16 @@
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+export type FilePickerContextType = {
+    onPressTrigger: () => void;
+};
+
+export const FilePickerContext = createContext<FilePickerContextType>({
+    onPressTrigger: () => {},
+});
+
 const filePickerStylesDefault = StyleSheet.create({
     root: {},
 });

package/components/HelperText/HelperText.tsx

@@ -24,41 +24,6 @@ export type Props = TextProps & {
     testID?: string;
 };
 
-/**
- * Helper text is used in conjuction with input elements to provide additional hints for the user.
- *
- * <div class="screenshots">
- *   <img class="small" src="screenshots/helper-text.gif" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { HelperText, TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *    const onChangeText = text => setText(text);
- *
- *   const hasErrors = () => {
- *     return !text.includes('@');
- *   };
- *
- *  return (
- *     <View>
- *       <TextInput label="Email" value={text} onChangeText={onChangeText} />
- *       <HelperText variant="error" visible={hasErrors()}>
- *         Email address is invalid!
- *       </HelperText>
- *     </View>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
 const HelperText = ({
     style: styleProp,
     variant = 'info',

package/components/Icon/iconFactory.tsx

@@ -1,6 +1,6 @@
 // import { textFactory } from '../Text/textFactory';
 import { memoize } from '../../utils/lodash';
-import { IconPacks, type IconType } from './types';
+import type { IconType } from './types';
 
 const customIcons: any = {};
 
@@ -10,9 +10,9 @@ export const registerCustomIconType = (id: string, customIcon: any) => {
 
 export default memoize((type: IconType) => {
     switch (type) {
-        case IconPacks.MaterialCommunity:
+        case 'material-community':
             return require('@react-native-vector-icons/material-design-icons').default;
-        case IconPacks.Feather:
+        case 'feather':
             return require('@react-native-vector-icons/feather').default;
         default:
             if (Object.prototype.hasOwnProperty.call(customIcons, type)) {

package/components/Icon/index.tsx

@@ -4,4 +4,4 @@ import IconDefault from './Icon';
 export const Icon = getRegisteredComponentWithFallback('Icon', IconDefault);
 
 export { registerCustomIconType } from './iconFactory';
-export type { IconPacks, IconProps, IconType } from './types';
+export type { CustomIconTypes, IconProps, IconType } from './types';

package/components/Icon/types.ts

@@ -1,10 +1,5 @@
 import type { ColorValue, TextProps } from 'react-native';
 
-export enum IconPacks {
-    MaterialCommunity = 'material-community',
-    Feather = 'feather',
-}
-
 export interface VectorIconProps extends TextProps {
     /**
      * Size of the icon, can also be passed as fontSize in the style object.
@@ -28,7 +23,23 @@ export interface VectorIconProps extends TextProps {
     color?: ColorValue | number | undefined;
 }
 
-export type IconType = `${IconPacks}`; // in TS 4.1+, we can do this to make enum values as a union type
+/**
+ * Interface for registering custom icon types.
+ * Users can extend this interface via declaration merging to add their own icon types.
+ *
+ * @example
+ * // In your app's type declarations (e.g., global.d.ts or a dedicated types file)
+ * declare module 'react-native-molecules' {
+ *   interface CustomIconTypes {
+ *     'my-custom-icons': true;
+ *     'another-icon-set': true;
+ *   }
+ * }
+ */
+
+export interface CustomIconTypes {}
+
+export type IconType = 'material-community' | 'feather' | keyof CustomIconTypes;
 
 export type IconProps = VectorIconProps & {
     type?: IconType;