@hero-design/rn 7.7.0 → 7.8.0

package/types/components/Toolbar/ToolbarGroup.d.ts

@@ -0,0 +1,13 @@
+import { ToolbarItemProps } from './ToolbarItem';
+export interface ToolbarGroupProps {
+    /**
+     * List of action items in the toolbar group.
+     */
+    items?: ToolbarItemProps[];
+    /**
+     * Alignment of the items in the group.
+     */
+    align: 'left' | 'center' | 'right';
+}
+declare const ToolbarGroup: ({ align, items }: ToolbarGroupProps) => JSX.Element;
+export default ToolbarGroup;

package/types/components/Toolbar/ToolbarItem.d.ts

@@ -0,0 +1,25 @@
+import { IconName } from '../Icon';
+export interface ToolbarItemProps {
+    /**
+     * Visual intent of the toolbar item.
+     */
+    intent?: 'primary' | 'info' | 'success' | 'danger' | 'warning';
+    /**
+     * Icon of the toolbar item.
+     */
+    icon?: IconName;
+    /**
+     * Action label of the toolbar item.
+     */
+    label?: string;
+    /**
+     * Callback that trigger when user press the toolbar item.
+     */
+    onPress?: () => void;
+    /**
+     * Whether the toolbar item is disabled.
+     */
+    disabled?: boolean;
+}
+declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, }: ToolbarItemProps) => JSX.Element;
+export default ToolbarItem;

package/types/components/Toolbar/__tests__/ToolbarGroup.spec.d.ts

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

package/types/components/Toolbar/__tests__/ToolbarItem.spec.d.ts

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

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface ToolbarProps {
+    /**
+     * Toolbar's content.
+     */
+    children?: ReactNode;
+}
+declare const _default: (({ children }: ToolbarProps) => JSX.Element) & {
+    Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => JSX.Element;
+};
+export default _default;

package/types/components/Typography/Text/StyledText.d.ts

@@ -5,7 +5,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
 } & {
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
-    themeIntent: 'body' | 'subdued' | 'primary';
+    themeIntent: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

package/types/components/Typography/Text/index.d.ts

@@ -16,9 +16,9 @@ export interface TextProps extends NativeTextProps {
     /**
      * Visual intent color to apply to the text.
      */
-    intent?: 'body' | 'subdued' | 'primary';
+    intent?: 'body' | 'subdued' | 'primary' | 'success' | 'info' | 'warning' | 'danger';
     /**
-     * Addditional style.
+     * Additional style.
      */
     style?: StyleProp<TextStyle>;
     /**

package/types/index.d.ts

@@ -14,6 +14,7 @@ import Divider from './components/Divider';
 import Drawer from './components/Drawer';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
+import List from './components/List';
 import Progress from './components/Progress';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
@@ -24,6 +25,7 @@ import Tabs from './components/Tabs';
 import Tag from './components/Tag';
 import TextInput from './components/TextInput';
 import Toast from './components/Toast';
+import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
-export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, Typography, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, Checkbox, ContentNavigator, Divider, Drawer, FAB, Icon, List, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Toast, Toolbar, Typography, };
 export * from './types';

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

@@ -20,6 +20,8 @@ declare const getButtonTheme: (theme: GlobalTheme) => {
         pressedPrimary: string;
         secondary: string;
         pressedSecondary: string;
+        danger: string;
+        pressedDanger: string;
         defaultText: string;
         disabledText: string;
         disabledBorder: string;

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

@@ -2,6 +2,13 @@ import { GlobalTheme } from '../global';
 declare const getCardTheme: (theme: GlobalTheme) => {
     colors: {
         dataCardIndicator: string;
+        indicator: {
+            archived: string;
+            info: string;
+            success: string;
+            warning: string;
+            danger: string;
+        };
     };
     radii: {
         default: number;

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

@@ -0,0 +1,40 @@
+import { GlobalTheme } from '../global';
+declare const getListTheme: (theme: GlobalTheme) => {
+    colors: {
+        checkedListItemContainerBackground: string;
+        listItemContainerBackground: string;
+        leadingStatus: {
+            danger: string;
+            info: string;
+            success: string;
+            warning: string;
+            archived: string;
+        };
+    };
+    space: {
+        listItemContainerPadding: number;
+        leadingStatusMarginRight: number;
+        prefixContainerMarginRight: number;
+        suffixContainerMarginLeft: number;
+    };
+    radii: {
+        card: number;
+        cardShadow: number;
+        leadingStatus: number;
+    };
+    offsets: {
+        cardShadow: {
+            width: number;
+            height: number;
+        };
+    };
+    widths: {
+        leadingStatus: number;
+    };
+    opacity: {
+        disabled: number;
+        enabled: number;
+        cardShadow: number;
+    };
+};
+export default getListTheme;

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

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getToolbarTheme: (theme: GlobalTheme) => {
+    colors: {
+        background: string;
+        border: string;
+        primary: string;
+        info: string;
+        success: string;
+        danger: string;
+        error: string;
+        disabled: string;
+    };
+    space: {
+        verticalPadding: number;
+        horizontalPadding: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+};
+export default getToolbarTheme;

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

@@ -4,6 +4,10 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         body: string;
         subdued: string;
         primary: string;
+        info: string;
+        danger: string;
+        warning: string;
+        success: string;
     };
     fonts: {
         light: string;

package/types/theme/global/colors.d.ts

@@ -10,12 +10,15 @@ declare const systemPalette: {
     infoLight: string;
     infoBackground: string;
     success: string;
+    successLight: string;
     successDark: string;
     successBackground: string;
     danger: string;
+    dangerMediumLight: string;
     dangerLight: string;
     dangerBackground: string;
     warning: string;
+    warningLight: string;
     warningDark: string;
     warningBackground: string;
     platformBackground: string;
@@ -26,9 +29,11 @@ declare const systemPalette: {
     disabledLightText: string;
     invertedText: string;
     outline: string;
+    archivedDark: string;
     archived: string;
     black: string;
     inactiveBackground: string;
+    shadow: string;
 };
 declare type SystemPalette = typeof systemPalette;
 export { systemPalette, SystemPalette };

package/types/theme/global/index.d.ts

@@ -13,12 +13,15 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         infoLight: string;
         infoBackground: string;
         success: string;
+        successLight: string;
         successDark: string;
         successBackground: string;
         danger: string;
+        dangerMediumLight: string;
         dangerLight: string;
         dangerBackground: string;
         warning: string;
+        warningLight: string;
         warningDark: string;
         warningBackground: string;
         platformBackground: string;
@@ -29,9 +32,11 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         disabledLightText: string;
         invertedText: string;
         outline: string;
+        archivedDark: string;
         archived: string;
         black: string;
         inactiveBackground: string;
+        shadow: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;

package/types/theme/global/space.d.ts

@@ -2,6 +2,7 @@ interface Space {
     large: number;
     medium: number;
     small: number;
+    smallMedium: number;
     xlarge: number;
     xsmall: number;
     xxlarge: number;

package/types/theme/index.d.ts

@@ -22,7 +22,9 @@ import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
 import getToastTheme from './components/toast';
+import getToolbarTheme from './components/toolbar';
 import getTypographyTheme from './components/typography';
+import getListTheme from './components/list';
 declare type Theme = GlobalTheme & {
     __hd__: {
         alert: ReturnType<typeof getAlertTheme>;
@@ -48,7 +50,9 @@ declare type Theme = GlobalTheme & {
         tag: ReturnType<typeof getTagTheme>;
         textInput: ReturnType<typeof getTextInputTheme>;
         toast: ReturnType<typeof getToastTheme>;
+        toolbar: ReturnType<typeof getToolbarTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
+        list: ReturnType<typeof getListTheme>;
     };
 };
 declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;

package/playground/.detoxrc.json

@@ -1,49 +0,0 @@
-{
-  "testRunner": "jest",
-  "runnerConfig": "e2e/config.json",
-  "skipLegacyWorkersInjection": true,
-  "apps": {
-    "ios": {
-      "type": "ios.app",
-      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
-    },
-    "android": {
-      "type": "android.apk",
-      "binaryPath": "SPECIFY_PATH_TO_YOUR_APP_BINARY"
-    }
-  },
-  "devices": {
-    "simulator": {
-      "type": "ios.simulator",
-      "device": {
-        "type": "iPhone 11"
-      }
-    },
-    "emulator": {
-      "type": "android.emulator",
-      "device": {
-        "avdName": "Pixel_3a_API_30_x86"
-      }
-    }
-  },
-  "configurations": {
-    "ios.sim.debug": {
-      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/MobileHeroDesignPlayground.app",
-      "build": "E2E_TEST=true xcodebuild -workspace ios/MobileHeroDesignPlayground.xcworkspace -configuration Debug -scheme MobileHeroDesignPlayground -derivedDataPath ios/build -sdk iphonesimulator  -verbose",
-      "type": "ios.simulator",
-      "device": {
-        "type": "iPhone 13",
-        "os": "iOS 15.4"
-      }
-    },
-    "ios.sim.release": {
-      "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/MobileHeroDesignPlayground.app",
-      "build": "E2E_TEST=true xcodebuild -workspace ios/MobileHeroDesignPlayground.xcworkspace -configuration Release -scheme MobileHeroDesignPlayground -derivedDataPath ios/build -sdk iphonesimulator  -verbose",
-      "type": "ios.simulator",
-      "device": {
-        "type": "iPhone 13",
-        "os": "iOS 15.4"
-      }
-    }
-  }
-}

package/playground/.prettierrc.json

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

package/playground/.turbo/turbo-type-check.log

@@ -1,7 +0,0 @@
-@hero-design/playground:type-check: cache hit, replaying output 7c10418dc02a32a7
-@hero-design/playground:type-check: warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
-@hero-design/playground:type-check: $ tsc --noEmit --w
-@hero-design/playground:type-check: c2:47:14 PM - Starting compilation in watch mode...
-@hero-design/playground:type-check: 
-@hero-design/playground:type-check: 
-@hero-design/playground:type-check: 2:47:15 PM - Found 0 errors. Watching for file changes.

package/playground/app.json

@@ -1,9 +0,0 @@
-{
-  "name": "Mobile Hero Design Playground",
-  "entryPoint": "expoEntry.js",
-  "owner": "thinkei",
-  "slug": "Mobile-Hero-Design-Playground",
-  "ios": {
-    "bundleIdentifier": "com.thinkei.Mobile-Hero-Design-Playground"
-  }
-}

package/playground/babel.config.js

@@ -1,63 +0,0 @@
-const path = require('path');
-
-function isE2ETest() {
-  return process.env.E2E_TEST === 'true';
-}
-
-module.exports = api => {
-  const babelEnv = api.env();
-  const plugins = [];
-  const presets = [];
-
-  // resolve issue TypeError: Class constructor DetoxCircusEnvironment cannot be invoked without 'new'
-  if (babelEnv === 'test') {
-    presets.push(['@babel/preset-env']);
-    plugins.push(['@babel/plugin-transform-runtime']);
-  } else {
-    presets.push(['module:metro-react-native-babel-preset']);
-    presets.push(['babel-preset-expo']);
-  }
-  return {
-    presets: ['@babel/preset-typescript', ...presets],
-    plugins: [
-      ...plugins,
-      [
-        'module-resolver',
-        {
-          alias: {
-            '^react$': require.resolve('react', {
-              paths: [path.join(__dirname, './')],
-            }),
-            '^react-native$': require.resolve('react-native', {
-              paths: [path.join(__dirname, './')],
-            }),
-            '^react-native/(.+)': ([, name]) =>
-              require.resolve(`react-native/${name}`, {
-                paths: [path.join(__dirname, './')],
-              }),
-            'react-native-safe-area-context': require.resolve(
-              'react-native-safe-area-context',
-              {
-                paths: [path.join(__dirname, './')],
-              }
-            ),
-          },
-          extensions: [
-            '.ios.js',
-            '.ios.ts',
-            '.ios.tsx',
-            '.android.js',
-            '.android.ts',
-            '.android.tsx',
-            '.native.js',
-            '.native.ts',
-            '.native.tsx',
-            '.js',
-            '.ts',
-            '.tsx',
-          ],
-        },
-      ],
-    ],
-  };
-};

package/playground/e2e/config.json

@@ -1,9 +0,0 @@
-{
-    "maxWorkers": 1,
-    "testEnvironment": "./environment",
-    "testRunner": "jest-circus/runner",
-    "testTimeout": 120000,
-    "testRegex": "\\.e2e\\.js$",
-    "reporters": ["detox/runners/jest/streamlineReporter"],
-    "verbose": true
-}

package/playground/e2e/environment.js

@@ -1,23 +0,0 @@
-const {
-  DetoxCircusEnvironment,
-  SpecReporter,
-  WorkerAssignReporter,
-} = require('detox/runners/jest-circus');
-
-class CustomDetoxEnvironment extends DetoxCircusEnvironment {
-  constructor(config, context) {
-    super(config, context);
-
-    // Can be safely removed, if you are content with the default value (=300000ms)
-    this.initTimeout = 300000;
-
-    // This takes care of generating status logs on a per-spec basis. By default, Jest only reports at file-level.
-    // This is strictly optional.
-    this.registerListeners({
-      SpecReporter,
-      WorkerAssignReporter,
-    });
-  }
-}
-
-module.exports = CustomDetoxEnvironment;

package/playground/e2e/firstTest.e2e.js

@@ -1,16 +0,0 @@
-describe('Example', () => {
-  beforeAll(async () => {
-    await device.launchApp();
-  });
-
-  beforeEach(async () => {
-    await device.reloadReactNative();
-  });
-
-  it('should go to Badge screen', async () => {
-    await waitFor(element(by.label('Badge')))
-      .toExist()
-      .withTimeout(60000);
-    await element(by.label('Badge')).tap();
-  });
-});

package/playground/expoEntry.js

@@ -1,5 +0,0 @@
-import { registerRootComponent } from 'expo';
-
-import App from './src/App';
-
-registerRootComponent(App);

package/playground/index.js

@@ -1,7 +0,0 @@
-/**
- * @format
- */
-import { AppRegistry } from 'react-native';
-import App from './src/App';
-
-AppRegistry.registerComponent('main', () => App);

package/playground/ios/MobileHeroDesignPlayground/AppDelegate.h

@@ -1,9 +0,0 @@
-#import <Foundation/Foundation.h>
-#import <React/RCTBridgeDelegate.h>
-#import <UIKit/UIKit.h>
-
-#import <Expo/Expo.h>
-
-@interface AppDelegate : EXAppDelegateWrapper <RCTBridgeDelegate>
-
-@end