@hero-design/rn 6.7.0 → 6.7.3

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@hero-design/rn",
-  "version": "6.7.0",
+  "version": "6.7.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
+  "types": "types/index.d.ts",
   "scripts": {
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
+    "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
     "dev": "expo start",
     "test": "jest --runInBand",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
-    "build": "yarn build:js && yarn build:types"
+    "build": "yarn build:js && yarn build:types",
+    "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "^6.7.0",
+    "@hero-design/colors": "6.7.3",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
@@ -26,6 +28,8 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@react-navigation/native": "^6.0.10",
+    "@react-navigation/native-stack": "^6.6.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -54,6 +58,8 @@
     "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-safe-area-context": "^4.2.5",
+    "react-native-screens": "^3.13.1",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
     "ts-jest": "^27.0.7",

package/playground/components/ExampleComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExampleComponent } from '../../src/index';
+
+const ExampleComponentPlayground = () => (
+  <ExampleComponent size="large" margin="large" bgColor="primary" />
+);
+
+export default ExampleComponentPlayground;

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/global/colors.ts

@@ -1,3 +1,26 @@
-import { palette, systemPalette } from '@hero-design/colors';
+import { palette } from '@hero-design/colors';
+
+const systemPalette = {
+  primary: palette.violet,
+  primaryLight: palette.violetLight60,
+  info: palette.dodgerBlue,
+  infoLight: palette.dodgerBlueLight75,
+  infoBackground: palette.dodgerBlueLight90,
+  success: palette.green,
+  successDark: palette.greenDark30,
+  successLight: palette.greenDark75,
+  successBackground: palette.grotesqueGreenLight90,
+  danger: palette.red,
+  dangerLight: palette.redLight60,
+  dangerBackground: palette.redLight90,
+  warning: palette.orange,
+  warningDark: palette.orangeDark15,
+  warningBackground: palette.orangeLight90,
+  platformBackground: palette.greyLight95,
+  backgroundDark: palette.greyDark75,
+  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/global/typography.ts

@@ -0,0 +1,26 @@
+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
+};
+
+const fontWeights = {
+  light: 200,
+  regular: 400,
+  semiBold: 600,
+  bold: 700,
+};
+
+const lineHeights = {
+  xlarge: fontSizes.xlarge + 8,
+  large: fontSizes.large + 8,
+  medium: fontSizes.medium + 8,
+  small: fontSizes.small + 8,
+  xsmall: fontSizes.xsmall + 8,
+};
+
+export { fontSizes, fontWeights, lineHeights };

package/src/theme/index.ts

@@ -1,22 +1,22 @@
-import { palette, systemPalette } from './global/colors';
-import { space } from './global/space';
+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,
-  },
+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/colors.d.ts

@@ -0,0 +1,24 @@
+import { palette } from '@hero-design/colors';
+declare const systemPalette: {
+    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;
+};
+export { palette, systemPalette };

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/colors.d.ts

@@ -1,2 +1,24 @@
-import { palette, systemPalette } from '@hero-design/colors';
+import { palette } from '@hero-design/colors';
+declare const systemPalette: {
+    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;
+};
 export { palette, systemPalette };