react-native-molecules 0.5.0-beta.0 → 0.5.0-beta.1

package/components/Accordion/AccordionItem.tsx

@@ -2,13 +2,14 @@ import {
     createContext,
     forwardRef,
     memo,
-    ReactElement,
-    ReactNode,
+    type ReactElement,
+    type ReactNode,
     useContext,
     useEffect,
     useMemo,
 } from 'react';
 import { View, type ViewProps } from 'react-native';
+
 import { useControlledValue, useSubcomponents } from '../../hooks';
 import type { WithElements } from '../../types';
 import { AccordionContext } from './Accordion';

package/components/Accordion/AccordionItemContent.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
 import { View, type ViewProps } from 'react-native';
+
 import { accordionItemContentStyles } from './utils';
 
 export type Props = ViewProps & {};

package/components/Accordion/AccordionItemHeader.tsx

@@ -1,12 +1,13 @@
-import { forwardRef, memo, ReactNode, useCallback, useContext, useMemo } from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useContext, useMemo } from 'react';
+import { type GestureResponderEvent, type TextStyle, View, type ViewStyle } from 'react-native';
+
+import { useActionState } from '../../hooks';
 import type { WithElements } from '../../types';
+import { resolveStateVariant } from '../../utils';
+import { Text } from '../Text';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
 import { AccordionItemContext } from './AccordionItem';
-import { View, type GestureResponderEvent, type TextStyle, type ViewStyle } from 'react-native';
-import { Text } from '../Text';
 import { accordionItemHeaderStyles } from './utils';
-import { resolveStateVariant } from '../../utils';
-import { useActionState } from '../../hooks';
 
 export type AccordionHeaderElementProps = {
     color: string;

package/components/Accordion/index.tsx

@@ -1,8 +1,8 @@
+import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import AccordionDefault from './Accordion';
 import AccordionItemComponent from './AccordionItem';
-import AccordionItemHeader from './AccordionItemHeader';
 import AccordionItemContent from './AccordionItemContent';
-import AccordionDefault from './Accordion';
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import AccordionItemHeader from './AccordionItemHeader';
 
 const AccordionItemDefault = Object.assign(AccordionItemComponent, {
     Header: AccordionItemHeader,
@@ -22,15 +22,14 @@ export const AccordionItem = getRegisteredComponentWithFallback(
 
 export type { Props as AccordionProps } from './Accordion';
 export type { Props as AccordionItemProps } from './AccordionItem';
+export type { Props as AccordionItemContentProps } from './AccordionItemContent';
 export type {
-    Props as AccordionItemHeaderProps,
     AccordionHeaderElementProps,
+    Props as AccordionItemHeaderProps,
 } from './AccordionItemHeader';
-export type { Props as AccordionItemContentProps } from './AccordionItemContent';
-
 export {
-    accordionStyles,
-    accordionItemStyles,
-    accordionItemHeaderStyles,
     accordionItemContentStyles,
+    accordionItemHeaderStyles,
+    accordionItemStyles,
+    accordionStyles,
 } from './utils';

package/components/Button/utils.ts

@@ -13,8 +13,6 @@ export const sizeToIconSizeMap = {
 const defaultStylesDefault = StyleSheet.create(theme => {
     return {
         root: {
-            flexGrow: 1,
-
             variants: {
                 size: {
                     sm: {

package/components/DatePickerInput/index.tsx

@@ -10,5 +10,5 @@ export const DatePickerInput = getRegisteredComponentWithFallback(
     DatePickerInputDefault,
 );
 
-export { DatePickerInputProps } from './types';
+export type { DatePickerInputProps } from './types';
 export { datePickerInputStyles } from './utils';

package/components/FAB/utils.ts

@@ -170,7 +170,7 @@ const fabStylesDefault = StyleSheet.create(theme => ({
     label: {
         fontSize: theme.typescale.labelSmall.fontSize,
         lineHeight: theme.typescale.labelSmall.lineHeight,
-        fontWeight: theme.typescale.labelMedium.labelSmall,
+        fontWeight: theme.typescale.labelSmall.fontWeight,
         marginLeft: theme.spacings['1'],
         variants: {
             state: {

package/components/Icon/Icon.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, memo, useMemo } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
-import type { Mappings } from 'react-native-unistyles/lib/typescript/src/core/withUnistyles/types';
 
 import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
 import { tokenStylesParser } from '../../utils/tokenStylesParser';
@@ -10,15 +9,7 @@ import type { IconProps } from './types';
 /**
  * Neutral component. Doesn't have platform specific styles
  */
-const Icon = (
-    {
-        type = 'material-community',
-        style,
-        color,
-        ...rest
-    }: IconProps & { uniProps?: Mappings<any> },
-    ref: any,
-) => {
+const Icon = ({ type = 'material-community', style, color, ...rest }: IconProps, ref: any) => {
     const IconComponent = iconFactory(type);
     const componentStyles = useMemo(
         () => [styles.root, style, tokenStylesParser.getColor(color as string)],

package/components/Link/utils.ts

@@ -1,17 +1,16 @@
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
-import { getCursorStyle } from '../../utils';
 
 // type States = 'disabled' | 'hovered';
 
 const linkStylesDefault = StyleSheet.create(theme => ({
     root: {
-        ...getCursorStyle('pointer'),
         color: theme.colors.primary,
         ...theme.typescale.labelLarge,
 
         _web: {
+            cursor: 'pointer',
             _hover: {
                 textDecorationLine: 'underline',
             },
@@ -22,7 +21,10 @@ const linkStylesDefault = StyleSheet.create(theme => ({
                 disabled: {
                     color: theme.colors.onSurfaceDisabled,
                     opacity: 0.38,
-                    ...getCursorStyle('pointer'),
+
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
                 },
                 default: {},
             },

package/components/NavigationRail/NavigationRailItem.tsx

@@ -128,7 +128,8 @@ const NavigationRailItem = memo(
                     iconContainerStyle: [
                         navigationRailItemStyles.iconContainer,
                         !label && {
-                            height: navigationRailItemStyles.iconContainer.width,
+                            // TODO - remove this. We cannot do it like this
+                            height: (navigationRailItemStyles.iconContainer as any).width,
                         },
                         iconContainerProps.style,
                     ],

package/components/RadioButton/index.ts

@@ -20,8 +20,7 @@ registerMoleculesComponents({
 
 export const RadioButton = getRegisteredComponentWithFallback('RadioButton', RadioButtonDefault);
 
-export { Props as RadioButtonProps } from './RadioButton';
-export { Props as RadioButtonGroupProps } from './RadioButtonGroup';
-export { Props as RadioButtonItemProps } from './RadioButtonItem';
-
-export { radioButtonStyles, radioButtonItemStyles } from './utils';
+export type { Props as RadioButtonProps } from './RadioButton';
+export type { Props as RadioButtonGroupProps } from './RadioButtonGroup';
+export type { Props as RadioButtonItemProps } from './RadioButtonItem';
+export { radioButtonItemStyles, radioButtonStyles } from './utils';

package/components/Rating/RatingItem.tsx

@@ -1,8 +1,9 @@
 import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { Pressable, type ViewStyle } from 'react-native';
+
+import { resolveStateVariant } from '../../utils';
 import { Icon, type IconProps, type IconType } from '../Icon';
 import { Tooltip, type TooltipProps } from '../Tooltip';
-import { resolveStateVariant } from '../../utils';
 import { ratingItemStyles } from './utils';
 
 export type Props = Omit<IconProps, 'ref'> & {

package/components/Tabs/Tabs.tsx

@@ -1,10 +1,10 @@
 import {
     Children,
     cloneElement,
-    FC,
+    type FC,
     isValidElement,
     memo,
-    ReactElement,
+    type ReactElement,
     useCallback,
     useEffect,
     useMemo,
@@ -13,20 +13,21 @@ import {
 } from 'react';
 import {
     Animated,
-    StyleProp,
-    ViewStyle,
-    ViewProps,
+    type LayoutChangeEvent,
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
     ScrollView as RNScrollView,
-    LayoutChangeEvent,
-    NativeSyntheticEvent,
-    NativeScrollEvent,
-    View,
     ScrollView,
+    type StyleProp,
+    View,
+    type ViewProps,
+    type ViewStyle,
 } from 'react-native';
-import type { TabItemProps } from './TabItem';
+
 import { useControlledValue } from '../../hooks';
 import { noop } from '../../utils/lodash';
 import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+import type { TabItemProps } from './TabItem';
 import { tabsStyles } from './utils';
 
 export type TabsProps = ViewProps & {
@@ -100,7 +101,7 @@ export const TabBase = ({
     const nameToIndexMap = useMemo(
         () =>
             validChildren.reduce((acc, child, currentIndex) => {
-                acc[(child as ReactElement).props?.name] = currentIndex;
+                acc[(child as ReactElement<TabItemProps>).props?.name] = currentIndex;
 
                 return acc;
             }, {} as Record<string, number>),
@@ -110,7 +111,7 @@ export const TabBase = ({
     const [value, onChange] = useControlledValue({
         value: valueProp,
         onChange: onChangeProp,
-        defaultValue: defaultValue || (validChildren[0] as ReactElement)?.props?.name,
+        defaultValue: defaultValue || (validChildren[0] as ReactElement<TabItemProps>)?.props?.name,
     });
 
     const valueIndex = nameToIndexMap[value];
@@ -311,7 +312,7 @@ export const TabBase = ({
                     style={itemsContainerStyle}>
                     {validChildren.map((child, index) => (
                         <ChildItem
-                            key={(child as ReactElement).props?.name}
+                            key={(child as ReactElement<TabItemProps>).props?.name}
                             testID={testID && `${testID}--tab-item`}
                             index={index}
                             value={value}

package/components/Tooltip/index.tsx

@@ -1,7 +1,7 @@
 import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
 import TooltipComponent from './Tooltip';
-import TooltipTrigger from './TooltipTrigger';
 import TooltipContent from './TooltipContent';
+import TooltipTrigger from './TooltipTrigger';
 
 export const TooltipDefault = Object.assign(TooltipComponent, {
     Trigger: TooltipTrigger,
@@ -14,7 +14,7 @@ registerMoleculesComponents({
 
 export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
 
-export { Props as TooltipProps } from './Tooltip';
-export { Props as TooltipTriggerProps } from './TooltipTrigger';
-export { Props as TooltipContentProps } from './TooltipContent';
+export type { Props as TooltipProps } from './Tooltip';
+export type { Props as TooltipContentProps } from './TooltipContent';
+export type { Props as TooltipTriggerProps } from './TooltipTrigger';
 export { tooltipStyles } from './utils';

package/hooks/index.tsx

@@ -2,7 +2,6 @@
 
 export * from './useActionState';
 export * from './useActive';
-export { default as useBreakpoints } from './useBreakpoints';
 export { default as useColorMode } from './useColorMode';
 export { useContrastColor } from './useContrastColor';
 export { default as useControlledValue } from './useControlledValue';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.0",
+    "version": "0.5.0-beta.1",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",

package/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -1,7 +1,8 @@
-import type { Scope, Shortcut } from '../types';
-import { createFastContext } from '../../fast-context';
 import type { ReactNode } from 'react';
 
+import { createFastContext } from '../../fast-context';
+import type { Scope, Shortcut } from '../types';
+
 export type ShortcutsManagerContextType = {
     shortcuts: Record<string, Shortcut>;
     scopes: Record<string, Scope>;

package/shortcuts-manager/useShortcut/index.tsx

@@ -1,2 +1,2 @@
-export { default as useShortcut } from './useShortcut';
 export * from './types';
+export { default as useShortcut } from './useShortcut';

package/shortcuts-manager/useShortcut/useShortcut.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react';
-import useLatest from '../../hooks/useLatest';
 
+import useLatest from '../../hooks/useLatest';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager';
 import type { ShortcutEventDetail } from '../types';
 import { calculateShortcutEventName } from '../utils';

package/utils/tokenStylesParser.ts

@@ -2,6 +2,8 @@ import { StyleSheet } from 'react-native-unistyles';
 
 export const tokenStylesParser = StyleSheet.create(theme => ({
     getColor: (color: string | undefined, propertyName: string = 'color') => ({
-        ...(color ? { [propertyName]: theme.colors[color] ?? color } : {}),
+        ...(color
+            ? { [propertyName]: theme.colors[color as keyof typeof theme.colors] ?? color }
+            : {}),
     }),
 }));

package/hooks/useBreakpoints.tsx

@@ -1,7 +0,0 @@
-import { useTheme } from './useTheme';
-
-const useBreakpoints = () => {
-    return useTheme().grid.breakpoints;
-};
-
-export default useBreakpoints;