@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Gluestack/grid/index.tsx

@@ -0,0 +1,341 @@
+import React, {
+  useEffect,
+  useState,
+  createContext,
+  useContext,
+  useMemo,
+  forwardRef,
+} from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { View, Dimensions, Platform, ViewProps } from 'react-native';
+import { gridStyle, gridItemStyle } from './styles';
+import { cssInterop } from 'nativewind';
+import {
+  useBreakpointValue,
+  getBreakPointValue,
+} from '../utils/use-break-point-value'; // skote fixed this import
+const { width } = Dimensions.get('window');
+
+const GridContext = createContext<any>({});
+
+function arrangeChildrenIntoRows({
+  childrenArray,
+  colSpanArr,
+  numColumns,
+}: {
+  childrenArray: React.ReactNode[];
+  colSpanArr: number[];
+  numColumns: number;
+}) {
+  let currentRow = 1;
+  let currentRowTotalColSpan = 0;
+
+  // store how many items in each row
+  const rowItemsCount: {
+    [key: number]: number[];
+  } = {};
+
+  for (let i = 0; i < childrenArray.length; i++) {
+    const colSpan = colSpanArr[i];
+
+    // if current row is full, go to next row
+    if (currentRowTotalColSpan + colSpan > numColumns) {
+      currentRow++;
+      currentRowTotalColSpan = colSpan;
+    } else {
+      // if current row is not full, add colSpan to current row
+      currentRowTotalColSpan += colSpan;
+    }
+
+    rowItemsCount[currentRow] = rowItemsCount[currentRow]
+      ? [...rowItemsCount[currentRow], i]
+      : [i];
+  }
+
+  return rowItemsCount;
+}
+
+function generateResponsiveNumColumns({ gridClass }: { gridClass: string }) {
+  const gridClassNamePattern = /\b(?:\w+:)?grid-cols-?\d+\b/g;
+  const numColumns = gridClass?.match(gridClassNamePattern);
+
+  if (!numColumns) {
+    return 12;
+  }
+
+  const regex = /^(?:(\w+):)?grid-cols-?(\d+)$/;
+  const result: any = {};
+
+  numColumns.forEach((classname) => {
+    const match = classname.match(regex);
+    if (match) {
+      const prefix = match[1] || 'default';
+      const value = parseInt(match[2], 10);
+      result[prefix] = value;
+    }
+  });
+
+  return result;
+}
+
+function generateResponsiveColSpans({
+  gridItemClassName,
+}: {
+  gridItemClassName: string;
+}) {
+  const gridClassNamePattern = /\b(?:\w+:)?col-span-?\d+\b/g;
+
+  const colSpan: any = gridItemClassName?.match(gridClassNamePattern);
+
+  if (!colSpan) {
+    return 1;
+  }
+
+  const regex = /^(?:(\w+):)?col-span-?(\d+)$/;
+  const result: any = {};
+
+  colSpan.forEach((classname: any) => {
+    const match = classname.match(regex);
+    if (match) {
+      const prefix = match[1] || 'default';
+      const value = parseInt(match[2], 10);
+      result[prefix] = value;
+    }
+  });
+
+  return result;
+}
+
+type IGridProps = ViewProps &
+  VariantProps<typeof gridStyle> & {
+    gap?: number;
+    rowGap?: number;
+    columnGap?: number;
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    padding?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingStart?: number;
+    paddingEnd?: number;
+    borderWidth?: number;
+    borderLeftWidth?: number;
+    borderRightWidth?: number;
+    _extra: {
+      className: string;
+    };
+  };
+
+const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(
+  ({ className, _extra, children, ...props }, ref) => {
+    const [calculatedWidth, setCalculatedWidth] = useState<number | null>(null);
+
+    const gridClass = _extra?.className;
+    const obj = generateResponsiveNumColumns({ gridClass });
+    const responsiveNumColumns: any = useBreakpointValue(obj);
+
+    const itemsPerRow = useMemo(() => {
+      // get the colSpan of each child
+      const colSpanArr = React.Children.map(children, (child: any) => {
+        const gridItemClassName = child?.props?._extra?.className;
+
+        const colSpan2 = getBreakPointValue(
+          generateResponsiveColSpans({ gridItemClassName }),
+          width
+        );
+        const colSpan = colSpan2 ? colSpan2 : 1;
+
+        if (colSpan > responsiveNumColumns) {
+          return responsiveNumColumns;
+        }
+
+        return colSpan;
+      });
+
+      const childrenArray = React.Children.toArray(children);
+
+      const rowItemsCount = arrangeChildrenIntoRows({
+        childrenArray,
+        colSpanArr,
+        numColumns: responsiveNumColumns,
+      });
+
+      return rowItemsCount;
+    }, [responsiveNumColumns, children]);
+
+    const childrenWithProps = React.Children.map(children, (child, index) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, { index } as any);
+      }
+
+      return child;
+    });
+
+    const gridClassMerged = `${Platform.select({
+      web: gridClass ?? '',
+    })}`;
+
+    const contextValue = useMemo(() => {
+      return {
+        calculatedWidth,
+        numColumns: responsiveNumColumns,
+        itemsPerRow,
+        flexDirection: props?.flexDirection || 'row',
+        gap: props?.gap || 0,
+        columnGap: props?.columnGap || 0,
+      };
+    }, [calculatedWidth, itemsPerRow, responsiveNumColumns, props]);
+
+    const borderLeftWidth = props?.borderLeftWidth || props?.borderWidth || 0;
+    const borderRightWidth = props?.borderRightWidth || props?.borderWidth || 0;
+    const borderWidthToSubtract = borderLeftWidth + borderRightWidth;
+
+    return (
+      <GridContext.Provider value={contextValue}>
+        <View
+          ref={ref}
+          className={gridStyle({
+            class: className + ' ' + gridClassMerged,
+          })}
+          onLayout={(event: any) => {
+            const paddingLeftToSubtract =
+              props?.paddingStart || props?.paddingLeft || props?.padding || 0;
+
+            const paddingRightToSubtract =
+              props?.paddingEnd || props?.paddingRight || props?.padding || 0;
+
+            const gridWidth =
+              event.nativeEvent.layout.width -
+              paddingLeftToSubtract -
+              paddingRightToSubtract -
+              borderWidthToSubtract;
+
+            setCalculatedWidth(gridWidth);
+          }}
+          {...props}
+        >
+          {calculatedWidth && childrenWithProps}
+        </View>
+      </GridContext.Provider>
+    );
+  }
+);
+
+//@ts-ignore
+cssInterop(Grid, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      gap: 'gap',
+      rowGap: 'rowGap',
+      columnGap: 'columnGap',
+      flexDirection: 'flexDirection',
+      padding: 'padding',
+      paddingLeft: 'paddingLeft',
+      paddingRight: 'paddingRight',
+      paddingStart: 'paddingStart',
+      paddingEnd: 'paddingEnd',
+      borderWidth: 'borderWidth',
+      borderLeftWidth: 'borderLeftWidth',
+      borderRightWidth: 'borderRightWidth',
+    },
+  },
+});
+
+type IGridItemProps = ViewProps &
+  VariantProps<typeof gridItemStyle> & {
+    index?: number;
+    _extra: {
+      className: string;
+    };
+  };
+
+const GridItem = forwardRef<React.ElementRef<typeof View>, IGridItemProps>(
+  ({ className, _extra, ...props }, ref) => {
+    const [flexBasisValue, setFlexBasisValue] = useState<
+      number | string | null
+    >('auto');
+
+    const {
+      calculatedWidth,
+      numColumns,
+      itemsPerRow,
+      flexDirection,
+      gap,
+      columnGap,
+    } = useContext(GridContext);
+
+    const gridItemClass = _extra?.className;
+    const responsiveColSpan: number =
+      useBreakpointValue(
+        generateResponsiveColSpans({ gridItemClassName: gridItemClass })
+      ) ?? 1;
+
+    useEffect(() => {
+      if (
+        !flexDirection?.includes('column') &&
+        calculatedWidth &&
+        numColumns > 0 &&
+        responsiveColSpan > 0
+      ) {
+        // find out in which row of itemsPerRow the current item's index is
+        const row = Object.keys(itemsPerRow).find((key) => {
+          return itemsPerRow[key].includes(props?.index);
+        });
+
+        const rowColsCount = itemsPerRow[row as string]?.length;
+
+        const space = columnGap || gap || 0;
+
+        const gutterOffset =
+          space *
+          (rowColsCount === 1 && responsiveColSpan < numColumns
+            ? 2
+            : rowColsCount - 1);
+
+        const flexBasisVal =
+          Math.min(
+            (((calculatedWidth - gutterOffset) * responsiveColSpan) /
+              numColumns /
+              calculatedWidth) *
+              100,
+            100
+          ) + '%';
+
+        setFlexBasisValue(flexBasisVal);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      calculatedWidth,
+      responsiveColSpan,
+      numColumns,
+      columnGap,
+      gap,
+      flexDirection,
+    ]);
+
+    return (
+      <View
+        ref={ref}
+        // @ts-expect-error
+        gridItemClass={gridItemClass}
+        className={gridItemStyle({
+          class:
+            className + ' ' + Platform.select({ web: gridItemClass ?? '' }) ??
+            '',
+        })}
+        {...props}
+        style={[
+          {
+            flexBasis: flexBasisValue as any,
+          },
+          props.style,
+        ]}
+      />
+    );
+  }
+);
+
+Grid.displayName = 'Grid';
+GridItem.displayName = 'GridItem';
+
+export { Grid, GridItem };

package/src/Components/Gluestack/grid/index.web.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { gridStyle, gridItemStyle } from './styles';
+
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type IGridProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof gridStyle> & {
+    gap?: number;
+    rowGap?: number;
+    columnGap?: number;
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    padding?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingStart?: number;
+    paddingEnd?: number;
+    _extra: {
+      className: string;
+    };
+  };
+
+const Grid = React.forwardRef<HTMLDivElement, IGridProps>(
+  ({ className, _extra, ...props }, ref) => {
+    const gridClass = _extra?.className;
+    const finalGridClass = gridClass ?? '';
+    return (
+      <div
+        ref={ref}
+        className={gridStyle({
+          class: className + ' ' + finalGridClass,
+        })}
+        {...props}
+      />
+    );
+  }
+);
+
+type IGridItemProps = React.ComponentPropsWithoutRef<'div'> &
+  VariantProps<typeof gridItemStyle> & {
+    index?: number;
+    _extra: {
+      className: string;
+    };
+  };
+const GridItem = React.forwardRef<HTMLDivElement, IGridItemProps>(
+  ({ className, _extra, ...props }, ref) => {
+    const gridItemClass = _extra?.className;
+
+    const finalGridItemClass = gridItemClass ?? '';
+    return (
+      <div
+        ref={ref}
+        className={gridItemStyle({
+          class: className + ' ' + finalGridItemClass,
+        })}
+        {...props}
+      />
+    );
+  }
+);
+
+Grid.displayName = 'Grid';
+GridItem.displayName = 'GridItem';
+
+export { Grid, GridItem };

package/src/Components/Gluestack/grid/styles.tsx

@@ -0,0 +1,15 @@
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
+
+const gridBaseStyle = isWeb
+  ? 'grid grid-cols-12'
+  : 'box-border flex-row flex-wrap justify-start';
+const gridItemBaseStyle = isWeb ? 'w-auto col-span-1' : '';
+
+export const gridStyle = tva({
+  base: `w-full ${gridBaseStyle}`,
+});
+
+export const gridItemStyle = tva({
+  base: `w-full ${gridItemBaseStyle}`,
+});

package/src/Components/Gluestack/heading/index.tsx

@@ -0,0 +1,212 @@
+import React, { forwardRef, memo } from 'react';
+import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
+import { cssInterop } from 'nativewind';
+import { headingStyle } from './styles';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+type IHeadingProps = VariantProps<typeof headingStyle> &
+  React.ComponentPropsWithoutRef<typeof H1> & {
+    as?: React.ElementType;
+  };
+
+cssInterop(H1, { className: 'style' });
+cssInterop(H2, { className: 'style' });
+cssInterop(H3, { className: 'style' });
+cssInterop(H4, { className: 'style' });
+cssInterop(H5, { className: 'style' });
+cssInterop(H6, { className: 'style' });
+
+const MappedHeading = memo(
+  forwardRef<React.ElementRef<typeof H1>, IHeadingProps>(
+    (
+      {
+        size,
+        className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        sub,
+        italic,
+        highlight,
+        ...props
+      },
+      ref
+    ) => {
+      switch (size) {
+        case '5xl':
+        case '4xl':
+        case '3xl':
+          return (
+            <H1
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case '2xl':
+          return (
+            <H2
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'xl':
+          return (
+            <H3
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'lg':
+          return (
+            <H4
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'md':
+          return (
+            <H5
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        case 'sm':
+        case 'xs':
+          return (
+            <H6
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+        default:
+          return (
+            <H4
+              className={headingStyle({
+                size,
+                isTruncated,
+                bold,
+                underline,
+                strikeThrough,
+                sub,
+                italic,
+                highlight,
+                class: className,
+              })}
+              {...props}
+              ref={ref}
+            />
+          );
+      }
+    }
+  )
+);
+
+const Heading = memo(
+  forwardRef<React.ElementRef<typeof H1>, IHeadingProps>(
+    ({ className, size = 'lg', as: AsComp, ...props }, ref) => {
+      const {
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        sub,
+        italic,
+        highlight,
+      } = props;
+
+      if (AsComp) {
+        return (
+          <AsComp
+            className={headingStyle({
+              size,
+              isTruncated,
+              bold,
+              underline,
+              strikeThrough,
+              sub,
+              italic,
+              highlight,
+              class: className,
+            })}
+            {...props}
+          />
+        );
+      }
+
+      return (
+        <MappedHeading className={className} size={size} ref={ref} {...props} />
+      );
+    }
+  )
+);
+
+Heading.displayName = 'Heading';
+
+export { Heading };