@kivid/native-components 1.0.0-alpha.1

package/src/components/Button/index.stories.tsx

@@ -0,0 +1,407 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { View, ScrollView } from "react-native";
+import { Button } from "./index";
+import { designSystemShowcase } from "./assets/design-system-showcase";
+
+const action = (message: string) => () => {
+  console.log(`Button pressed: ${message}`);
+};
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile button component with multiple variants, sizes, and states matching the Figma design system. Adapted for React Native with full accessibility support.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: [
+        "grape",
+        "java",
+        "pear",
+        "tangerine",
+        "blackberry",
+        "chia",
+        "outline",
+        "glass",
+        "ghost",
+      ],
+      description: "The visual style variant of the button",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+      description: "The size of the button",
+    },
+    corners: {
+      control: { type: "select" },
+      options: ["small", "medium"],
+      description: "The border radius of the button",
+    },
+    loading: {
+      control: { type: "boolean" },
+      description: "Shows loading spinner and disables interaction",
+    },
+    selected: {
+      control: { type: "boolean" },
+      description: "Selected state for toggle buttons",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables the button",
+    },
+    fullWidth: {
+      control: { type: "boolean" },
+      description: "Makes the button full width",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Button text content",
+    },
+  },
+  args: { onPress: action("onPress") },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Label",
+  },
+};
+
+export const DesignSystemShowcase: Story = {
+  render: () => {
+    const ColorGroup = ({ children }: { children: React.ReactNode }) => {
+      return (
+        <View className="flex-row gap-400 py-400 flex-wrap">{children}</View>
+      );
+    };
+
+    const SizeGroup = ({ children }: { children: React.ReactNode }) => {
+      return <View className="mb-600">{children}</View>;
+    };
+
+    const ColorGroupTitle = ({ children }: { children: React.ReactNode }) => {
+      return (
+        <View className="mb-400">
+          <Button variant="ghost" size="medium" className="self-start">
+            {children}
+          </Button>
+        </View>
+      );
+    };
+
+    const Container = ({ children }: { children: React.ReactNode }) => {
+      return (
+        <ScrollView className="flex-1 p-700 pt-600">
+          <View className="space-y-400">{children}</View>
+        </ScrollView>
+      );
+    };
+
+    function renderButtons() {
+      return (
+        <View>
+          {Object.entries(designSystemShowcase).map(
+            ([sizeKey, { title, buttons }]) => (
+              <SizeGroup key={sizeKey}>
+                <ColorGroupTitle>{title}</ColorGroupTitle>
+
+                <View className="flex gap-400 pb-600 flex-wrap">
+                  {Object.entries(buttons).map(([variant, btnList]) => (
+                    <ColorGroup key={variant}>
+                      {btnList.map((props: any, idx: number) => (
+                        <Button
+                          key={`${variant}-${idx}`}
+                          {...props}
+                          onPress={action(`${variant}-${idx} pressed`)}
+                        >
+                          {props.label}
+                        </Button>
+                      ))}
+                    </ColorGroup>
+                  ))}
+                </View>
+              </SizeGroup>
+            )
+          )}
+        </View>
+      );
+    }
+
+    return <Container>{renderButtons()}</Container>;
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of the button design system matching the Figma specifications with all variants, sizes, and states.",
+      },
+    },
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <ScrollView className="flex-1 p-6">
+      <View className="flex gap-400 items-start">
+        <View className="flex-row gap-400 items-center flex-wrap">
+          <Button size="small" variant="grape" onPress={action("small grape")}>
+            Small
+          </Button>
+          <Button
+            size="medium"
+            variant="grape"
+            onPress={action("medium grape")}
+          >
+            Medium
+          </Button>
+          <Button size="large" variant="grape" onPress={action("large grape")}>
+            Large
+          </Button>
+        </View>
+        <View className="flex-row gap-400 items-center flex-wrap">
+          <Button
+            size="small"
+            variant="outline"
+            onPress={action("small outline")}
+          >
+            Small
+          </Button>
+          <Button
+            size="medium"
+            variant="outline"
+            onPress={action("medium outline")}
+          >
+            Medium
+          </Button>
+          <Button
+            size="large"
+            variant="outline"
+            onPress={action("large outline")}
+          >
+            Large
+          </Button>
+        </View>
+      </View>
+    </ScrollView>
+  ),
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story: "Button component in different sizes: small, medium, and large.",
+      },
+    },
+  },
+};
+
+export const Corners: Story = {
+  render: () => (
+    <View className="flex-row gap-400 p-6 flex-wrap">
+      <Button corners="small" variant="grape" onPress={action("small corners")}>
+        Small Corners
+      </Button>
+      <Button
+        corners="medium"
+        variant="grape"
+        onPress={action("medium corners")}
+      >
+        Medium Corners
+      </Button>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Button component with different corner radius options.",
+      },
+    },
+  },
+};
+
+export const States: Story = {
+  render: () => {
+    const defaultStates = [
+      { label: "Default", onPress: action("default") },
+      { disabled: true, label: "Disabled", onPress: action("disabled") },
+      { loading: true, label: "Loading", onPress: action("loading") },
+      { selected: true, label: "Selected", onPress: action("selected") },
+    ];
+
+    return (
+      <ScrollView className="flex-1 p-6">
+        <View className="flex-row gap-600 flex-wrap">
+          <View className="flex gap-500 min-w-fit">
+            <Button variant="ghost" size="medium" className="self-start">
+              Default States
+            </Button>
+            {defaultStates.map((props, index) => (
+              <Button key={`default-${index}`} variant="grape" {...props}>
+                {props.label}
+              </Button>
+            ))}
+          </View>
+          <View className="flex gap-500 min-w-fit">
+            <Button variant="ghost" size="medium" className="self-start">
+              Outline States
+            </Button>
+            {defaultStates.map((props, index) => (
+              <Button key={`outline-${index}`} variant="outline" {...props}>
+                {props.label}
+              </Button>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    );
+  },
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        story:
+          "Button component in different interaction states: default, disabled, loading, and selected.",
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    variant: "grape",
+    loading: true,
+    children: "Loading...",
+    className: "min-w-[160px]",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: "grape",
+    disabled: true,
+    children: "Disabled Button",
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    variant: "grape",
+    selected: true,
+    children: "Selected Button",
+  },
+};
+
+export const FullWidth: Story = {
+  render: () => (
+    <View className="w-full max-w-md space-y-300 p-6">
+      <Button variant="grape" fullWidth onPress={action("fullwidth grape")}>
+        Full Width Grape
+      </Button>
+      <Button variant="outline" fullWidth onPress={action("fullwidth outline")}>
+        Full Width Outline
+      </Button>
+      <Button variant="glass" fullWidth onPress={action("fullwidth glass")}>
+        Full Width Glass
+      </Button>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Button component spanning the full width of its container.",
+      },
+    },
+  },
+};
+
+export const Color_Grape: Story = {
+  args: {
+    variant: "grape",
+    children: "Grape Button",
+  },
+};
+
+export const Color_Java: Story = {
+  args: {
+    variant: "java",
+    children: "Java Button",
+    onPress: action("java"),
+  },
+};
+
+export const Color_Pear: Story = {
+  args: {
+    variant: "pear",
+    children: "Pear Button",
+    onPress: action("pear"),
+  },
+};
+
+export const Color_Tangerine: Story = {
+  args: {
+    variant: "tangerine",
+    children: "Tangerine Button",
+    onPress: action("tangerine"),
+  },
+};
+
+export const Color_Blackberry: Story = {
+  args: {
+    variant: "blackberry",
+    children: "Blackberry Button",
+    onPress: action("blackberry"),
+  },
+};
+
+export const Color_Chia: Story = {
+  args: {
+    variant: "chia",
+    children: "Chia Button",
+    onPress: action("chia"),
+  },
+};
+
+export const Color_Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline Button",
+    onPress: action("outline"),
+  },
+};
+
+export const Color_Glass: Story = {
+  args: {
+    variant: "glass",
+    children: "Glass Button",
+    onPress: action("glass"),
+  },
+  render: () => {
+    return (
+      <View className="flex-1 p-6 bg-gradient-to-tr from-java-600 to-pear-600">
+        <Button variant="glass" onPress={action("glass")}>
+          Glass Button
+        </Button>
+      </View>
+    );
+  },
+};
+
+export const Color_Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost Button",
+    onPress: action("ghost"),
+  },
+};

package/src/components/Button/index.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { Text, Pressable, Animated, GestureResponderEvent } from "react-native";
+import { merge } from "@butterfly/tailwind-preset";
+import { LoadingDots } from "../LoadingDots";
+import { LoadingDotsVariant } from "../LoadingDots/types";
+import { ButtonProps, ButtonVariant } from "./types";
+import {
+  textVariants,
+  buttonVariants,
+  selectedVariants,
+} from "./assets/class-variants";
+
+export function Button(props: ButtonProps) {
+  const {
+    variant = "grape",
+    size = "large",
+    corners = "medium",
+    fullWidth = false,
+    loading = false,
+    selected = false,
+    disabled = false,
+    className,
+    children,
+    onPress,
+    accessibilityLabel,
+    ref,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = props;
+
+  const animatedValue = React.useRef(new Animated.Value(1)).current;
+
+  const loadingDotsVariantsMap: Record<ButtonVariant, LoadingDotsVariant> = {
+    grape: "light",
+    java: "light",
+    pear: "light",
+    tangerine: "light",
+    blackberry: "light",
+    chia: "light",
+    outline: "grape",
+    glass: "grape",
+    ghost: "grape",
+  };
+
+  function renderContent() {
+    const textStyle = merge(
+      textVariants({
+        variant,
+        size,
+        selected: selected && (variant === "outline" || variant === "ghost"),
+      })
+    );
+
+    if (loading) {
+      const _variant = loadingDotsVariantsMap[variant ?? "grape"];
+
+      return (
+        <>
+          <LoadingDots variant={_variant} className={"w-700 h-700"} />
+        </>
+      );
+    }
+
+    return (
+      <Text className={textStyle} numberOfLines={1}>
+        {children}
+      </Text>
+    );
+  }
+
+  const buttonStyle = merge(
+    buttonVariants({
+      variant: selected ? undefined : variant,
+      size,
+      corners,
+      fullWidth,
+    }),
+    selected && selectedVariants({ variant }),
+    className
+  );
+
+  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);
+  };
+
+  return (
+    <Animated.View
+      style={{
+        opacity: animatedValue,
+      }}
+    >
+      <Pressable
+        ref={ref}
+        className={buttonStyle}
+        disabled={disabled}
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        accessibilityRole="button"
+        accessibilityLabel={
+          accessibilityLabel ||
+          (typeof children === "string" ? children : "Button")
+        }
+        accessibilityState={{
+          disabled: disabled,
+          selected: selected,
+          busy: loading,
+        }}
+        pointerEvents={loading || disabled ? "none" : "auto"}
+        {...rest}
+      >
+        {renderContent()}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+Button.displayName = "Button";
+
+export default Button;

package/src/components/Button/types.ts

@@ -0,0 +1,31 @@
+import type { VariantProps } from "class-variance-authority";
+import { buttonVariants } from "./assets/class-variants";
+import { PressableProps, View } from "react-native";
+
+export type ButtonVariant =
+  | "grape"
+  | "java"
+  | "pear"
+  | "tangerine"
+  | "blackberry"
+  | "chia"
+  | "outline"
+  | "glass"
+  | "ghost";
+
+export type ButtonSize = "small" | "medium" | "large";
+
+export type ButtonCorners = "small" | "medium";
+
+export interface ButtonProps
+  extends VariantProps<typeof buttonVariants>,
+    PressableProps {
+  loading?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  ref?: React.RefObject<View | null>;
+}

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

@@ -0,0 +1,68 @@
+import { cva } from "class-variance-authority";
+
+export const chipVariants = cva(
+  "flex flex-row items-center justify-between max-w-fit stroke-none border-100 bg-chia-100",
+  {
+    variants: {
+      size: {
+        medium: "min-w-[64px] max-h-700 h-full p-300 gap-300 rounded-500",
+        large: "min-w-[86px] max-h-800 h-full p-400 gap-400 rounded-600",
+      },
+      variant: {
+        filled: "",
+        outline: "border-chia-400",
+        highlight: "bg-chia-300 border-chia-300",
+      },
+      sealVariant: {
+        add: null,
+        success: null,
+        error: null,
+        alert: null,
+        minus: null,
+        right: null,
+        left: null,
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "filled",
+        sealVariant: "add",
+        class: "bg-grape-500 border-grape-500",
+      },
+      {
+        variant: "filled",
+        sealVariant: "success",
+        class: "bg-pear-500 border-pear-500",
+      },
+      {
+        variant: "filled",
+        sealVariant: "error",
+        class: "bg-blackberry-500 border-blackberry-500",
+      },
+      {
+        variant: "filled",
+        sealVariant: "alert",
+        class: "bg-tangerine-500 border-tangerine-500",
+      },
+      {
+        variant: "filled",
+        sealVariant: "minus",
+        class: "bg-chia-600 border-chia-600",
+      },
+      {
+        variant: "filled",
+        sealVariant: "right",
+        class: "bg-chia-600 border-chia-600",
+      },
+      {
+        variant: "filled",
+        sealVariant: "left",
+        class: "bg-chia-600 border-chia-600",
+      },
+    ],
+    defaultVariants: {
+      size: "medium",
+      variant: "outline",
+    },
+  }
+);

package/src/components/Chip/enums/chip-size.ts

@@ -0,0 +1,4 @@
+export enum ChipSizeEnum {
+  MEDIUM = "medium",
+  LARGE = "large",
+}

package/src/components/Chip/enums/chip-variant.ts

@@ -0,0 +1,5 @@
+export enum ChipVariantEnum {
+  HIGHLIGHT = "highlight",
+  FILLED = "filled",
+  OUTLINE = "outline",
+}

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

@@ -0,0 +1,2 @@
+export * from "./chip-variant";
+export * from "./chip-size";