@hero-design/rn 8.35.0-alpha.4 → 8.35.0

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -102,7 +102,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 1,
         "height": 48,
@@ -128,7 +128,7 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],
@@ -198,7 +198,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "borderColor": "#de350b",
+        "borderColor": "#cb300a",
         "borderRadius": 8,
         "borderWidth": 2,
         "height": 48,
@@ -224,7 +224,7 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
         },
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
           },
           undefined,
         ],

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

@@ -822,7 +822,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -839,8 +839,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#cb300a",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -868,7 +868,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -885,8 +885,8 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#de350b",
-              "borderColor": "#de350b",
+              "backgroundColor": "#cb300a",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -914,7 +914,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -931,7 +931,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -959,7 +959,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "borderColor": "#de350b",
+            "borderColor": "#cb300a",
             "borderRadius": 8,
             "borderWidth": 1,
             "height": 48,
@@ -976,7 +976,7 @@ exports[`rendering renders correctly when there is error 1`] = `
         style={
           Array [
             Object {
-              "borderColor": "#de350b",
+              "borderColor": "#cb300a",
               "borderRadius": 999,
               "borderWidth": 1,
               "height": 16,
@@ -1007,7 +1007,7 @@ exports[`rendering renders correctly when there is error 1`] = `
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#cb300a",
             "fontSize": 16,
           },
           undefined,
@@ -1030,7 +1030,7 @@ exports[`rendering renders correctly when there is error 1`] = `
           },
           Array [
             Object {
-              "color": "#de350b",
+              "color": "#cb300a",
               "paddingLeft": 4,
             },
             undefined,

package/src/components/Portal/PortalHost.tsx

@@ -0,0 +1,24 @@
+import React, { memo, useEffect } from 'react';
+import { usePortal } from './usePortal';
+import { usePortalState } from './usePortalState';
+import { PortalType } from './contexts';
+
+export interface PortalHostProps {
+  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,29 @@
+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 {
+  rootHostName?: string;
+  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,50 @@
+import React, { useContext } from 'react';
+import { waitFor } from '@testing-library/react-native';
+import { PortalHost } from '../PortalHost';
+import { PortalProvider } from '../PortalProvider';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { PortalStateContext } from '../contexts';
+import theme, { ThemeProvider } from '../../../theme';
+
+/*
+ * 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(
+      <PortalProvider>
+        <PortalHost name="host" />
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    expect(getByText('registered')).toBeDefined();
+  });
+
+  it('should unregister portal when unmount', async () => {
+    const { getByText, rerender } = renderWithTheme(
+      <PortalProvider>
+        <PortalHost name="host" />
+        <TestComponent />
+      </PortalProvider>
+    );
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <PortalProvider>
+          <TestComponent />
+        </PortalProvider>
+      </ThemeProvider>
+    );
+
+    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__/index.spec.tsx

@@ -0,0 +1,29 @@
+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 '..';
+
+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()
+    );
+  });
+});

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,42 @@
+import { 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';
+
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
+
+export interface PortalProps {
+  name?: string;
+  hostName?: string;
+  children?: ReactNode | ReactNode[];
+}
+
+const PortalComponent = ({ name, hostName, children }: PortalProps) => {
+  const { addPortal: addUpdatePortal, removePortal } = usePortal(hostName);
+
+  const nameOrRandom = useMemo(() => name || nanoid(), [name]);
+
+  useLayoutEffect(() => {
+    addUpdatePortal(nameOrRandom, children);
+    return () => {
+      removePortal(nameOrRandom);
+    };
+  }, [addUpdatePortal]);
+
+  useLayoutEffect(() => {
+    addUpdatePortal(nameOrRandom, children);
+  }, [children]);
+
+  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/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,
   })
 );