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,