@hero-design/rn 7.21.0 → 7.22.0

package/src/theme/components/switch.ts

@@ -9,21 +9,10 @@ const getSwitchTheme = (theme: GlobalTheme) => {
       'disabled-unchecked': theme.colors.archived,
     },
     thumb: theme.colors.platformBackground,
-  };
-
-  const thumbSizes = {
-    small: theme.space.medium,
-    medium: theme.space.medium * 1.3,
-  };
-
-  const widths = {
-    small: theme.space.xxxlarge,
-    medium: theme.space.xxxxlarge,
-  };
-
-  const heights = {
-    small: theme.space.large,
-    medium: theme.space.large * 1.2,
+    selector: {
+      background: theme.colors.__alpha__globalNeutral3,
+      textBackground: theme.colors.__alpha__primary1,
+    },
   };
 
   const sizes = {
@@ -39,23 +28,30 @@ const getSwitchTheme = (theme: GlobalTheme) => {
       small: theme.sizes.large,
       medium: theme.sizes.xlarge,
     },
+    selector: {
+      height: theme.sizes.xxxxlarge,
+    },
   };
 
   const spaces = {
     small: theme.space.xsmall,
     medium: theme.space.xsmall,
+    selector: {
+      iconPadding: theme.space.medium,
+      wrapperPadding: theme.space.xsmall,
+    },
   };
 
   const radii = {
     rounded: theme.radii.rounded,
+    selector: {
+      default: theme.radii.rounded,
+    },
   };
 
   return {
     colors,
     sizes,
-    thumbSizes,
-    widths,
-    heights,
     spaces,
     radii,
   };

package/testUtils/setup.tsx

@@ -20,7 +20,7 @@ jest.mock('react-native', () => {
 });
 
 jest.mock('../src/utils/scale', () => ({
-  scale: jest.fn(size => size),
+  scale: jest.fn((size) => size),
 }));
 
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

package/tsconfig.json

@@ -8,4 +8,4 @@
     "types": ["jest"]
   },
   "include": ["src"]
-}
+}

package/types/components/Slider/index.d.ts

@@ -48,5 +48,5 @@ export interface SliderProps {
      */
     testID?: string;
 }
-export declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingStart, onSlidingComplete, disabled, style, testID, }: SliderProps) => JSX.Element;
+declare const Slider: ({ minimumValue, maximumValue, step, value, onValueChange, onSlidingStart, onSlidingComplete, disabled, style, testID, }: SliderProps) => JSX.Element;
 export default Slider;

package/types/components/Switch/SelectorSwitch/Option.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import type { BadgeConfigType, OptionType } from '.';
+export declare const OptionContent: ({ content, badge, }: {
+    content: ReactElement;
+    badge?: BadgeConfigType;
+}) => JSX.Element;
+declare const Option: <T>({ text, icon, badge, selected, }: Pick<OptionType<T>, "text" | "icon" | "badge"> & {
+    selected: boolean;
+}) => ReactElement;
+export default Option;

package/types/components/Switch/SelectorSwitch/StyledSelectorSwitch.d.ts

@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
+export declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;
+export declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<View>;
+}>;

package/types/components/Switch/SelectorSwitch/__tests__/Option.spec.d.ts

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

package/types/components/Switch/SelectorSwitch/__tests__/index.spec.d.ts

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

package/types/components/Switch/SelectorSwitch/index.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../../Icon';
+declare type StatusBadgeType = {
+    type: 'status';
+};
+export declare type BadgeConfigType = StatusBadgeType;
+export declare type OptionType<T> = {
+    value: T;
+    text: string;
+    icon: IconName;
+    badge?: BadgeConfigType;
+};
+export interface SelectorSwitchProps<T> {
+    /**
+     * Array of exactly TWO options to switch between.
+     */
+    options: [OptionType<T>, OptionType<T>];
+    /**
+     * Current selected value.
+     */
+    value: T;
+    /**
+     *  Callback called when an option is pressed.
+     */
+    onPress?: (value: T) => void;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const SelectorSwitch: <T>({ options, value, onPress, style, testID, }: SelectorSwitchProps<T>) => ReactElement;
+export default SelectorSwitch;

package/types/components/Switch/index.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface SwitchProps {
     /**
@@ -27,5 +27,7 @@ export interface SwitchProps {
      */
     testID?: string;
 }
-declare const Switch: ({ size, disabled, checked, onPress, style, testID, }: SwitchProps) => ReactElement;
-export default Switch;
+declare const _default: (({ size, disabled, checked, onPress, style, testID, }: SwitchProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    Selector: <T>({ options, value, onPress, style, testID, }: import("./SelectorSwitch").SelectorSwitchProps<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+export default _default;

package/types/components/Tabs/ScrollableTabs.d.ts

@@ -1,3 +1,3 @@
 import type { TabsProps } from '.';
-declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element;
+declare const ScrollableTab: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element;
 export default ScrollableTab;

package/types/components/Tabs/index.d.ts

@@ -50,7 +50,7 @@ export interface TabsProps extends ViewProps {
      */
     testID?: string;
 }
-declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element) & {
-    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, }: TabsProps) => JSX.Element;
+declare const _default: (({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element) & {
+    Scroll: ({ onTabPress, selectedTabKey, tabs, containerStyle, barStyle, lazy, lazyPreloadDistance, testID: componentTestID, }: TabsProps) => JSX.Element;
 };
 export default _default;

package/types/components/TextInput/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import type { Variant } from './StyledTextInput';
-import type { IconName } from '../Icon';
+import React from "react";
+import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from "react-native";
+import type { Variant } from "./StyledTextInput";
+import type { IconName } from "../Icon";
 export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.

package/types/theme/components/switch.d.ts

@@ -8,6 +8,10 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
             'disabled-unchecked': string;
         };
         thumb: string;
+        selector: {
+            background: string;
+            textBackground: string;
+        };
     };
     sizes: {
         thumbs: {
@@ -22,25 +26,23 @@ declare const getSwitchTheme: (theme: GlobalTheme) => {
             small: number;
             medium: number;
         };
-    };
-    thumbSizes: {
-        small: number;
-        medium: number;
-    };
-    widths: {
-        small: number;
-        medium: number;
-    };
-    heights: {
-        small: number;
-        medium: number;
+        selector: {
+            height: number;
+        };
     };
     spaces: {
         small: number;
         medium: number;
+        selector: {
+            iconPadding: number;
+            wrapperPadding: number;
+        };
     };
     radii: {
         rounded: number;
+        selector: {
+            default: number;
+        };
     };
 };
 export default getSwitchTheme;

package/.eslintrc.json

@@ -1,62 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "jest": true
-  },
-  "extends": [
-    "plugin:prettier/recommended",
-    "plugin:react/recommended",
-    "airbnb",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint"],
-  "settings": {
-    "import/resolver": {
-      "node": {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      }
-    }
-  },
-  "rules": {
-    "react/jsx-props-no-spreading": 0,
-    "react/require-default-props": 0,
-    "react/function-component-definition": 0,
-    "react/jsx-filename-extension": [
-      1,
-      { "extensions": [".js", ".jsx", ".tsx"] }
-    ],
-    "import/prefer-default-export": 0,
-    "import/extensions": 0,
-    "no-use-before-define": 0,
-    "@typescript-eslint/no-use-before-define": 2,
-    "@typescript-eslint/no-unused-vars": [2, { "argsIgnorePattern": "^_" }],
-    "no-shadow": "off",
-    "no-unused-vars": [2, { "argsIgnorePattern": "^_" }],
-    "@typescript-eslint/no-shadow": "error"
-  },
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {
-        "no-undef": 0,
-        "consistent-return": 0,
-        "default-case": 0,
-        "no-underscore-dangle": [
-          2,
-          {
-            "allow": ["__hd__"]
-          }
-        ]
-      }
-    }
-  ]
-}

package/.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "printWidth": 80,
-  "semi": true,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "arrowParens": "avoid"
-}
-