@hero-design/rn 6.7.0

package/metro.config.js

@@ -0,0 +1,16 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+const workspaceRoot = path.resolve(__dirname, '../..');
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+config.watchFolders = [workspaceRoot];
+
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+];
+
+module.exports = config;

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@hero-design/rn",
+  "version": "6.7.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "lint": "eslint src --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"
+  },
+  "dependencies": {
+    "@hero-design/colors": "^6.7.0",
+    "styled-components": "6.0.0-alpha.5"
+  },
+  "peerDependencies": {
+    "react": "17.0.2",
+    "react-native": "0.65.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@testing-library/jest-native": "^4.0.4",
+    "@testing-library/react-native": "^9.1.0",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.39",
+    "@types/react-native": "^0.66.16",
+    "@types/styled-components": "^5.1.24",
+    "@types/styled-components-react-native": "^5.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
+    "eslint": "^8.9.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "expo": "^44.0.6",
+    "jest": "^27.3.1",
+    "jest-styled-components": "^7.0.6",
+    "prettier": "^2.5.1",
+    "react": "17.0.2",
+    "react-native": "0.65.1",
+    "react-test-renderer": "17.0.2",
+    "rollup": "^2.68.0",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.5.5"
+  },
+  "nx": {
+    "targets": {
+      "lint": {
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      },
+      "type-check": {
+        "dependsOn": [
+          {
+            "target": "build:types",
+            "projects": "dependencies"
+          }
+        ]
+      }
+    }
+  }
+}

package/playground/index.tsx

@@ -0,0 +1,25 @@
+import { SafeAreaView, View } from 'react-native';
+import React from 'react';
+import { theme, ThemeProvider, ExampleComponent } from '../src/index';
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <SafeAreaView
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={{
+          borderWidth: 1,
+        }}
+      >
+        <ExampleComponent boxSize="medium" boxSpace="medium" bgColor="danger" />
+      </View>
+    </SafeAreaView>
+  </ThemeProvider>
+);
+
+export default App;

package/rollup.config.js

@@ -0,0 +1,35 @@
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { babel } from '@rollup/plugin-babel';
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
+import replace from '@rollup/plugin-replace';
+
+import pkg from './package.json';
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      format: 'esm',
+    },
+  ],
+  external: ['react', 'react-native'],
+  plugins: [
+    replace(({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    })),
+    nodeResolve({ extensions, browser: true }),
+    commonjs(),
+    json(),
+    typescript(),
+    babel({ extensions, babelHelpers: 'bundled' }),
+  ],
+};

package/src/components/ExampleComponent/StyledView.tsx

@@ -0,0 +1,74 @@
+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';
+}
+
+const Square = styled(View)<{
+  boxSize: Props['boxSize'];
+  boxSpace: Props['boxSpace'];
+  bgColor: Props['bgColor'];
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ boxSize }) => {
+    switch (boxSize) {
+      case 'small':
+        return css`
+          height: 50px;
+          width: 200px;
+        `;
+      case 'medium':
+        return css`
+          height: 100px;
+          width: 250px;
+        `;
+      case 'large':
+        return css`
+          height: 150px;
+          width: 300px;
+        `;
+    }
+  }}
+
+  ${({ boxSpace, theme }) => {
+    switch (boxSpace) {
+      case 'small':
+        return css`
+          margin: ${theme.space.demoStyle.smallMargin}px;
+        `;
+      case 'medium':
+        return css`
+          margin: ${theme.space.demoStyle.mediumMargin}px;
+        `;
+      case 'large':
+        return css`
+          margin: ${theme.space.demoStyle.largeMargin}px;
+        `;
+    }
+  }}
+
+  ${({ bgColor, theme }) => {
+    switch (bgColor) {
+      case 'primary':
+        return css`
+          background-color: ${theme.colors.demoStyle.primaryBg};
+        `;
+      case 'danger':
+        return css`
+          background-color: ${theme.colors.demoStyle.dangerBg};
+        `;
+      case 'warning':
+        return css`
+          background-color: ${theme.colors.demoStyle.warningBg};
+        `;
+    }
+  }}
+`;
+
+export { Square };

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

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

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledView renders correct styling 1`] = `
+<View
+  bgColor="primary"
+  boxSize="medium"
+  boxSpace="medium"
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#f1e9fb",
+      "display": "flex",
+      "height": 100,
+      "justifyContent": "center",
+      "marginBottom": 16,
+      "marginLeft": 16,
+      "marginRight": 16,
+      "marginTop": 16,
+      "width": 250,
+    }
+  }
+/>
+`;

package/src/components/ExampleComponent/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { Square } from './StyledView';
+
+interface Props {
+  /**
+   * Size.
+   */
+  boxSize: 'small' | 'medium' | 'large';
+  /**
+   * Margin.
+   */
+  boxSpace: '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>
+  </Square>
+);
+
+export default ExampleComponent;

package/src/index.ts

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

package/src/styled.d.ts

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

package/src/theme/components/demoStyle.ts

@@ -0,0 +1,16 @@
+import { systemPalette } from '../global/colors';
+import { space } from '../global/space';
+
+const demoStyleColors = {
+  primaryBg: systemPalette.primaryBackground,
+  dangerBg: systemPalette.dangerBackground,
+  warningBg: systemPalette.warningBackground,
+};
+
+const demoStyleSpace = {
+  smallMargin: space.xxsmall,
+  mediumMargin: space.medium,
+  largeMargin: space.xxxxlarge,
+};
+
+export { demoStyleColors, demoStyleSpace };

package/src/theme/global/colors.ts

@@ -0,0 +1,3 @@
+import { palette, systemPalette } from '@hero-design/colors';
+
+export { palette, systemPalette };

package/src/theme/global/space.ts

@@ -0,0 +1,15 @@
+const BASE = 8;
+
+const space = {
+  xxsmall: BASE * 0.25,
+  xsmall: BASE * 0.5,
+  small: BASE,
+  medium: BASE * 2,
+  large: BASE * 3,
+  xlarge: BASE * 4,
+  xxlarge: BASE * 5,
+  xxxlarge: BASE * 6,
+  xxxxlarge: BASE * 7,
+};
+
+export { space };

package/src/theme/index.ts

@@ -0,0 +1,22 @@
+import { palette, systemPalette } from './global/colors';
+import { space } from './global/space';
+
+import { demoStyleColors, demoStyleSpace } from './components/demoStyle';
+
+const theme = {
+  colors: {
+    ...palette,
+    ...systemPalette,
+    demoStyle: demoStyleColors,
+  },
+  space: {
+    ...space,
+    demoStyle: demoStyleSpace,
+  },
+};
+
+type Theme = typeof theme;
+
+export { Theme };
+
+export default theme;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "declaration": true,
+    "outDir": "types",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "jsx": "react-native",
+    "strict": true,
+    "allowUnreachableCode": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "extends": "expo/tsconfig.base"
+}

package/tsconfig.spec.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

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

@@ -0,0 +1,12 @@
+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'];
+}, never>;
+export { Square };

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

@@ -0,0 +1 @@
+export {};

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

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

package/types/index.d.ts

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

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

@@ -0,0 +1,11 @@
+declare const demoStyleColors: {
+    primaryBg: string;
+    dangerBg: string;
+    warningBg: string;
+};
+declare const demoStyleSpace: {
+    smallMargin: number;
+    mediumMargin: number;
+    largeMargin: number;
+};
+export { demoStyleColors, demoStyleSpace };

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

@@ -0,0 +1,2 @@
+import { palette, systemPalette } from '@hero-design/colors';
+export { palette, systemPalette };

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

@@ -0,0 +1,137 @@
+declare const theme: {
+    colors: {
+        demoStyle: {
+            primaryBg: string;
+            dangerBg: string;
+            warningBg: string;
+        };
+        primary: string;
+        primaryDark: string;
+        primaryLight: string;
+        primaryBackground: string;
+        platformBackground: string;
+        backgroundDark: string;
+        backgroundLight: string;
+        info: string;
+        infoDark: string;
+        infoLight: string;
+        infoBackground: string;
+        success: string;
+        successDark: string;
+        successLight: string;
+        successBackground: string;
+        danger: string;
+        dangerDark: string;
+        dangerLight: string;
+        dangerBackground: string;
+        warning: string;
+        warningDark: string;
+        warningLight: string;
+        warningBackground: string;
+        error: string;
+        errorDark: string;
+        errorLight: string;
+        errorBackground: string;
+        headingText: string;
+        text: string;
+        subduedText: string;
+        disabledText: string;
+        outline: string;
+        disabledBackground: string;
+        black: string;
+        blue: string;
+        blueDark30: string;
+        blueDark75: string;
+        blueLight30: string;
+        blueLight75: string;
+        blueLight90: string;
+        dodgerBlue: string;
+        dodgerBlueDark30: string;
+        dodgerBlueLight30: string;
+        dodgerBlueLight90: string;
+        green: string;
+        greenDark15: string;
+        greenDark30: string;
+        greenDark75: string;
+        greenLight30: string;
+        greenLight90: string;
+        grey: string;
+        greyDark30: string;
+        greyDark45: string;
+        greyDark60: string;
+        greyDark75: string;
+        greyLight45: string;
+        greyLight60: string;
+        greyLight75: string;
+        greyLight85: string;
+        greyLight90: 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;
+        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;
+    };
+};
+declare type Theme = typeof theme;
+export { Theme };
+export default theme;