@hero-design/rn 6.7.2 → 6.7.4-1

package/playground/index.tsx

@@ -1,25 +1,85 @@
-import { SafeAreaView, View } from 'react-native';
 import React from 'react';
-import { theme, ThemeProvider, ExampleComponent } from '../src/index';
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; // eslint-disable-line import/no-extraneous-dependencies
+import { createNativeStackNavigator } from '@react-navigation/native-stack'; // eslint-disable-line import/no-extraneous-dependencies
+import { SafeAreaView, FlatList, Text, ListRenderItemInfo } from 'react-native';
+import { ThemeProvider, theme, useTheme } from '../src/index';
+import ExampleComponentPlayground from './components/ExampleComponent';
 
-const App = () => (
-  <ThemeProvider theme={theme}>
-    <SafeAreaView
+type ComponentEntry = { name: string; component: React.FC };
+
+const Stack = createNativeStackNavigator();
+
+const components: ComponentEntry[] = [
+  { name: 'ExampleComponent', component: ExampleComponentPlayground },
+];
+
+const ComponentItem = ({
+  name,
+  onPress,
+}: {
+  name: string;
+  onPress: () => void;
+}) => {
+  const hdTheme = useTheme();
+  return (
+    <Text
+      onPress={onPress}
       style={{
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
+        marginTop: hdTheme.space.large,
+        fontSize: hdTheme.fontSizes.large,
       }}
     >
-      <View
-        style={{
-          borderWidth: 1,
-        }}
-      >
-        <ExampleComponent boxSize="medium" boxSpace="medium" bgColor="danger" />
-      </View>
+      {name}
+    </Text>
+  );
+};
+
+const ComponentList = ({ navigation }) => {
+  const hdTheme = useTheme();
+  return (
+    <SafeAreaView style={{ marginHorizontal: hdTheme.space.large }}>
+      <FlatList
+        data={components}
+        renderItem={({ item }: ListRenderItemInfo<ComponentEntry>) => (
+          <ComponentItem
+            name={item.name}
+            onPress={() => navigation.navigate(item.name)}
+          />
+        )}
+      />
     </SafeAreaView>
-  </ThemeProvider>
-);
+  );
+};
+
+const App = () => {
+  const CustomNavigationTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      primary: theme.colors.primary,
+      background: theme.colors.platformBackground,
+    },
+  };
+  return (
+    <ThemeProvider theme={theme}>
+      <NavigationContainer theme={CustomNavigationTheme}>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen
+            name="Home"
+            component={ComponentList}
+            options={{ title: 'Mobile Hero Design' }}
+          />
+          {components.map(component => (
+            <Stack.Screen
+              key={component.name}
+              name={component.name}
+              component={component.component}
+            />
+          ))}
+        </Stack.Navigator>
+      </NavigationContainer>
+    </ThemeProvider>
+  );
+};
 
 export default App;

package/src/components/ExampleComponent/StyledView.tsx

@@ -1,23 +1,17 @@
 import { View } from 'react-native';
-import styled, { css } from 'styled-components/native';
-
-export interface Props {
-  boxSize: 'small' | 'medium' | 'large';
-  boxSpace: 'small' | 'medium' | 'large';
-  bgColor: 'primary' | 'danger' | 'warning';
-}
+import styled, { css } from '../../styled-components';
 
 const Square = styled(View)<{
-  boxSize: Props['boxSize'];
-  boxSpace: Props['boxSpace'];
-  bgColor: Props['bgColor'];
+  themeSize: 'small' | 'medium' | 'large';
+  themeMargin: 'small' | 'medium' | 'large';
+  themeBgColor: 'primary' | 'danger' | 'warning';
 }>`
   display: flex;
   align-items: center;
   justify-content: center;
 
-  ${({ boxSize }) => {
-    switch (boxSize) {
+  ${({ themeSize }) => {
+    switch (themeSize) {
       case 'small':
         return css`
           height: 50px;
@@ -36,36 +30,36 @@ const Square = styled(View)<{
     }
   }}
 
-  ${({ boxSpace, theme }) => {
-    switch (boxSpace) {
+  ${({ themeMargin, theme }) => {
+    switch (themeMargin) {
       case 'small':
         return css`
-          margin: ${theme.space.demoStyle.smallMargin}px;
+          margin: ${theme.__hd__.exampleComponent.space.smallMargin}px;
         `;
       case 'medium':
         return css`
-          margin: ${theme.space.demoStyle.mediumMargin}px;
+          margin: ${theme.__hd__.exampleComponent.space.mediumMargin}px;
         `;
       case 'large':
         return css`
-          margin: ${theme.space.demoStyle.largeMargin}px;
+          margin: ${theme.__hd__.exampleComponent.space.largeMargin}px;
         `;
     }
   }}
 
-  ${({ bgColor, theme }) => {
-    switch (bgColor) {
+  ${({ themeBgColor, theme }) => {
+    switch (themeBgColor) {
       case 'primary':
         return css`
-          background-color: ${theme.colors.demoStyle.primaryBg};
+          background-color: ${theme.__hd__.exampleComponent.colors.primaryBg};
         `;
       case 'danger':
         return css`
-          background-color: ${theme.colors.demoStyle.dangerBg};
+          background-color: ${theme.__hd__.exampleComponent.colors.dangerBg};
         `;
       case 'warning':
         return css`
-          background-color: ${theme.colors.demoStyle.warningBg};
+          background-color: ${theme.__hd__.exampleComponent.colors.warningBg};
         `;
     }
   }}

package/src/components/ExampleComponent/__tests__/StyledView.spec.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
-import { ThemeProvider } from 'styled-components/native';
-import theme from '../../../theme';
+import { ThemeProvider, theme } from '../../../index';
 import { Square } from '../StyledView';
 
 describe('StyledView', () => {
   it('renders correct styling', () => {
     const { toJSON } = render(
       <ThemeProvider theme={theme}>
-        <Square boxSize="medium" boxSpace="medium" bgColor="primary" />
+        <Square
+          themeSize="medium"
+          themeMargin="medium"
+          themeBgColor="primary"
+        />
       </ThemeProvider>
     );
 

package/src/components/ExampleComponent/__tests__/__snapshots__/StyledView.spec.tsx.snap

@@ -2,13 +2,10 @@
 
 exports[`StyledView renders correct styling 1`] = `
 <View
-  bgColor="primary"
-  boxSize="medium"
-  boxSpace="medium"
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#f1e9fb",
+      "backgroundColor": "#c8a7ef",
       "display": "flex",
       "height": 100,
       "justifyContent": "center",
@@ -19,5 +16,8 @@ exports[`StyledView renders correct styling 1`] = `
       "width": 250,
     }
   }
+  themeBgColor="primary"
+  themeMargin="medium"
+  themeSize="medium"
 />
 `;

package/src/components/ExampleComponent/index.tsx

@@ -6,20 +6,20 @@ interface Props {
   /**
    * Size.
    */
-  boxSize: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
   /**
    * Margin.
    */
-  boxSpace: 'small' | 'medium' | 'large';
+  margin: 'small' | 'medium' | 'large';
   /**
    * Background color.
    */
   bgColor: 'primary' | 'danger' | 'warning';
 }
 
-const ExampleComponent = ({ boxSize = "small", boxSpace, bgColor }: Props) => (
-  <Square boxSize={boxSize} boxSpace={boxSpace} bgColor={bgColor}>
-    <Text>{`Square with ${boxSize} size, ${boxSpace} margin and ${bgColor} background.`}</Text>
+const ExampleComponent = ({ size = 'small', margin, bgColor }: Props) => (
+  <Square themeSize={size} themeMargin={margin} themeBgColor={bgColor}>
+    <Text>{`Square with ${size} size, ${margin} margin and ${bgColor} background.`}</Text>
   </Square>
 );
 

package/src/index.ts

@@ -1,7 +1,7 @@
-import { ThemeProvider, useTheme } from 'styled-components/native';
-import theme from './theme';
+import { ThemeProvider, useTheme } from './styled-components';
+import theme, { getTheme } from './theme';
 
 // Example components
 import ExampleComponent from './components/ExampleComponent';
 
-export { theme, useTheme, ThemeProvider, ExampleComponent };
+export { theme, getTheme, useTheme, ThemeProvider, ExampleComponent };

package/src/styled-components.ts

@@ -0,0 +1,14 @@
+import * as styledComponents from 'styled-components/native';
+
+import type { Theme } from './theme';
+
+const {
+  default: styled,
+  useTheme,
+  css,
+  ThemeProvider,
+} = styledComponents as styledComponents.ReactNativeThemedStyledComponentsModule<Theme>;
+
+export { useTheme, css, ThemeProvider };
+
+export default styled;

package/src/styled.d.ts

@@ -1,8 +1,7 @@
-import 'styled-components';
+import 'styled-components/native';
 
-import { Theme } from './theme/index';
+import { Theme } from './theme';
 
-declare module 'styled-components' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+declare module 'styled-components/native' {
   export interface DefaultTheme extends Theme {}
 }

package/src/theme/components/exampleComponent.ts

@@ -0,0 +1,19 @@
+import { GlobalTheme } from '../global';
+
+const getExampleComponentTheme = (theme: GlobalTheme) => {
+  const colors = {
+    primaryBg: theme.colors.primaryLight,
+    dangerBg: theme.colors.dangerBackground,
+    warningBg: theme.colors.warningBackground,
+  };
+
+  const space = {
+    smallMargin: theme.space.xxsmall,
+    mediumMargin: theme.space.medium,
+    largeMargin: theme.space.xxxxlarge,
+  };
+
+  return { colors, space };
+};
+
+export default getExampleComponentTheme;

package/src/theme/{colors.ts → global/colors.ts}

@@ -21,6 +21,6 @@ const systemPalette = {
   text: palette.greyDark75,
   disabledText: palette.greyDark15,
   invertedText: palette.white,
-}
+};
 
 export { palette, systemPalette };

package/src/theme/global/index.ts

@@ -0,0 +1,19 @@
+import { systemPalette } from './colors';
+import { space } from './space';
+import { fontSizes, fontWeights, lineHeights } from './typography';
+
+const globalTheme = {
+  colors: {
+    ...systemPalette,
+  },
+  space,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+};
+
+type GlobalTheme = typeof globalTheme;
+
+export { GlobalTheme };
+
+export default globalTheme;

package/src/theme/{typography.ts → global/typography.ts}

@@ -1,11 +1,11 @@
 const BASE = 16;
 
 const fontSizes = {
-  xlarge: BASE * 1.125,   // 18
-  large: BASE,            // 16
-  medium: BASE * 0.875,   // 14
-  small: BASE * 0.75,     // 12
-  xsmall: BASE * 0.625,   // 10
+  xlarge: BASE * 1.125, // 18
+  large: BASE, // 16
+  medium: BASE * 0.875, // 14
+  small: BASE * 0.75, // 12
+  xsmall: BASE * 0.625, // 10
 };
 
 const fontWeights = {

package/src/theme/index.ts

@@ -1,26 +1,22 @@
-import { palette, systemPalette } from './colors';
-import { space } from './space';
-import { fontSizes, fontWeights, lineHeights } from './typography';
+import globalTheme, { GlobalTheme } from './global';
 
-import { demoStyleColors, demoStyleSpace } from './components/demoStyle';
+import getExampleComponentTheme from './components/exampleComponent';
 
-const theme = {
-  colors: {
-    ...palette,
-    ...systemPalette,
-    demoStyle: demoStyleColors,
-  },
-  space: {
-    ...space,
-    demoStyle: demoStyleSpace,
-  },
-  fontSizes,
-  fontWeights,
-  lineHeights,
+type Theme = GlobalTheme & {
+  __hd__: {
+    exampleComponent: ReturnType<typeof getExampleComponentTheme>;
+  };
 };
 
-type Theme = typeof theme;
+const getTheme = (theme: GlobalTheme = globalTheme): Theme => ({
+  ...theme,
+  __hd__: {
+    exampleComponent: getExampleComponentTheme(theme),
+  },
+});
+
+const theme = getTheme();
 
-export { Theme };
+export { Theme, getTheme };
 
 export default theme;

package/tsconfig.json

@@ -11,7 +11,8 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["jest", "styled-components", "styled-components-react-native"],
   },
   "include": [
     "src"

package/types/components/ExampleComponent/StyledView.d.ts

@@ -1,12 +1,7 @@
 import { View } from 'react-native';
-export interface Props {
-    boxSize: 'small' | 'medium' | 'large';
-    boxSpace: 'small' | 'medium' | 'large';
-    bgColor: 'primary' | 'danger' | 'warning';
-}
-declare const Square: import("styled-components").StyledComponent<typeof View, any, {
-    boxSize: Props['boxSize'];
-    boxSpace: Props['boxSpace'];
-    bgColor: Props['bgColor'];
+declare const Square: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeSize: 'small' | 'medium' | 'large';
+    themeMargin: 'small' | 'medium' | 'large';
+    themeBgColor: 'primary' | 'danger' | 'warning';
 }, never>;
 export { Square };

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

@@ -2,15 +2,15 @@ interface Props {
     /**
      * Size.
      */
-    boxSize: 'small' | 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Margin.
      */
-    boxSpace: 'small' | 'medium' | 'large';
+    margin: 'small' | 'medium' | 'large';
     /**
      * Background color.
      */
     bgColor: 'primary' | 'danger' | 'warning';
 }
-declare const ExampleComponent: ({ boxSize, boxSpace, bgColor }: Props) => JSX.Element;
+declare const ExampleComponent: ({ size, margin, bgColor }: Props) => JSX.Element;
 export default ExampleComponent;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import { ThemeProvider, useTheme } from 'styled-components/native';
-import theme from './theme';
+import { ThemeProvider, useTheme } from './styled-components';
+import theme, { getTheme } from './theme';
 import ExampleComponent from './components/ExampleComponent';
-export { theme, useTheme, ThemeProvider, ExampleComponent };
+export { theme, getTheme, useTheme, ThemeProvider, ExampleComponent };

package/types/styled-components.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="styled-components-react-native" />
+import * as styledComponents from 'styled-components/native';
+import type { Theme } from './theme';
+declare const styled: styledComponents.ReactNativeStyledInterface<Theme>, useTheme: () => Theme, css: import("styled-components").ThemedCssFunction<Theme>, ThemeProvider: import("styled-components").ThemeProviderComponent<Theme, Theme>;
+export { useTheme, css, ThemeProvider };
+export default styled;

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

@@ -0,0 +1,14 @@
+import { GlobalTheme } from '../global';
+declare const getExampleComponentTheme: (theme: GlobalTheme) => {
+    colors: {
+        primaryBg: string;
+        dangerBg: string;
+        warningBg: string;
+    };
+    space: {
+        smallMargin: number;
+        mediumMargin: number;
+        largeMargin: number;
+    };
+};
+export default getExampleComponentTheme;

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

@@ -0,0 +1,58 @@
+declare const globalTheme: {
+    colors: {
+        primary: string;
+        primaryLight: string;
+        info: string;
+        infoLight: string;
+        infoBackground: string;
+        success: string;
+        successDark: string;
+        successLight: string;
+        successBackground: string;
+        danger: string;
+        dangerLight: string;
+        dangerBackground: string;
+        warning: string;
+        warningDark: string;
+        warningBackground: string;
+        platformBackground: string;
+        backgroundDark: string;
+        text: string;
+        disabledText: string;
+        invertedText: string;
+    };
+    space: {
+        xxsmall: number;
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+        xxlarge: number;
+        xxxlarge: number;
+        xxxxlarge: number;
+    };
+    fontSizes: {
+        xlarge: number;
+        large: number;
+        medium: number;
+        small: number;
+        xsmall: number;
+    };
+    fontWeights: {
+        light: number;
+        regular: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        xlarge: number;
+        large: number;
+        medium: number;
+        small: number;
+        xsmall: number;
+    };
+};
+declare type GlobalTheme = typeof globalTheme;
+export { GlobalTheme };
+export default globalTheme;