@hero-design/rn 7.6.1-alpha.0 → 7.7.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.6.1-alpha.0",
+  "version": "7.7.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "react-native": "src/index.ts",
+  "types": "types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
@@ -24,7 +25,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.6.0"
+    "@hero-design/colors": "7.7.0"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -38,6 +39,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.17.12",
+    "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",

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

@@ -0,0 +1,7 @@
+@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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hero-design/playground",
   "private": true,
-  "version": "7.6.0",
+  "version": "7.7.0",
   "license": "MIT",
   "scripts": {
     "lint": "eslint src expoEntry.js --ext .js,.jsx,.ts,.tsx --ignore-path ../../../.gitignore",
@@ -13,8 +13,8 @@
     "visual-test": "detox build -c ios.sim.release && detox test -c ios.sim.release"
   },
   "dependencies": {
-    "@hero-design/colors": "7.6.0",
-    "@hero-design/rn": "7.6.0",
+    "@hero-design/colors": "7.7.0",
+    "@hero-design/rn": "7.7.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/core": "^6.3.0",
     "@react-navigation/native": "^6.0.12",

package/playground/src/App.tsx

@@ -24,6 +24,7 @@ import BottomSheet from './BottomSheet';
 import Button from './Button';
 import CardPlayground from './Card';
 import CollapsePlayground from './Collapse';
+import CheckboxPlayground from './Checkbox';
 import ContentNavigatorPlayground from './ContentNavigator';
 import DividerPlayground from './Divider';
 import DrawerPlayground from './Drawer';
@@ -39,6 +40,7 @@ import SwitchPlayground from './Switch';
 import TabsPlayground from './Tabs';
 import TagPlayground from './Tag';
 import TextInputPlayground from './TextInput';
+import ToastPlayground from './Toast';
 import TypographyPlayground from './Typography';
 import MultipleThemesPlayground from './MultipleThemes';
 
@@ -56,6 +58,7 @@ type RootStackParamList = {
   Button: undefined;
   Card: undefined;
   Collapse: undefined;
+  Checkbox: undefined;
   ContentNavigator: undefined;
   Divider: undefined;
   Drawer: undefined;
@@ -72,6 +75,7 @@ type RootStackParamList = {
   Tabs: undefined;
   Tag: undefined;
   TextInput: undefined;
+  Toast: undefined;
   Typography: undefined;
   MultipleThemes: undefined;
 };
@@ -89,6 +93,7 @@ const components = [
   { name: 'Button', component: Button },
   { name: 'Card', component: CardPlayground },
   { name: 'Collapse', component: CollapsePlayground },
+  { name: 'Checkbox', component: CheckboxPlayground },
   { name: 'ContentNavigator', component: ContentNavigatorPlayground },
   { name: 'Divider', component: DividerPlayground },
   { name: 'Drawer', component: DrawerPlayground },
@@ -104,6 +109,7 @@ const components = [
   { name: 'Tabs', component: TabsPlayground },
   { name: 'Tag', component: TagPlayground },
   { name: 'TextInput', component: TextInputPlayground },
+  { name: 'Toast', component: ToastPlayground },
   { name: 'Typography', component: TypographyPlayground },
   { name: 'MultipleThemes', component: MultipleThemesPlayground },
 ] as const;
@@ -138,6 +144,8 @@ const ComponentList = ({ navigation }: Navigation) => (
       data={components}
       renderItem={({ item }) => (
         <>
+          {/* work around to make ts-ignore work inside return component
+          // @ts-ignore */}
           <TouchableOpacity onPress={() => navigation.navigate(item.name)}>
             <ComponentItem name={item.name} />
           </TouchableOpacity>

package/playground/src/Checkbox.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Checkbox, Typography, useTheme } from '@hero-design/rn';
+
+type StateIndex = 'boxOne' | 'boxTwo';
+
+type CheckboxStates = {
+  boxOne: boolean;
+  boxTwo: boolean;
+};
+
+const CheckboxPlayground = () => {
+  const theme = useTheme();
+
+  const [isChecked, setIsChecked] = React.useState<CheckboxStates>({
+    boxOne: true,
+    boxTwo: false,
+  });
+
+  const toggleState = React.useCallback(
+    (checkboxId: StateIndex) =>
+      setIsChecked({
+        ...isChecked,
+        [checkboxId]: !isChecked[checkboxId],
+      }),
+    [isChecked]
+  );
+
+  return (
+    <View
+      style={{
+        margin: theme.space.medium,
+      }}
+    >
+      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
+        Default usage
+      </Typography.Text>
+      <View>
+        <Checkbox
+          checked={isChecked.boxOne}
+          onPress={() => toggleState('boxOne')}
+        />
+        <Checkbox
+          style={{ marginTop: theme.space.small }}
+          checked={isChecked.boxTwo}
+          onPress={() => toggleState('boxTwo')}
+        />
+        <Checkbox style={{ marginTop: theme.space.small }} checked disabled />
+        <Checkbox style={{ marginTop: theme.space.small }} disabled />
+      </View>
+    </View>
+  );
+};
+
+export default CheckboxPlayground;

package/playground/src/Toast.tsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { View, Button } from 'react-native';
+import { Toast, Typography, useTheme } from '@hero-design/rn';
+
+type ToastConfig = {
+  displayType: 'single' | 'stack';
+  position: 'top' | 'bottom';
+};
+
+const getRandomIntent = () => {
+  const intents = ['info', 'success', 'warning', 'error'] as const;
+  return intents[Math.floor(Math.random() * 4)];
+};
+
+const ToastDemo = ({
+  config,
+  updateConfig,
+}: {
+  config: ToastConfig;
+  updateConfig: (conf: ToastConfig) => void;
+}) => {
+  const theme = useTheme();
+  const [permaToastIds, setPermaToastIds] = useState<string[]>([]);
+  const toast = Toast.useToast();
+  return (
+    <View
+      style={{
+        flex: 1,
+        padding: theme.space.medium,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Button
+        title="Add Random Toast"
+        onPress={() =>
+          toast.show({
+            content: Math.random().toString(),
+            intent: getRandomIntent(),
+            variant: 'round',
+            actionLabel: 'ACTION',
+            onAction: () => alert('Clicked'),
+          })
+        }
+      />
+      <Button
+        title="Add Perma Toast"
+        onPress={() => {
+          const id = toast.show({
+            content: `Perma Toast: ${Math.random().toString()}`,
+            intent: getRandomIntent(),
+            variant: 'round',
+            actionLabel: 'UNDO',
+            autoDismiss: false,
+          });
+          setPermaToastIds([id, ...permaToastIds]);
+        }}
+      />
+      <Button
+        title="Hide Oldest Perma Toast"
+        onPress={() => {
+          const id = permaToastIds[permaToastIds.length - 1];
+          toast.hide(id);
+          setPermaToastIds(permaToastIds.slice(0, -1));
+        }}
+      />
+      <Button
+        title="Clear all"
+        onPress={() => {
+          toast.clearAll();
+          setPermaToastIds([]);
+        }}
+      />
+      <View style={{ alignItems: 'center', marginTop: theme.space.large }}>
+        <Typography.Text fontSize="large">
+          Tap to change settings
+        </Typography.Text>
+        <Button
+          title={`Display Type: ${config.displayType}`}
+          onPress={() =>
+            updateConfig({
+              ...config,
+              displayType: config.displayType === 'stack' ? 'single' : 'stack',
+            })
+          }
+        />
+        <Button
+          title={`Position: ${config.position}`}
+          onPress={() =>
+            updateConfig({
+              ...config,
+              position: config.position === 'top' ? 'bottom' : 'top',
+            })
+          }
+        />
+      </View>
+    </View>
+  );
+};
+
+const ToastPlayground = () => {
+  const [config, setConfig] = useState<ToastConfig>({
+    displayType: 'single',
+    position: 'top',
+  });
+
+  return (
+    <Toast.Provider displayType={config.displayType} position={config.position}>
+      <ToastDemo config={config} updateConfig={conf => setConfig(conf)} />
+    </Toast.Provider>
+  );
+};
+
+export default ToastPlayground;

package/rollup.config.js

@@ -22,13 +22,7 @@ export default {
       format: 'esm',
     },
   ],
-  external: [
-    'react',
-    'react-native',
-    'react-native-safe-area-context',
-    'react-native-vector-icons',
-    'react-native-pager-view',
-  ],
+  external: ['react', 'react-native', 'react-native-safe-area-context'],
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/native';
+import { TouchableOpacity } from 'react-native';
+
+const StyledWrapper = styled(TouchableOpacity)(({ theme, disabled }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  height: theme.__hd__.checkbox.sizes.base,
+  width: theme.__hd__.checkbox.sizes.base,
+  borderRadius: theme.__hd__.checkbox.radii.base,
+  borderWidth: theme.__hd__.checkbox.borderWidths.default,
+  borderColor: disabled
+    ? theme.__hd__.checkbox.colors.disabled
+    : theme.__hd__.checkbox.colors.borderColor,
+  overflow: 'hidden',
+}));
+
+export { StyledWrapper };

package/src/components/Checkbox/__tests__/StyledCheckbox.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { StyledWrapper } from '../StyledCheckbox';
+
+describe('StyledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledWrapper />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledWrapper renders correct style 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 4,
+      "borderWidth": 2,
+      "display": "flex",
+      "flexDirection": "row",
+      "height": 24,
+      "justifyContent": "center",
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 24,
+    }
+  }
+/>
+`;

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 4,
+      "borderWidth": 2,
+      "display": "flex",
+      "flexDirection": "row",
+      "height": 24,
+      "justifyContent": "center",
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 24,
+    }
+  }
+  testID="checkbox"
+/>
+`;
+
+exports[`Checkbox trigger press function correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#7622d7",
+      "borderRadius": 4,
+      "borderWidth": 2,
+      "display": "flex",
+      "flexDirection": "row",
+      "height": 24,
+      "justifyContent": "center",
+      "opacity": 1,
+      "overflow": "hidden",
+      "width": 24,
+    }
+  }
+  testID="checkbox"
+/>
+`;

package/src/components/Checkbox/__tests__/index.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Checkbox from '..';
+
+describe('Checkbox', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(<Checkbox testID="checkbox" />);
+    expect(wrapper.queryAllByTestId('checkbox')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger press function correctly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <Checkbox testID="checkbox" onPress={pressFn} />
+    );
+    fireEvent.press(wrapper.getByTestId('checkbox'));
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(pressFn).toBeCalled();
+  });
+});

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import theme from '../../theme';
+import Icon from '../Icon';
+import { StyledWrapper } from './StyledCheckbox';
+
+export interface CheckboxProps {
+  /**
+   * Control whether the switch is checked
+   */
+  checked?: boolean;
+  /**
+   * Whether the switch is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Event handler.
+   */
+  onPress?: () => void;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const CheckBox = ({
+  checked,
+  disabled,
+  onPress,
+  style,
+  testID,
+}: CheckboxProps) => (
+  <StyledWrapper
+    onPress={onPress}
+    disabled={disabled}
+    style={style}
+    testID={testID}
+  >
+    {checked && (
+      <Icon
+        icon="circle-ok"
+        intent="primary"
+        size="large"
+        style={{
+          position: 'absolute',
+          top: theme.__hd__.checkbox.space.iconTop,
+          ...(disabled ? { color: theme.__hd__.checkbox.colors.disabled } : {}),
+        }}
+      />
+    )}
+  </StyledWrapper>
+);
+
+export default CheckBox;

package/src/components/Toast/StyledToast.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/native';
+import { ComponentProps } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from 'react-native';
+
+const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
+  ({ theme, position }) => ({
+    ...StyleSheet.absoluteFillObject,
+    paddingHorizontal: theme.__hd__.toast.space.largePadding,
+    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
+    elevation: 9999,
+  })
+);
+
+const Container = styled(Animated.View)<{
+  themeVariant: 'default' | 'round';
+  themeIntent: 'success' | 'info' | 'warning' | 'error';
+}>(({ theme, themeVariant, themeIntent }) => ({
+  borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii.default : 0,
+  backgroundColor: theme.__hd__.toast.colors[themeIntent],
+  minHeight: theme.__hd__.toast.sizes.height,
+  flexDirection: 'row',
+}));
+
+const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
+  alignItems: 'center',
+  paddingLeft: theme.__hd__.toast.space.mediumPadding,
+}));
+
+const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.toast.space.mediumPadding,
+  flex: 1,
+}));
+
+const ContentContainer = styled(View)<{ showDivider: boolean }>(
+  ({ theme, showDivider }) => ({
+    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    flex: 1,
+    borderRightWidth: showDivider ? theme.__hd__.toast.borderWidths.base : 0,
+    borderColor: theme.__hd__.toast.colors.divider,
+    flexDirection: 'row',
+  })
+);
+
+const CTAWrapper = styled(TouchableOpacity)<
+  ComponentProps<typeof TouchableOpacity>
+>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.alert.space.padding,
+  justifyContent: 'center',
+}));
+
+export {
+  ToastContainerWrapper,
+  Container,
+  ContentContainer,
+  TextContainer,
+  IconContainer,
+  CTAWrapper,
+};