@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/PinInput/index.tsx

@@ -127,7 +127,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
     const changeText = useCallback(
       (text: string) => {
-        const pin = (text.match(/[0-9]/g) || []).join('');
+        const pin = (text.match(/\d/g) || []).join('');
 
         onChangeText?.(pin);
 
@@ -198,4 +198,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
   }
 );
 
+PinInput.displayName = 'PinInput';
+
 export default PinInput;

package/src/components/Portal/PortalHost.tsx

@@ -0,0 +1,27 @@
+import React, { memo, useEffect } from 'react';
+import { usePortal } from './usePortal';
+import { usePortalState } from './usePortalState';
+import { PortalType } from './contexts';
+
+export interface PortalHostProps {
+  /*
+   * Name of the portal
+   * */
+  name: string;
+}
+const PortalHostComponent = ({ name }: PortalHostProps) => {
+  const state = usePortalState(name);
+  const { registerHost, deregisterHost } = usePortal(name);
+
+  useEffect(() => {
+    registerHost();
+    return () => {
+      deregisterHost();
+    };
+  }, []);
+
+  return <>{state.map((item: PortalType) => item.node)}</>;
+};
+
+export const PortalHost = memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';

package/src/components/Portal/PortalProvider.tsx

@@ -0,0 +1,35 @@
+import React, { memo, useReducer } from 'react';
+import type { ReactNode } from 'react';
+import { PortalHost } from './PortalHost';
+import { reducer } from './reducer';
+import { INITIAL_STATE } from './constants';
+import { PortalDispatchContext, PortalStateContext } from './contexts';
+
+export interface PortalProviderProps {
+  /*
+   * The name of the root host
+   */
+  rootHostName?: string;
+  /*
+   * The children to render
+   */
+  children: ReactNode | ReactNode[];
+}
+
+const PortalProviderComponent = ({
+  rootHostName = 'root',
+  children,
+}: PortalProviderProps) => {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+  return (
+    <PortalDispatchContext.Provider value={dispatch}>
+      <PortalStateContext.Provider value={state}>
+        {children}
+        <PortalHost name={rootHostName} />
+      </PortalStateContext.Provider>
+    </PortalDispatchContext.Provider>
+  );
+};
+
+export const PortalProvider = memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';

package/src/components/Portal/__tests__/PortalHost.spec.tsx

@@ -0,0 +1,48 @@
+import { waitFor } from '@testing-library/react-native';
+import React, { useContext } from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import theme from '../../../theme';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import Typography from '../../Typography';
+import { PortalHost } from '../PortalHost';
+import { PortalStateContext } from '../contexts';
+
+/*
+ * This component is used to test the PortalHost hook
+ */
+const TestComponent = () => {
+  const state = useContext(PortalStateContext);
+
+  const text = 'host' in state! ? 'registered' : 'unregistered';
+  return <Typography.Body>{text}</Typography.Body>;
+};
+
+describe('PortalHost', () => {
+  it('should register portal when mount', async () => {
+    const { getByText } = renderWithTheme(
+      <>
+        <PortalHost name="host" />
+        <TestComponent />
+      </>
+    );
+
+    expect(getByText('registered')).toBeDefined();
+  });
+
+  it('should unregister portal when unmount', async () => {
+    const { getByText, rerender } = renderWithTheme(
+      <>
+        <PortalHost name="host" />
+        <TestComponent />
+      </>
+    );
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <TestComponent />
+      </HeroDesignProvider>
+    );
+
+    await waitFor(() => expect(getByText('unregistered')).toBeDefined());
+  });
+});

package/src/components/Portal/__tests__/PortalProvider.spec.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { PortalStateContext } from '../contexts';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalProvider } from '../PortalProvider';
+
+const TestComponent = () => {
+  const state = useContext(PortalStateContext);
+
+  const text = 'root' in state! ? 'registered' : 'unregistered';
+  return <Typography.Body>{text}</Typography.Body>;
+};
+
+describe('PortalProvider', () => {
+  it('should register root portal when mount', async () => {
+    const { getByText } = renderWithTheme(
+      <PortalProvider>
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    expect(getByText('registered')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal allows rendering children with custom theme 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    testID="portal-wrapper"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      portal
+    </Text>
+    ;
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View } from 'react-native';
+import { waitFor, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalHost } from '../PortalHost';
+import { PortalProvider } from '../PortalProvider';
+import Typography from '../../Typography';
+import Portal from '..';
+import { getTheme } from '../../../theme';
+import { defaultScale, walletSystemPalette } from '../../../theme/global';
+
+describe('Portal', () => {
+  it('should render Typography inside Portal.Host', async () => {
+    const { getByTestId } = renderWithTheme(
+      <PortalProvider>
+        <View testID="portal-wrapper">
+          <PortalHost name="host" />
+        </View>
+        <Portal hostName="host">
+          <Typography.Body>portal</Typography.Body>;
+        </Portal>
+      </PortalProvider>
+    );
+
+    await waitFor(() =>
+      expect(
+        within(getByTestId('portal-wrapper')).getByText('portal')
+      ).toBeDefined()
+    );
+  });
+
+  it('allows rendering children with custom theme', () => {
+    const customTheme = getTheme(defaultScale, walletSystemPalette);
+
+    const wrapper = renderWithTheme(
+      <PortalProvider>
+        <View testID="portal-wrapper">
+          <PortalHost name="host" />
+        </View>
+        <Portal theme={customTheme} hostName="host">
+          <Typography.Body>portal</Typography.Body>;
+        </Portal>
+      </PortalProvider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Portal/__tests__/reducer.spec.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import Typography from '../../Typography';
+import { ACTIONS, INITIAL_STATE } from '../constants';
+import { reducer } from '../reducer';
+
+describe('reducers', () => {
+  describe('registerHost', () => {
+    it('should return correct state', () => {
+      const newState = reducer(INITIAL_STATE, {
+        type: ACTIONS.REGISTER_HOST,
+        hostName: 'host',
+      });
+      expect(newState).toEqual({
+        host: [],
+      });
+    });
+  });
+
+  describe('deregisterHost', () => {
+    it('should return correct state', () => {
+      const newState = reducer(
+        {
+          removedHost: [],
+          host: [],
+        },
+        {
+          type: ACTIONS.DEREGISTER_HOST,
+          hostName: 'removedHost',
+        }
+      );
+      expect(newState).toEqual({
+        host: [],
+      });
+    });
+  });
+
+  describe('addUpdatePortal', () => {
+    it('should return correct state', () => {
+      const newState = reducer(
+        {
+          host: [],
+        },
+        {
+          type: ACTIONS.ADD_UPDATE_PORTAL,
+          hostName: 'host',
+          portalName: 'portal',
+          node: <Typography.Body>Portal</Typography.Body>,
+        }
+      );
+      expect(newState).toEqual({
+        host: [
+          {
+            name: 'portal',
+            node: <Typography.Body>Portal</Typography.Body>,
+          },
+        ],
+      });
+    });
+
+    it('should new portal when the portal is existing', () => {
+      const newState = reducer(
+        {
+          host: [
+            {
+              name: 'portal',
+              node: <Typography.Body>Old Portal</Typography.Body>,
+            },
+          ],
+        },
+        {
+          type: ACTIONS.ADD_UPDATE_PORTAL,
+          hostName: 'host',
+          portalName: 'portal',
+          node: <Typography.Body>New Portal</Typography.Body>,
+        }
+      );
+      expect(newState).toEqual({
+        host: [
+          {
+            name: 'portal',
+            node: <Typography.Body>New Portal</Typography.Body>,
+          },
+        ],
+      });
+    });
+  });
+
+  describe('removePortal', () => {
+    it('should return correct state', () => {
+      const newState = reducer(
+        {
+          host: [
+            {
+              name: 'portal',
+              node: <Typography.Body>Portal</Typography.Body>,
+            },
+          ],
+        },
+        {
+          type: ACTIONS.REMOVE_PORTAL,
+          hostName: 'host',
+          portalName: 'portal',
+        }
+      );
+      expect(newState).toEqual({
+        host: [],
+      });
+    });
+  });
+});

package/src/components/Portal/constants.ts

@@ -0,0 +1,10 @@
+enum ACTIONS {
+  REGISTER_HOST,
+  DEREGISTER_HOST,
+  ADD_UPDATE_PORTAL,
+  REMOVE_PORTAL,
+}
+
+const INITIAL_STATE = {};
+
+export { ACTIONS, INITIAL_STATE };

package/src/components/Portal/contexts.ts

@@ -0,0 +1,14 @@
+import React, { createContext } from 'react';
+import type { ReactNode } from 'react';
+import { ActionTypes } from './types';
+
+export interface PortalType {
+  name: string;
+  node: ReactNode;
+}
+export const PortalStateContext = createContext<Record<
+  string,
+  Array<PortalType>
+> | null>(null);
+export const PortalDispatchContext =
+  createContext<React.Dispatch<ActionTypes> | null>(null);

package/src/components/Portal/index.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode, memo, useLayoutEffect, useMemo } from 'react';
+// Fix issue no crypto in react-native
+// https://stackoverflow.com/a/66852908
+import { customAlphabet } from 'nanoid/non-secure';
+import { usePortal } from './usePortal';
+import { PortalProvider } from './PortalProvider';
+import { PortalHost } from './PortalHost';
+import { Theme, ThemeProvider, useTheme } from '../../theme';
+
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
+
+export interface PortalProps {
+  /*
+   * Name of the portal. If name is not provided, a random name will be generated.
+   */
+  name?: string;
+
+  /*
+   * Name of the portal host. If name is not provided, a default host will be used.
+   */
+  hostName?: string;
+
+  /*
+   * Content of the portal.
+   */
+  children?: ReactNode | ReactNode[];
+  /**
+   * Theme for portal children.
+   */
+  theme?: Theme;
+}
+
+const PortalComponent = ({ name, hostName, children, theme }: PortalProps) => {
+  const defaultTheme = useTheme();
+  const { addPortal: addUpdatePortal, removePortal } = usePortal(hostName);
+
+  const nameOrRandom = useMemo(() => name || nanoid(), [name]);
+
+  const ChildrenComponent = useMemo(
+    () => (
+      <ThemeProvider theme={theme || defaultTheme}>{children}</ThemeProvider>
+    ),
+    [theme, children, defaultTheme]
+  );
+
+  useLayoutEffect(() => {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+    return () => {
+      removePortal(nameOrRandom);
+    };
+  }, [addUpdatePortal]);
+
+  useLayoutEffect(() => {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
+
+  return null;
+};
+
+const Portal = memo(PortalComponent);
+Portal.displayName = 'Portal';
+
+export default Object.assign(Portal, {
+  Provider: PortalProvider,
+  Host: PortalHost,
+});

package/src/components/Portal/reducer.ts

@@ -0,0 +1,106 @@
+import { omit } from '../../utils/helpers';
+import { ACTIONS } from './constants';
+import { PortalType } from './contexts';
+import type {
+  ActionTypes,
+  AddUpdatePortalAction,
+  RemovePortalAction,
+} from './types';
+
+type State = Record<string, Array<PortalType>>;
+
+const registerHostIfNotExist = (state: State, hostName: string): State => {
+  if (!(hostName in state)) {
+    return {
+      ...state,
+      [hostName]: [],
+    };
+  }
+  return { ...state };
+};
+
+const deregisterHost = (state: State, hostName: string): State => {
+  return { ...omit([hostName], state) };
+};
+
+const addUpdatePortal = (
+  state: Record<string, Array<PortalType>>,
+  hostName: string,
+  portalName: string,
+  node: React.ReactNode
+) => {
+  const newState = registerHostIfNotExist(state, hostName);
+
+  const index = newState[hostName].findIndex(
+    (item) => item.name === portalName
+  );
+
+  if (index !== -1) {
+    return {
+      ...newState,
+      [hostName]: newState[hostName].map((item, i) => {
+        if (index === i) {
+          return {
+            ...item,
+            node,
+          };
+        }
+        return item;
+      }),
+    };
+  }
+
+  return {
+    ...newState,
+    [hostName]: [
+      ...newState[hostName],
+      {
+        name: portalName,
+        node,
+      },
+    ],
+  };
+};
+
+const removePortal = (
+  state: Record<string, Array<PortalType>>,
+  hostName: string,
+  portalName: string
+) => {
+  if (!(hostName in state)) {
+    return { ...state };
+  }
+
+  return {
+    ...state,
+    [hostName]: state[hostName].filter((item) => item.name !== portalName),
+  };
+};
+
+export const reducer = (
+  state: Record<string, Array<PortalType>>,
+  action: ActionTypes
+) => {
+  const { type } = action;
+  switch (type) {
+    case ACTIONS.REGISTER_HOST:
+      return registerHostIfNotExist(state, action.hostName);
+    case ACTIONS.DEREGISTER_HOST:
+      return deregisterHost(state, action.hostName);
+    case ACTIONS.ADD_UPDATE_PORTAL:
+      return addUpdatePortal(
+        state,
+        action.hostName,
+        (action as AddUpdatePortalAction).portalName,
+        (action as AddUpdatePortalAction).node
+      );
+    case ACTIONS.REMOVE_PORTAL:
+      return removePortal(
+        state,
+        action.hostName,
+        (action as RemovePortalAction).portalName
+      );
+    default:
+      return { ...state };
+  }
+};

package/src/components/Portal/types.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { ACTIONS } from './constants';
+
+export interface AddUpdatePortalAction {
+  type: ACTIONS;
+  hostName: string;
+  portalName: string;
+  node: ReactNode;
+}
+
+export interface RemovePortalAction {
+  type: ACTIONS;
+  hostName: string;
+  portalName: string;
+}
+
+export interface RegisterHostAction {
+  type: ACTIONS;
+  hostName: string;
+}
+
+export interface UnregisterHostAction {
+  type: ACTIONS;
+  hostName: string;
+}
+
+export type ActionTypes =
+  | AddUpdatePortalAction
+  | RemovePortalAction
+  | RegisterHostAction
+  | UnregisterHostAction;

package/src/components/Portal/usePortal.ts

@@ -0,0 +1,50 @@
+import { ReactNode, useCallback, useContext } from 'react';
+import { ACTIONS } from './constants';
+import { PortalDispatchContext } from './contexts';
+
+export const usePortal = (hostName = 'root') => {
+  const dispatch = useContext(PortalDispatchContext);
+
+  if (dispatch === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+
+  const registerHost = useCallback(() => {
+    dispatch({
+      type: ACTIONS.REGISTER_HOST,
+      hostName,
+    });
+  }, []);
+
+  const deregisterHost = useCallback(() => {
+    dispatch({
+      type: ACTIONS.DEREGISTER_HOST,
+      hostName,
+    });
+  }, []);
+
+  const addUpdatePortal = useCallback((name: string, node: ReactNode) => {
+    dispatch({
+      type: ACTIONS.ADD_UPDATE_PORTAL,
+      hostName,
+      portalName: name,
+      node,
+    });
+  }, []);
+
+  const removePortal = useCallback((name: string) => {
+    dispatch({
+      type: ACTIONS.REMOVE_PORTAL,
+      hostName,
+      portalName: name,
+    });
+  }, []);
+
+  return {
+    registerHost,
+    deregisterHost,
+    addPortal: addUpdatePortal,
+    updatePortal: addUpdatePortal,
+    removePortal,
+  };
+};

package/src/components/Portal/usePortalState.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { PortalStateContext } from './contexts';
+
+export const usePortalState = (hostName: string) => {
+  const state = useContext(PortalStateContext);
+  if (state === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+
+  return state[hostName] || [];
+};

package/src/components/Progress/ProgressCircle.tsx

@@ -171,9 +171,7 @@ const ProgressCircle = ({
           <StyledStrokeEnd themeIntent={intent} />
         </Animated.View>
         <StyledDonutCircle>
-          <Typography.Text fontSize="large">
-            {renderValue(value)}
-          </Typography.Text>
+          <Typography.Body>{renderValue(value)}</Typography.Body>
         </StyledDonutCircle>
       </StyledContainer>
     </View>

package/src/components/Progress/StyledProgressBar.tsx

@@ -13,6 +13,7 @@ const StyledWrapper = styled(View)<ViewProps & { themeIntent: ThemeIntent }>(
         THEME_INTENT_MAP[themeIntent]
       ],
     overflow: 'hidden',
+    borderRadius: theme.__hd__.progress.radii.default,
   })
 );