Added Divider component

docs/docs/Components/divider.md

@@ -0,0 +1,45 @@
+---
+sidebar_position: 2
+---
+
+import ExpoLayout from '../../src/components/ExpoLayout/index.js';
+
+# Divider
+
+Simple divider component.
+
+## Import
+
+```js
+import { Divider } from "react-native-ficus-ui";
+```
+
+## Usage
+
+## Props
+
+Extends all `Box` props, except background properties.
+
+`colorScheme`
+---
+The colorScheme property, will define divider color.
+
+|Type|Required|Default|
+|---|---|---|
+|string|No|gray|
+
+`orientation`
+---
+The orientation of divider, can be horizontal or vertical.
+
+|Type|Required|Default|
+|---|---|---|
+|'vertical' 'horizontal'|No|'horizontal'|
+
+`size`
+---
+Size of divider.
+
+|Type|Required|
+|---|---|
+|number|No|

example/src/components/Divider.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import { Divider, Box, Text } from 'react-native-ficus-ui';
+import ExampleSection from '../ExampleSection';
+
+const DividerComponent = () => {
+  return (
+    <SafeAreaView>
+      <Text mx="xl" fontSize="4xl">
+        Divider component
+      </Text>
+      <Box>
+        <ExampleSection name="horizontal">
+          <Text>Test text</Text>
+          <Divider my="md" />
+          <Text>Test text</Text>
+        </ExampleSection>
+
+        <ExampleSection name="vertical">
+          <Box h={40} flexDirection="row">
+            <Divider orientation="vertical" />
+            <Box m="md">
+              <Text>Test text</Text>
+            </Box>
+          </Box>
+        </ExampleSection>
+
+        <ExampleSection name="custom color">
+          <Text>Test text</Text>
+          <Divider colorScheme="blue" my="md" />
+          <Text>Test text</Text>
+        </ExampleSection>
+
+        <ExampleSection name="custom size">
+          <Text>Test text</Text>
+          <Divider size={10} my="md" />
+          <Text>Test text</Text>
+
+          <Box mt="xl" h={40} flexDirection="row">
+            <Divider size={10} orientation="vertical" />
+            <Box m="md">
+              <Text>Test text</Text>
+            </Box>
+          </Box>
+        </ExampleSection>
+      </Box>
+    </SafeAreaView>
+  );
+};
+
+export default DividerComponent;

example/src/items.ts

@@ -23,6 +23,7 @@ import ToastHook from './components/Toast';
 import ModalComponent from './components/Modal';
 import FlashListComponent from './components/FlashList';
 import SafeAreaBoxComponent from './components/SafeAreaBox';
+import DividerComponent from './components/Divider';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -37,6 +38,11 @@ export const components: ExampleComponentType[] = [
     component: TextComponent,
   },
   { navigationPath: 'Box', onScreenName: 'Box', component: BoxComponent },
+  {
+    navigationPath: 'Divider',
+    onScreenName: 'Divider',
+    component: DividerComponent,
+  },
   {
     navigationPath: 'SafeAreaBox',
     onScreenName: 'SafeAreaBox',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ficus-ui",
-  "version": "1.0.0-alpha14",
+  "version": "1.0.0-alpha15",
   "description": "React Native UI library forked from Magnus UI and inspired by Chakra UI",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/divider/divider.component.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { View as RNView } from 'react-native';
+
+import { getStyle } from './divider.style';
+import type { DividerProps } from './divider.type';
+import { useTheme } from '../../theme/theme.hook';
+import { useDefaultProps } from '../../utilities/useDefaultProps';
+
+const Divider: React.FunctionComponent<DividerProps> = (incomingProps) => {
+  const props = useDefaultProps('Divider', incomingProps, {
+    flexDirection: 'column',
+    flexWrap: 'nowrap',
+    borderRadius: 'none',
+    shadow: 'none',
+    position: 'relative',
+    pointerEvents: 'auto',
+    borderStyle: 'solid',
+    colorScheme: 'gray',
+    orientation: 'horizontal',
+    size: 1,
+  });
+
+  const {
+    h,
+    w,
+    m,
+    mt,
+    mr,
+    mb,
+    ml,
+    ms,
+    p,
+    pr,
+    pt,
+    pb,
+    pl,
+    minH,
+    minW,
+    maxW,
+    maxH,
+    position,
+    style,
+    flexDirection,
+    direction,
+    borderRadius,
+    borderTopRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderLeftRadius,
+    borderRightRadius,
+    borderBottomRadius,
+    children,
+    alignItems,
+    align,
+    justifyContent,
+    justify,
+    borderColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderTopColor,
+    borderRightColor,
+    borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderTopWidth,
+    borderEndWidth,
+    flexWrap,
+    wrap,
+    flexGrow,
+    grow,
+    flexBasis,
+    basis,
+    flexShrink,
+    shrink,
+    shadow,
+    shadowColor,
+    opacity,
+    overflow,
+    top,
+    left,
+    right,
+    bottom,
+    zIndex,
+    ...rest
+  } = props;
+  const { theme } = useTheme();
+  const computedStyle = getStyle(theme, props);
+
+  return <RNView style={computedStyle.divider} {...rest} />;
+};
+
+// Divider.defaultProps = {
+// flexDirection: 'column',
+// flexWrap: 'nowrap',
+// borderRadius: 'none',
+// shadow: 'none',
+// position: 'relative',
+// pointerEvents: 'auto',
+// borderStyle: 'solid',
+// h: 2,
+// colorScheme: 'gray',
+// };
+
+export { Divider };

src/components/divider/divider.style.tsx

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native';
+
+import {
+  createShadowStyles,
+  createPositionStyle,
+  createSpacingStyles,
+  createBorderWidthStyles,
+  createBorderColorStyles,
+  createBorderRadiusStyles,
+  getThemeColor,
+} from '../../theme/theme.service';
+import type { DividerProps } from './divider.type';
+import type { ThemeType } from '../../theme/type';
+
+/**
+ * computed style
+ *
+ * @param theme
+ * @param props
+ */
+export const getStyle = (theme: ThemeType, props: DividerProps) => {
+  const computedStyle: any = {};
+
+  computedStyle.divider = {
+    flexDirection: props.direction ? props.direction : props.flexDirection,
+    flexWrap: props.wrap ? props.wrap : props.flexWrap,
+    alignItems: props.align ? props.align : props.alignItems,
+    justifyContent: props.justify ? props.justify : props.justifyContent,
+    flexBasis: props.basis ? props.basis : props.flexBasis,
+    flexGrow: props.grow ? props.grow : props.flexGrow,
+    flexShrink: props.shrink ? props.shrink : props.flexShrink,
+    height: props.h,
+    width: props.w,
+    minWidth: props.minW,
+    minHeight: props.minH,
+    alignSelf: props.alignSelf,
+    maxWidth: props.maxW,
+    maxHeight: props.maxH,
+    opacity: props.opacity,
+    overflow: props.overflow || 'hidden',
+    zIndex: props.zIndex,
+    borderStyle: props.borderStyle,
+    borderColor: getThemeColor(theme.colors, `${props.colorScheme}.400`),
+    borderTopWidth: props.orientation === 'horizontal' ? props.size : 0,
+    borderLeftWidth: props.orientation === 'vertical' ? props.size : 0,
+    flex: props.flex,
+    ...createPositionStyle(props),
+    ...createShadowStyles(props, theme),
+    ...createBorderWidthStyles(props),
+    ...createSpacingStyles(props, theme.spacing),
+    ...createBorderColorStyles(props, theme.colors),
+    ...createBorderRadiusStyles(props, theme.borderRadius),
+  };
+
+  // merging custom style props to computed style
+  if (props.style) {
+    computedStyle.divider = {
+      ...computedStyle.divider,
+      // @ts-ignore
+      ...props.style,
+    };
+  }
+
+  return StyleSheet.create(computedStyle);
+};

src/components/divider/divider.type.tsx

@@ -0,0 +1,34 @@
+import type { ViewProps as RNViewProps } from 'react-native';
+
+import type {
+  BorderPropsType,
+  SpacingPropsType,
+  BorderRadiusPropsType,
+  ShadowPropsType,
+  DimensionPropsType,
+  FlexPropsType,
+  PositionPropsType,
+  ZIndexPropsType,
+  OverflowPropsType,
+  OpacityPropsType,
+  VariantPropsType,
+  OrientationPropsType,
+} from '../../types';
+
+export interface DividerProps
+  extends RNViewProps,
+    OrientationPropsType,
+    BorderPropsType,
+    SpacingPropsType,
+    BorderRadiusPropsType,
+    ShadowPropsType,
+    DimensionPropsType,
+    FlexPropsType,
+    PositionPropsType,
+    ZIndexPropsType,
+    OverflowPropsType,
+    OpacityPropsType,
+    VariantPropsType {
+  colorScheme?: string;
+  size?: number;
+}

src/components/index.ts

@@ -1,5 +1,7 @@
 export { Box } from './box/box.component';
 export { BoxProps } from './box/box.type';
+export { Divider } from './divider/divider.component';
+export { DividerProps } from './divider/divider.type';
 export { SafeAreaBox } from './safeareabox/safeareabox.component';
 export { SafeAreaBoxProps } from './safeareabox/safeareabox.type';
 export { ScrollBox } from './scrollbox/scrollbox.component';

src/theme/type.ts

@@ -29,6 +29,7 @@ import type {
 import type { RadioGroupProps, RadioProps } from 'components/radio/radio.type';
 import type { ModalProps } from 'components/modal/modal.type';
 import { ToastProps } from 'react-native-toast-message';
+import type { DividerProps } from 'components/divider/divider.type';
 
 export interface ColorHues {
   50: string;
@@ -75,6 +76,7 @@ export interface ThemeType {
     Radio?: VariantType<RadioProps>;
     RadioGroup?: VariantType<RadioGroupProps>;
     Modal?: VariantType<ModalProps>;
+    Divider?: VariantType<DividerProps>;
   };
 
   fontFamily?: {

src/types.ts

@@ -107,6 +107,11 @@ export interface StackSpacingPropsType {
   spacing?: string | number;
 }
 
+export const orientationProps = ['orientation'] as const;
+export interface OrientationPropsType {
+  orientation?: 'vertical' | 'horizontal';
+}
+
 export const borderRadiusProps = [
   'borderRadius',
   'borderTopLeftRadius',