@hero-design/rn 6.7.2 → 6.7.3

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/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/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;

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

@@ -0,0 +1,12 @@
+declare const space: {
+    xxsmall: number;
+    xsmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+    xxlarge: number;
+    xxxlarge: number;
+    xxxxlarge: number;
+};
+export { space };

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

@@ -0,0 +1,21 @@
+declare const fontSizes: {
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+declare const fontWeights: {
+    light: number;
+    regular: number;
+    semiBold: number;
+    bold: number;
+};
+declare const lineHeights: {
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+};
+export { fontSizes, fontWeights, lineHeights };

package/types/theme/index.d.ts

@@ -1,148 +1,11 @@
-declare const theme: {
-    colors: {
-        demoStyle: {
-            primaryBg: string;
-            dangerBg: string;
-            warningBg: string;
-        };
-        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;
-        black: string;
-        blue: string;
-        blueDark30: string;
-        blueDark75: string;
-        blueLight30: string;
-        blueLight75: string;
-        blueLight90: string;
-        dodgerBlue: string;
-        dodgerBlueDark30: string;
-        dodgerBlueLight30: string;
-        dodgerBlueLight75: string;
-        dodgerBlueLight90: string;
-        green: string;
-        greenDark15: string;
-        greenDark30: string;
-        greenDark75: string;
-        greenLight30: string;
-        greenLight90: string;
-        grey: string;
-        greyDark15: string;
-        greyDark30: string;
-        greyDark45: string;
-        greyDark60: string;
-        greyDark75: string;
-        greyLight45: string;
-        greyLight60: string;
-        greyLight75: string;
-        greyLight85: string;
-        greyLight90: string;
-        greyLight95: string;
-        grotesqueGreen: string;
-        grotesqueGreenDark45: string;
-        grotesqueGreenLight60: string;
-        grotesqueGreenLight75: string;
-        grotesqueGreenLight90: string;
-        orange: string;
-        orangeDark15: string;
-        orangeDark30: string;
-        orangeDark75: string;
-        orangeLight30: string;
-        orangeLight75: string;
-        orangeLight90: string;
-        pink: string;
-        pinkDark15: string;
-        pinkDark30: string;
-        pinkDark45: string;
-        pinkDark75: string;
-        pinkLight30: string;
-        pinkLight45: string;
-        pinkLight75: string;
-        pinkLight90: string;
-        purple: string;
-        red: string;
-        redDark15: string;
-        redDark30: string;
-        redDark75: string;
-        redLight30: string;
-        redLight60: string;
-        redLight75: string;
-        redLight90: string;
-        smalt: string;
-        smaltDark75: string;
-        smaltLight30: string;
-        smaltLight45: string;
-        smaltLight90: string;
-        violet: string;
-        violetDark15: string;
-        violetDark30: string;
-        violetDark45: string;
-        violetDark75: string;
-        violetLight30: string;
-        violetLight60: string;
-        violetLight75: string;
-        violetLight90: string;
-        white: string;
-        yellow: string;
-        yellowDark15: string;
-        yellowDark75: string;
-        yellowLight60: string;
-        yellowLight90: string;
-    };
-    space: {
-        demoStyle: {
-            smallMargin: number;
-            mediumMargin: number;
-            largeMargin: number;
-        };
-        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;
+import { GlobalTheme } from './global';
+import getExampleComponentTheme from './components/exampleComponent';
+declare type Theme = GlobalTheme & {
+    __hd__: {
+        exampleComponent: ReturnType<typeof getExampleComponentTheme>;
     };
 };
-declare type Theme = typeof theme;
-export { Theme };
+declare const getTheme: (theme?: GlobalTheme) => Theme;
+declare const theme: Theme;
+export { Theme, getTheme };
 export default theme;