@kivid/native-components 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/components/IconButton/assets/design-system-showcase.ts

@@ -0,0 +1,246 @@
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "../enums";
+
+interface DesignSystemShowcaseItem {
+  size: IconButtonSizeEnum;
+  variant: IconButtonVariantEnum;
+  corners: IconButtonCornersEnum;
+  disabled?: boolean;
+  selected?: boolean;
+  loading?: boolean;
+}
+
+interface DesignSystemShowcaseButtonProps {
+  title: string;
+  buttons: {
+    [key: string]: DesignSystemShowcaseItem[];
+  };
+}
+
+const makeVariantSet = (
+  size: IconButtonSizeEnum,
+  variant: IconButtonVariantEnum
+): DesignSystemShowcaseItem[] => [
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, selected: true },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, disabled: true },
+  { size, variant, corners: IconButtonCornersEnum.MEDIUM, loading: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, selected: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, disabled: true },
+  { size, variant, corners: IconButtonCornersEnum.SMALL, loading: true },
+];
+
+export const designSystemShowcase: Record<
+  IconButtonSizeEnum,
+  DesignSystemShowcaseButtonProps
+> = {
+  [IconButtonSizeEnum.SMALL]: {
+    title: "Small Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.SMALL,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.MEDIUM]: {
+    title: "Medium Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.MEDIUM,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.LARGE]: {
+    title: "Large Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.LARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.XLARGE]: {
+    title: "XLarge Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.XLARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+  [IconButtonSizeEnum.XXLARGE]: {
+    title: "2x Large Size",
+    buttons: {
+      [IconButtonVariantEnum.GRAPE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.GRAPE
+      ),
+      [IconButtonVariantEnum.JAVA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.JAVA
+      ),
+      [IconButtonVariantEnum.PEAR]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.PEAR
+      ),
+      [IconButtonVariantEnum.TANGERINE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.TANGERINE
+      ),
+      [IconButtonVariantEnum.PITAYA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.PITAYA
+      ),
+      [IconButtonVariantEnum.BLACKBERRY]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.BLACKBERRY
+      ),
+      [IconButtonVariantEnum.CHIA]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.CHIA
+      ),
+      [IconButtonVariantEnum.OUTLINE]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.OUTLINE
+      ),
+      [IconButtonVariantEnum.GHOST]: makeVariantSet(
+        IconButtonSizeEnum.XXLARGE,
+        IconButtonVariantEnum.GHOST
+      ),
+    },
+  },
+} as const;

package/src/components/IconButton/enums.ts

@@ -0,0 +1,26 @@
+import { CornersEnum, SizeEnum } from "../../enums";
+
+export enum IconButtonVariantEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  PITAYA = "pitaya",
+  BLACKBERRY = "blackberry",
+  CHIA = "chia",
+  OUTLINE = "outline",
+  GHOST = "ghost",
+}
+
+export enum IconButtonSizeEnum {
+  SMALL = SizeEnum.SMALL,
+  MEDIUM = SizeEnum.MEDIUM,
+  LARGE = SizeEnum.LARGE,
+  XLARGE = SizeEnum.XLARGE,
+  XXLARGE = SizeEnum.XXLARGE,
+}
+
+export enum IconButtonCornersEnum {
+  SMALL = CornersEnum.SMALL,
+  MEDIUM = CornersEnum.MEDIUM,
+}

package/src/components/IconButton/index.tsx

@@ -0,0 +1,124 @@
+import { Animated, GestureResponderEvent, Pressable, View } from "react-native";
+import type { IconButtonProps } from "./types";
+import {
+  buttonVariants,
+} from "./assets/class-variants";
+import { merge } from "@kivid/tailwind-preset";
+import { useRef } from "react";
+import { LoadingDotsVariant } from "../LoadingDots/types";
+import LoadingDots from "../LoadingDots";
+import { IconButtonCornersEnum, IconButtonSizeEnum, IconButtonVariantEnum } from "./enums";
+
+export function IconButton(props: IconButtonProps) {
+  const {
+    icon,
+    loading = false,
+    variant = IconButtonVariantEnum.GRAPE,
+    size = IconButtonSizeEnum.SMALL,
+    corners = IconButtonCornersEnum.SMALL,
+    disabled = false,
+    className,
+    accessibilityLabel,
+    selected = false,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = props;
+
+  const animatedValue = useRef(new Animated.Value(1)).current;
+
+  const loadingDotsVariantsMap: Record<IconButtonVariantEnum, LoadingDotsVariant> = {
+    [IconButtonVariantEnum.GRAPE]: "light",
+    [IconButtonVariantEnum.JAVA]: "light",
+    [IconButtonVariantEnum.PEAR]: "light",
+    [IconButtonVariantEnum.TANGERINE]: "light",
+    [IconButtonVariantEnum.PITAYA]: "light",
+    [IconButtonVariantEnum.BLACKBERRY]: "light",
+    [IconButtonVariantEnum.CHIA]: "light",
+    [IconButtonVariantEnum.OUTLINE]: "dark",
+    [IconButtonVariantEnum.GHOST]: "dark",
+  };
+
+  const mappedLoadingStyleBySize: Record<IconButtonSizeEnum, number> = {
+    [IconButtonSizeEnum.SMALL]: 24,
+    [IconButtonSizeEnum.MEDIUM]: 24,
+    [IconButtonSizeEnum.LARGE]: 32,
+    [IconButtonSizeEnum.XLARGE]: 32,
+    [IconButtonSizeEnum.XXLARGE]: 32,
+  }
+
+  const handlePressIn = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 0.7,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressIn?.(event);
+  };
+
+  const handlePressOut = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressOut?.(event);
+  };
+
+  function renderContent() {
+    if (loading) {
+      return (
+        <LoadingDots
+          variant={loadingDotsVariantsMap[variant]}
+          lottieViewStyle={{
+            width: mappedLoadingStyleBySize[size],
+            height: mappedLoadingStyleBySize[size],
+          }}
+        />
+      );
+    }
+
+    return (
+      <>
+        {icon}
+      </>
+    )
+  }
+
+  return (
+    <Animated.View
+      style={{
+        opacity: animatedValue,
+      }}
+    >
+      <Pressable
+        className={merge(
+          buttonVariants({
+            variant,
+            size,
+            corners,
+            selected,
+          }),
+          className
+        )}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{
+          disabled: disabled,
+          selected: selected,
+          busy: loading,
+        }}
+        pointerEvents={loading || disabled ? "none" : "auto"}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        {...rest}
+      >
+        <View className="flex items-center">
+          {renderContent()}
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+}

package/src/components/IconButton/types.ts

@@ -0,0 +1,22 @@
+import type { VariantProps } from "class-variance-authority";
+import type { buttonVariants } from "./assets/class-variants";
+import { PressableProps } from "react-native";
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "./enums";
+
+export interface IconButtonProps
+  extends PressableProps,
+    VariantProps<typeof buttonVariants> {
+  selected?: boolean;
+  icon: React.ReactNode;
+  loading?: boolean;
+  variant?: IconButtonVariantEnum;
+  size?: IconButtonSizeEnum;
+  corners?: IconButtonCornersEnum;
+  className?: string;
+  disabled?: boolean;
+  accessibilityLabel: string;
+}

package/src/components/InformationStatus/index.tsx

@@ -9,14 +9,21 @@ import { InformationStatusOptionsEnum } from "./enums";
 import { cva } from "class-variance-authority";
 import { merge } from "@kivid/tailwind-preset";
 import { View } from "react-native";
+import { SizeEnum } from "../../enums";
 
 export function InformationStatus(props: InformationStatusProps) {
-  const { status, size = "medium", square = false, className, style } = props;
+  const {
+    status,
+    size = SizeEnum.MEDIUM,
+    square = false,
+    className,
+    style,
+  } = props;
 
   const mappedIconSize = {
-    small: 16,
-    medium: 24,
-    large: 32,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
   }[size];
 
   const iconMap = {
@@ -45,9 +52,9 @@ export function InformationStatus(props: InformationStatusProps) {
           warning: "bg-tangerine-500",
         },
         size: {
-          small: [`${square ? "w-900 h-900" : "w-1000 h-700"}`],
-          medium: [`${square ? "w-1000 h-1000" : "w-1200 h-800"}`],
-          large: [`${square ? "w-1100 h-1100" : "w-[80px] h-900"}`],
+          [SizeEnum.SMALL]: [`${square ? "w-900 h-900" : "w-1000 h-700"}`],
+          [SizeEnum.MEDIUM]: [`${square ? "w-1000 h-1000" : "w-1200 h-800"}`],
+          [SizeEnum.LARGE]: [`${square ? "w-1100 h-1100" : "w-[80px] h-900"}`],
         },
         square: {
           true: "rounded-700",

package/src/components/InformationStatus/types.ts

@@ -1,10 +1,16 @@
 import { StyleProp, ViewStyle } from "react-native";
 import { SvgProps } from "react-native-svg";
 import { InformationStatusOptionsEnum } from "./enums";
+import { SizeEnum } from "../../enums";
+
+export type InformationStatusSize =
+  | SizeEnum.SMALL
+  | SizeEnum.MEDIUM
+  | SizeEnum.LARGE;
 
 export interface InformationStatusProps {
   status: InformationStatusOptionsEnum;
-  size?: "small" | "medium" | "large";
+  size?: InformationStatusSize;
   square?: boolean;
   className?: string;
   style?: StyleProp<ViewStyle>;

package/src/components/ListButton/assets/class-variants.ts

@@ -0,0 +1,78 @@
+import { cva } from "class-variance-authority";
+import { ListButtonVariantEnum } from "../enums";
+import { SizeEnum, CornersEnum } from "../../../enums";
+
+const buttonVariants = cva(
+  [
+    "flex flex-row items-center justify-between w-full",
+    "font-bold",
+    "disabled:cursor-not-allowed",
+    "relative overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        [ListButtonVariantEnum.GRAPE]: [
+          "bg-grape-500",
+          "disabled:bg-grape-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.JAVA]: [
+          "bg-java-500",
+          "disabled:bg-java-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.PEAR]: [
+          "bg-pear-500",
+          "disabled:bg-pear-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.TANGERINE]: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.BLACKBERRY]: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-500 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.CHIA]: [
+          "bg-chia-700",
+          "disabled:bg-chia-700 disabled:opacity-30 disabled:text-chia-100",
+        ],
+        [ListButtonVariantEnum.OUTLINE]: [
+          "bg-chia-100 text-chia-900 border border-chia-400",
+          "disabled:bg-chia-200 disabled:opacity-50 disabled:text-chia-900",
+        ],
+      },
+      size: {
+        [SizeEnum.SMALL]: "py-400 pr-400 pl-600",
+        [SizeEnum.MEDIUM]: "py-500 pr-400 pl-600",
+        [SizeEnum.LARGE]: "py-600 pr-400 pl-600",
+      },
+      corners: {
+        [CornersEnum.SMALL]: "rounded-500",
+        [CornersEnum.MEDIUM]: "rounded-700",
+      },
+    },
+    defaultVariants: {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+    },
+  }
+);
+
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      grape: "text-chia-100",
+      java: "text-chia-100",
+      pear: "text-chia-100",
+      tangerine: "text-chia-100",
+      blackberry: "text-chia-100",
+      chia: "text-chia-100",
+      outline: "text-chia-900",
+      glass: "text-chia-900",
+      ghost: "text-chia-900",
+    },
+  },
+});
+
+export { buttonVariants, textVariants };