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

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/ListButton/assets/class-variants.ts

@@ -4,7 +4,7 @@ import { SizeEnum, CornersEnum } from "../../../enums";
 
 const buttonVariants = cva(
   [
-    "flex flex-row items-center justify-center max-w-fit",
+    "flex flex-row items-center justify-between w-full",
     "font-bold",
     "disabled:cursor-not-allowed",
     "relative overflow-hidden",
@@ -75,13 +75,4 @@ const textVariants = cva("", {
   },
 });
 
-const iconButtonVariants = cva("flex flex-row items-center ", {
-  variants: {
-    showChevronIcon: {
-      true: "flex-1",
-      false: "",
-    },
-  },
-});
-
-export { buttonVariants, textVariants, iconButtonVariants };
+export { buttonVariants, textVariants };

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

@@ -0,0 +1,502 @@
+import { ListButtonVariantEnum } from "../enums";
+import { SizeEnum, CornersEnum } from "../../../enums";
+
+interface ListButtonShowcaseProps {
+  variant: ListButtonVariantEnum;
+  size: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
+  corners: CornersEnum.SMALL | CornersEnum.MEDIUM;
+  children: string;
+  iconColor: string;
+  disabled?: boolean;
+  iconLeft?: boolean;
+  iconRight?: boolean;
+}
+
+export const listButtonShowcaseVariants: Record<
+  string,
+  ListButtonShowcaseProps[]
+> = {
+  grape: [
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GRAPE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  java: [
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.JAVA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  pear: [
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.PEAR,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  tangerine: [
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.TANGERINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  blackberry: [
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.BLACKBERRY,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  chia: [
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.CHIA,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#FAFCFC",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+  outline: [
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.OUTLINE,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
+};

package/src/components/ListButton/enums/index.ts

@@ -1,2 +1 @@
 export * from "./variant";
-export * from "./icon-color";