feat: implement Spacer component

Author: eunchankim

example/src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { StyleSheet, View, Text } from 'react-native';
-import { multiply, Hello } from 'good-ui';
+import { multiply, Hello, Spacer } from 'react-native-good-ui';
 
 export default function App() {
   const [result, setResult] = React.useState<number | undefined>();
@@ -14,6 +14,8 @@ export default function App() {
     <View style={styles.container}>
       <Hello />
 
+      <Spacer direction={'both'} preset={'huge'} />
+
       <Text>Result: {result}</Text>
     </View>
   );

package.json

@@ -51,11 +51,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@evilmartians/lefthook": "^1.2.2",
     "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
+    "@types/ramda": "^0.28.20",
     "@types/react": "~17.0.21",
     "@types/react-native": "0.70.0",
     "commitlint": "^17.0.2",
@@ -155,5 +156,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "ramda": "^0.28.0"
   }
 }

src/components/Spacer/index.tsx

@@ -0,0 +1,76 @@
+/**
+ * The Spacer component is responsible for handling the space UI.
+ * This component can create 3 types of spaces that is flex, preset and pixel type.
+ * You should avoid using "size" prop that allow input in units of pixels for coherent spatial processing.
+ */
+
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+import { Spacing, spacing } from '../../theme';
+import { isNilOrEmpty } from '../../utils';
+
+interface SpacerDirection {
+  direction?: 'both' | 'vertical' | 'horizontal';
+}
+
+interface FlexSpacerProps extends SpacerDirection {
+  /**
+   * flex type is joint 1st place priority. Strictly speaking, this is First.
+   * If you don't know flex layout, Reference https://reactnative.dev/docs/flexbox.
+   */
+  flex: number;
+  /**
+   * When using the above props, you should never use any other props.
+   */
+  preset?: never;
+  size?: never;
+}
+
+interface PresetSpacerProps extends SpacerDirection {
+  /**
+   * preset Type is joint 1st place priority.
+   */
+  preset: Spacing;
+  /**
+   * When using the above props, you should never use any other props.
+   */
+  flex?: never;
+  size?: never;
+}
+
+interface SizeSpacerProps extends SpacerDirection {
+  /**
+   * size has the lowest priority.
+   * because The use of size is not recommended because UI & UX quality is often poor.
+   */
+  size?: number;
+  /**
+   * When using the above props, you should never use any other props.
+   */
+  preset?: never;
+  flex?: never;
+}
+
+type SpacerProps = PresetSpacerProps | FlexSpacerProps | SizeSpacerProps;
+
+export function Spacer(props: SpacerProps) {
+  const { direction = 'both', flex, preset, size: pixelSize, ...rest } = props;
+
+  // @ts-ignore
+  const presetSize = spacing[preset];
+  const value = presetSize ? presetSize : pixelSize;
+
+  const style: ViewStyle = {
+    flex: flex ? flex : undefined,
+    width:
+      direction === 'both' || direction === 'horizontal' ? value : undefined,
+    height:
+      direction === 'both' || direction === 'vertical' ? value : undefined,
+  };
+
+  if (__DEV__ && isNilOrEmpty(value)) {
+    console.warn(`Spacer component's value is nil or empty!`);
+  }
+
+  return <View style={style} {...rest} />;
+}

src/components/index.ts

@@ -0,0 +1 @@
+export { Spacer } from './Spacer';

src/index.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
+
+export { Spacer } from './components';
 
 export function multiply(a: number, b: number): Promise<number> {
   return Promise.resolve(a * b);
 }
 
 export function Hello() {
-  return <View>Hello World</View>;
+  return (
+    <View>
+      <Text>Hello World</Text>
+    </View>
+  );
 }

src/theme/index.ts

@@ -0,0 +1 @@
+export * from './spacing';

src/theme/spacing.ts

@@ -0,0 +1,16 @@
+/**
+ Use these spacings for margins/paddings and other whitespace throughout your app.
+ */
+export const spacing = {
+  micro: 2,
+  tiny: 4,
+  extraSmall: 8,
+  small: 12,
+  medium: 16,
+  large: 24,
+  extraLarge: 32,
+  huge: 48,
+  massive: 64,
+} as const;
+
+export type Spacing = keyof typeof spacing;

src/utils/functions.ts

@@ -0,0 +1,3 @@
+import { isNil, isEmpty } from 'ramda';
+
+export const isNilOrEmpty = (value: any) => isNil(value) || isEmpty(value);

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './functions';

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
-      "good-ui": ["./src/index"]
+      "react-native-good-ui": ["./src/index"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,

yarn.lock

@@ -2176,6 +2176,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/ramda@^0.28.20":
+  version "0.28.20"
+  resolved "https://registry.yarnpkg.com/@types/ramda/-/ramda-0.28.20.tgz#df93bb5674f0051464c075480ca3075d1c1361ba"
+  integrity sha512-MeUhzGSXQTRsY19JGn5LIBTLxVEnyF6HDNr08KSJqybsm4DlfLIgK1jBHjhpiSyk252tXYmp+UOe0UFg0UiFsA==
+  dependencies:
+    ts-toolbelt "^6.15.1"
+
 "@types/[email protected]":
   version "0.70.0"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.70.0.tgz#f8cdcdd542d36467d7591585b93d27e0563676e0"
@@ -7788,6 +7795,11 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+ramda@^0.28.0:
+  version "0.28.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97"
+  integrity sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==
+
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -9087,6 +9099,11 @@ ts-node@^10.8.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
+ts-toolbelt@^6.15.1:
+  version "6.15.5"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.15.5.tgz#cb3b43ed725cb63644782c64fbcad7d8f28c0a83"
+  integrity sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"