@granite-js/style-utils 0.0.1

package/src/box-spacing.tsx

@@ -0,0 +1,306 @@
+import type { ViewStyle } from 'react-native';
+
+interface BoxSpacingOptionObject {
+  x?: never;
+  y?: never;
+  top?: never;
+  bottom?: never;
+  left?: never;
+  right?: never;
+}
+
+type BoxSpacingOptionObjectCase<Option extends keyof BoxSpacingOptionObject> = {
+  [O in Option]?: number;
+} & {
+  [P in Exclude<keyof BoxSpacingOptionObject, Option>]?: never;
+};
+
+export type BoxSpacingOption =
+  | BoxSpacingOptionObjectCase<'x' | 'y'>
+  | BoxSpacingOptionObjectCase<'x' | 'top' | 'bottom'>
+  | BoxSpacingOptionObjectCase<'y' | 'left' | 'right'>
+  | BoxSpacingOptionObjectCase<'top' | 'right' | 'bottom' | 'left'>
+  | number;
+
+export function spacing(styleProperty: string, option: BoxSpacingOption): ViewStyle {
+  if (typeof option === 'number') {
+    return {
+      [styleProperty]: option,
+    };
+  }
+
+  const box: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  } = {};
+
+  if (option.x !== undefined) {
+    box.left = box.right = option.x;
+  }
+  if (option.y !== undefined) {
+    box.top = box.bottom = option.y;
+  }
+  if (option.top !== undefined) {
+    box.top = option.top;
+  }
+  if (option.right !== undefined) {
+    box.right = option.right;
+  }
+  if (option.bottom !== undefined) {
+    box.bottom = option.bottom;
+  }
+  if (option.left !== undefined) {
+    box.left = option.left;
+  }
+
+  /** Changes margin left to marginLeft */
+  const styleObject = Object.entries(box).reduce((_styleObject, [dir, value]) => {
+    return {
+      ..._styleObject,
+      [`${styleProperty}${capitalizeFirstLetter(dir)}`]: value,
+    };
+  }, {});
+
+  return styleObject;
+}
+
+type Property = 'x' | 'y' | 'top' | 'right' | 'bottom' | 'left';
+type Unit = '4' | '8' | '12' | '16' | '24' | '32';
+
+export interface BoxSpacingPresets {
+  readonly x: (value: number) => ViewStyle;
+  readonly x4: ViewStyle;
+  readonly x8: ViewStyle;
+  readonly x12: ViewStyle;
+  readonly x16: ViewStyle;
+  readonly x24: ViewStyle;
+  readonly x32: ViewStyle;
+
+  readonly y: (value: number) => ViewStyle;
+  readonly y4: ViewStyle;
+  readonly y8: ViewStyle;
+  readonly y12: ViewStyle;
+  readonly y16: ViewStyle;
+  readonly y24: ViewStyle;
+  readonly y32: ViewStyle;
+
+  readonly top: (value: number) => ViewStyle;
+  readonly top4: ViewStyle;
+  readonly top8: ViewStyle;
+  readonly top12: ViewStyle;
+  readonly top16: ViewStyle;
+  readonly top24: ViewStyle;
+  readonly top32: ViewStyle;
+
+  readonly right: (value: number) => ViewStyle;
+  readonly right4: ViewStyle;
+  readonly right8: ViewStyle;
+  readonly right12: ViewStyle;
+  readonly right16: ViewStyle;
+  readonly right24: ViewStyle;
+  readonly right32: ViewStyle;
+
+  readonly bottom: (value: number) => ViewStyle;
+  readonly bottom4: ViewStyle;
+  readonly bottom8: ViewStyle;
+  readonly bottom12: ViewStyle;
+  readonly bottom16: ViewStyle;
+  readonly bottom24: ViewStyle;
+  readonly bottom32: ViewStyle;
+
+  readonly left: (value: number) => ViewStyle;
+  readonly left4: ViewStyle;
+  readonly left8: ViewStyle;
+  readonly left12: ViewStyle;
+  readonly left16: ViewStyle;
+  readonly left24: ViewStyle;
+  readonly left32: ViewStyle;
+}
+
+export interface BoxSpacing extends BoxSpacingPresets {
+  (option: BoxSpacingOption): ViewStyle;
+}
+
+const properties: Property[] = ['x', 'y', 'top', 'right', 'bottom', 'left'];
+const units: Unit[] = ['4', '8', '12', '16', '24', '32'];
+
+function createSpacingWithProperty(cssProperty: string) {
+  const _spacing = (option: BoxSpacingOption) => spacing(cssProperty, option);
+
+  for (const property of properties) {
+    (_spacing as any)[property] = (value: number) => spacing(cssProperty, { [property]: value });
+    for (const unit of units) {
+      const key = `${property}${unit}` as keyof BoxSpacingPresets;
+
+      (_spacing as any)[key] = _spacing({
+        [property]: Number(unit),
+      });
+    }
+  }
+
+  return _spacing as BoxSpacing;
+}
+
+/**
+ * @public
+ * @category UI
+ * @name padding
+ * @description
+ * The `padding` function sets the inner spacing of a component to create appropriate spacing between content and boundaries. You can specify horizontal (x), vertical (y), and individual direction (top, right, bottom, left) spacing using numbers.
+ * You can apply the same value to all directions by entering a number, or set individual values for each direction. There are also presets for commonly used values for easy application.
+ *
+ * @param {BoxSpacingOption} option - The option value to specify inner spacing. If you enter a number, it applies the same value to all directions,
+ * or you can set individual values for each direction.
+ * @property {(value: number) => ViewStyle} x - Returns a style object that sets the inner spacing of the component's horizontal direction (left and right) by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} x4 - A style object that applies 4px inner spacing in the horizontal direction
+ * @property {ViewStyle} x8 - A style object that applies 8px inner spacing in the horizontal direction
+ * @property {ViewStyle} x12 - A style object that applies 12px inner spacing in the horizontal direction
+ * @property {ViewStyle} x16 - A style object that applies 16px inner spacing in the horizontal direction
+ * @property {ViewStyle} x24 - A style object that applies 24px inner spacing in the horizontal direction
+ * @property {ViewStyle} x32 - A style object that applies 32px inner spacing in the horizontal direction
+ * @property {(value: number) => ViewStyle} y - Returns a style object that sets the inner spacing of the component's vertical direction (top and bottom) by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} y4 - A style object that applies 4px inner spacing in the vertical direction
+ * @property {ViewStyle} y8 - A style object that applies 8px inner spacing in the vertical direction
+ * @property {ViewStyle} y12 - A style object that applies 12px inner spacing in the vertical direction
+ * @property {ViewStyle} y16 - A style object that applies 16px inner spacing in the vertical direction
+ * @property {ViewStyle} y24 - A style object that applies 24px inner spacing in the vertical direction
+ * @property {ViewStyle} y32 - A style object that applies 32px inner spacing in the vertical direction
+ * @property {(value: number) => ViewStyle} top - Returns a style object that sets the inner spacing of the component's top direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} top4 - A style object that applies 4px inner spacing to the top
+ * @property {ViewStyle} top8 - A style object that applies 8px inner spacing to the top
+ * @property {ViewStyle} top12 - A style object that applies 12px inner spacing to the top
+ * @property {ViewStyle} top16 - A style object that applies 16px inner spacing to the top
+ * @property {ViewStyle} top24 - A style object that applies 24px inner spacing to the top
+ * @property {ViewStyle} top32 - A style object that applies 32px inner spacing to the top
+ * @property {(value: number) => ViewStyle} right - Returns a style object that sets the inner spacing of the component's right direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} right4 - A style object that applies 4px inner spacing to the right
+ * @property {ViewStyle} right8 - A style object that applies 8px inner spacing to the right
+ * @property {ViewStyle} right12 - A style object that applies 12px inner spacing to the right
+ * @property {ViewStyle} right16 - A style object that applies 16px inner spacing to the right
+ * @property {ViewStyle} right24 - A style object that applies 24px inner spacing to the right
+ * @property {ViewStyle} right32 - A style object that applies 32px inner spacing to the right
+ * @property {(value: number) => ViewStyle} bottom - Returns a style object that sets the inner spacing of the component's bottom direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} bottom4 - A style object that applies 4px inner spacing to the bottom
+ * @property {ViewStyle} bottom8 - A style object that applies 8px inner spacing to the bottom
+ * @property {ViewStyle} bottom12 - A style object that applies 12px inner spacing to the bottom
+ * @property {ViewStyle} bottom16 - A style object that applies 16px inner spacing to the bottom
+ * @property {ViewStyle} bottom24 - A style object that applies 24px inner spacing to the bottom
+ * @property {ViewStyle} bottom32 - A style object that applies 32px inner spacing to the bottom
+ * @property {(value: number) => ViewStyle} left - Returns a style object that sets the inner spacing of the component's left direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} left4 - A style object that applies 4px inner spacing to the left
+ * @property {ViewStyle} left8 - A style object that applies 8px inner spacing to the left
+ * @property {ViewStyle} left12 - A style object that applies 12px inner spacing to the left
+ * @property {ViewStyle} left16 - A style object that applies 16px inner spacing to the left
+ * @property {ViewStyle} left24 - A style object that applies 24px inner spacing to the left
+ * @property {ViewStyle} left32 - A style object that applies 32px inner spacing to the left
+ *
+ * @example
+ * ## Example of applying 8px inner spacing in horizontal and vertical directions, and 100px spacing in the bottom direction
+ *
+ * ```tsx
+ * import { padding } from '@granite-js/react-native';
+ * import { View } from 'react-native';
+ *
+ * function Component() {
+ *   return (
+ *     <View>
+ *       <View style={padding.x8}>
+ *         <Text>Has horizontal spacing</Text>
+ *       </View>
+ *       <View style={padding.y8}>
+ *         <Text>Has vertical spacing</Text>
+ *       </View>
+ *       <View style={padding.bottom(100)}>
+ *         <Text>Has 100px spacing at the bottom</Text>
+ *       </View>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export const padding = createSpacingWithProperty('padding');
+
+/**
+ * @public
+ * @category UI
+ * @name margin
+ * @description
+ * The `margin` function sets the outer spacing of a component to create appropriate spacing between components. You can specify horizontal (x), vertical (y), and individual direction (top, right, bottom, left) spacing using numbers.
+ * You can apply the same value to all directions by entering a number, or set individual values for each direction. There are also presets for commonly used values for easy application.
+ *
+ * @param {BoxSpacingOption} option - The option value to specify outer spacing. If you enter a number, it applies the same value to all directions,
+ * or you can set individual values for each direction.
+ * @property {(value: number) => ViewStyle} x - Returns a style object that sets the outer spacing of the component's horizontal direction (left and right) by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} x4 - A style object that applies 4px outer spacing in the horizontal direction
+ * @property {ViewStyle} x8 - A style object that applies 8px outer spacing in the horizontal direction
+ * @property {ViewStyle} x12 - A style object that applies 12px outer spacing in the horizontal direction
+ * @property {ViewStyle} x16 - A style object that applies 16px outer spacing in the horizontal direction
+ * @property {ViewStyle} x24 - A style object that applies 24px outer spacing in the horizontal direction
+ * @property {ViewStyle} x32 - A style object that applies 32px outer spacing in the horizontal direction
+ * @property {(value: number) => ViewStyle} y - Returns a style object that sets the outer spacing of the component's vertical direction (top and bottom) by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} y4 - A style object that applies 4px outer spacing in the vertical direction
+ * @property {ViewStyle} y8 - A style object that applies 8px outer spacing in the vertical direction
+ * @property {ViewStyle} y12 - A style object that applies 12px outer spacing in the vertical direction
+ * @property {ViewStyle} y16 - A style object that applies 16px outer spacing in the vertical direction
+ * @property {ViewStyle} y24 - A style object that applies 24px outer spacing in the vertical direction
+ * @property {ViewStyle} y32 - A style object that applies 32px outer spacing in the vertical direction
+ * @property {(value: number) => ViewStyle} top - Returns a style object that sets the outer spacing of the component's top direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} top4 - A style object that applies 4px outer spacing to the top
+ * @property {ViewStyle} top8 - A style object that applies 8px outer spacing to the top
+ * @property {ViewStyle} top12 - A style object that applies 12px outer spacing to the top
+ * @property {ViewStyle} top16 - A style object that applies 16px outer spacing to the top
+ * @property {ViewStyle} top24 - A style object that applies 24px outer spacing to the top
+ * @property {ViewStyle} top32 - A style object that applies 32px outer spacing to the top
+ * @property {(value: number) => ViewStyle} right - Returns a style object that sets the outer spacing of the component's right direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} right4 - A style object that applies 4px outer spacing to the right
+ * @property {ViewStyle} right8 - A style object that applies 8px outer spacing to the right
+ * @property {ViewStyle} right12 - A style object that applies 12px outer spacing to the right
+ * @property {ViewStyle} right16 - A style object that applies 16px outer spacing to the right
+ * @property {ViewStyle} right24 - A style object that applies 24px outer spacing to the right
+ * @property {ViewStyle} right32 - A style object that applies 32px outer spacing to the right
+ * @property {(value: number) => ViewStyle} bottom - Returns a style object that sets the outer spacing of the component's bottom direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} bottom4 - A style object that applies 4px outer spacing to the bottom
+ * @property {ViewStyle} bottom8 - A style object that applies 8px outer spacing to the bottom
+ * @property {ViewStyle} bottom12 - A style object that applies 12px outer spacing to the bottom
+ * @property {ViewStyle} bottom16 - A style object that applies 16px outer spacing to the bottom
+ * @property {ViewStyle} bottom24 - A style object that applies 24px outer spacing to the bottom
+ * @property {ViewStyle} bottom32 - A style object that applies 32px outer spacing to the bottom
+ * @property {(value: number) => ViewStyle} left - Returns a style object that sets the outer spacing of the component's left direction by the input number. The returned object is passed to the component's `style` property to apply the spacing.
+ * @property {ViewStyle} left4 - A style object that applies 4px outer spacing to the left
+ * @property {ViewStyle} left8 - A style object that applies 8px outer spacing to the left
+ * @property {ViewStyle} left12 - A style object that applies 12px outer spacing to the left
+ * @property {ViewStyle} left16 - A style object that applies 16px outer spacing to the left
+ * @property {ViewStyle} left24 - A style object that applies 24px outer spacing to the left
+ * @property {ViewStyle} left32 - A style object that applies 32px outer spacing to the left
+ *
+ * @example
+ * ## Example of applying 8px outer spacing in horizontal and vertical directions, and 100px spacing in the bottom direction
+ *
+ * ```tsx
+ * import { margin } from '@granite-js/react-native';
+ * import { View } from 'react-native';
+ *
+ * function Component() {
+ *   return (
+ *     <View>
+ *       <View style={margin.x8}>
+ *         <Text>Has horizontal spacing</Text>
+ *       </View>
+ *       <View style={margin.y8}>
+ *         <Text>Has vertical spacing</Text>
+ *       </View>
+ *       <View style={margin.bottom(100)}>
+ *         <Text>Has 100px spacing at the bottom</Text>
+ *       </View>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export const margin = createSpacingWithProperty('margin');
+
+function capitalizeFirstLetter(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/src/children.spec.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react-native';
+import { View } from 'react-native';
+import type { ReactTestRendererJSON } from 'react-test-renderer';
+import { Children } from './children';
+import { Spacing } from './spacing';
+
+describe('Children', () => {
+  describe('Gap', () => {
+    function Spacing16() {
+      return <Spacing size={16} />;
+    }
+
+    it(`Children.Gap renders with gap components added between child elements`, () => {
+      const childCount = 5;
+      const children = new Array(childCount).fill(null).map((_, index) => <View key={index} />);
+      const treeJSON = render(
+        <Children.Gap gap={<Spacing16 />}>{children}</Children.Gap>
+      ).toJSON() as ReactTestRendererJSON[];
+
+      // Number of children + number of gaps between children
+      expect(treeJSON.length).toBe(childCount + childCount - 1);
+    });
+  });
+});

package/src/children.tsx

@@ -0,0 +1,74 @@
+import React, { Fragment, type ReactNode } from 'react';
+
+/**
+ * @category Constants
+ * @name Children
+ * @description
+ * `Children` provides various components for controlling layouts related to child elements.
+ *
+ * @property {ChildrenGap} Gap - `Children.Gap` is a component used to add a specified component (gap) between multiple child elements when rendering.
+ */
+export const Children = {
+  /**
+   * @name Children.Gap
+   * @description Renders a gap component between ReactNode children.
+   */
+  Gap: ChildrenGap,
+};
+
+interface ChildrenGapProps {
+  children: ReactNode;
+  gap: ReactNode;
+}
+
+/**
+ * @category Components
+ * @name ChildrenGap
+ * @description
+ * `Children.Gap` is a useful component for maintaining consistent layouts by adding spacing (gap) between multiple child elements.
+ * Using this component allows you to apply consistent spacing between child elements, resulting in a cleaner and more consistent UI design.
+ *
+ * @param {object} props - The `props` object passed to the component.
+ * @param {ReactNode} props.children - The child components to be rendered.
+ * @param {ReactNode} props.gap - The component to be placed between child elements. `gap` must be a valid React component.
+ *
+ * @throws {Error} An error occurs when `gap` is not a valid React component. `gap` must use `React.Element`.
+ *
+ * @example
+ * ## When you want to add 16px spacing between child elements
+ *
+ * ```tsx
+ * import { Children, Spacing } from '@granite-js/react-native';
+ * import { Text } from 'react-native';
+ *
+ * function Component() {
+ *   return (
+ *     <Children.Gap gap={<Spacing size={16} />}>
+ *       <Text>First</Text>
+ *       <Text>Second</Text>
+ *       <Text>Third</Text>
+ *     </Children.Gap>
+ *   );
+ * }
+ * ```
+ */
+function ChildrenGap({ children, gap }: ChildrenGapProps) {
+  if (!React.isValidElement(gap)) {
+    throw new Error('gap prop must be a component.');
+  }
+
+  return (
+    <>
+      {React.Children.map(children, (child, index) => {
+        const isLastChild = index === React.Children.count(children) - 1;
+
+        return (
+          <Fragment key={index}>
+            {child}
+            {!isLastChild && child != null ? gap : undefined}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}

package/src/flex.spec.tsx

@@ -0,0 +1,92 @@
+import { render, renderHook, screen } from '@testing-library/react-native';
+import { useRef } from 'react';
+import { View } from 'react-native';
+import type { ReactTestRendererJSON } from 'react-test-renderer';
+import { flex, Flex } from './flex';
+
+describe('Flex', () => {
+  it(`Flex is rendered as <View />`, () => {
+    const treeJSON = render(<Flex />).toJSON() as ReactTestRendererJSON;
+    expect(treeJSON.type).toBe('View');
+  });
+
+  it('Flex.Center applies align="center" justify="center"', () => {
+    render(<Flex.Center testID="flex" />);
+    expect(screen.getByTestId('flex')).toHaveStyle({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+    });
+  });
+
+  it('Flex.CenterVertical applies justify="center"', () => {
+    render(<Flex.CenterVertical testID="flex" />);
+    expect(screen.getByTestId('flex')).toHaveStyle({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'stretch',
+      flexDirection: 'column',
+    });
+  });
+
+  it('Flex.CenterHorizontal applies justyfyContent="center"', () => {
+    render(<Flex.CenterHorizontal testID="flex" />);
+    expect(screen.getByTestId('flex')).toHaveStyle({
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      flexDirection: 'column',
+    });
+  });
+
+  describe('ref', () => {
+    it(`Flex should be able to receive ref`, () => {
+      const {
+        result: { current: ref },
+      } = renderHook(() => useRef<View>(null));
+
+      render(<Flex ref={ref} />);
+
+      expect(ref.current).not.toBeNull();
+    });
+  });
+});
+
+describe('flex', () => {
+  it(`when passing an empty object to flex, it returns defaultProps with display="flex" direction="column" justify="flex-start" align="stretch"`, () => {
+    const result = flex({});
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "alignItems": "stretch",
+        "display": "flex",
+        "flexDirection": "column",
+        "justifyContent": "flex-start",
+      }
+    `);
+  });
+
+  it(`when passing string to flex, it returns with align, justify, direction applied`, () => {
+    const result = flex('flex-start', 'center', 'row');
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "alignItems": "flex-start",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "center",
+      }
+    `);
+  });
+
+  it('flex.center() returns with justyfy="center" align="center"', () => {
+    const result = flex.center();
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "column",
+        "justifyContent": "center",
+      }
+    `);
+  });
+});