react-native-varia 0.0.1

package/lib/patterns/index.tsx

@@ -0,0 +1,426 @@
+import React from 'react';
+import { Children, useLayoutEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { ScrollView, View } from 'react-native';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { StyleSheet, UnistylesRuntime } from 'react-native-unistyles';
+
+export type RowProps = {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  center?: boolean;
+  vCenter?: boolean;
+  hCenter?: boolean;
+  flex?: number;
+  gap?: number;
+} & ViewProps;
+
+const Row: React.FC<RowProps> = ({
+  children,
+  style,
+  center,
+  vCenter,
+  hCenter,
+  flex = 0,
+  gap = 0,
+  ...props
+}) => {
+  return (
+    <View
+      style={[styles.row(center, vCenter, hCenter, gap, flex), style]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+const Column: React.FC<RowProps> = ({
+  children,
+  style,
+  center,
+  vCenter,
+  hCenter,
+  flex = 0,
+  gap = 0,
+  ...props
+}) => {
+  return (
+    <View
+      style={[styles.column(center, vCenter, hCenter, gap, flex), style]}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+};
+
+export const VSpacer = ({ size }: { size?: number }) => {
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: size ? size : 'auto',
+        flex: size ? 0 : 1,
+      }}
+    />
+  );
+};
+export const HSpacer = ({ size }: { size?: number }) => {
+  return (
+    <View
+      style={{
+        height: '100%',
+        width: size ? size : 'auto',
+        flex: size ? 0 : 1,
+      }}
+    />
+  );
+};
+export const FlexSpacer = () => {
+  return (
+    <View
+      style={{ flex: 1, width: '100%', borderWidth: 1, borderColor: 'lime' }}
+    />
+  );
+};
+const styles = StyleSheet.create(() => ({
+  row: (center, vCenter, hCenter, gap, flex) => ({
+    flex,
+    gap,
+    flexDirection: 'row',
+    alignItems: center ? 'center' : vCenter ? 'center' : 'stretch',
+    justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
+  }),
+  column: (center, vCenter, hCenter, gap, flex) => ({
+    flex,
+    gap,
+    flexDirection: 'column',
+    alignItems: center ? 'center' : vCenter ? 'center' : 'flex-start',
+    justifyContent: center ? 'center' : hCenter ? 'center' : 'flex-start',
+  }),
+}));
+
+export { Row, Column };
+
+export const gap = (size: number) => ({
+  gap: size,
+});
+
+type FullHeightLayoutProps = {
+  style?: StyleProp<ViewStyle>;
+  justifyContent?:
+    | 'center'
+    | 'flex-start'
+    | 'flex-end'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
+  children: ReactNode;
+};
+
+export const FullHeightLayout = ({
+  style,
+  justifyContent = 'space-between',
+  alignItems = 'flex-start',
+  children,
+}: FullHeightLayoutProps) => {
+  return (
+    <View
+      style={[
+        fullHeightLayoutStyles.fullHeightLayout(justifyContent, alignItems),
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+/* Layout with "100%" height on portrait and scrollable in landscape
+ * use case: as Children of KeyboardAwareScrollView it wraps in a scroll view
+ * and it allows to replicate a flex: 1 full height screen column,
+ * with justify options and fit the screen
+ */
+const fullHeightLayoutStyles = StyleSheet.create((_, rt) => ({
+  fullHeightLayout: (justifyContent, alignItems) => ({
+    width: '100%',
+    height: rt.isPortrait
+      ? rt.screen.height - rt.insets.top - rt.insets.bottom
+      : 'auto',
+    justifyContent,
+    alignItems,
+  }),
+}));
+
+export const FLayout = ({
+  // style,
+  justifyContent = 'space-between',
+  alignItems = 'flex-start',
+  children,
+}: FullHeightLayoutProps) => {
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={fHeightLayoutStyles.fullHeightLayout(justifyContent, alignItems)}
+      >
+        {children}
+      </View>
+    </ScrollView>
+  );
+};
+const fHeightLayoutStyles = StyleSheet.create((_, rt) => ({
+  fullHeightLayout: (justifyContent, alignItems) => ({
+    width: '100%',
+    height: rt.isPortrait
+      ? rt.screen.height - rt.insets.top - rt.insets.bottom
+      : 'auto',
+    justifyContent,
+    alignItems,
+  }),
+}));
+
+const GridChild = ({
+  parentGap,
+  columns,
+  width,
+  children,
+}: {
+  parentGap: number;
+  columns: number;
+  width: number;
+  children: ReactNode;
+}) => {
+  if (width === 0) return null;
+  const flexBasis =
+    width / columns - ((columns - 1) / columns) * parentGap - 0.1;
+  return (
+    width > 0 && (
+      <View
+        style={[
+          gridChildStyles.container,
+          {
+            width: flexBasis,
+          },
+        ]}
+      >
+        {children}
+      </View>
+    )
+  );
+};
+
+const gridChildStyles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 0,
+    flexShrink: 1,
+  },
+});
+
+// type Sizes = {
+//   xxs: number;
+//   xs: number;
+//   sm: number;
+//   md: number;
+//   lg: number;
+//   xl: number;
+//   xxl: number;
+// };
+
+export const FlexGrid = ({
+  gap = 0,
+  columns,
+  flex = 0,
+  style,
+  children,
+}: {
+  gap?: number;
+  columns: number | {};
+  flex?: number;
+  style?: any;
+  children: ReactNode;
+}) => {
+  const viewRef = useRef(null);
+  const gridItems = Children.toArray(children);
+  const [parentWidth, setParentWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    // TODO: fix types
+    // @ts-ignore
+    viewRef.current?.measure((x, y, width, height, pageX, pageY) => {
+      setParentWidth(width);
+    });
+  }, [UnistylesRuntime.breakpoint]);
+
+  let cols: any;
+  if (columns instanceof Object) {
+    // TODO: fix types
+    // @ts-ignore
+    cols = getBreakpointColumns(columns, UnistylesRuntime.breakpoint);
+  } else cols = columns;
+
+  return (
+    <View
+      ref={viewRef}
+      style={[flexGridStyles.container(gap, flex), flexGridStyles.sx(style)]}
+    >
+      {gridItems.map((Item, index) => {
+        return (
+          <GridChild
+            key={index}
+            parentGap={gap}
+            columns={cols}
+            width={parentWidth}
+          >
+            {Item}
+          </GridChild>
+        );
+      })}
+    </View>
+  );
+};
+
+const flexGridStyles = StyleSheet.create({
+  sx: (sx: any) => ({
+    ...sx,
+  }),
+  container: (gap, flex) => ({
+    flex,
+    gap,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    width: '100%',
+  }),
+});
+
+// For components with flex: 1, this prevents them from taking up all the available height.
+// Instead, their height will adjust based on the height of their children.
+// Additionally, it can be used as a Row layout for such components.
+export const Inline = ({
+  children,
+  align = 'center',
+  gap = 0,
+}: {
+  children: ReactNode;
+  align?: 'center' | 'flex-start' | 'flex-end';
+  gap?: number;
+}) => {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        gap,
+        justifyContent: align,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
+
+export const InlineAbsolute = ({
+  children,
+  gap = 0,
+}: {
+  children: ReactNode;
+  gap?: number;
+}) => {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'transparent',
+        position: 'absolute',
+        gap,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
+export const BlockAbsolute = ({
+  children,
+  gap = 0,
+}: {
+  children: ReactNode;
+  gap?: number;
+}) => {
+  return (
+    <View
+      style={{
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'transparent',
+        position: 'absolute',
+        gap,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
+
+const getBreakpointColumns = (
+  columns: Record<string, number>,
+  breakpoint: string
+) => {
+  // Define the order of breakpoints
+  const breakpointOrder = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+  // Find the index of the current breakpoint
+  const currentIndex = breakpointOrder.indexOf(breakpoint);
+
+  // Traverse backwards to find the nearest available value
+  for (let i = currentIndex; i >= 0; i--) {
+    // TODO: fix types
+    // @ts-ignore
+    if (columns[breakpointOrder[i]] !== undefined) {
+      // @ts-ignore
+      return columns[breakpointOrder[i]];
+    }
+  }
+
+  // If no breakpoints match, return a default value (optional)
+  return undefined;
+};
+
+export const Grid = ({
+  cols,
+  children,
+  gap,
+  rowGap,
+  columnGap,
+  ...props
+}: {
+  cols: number;
+  children: React.ReactNode;
+  gap?: number;
+  rowGap?: number;
+  columnGap?: number;
+}) => {
+  const gridItems = React.Children.toArray(children);
+
+  const columns = Array.from({ length: cols }, (_, i) =>
+    gridItems.filter((_, index) => index % cols === i)
+  );
+
+  return (
+    <Row gap={gap && gap} {...props}>
+      {columns.map((column, index) => (
+        <Column style={{ flex: 1 }} key={index} gap={gap && gap}>
+          {column}
+        </Column>
+      ))}
+    </Row>
+  );
+};

package/lib/theme/Badge.recipe.tsx

@@ -0,0 +1,68 @@
+import {StyleSheet} from 'react-native-unistyles'
+
+const BadgeStyles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: 'tomato',
+          borderColor: 'tomato',
+        },
+        secondary: {
+          backgroundColor: theme.colors.foreground,
+          borderColor: theme.colors.categoryAquamarine,
+        },
+      },
+      size: {
+        sm: {
+          height: 32,
+          maxHeight: 32,
+          padding: 6,
+        },
+        md: {
+          maxHeight: 48,
+          height: 48,
+          padding: 8,
+        },
+        lg: {
+          maxHeight: 64,
+          height: 64,
+          padding: 12,
+        },
+        xl: {
+          maxHeight: 80,
+          height: 80,
+          padding: 16,
+        },
+      },
+    },
+  },
+  text: {
+    variants: {
+      colorPalette: {
+        primary: {
+          color: 'white',
+        },
+        secondary: {
+          color: theme.colors.categoryAquamarine,
+        },
+      },
+      size: {
+        sm: {
+          fontSize: 24,
+        },
+        md: {
+          fontSize: 28,
+        },
+        lg: {
+          fontSize: 32,
+        },
+        xl: {
+          fontSize: 36,
+        },
+      },
+    },
+  },
+}))
+
+export default BadgeStyles

package/lib/theme/Button.recipe-old.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet } from "react-native-unistyles"
+
+const ButtonStyles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: 'tomato',
+        },
+        secondary: {
+          backgroundColor: theme.colors.foreground,
+        }
+      },
+      size: {
+        sm: {
+          height: 32,
+          maxHeight: 32,
+          padding: 6,
+        },
+        md: {
+          maxHeight: 48,
+          height: 48,
+          padding: 8,
+        },
+        lg: {
+          maxHeight: 64,
+          height: 64,
+          padding: 12,
+        },
+        xl: {
+          maxHeight: 80,
+          height: 80,
+          padding: 16,
+        }
+      }
+    },
+  },
+  text: {
+    variants: {
+      colorPalette: {
+        primary: {
+          color: 'white',
+        },
+        secondary: {
+          color: theme.colors.categoryAquamarine,
+        }
+      },
+      size: {
+        sm: {
+          fontSize: 24,
+        },
+        md: {
+          fontSize: 28,
+        },
+        lg: {
+          fontSize: 32,
+        },
+        xl: {
+          fontSize: 36,
+        }
+      }
+    }
+  }
+}))
+
+
+export default ButtonStyles

package/lib/theme/Button.recipe.tsx

@@ -0,0 +1,83 @@
+import {StyleSheet} from 'react-native-unistyles'
+
+export const ButtonTokens = {
+  defaultProps: {
+    colorPalette: 'primary',
+    size: 'md',
+  },
+} as const
+export const ButtonStyles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: theme.colors.primary500,
+          borderColor: theme.colors.accentBackground,
+        },
+        secondary: {
+          backgroundColor: theme.colors.foreground,
+        },
+      },
+      size: {
+        sm: {
+          // height: 32,
+          // maxHeight: 32,
+          padding: 6,
+          borderRadius: theme.radii.sm,
+          borderWidth: 1,
+        },
+        md: {
+          // maxHeight: 48,
+          // height: 48,
+          padding: 8,
+          borderRadius: theme.radii.md,
+          borderWidth: 1,
+        },
+        lg: {
+          // maxHeight: 64,
+          // height: 64,
+          padding: 12,
+          borderRadius: theme.radii.lg,
+          borderWidth: 1,
+        },
+        xl: {
+          // maxHeight: 80,
+          // height: 80,
+          padding: 16,
+          borderRadius: theme.radii.xl,
+          borderWidth: 5,
+        },
+      },
+    },
+  },
+  text: {
+    variants: {
+      colorPalette: {
+        primary: {
+          color: 'white',
+        },
+        secondary: {
+          color: theme.colors.categoryAquamarine,
+        },
+      },
+      size: {
+        sm: {
+          fontSize: 24,
+          fontWeight: '400',
+        },
+        md: {
+          fontSize: 28,
+          fontWeight: '400',
+        },
+        lg: {
+          fontSize: 32,
+          fontWeight: '600',
+        },
+        xl: {
+          fontSize: 36,
+          fontWeight: '800',
+        },
+      },
+    },
+  },
+}))

package/lib/theme/CircleProgress.recipe.tsx

@@ -0,0 +1,42 @@
+const circleProgressTokens = {
+  defaultProps: {
+    type: 'primary',
+    size: 'lg',
+    // circleSize: 'md',
+  },
+  variants: {
+    size: {
+      sm: {
+        trackStrokeWidth: 10,
+        progressStrokeWidth: 8,
+        size: 80,
+      },
+      md: {
+        trackStrokeWidth: 16,
+        progressStrokeWidth: 14,
+        size: 100,
+      },
+      lg: {
+        trackStrokeWidth: 20,
+        progressStrokeWidth: 6,
+        size: 100,
+      },
+    },
+    type: {
+      primary: {
+        trackColor: 'accentLines',
+        progressColor: 'categoryAquamarine',
+      },
+      secondary: {
+        trackColor: 'background',
+        progressColor: 'foreground',
+      },
+      tertiary: {
+        trackColor: 'background',
+        progressColor: 'foreground',
+      },
+    },
+  },
+} as const
+
+export {circleProgressTokens}

package/lib/theme/GradientBackground.recipe.tsx

@@ -0,0 +1,38 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {createGradientTokens} from '../style/types'
+
+const gradientBackgroundTokens = createGradientTokens({
+  defaultProps: {colorPalette: 'primary', direction: 'to top left'},
+  variants: {
+    direction: {
+      'to top': {x1: 0, y1: 0, x2: 0, y2: 1},
+      'to bottom': {x1: 0, y1: 1, x2: 0, y2: 0},
+      'to left': {x1: 0, y1: 0, x2: 1, y2: 0},
+      'to right': {x1: 1, y1: 0, x2: 0, y2: 0},
+      'to top left': {x1: 0, y1: 0, x2: 1, y2: 1},
+      'to top right': {x1: 1, y1: 0, x2: 0, y2: 1},
+      'to bottom left': {x1: 0, y1: 1, x2: 1, y2: 0},
+      'to bottom right': {x1: 1, y1: 1, x2: 0, y2: 0},
+    },
+    colorPalette: {
+      primary: {startColor: 'blue', endColor: 'background2'},
+      secondary: {startColor: 'white', endColor: 'black'},
+      tertiary: {startColor: 'lime', endColor: 'violet'},
+      quaternary: {startColor: 'lime', endColor: 'tomato'},
+    },
+  },
+} as const)
+
+export {gradientBackgroundTokens}
+
+const GradientBackgroundStyles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {},
+      },
+    },
+  },
+}))
+
+export default GradientBackgroundStyles