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

package/src/components/ChatBubble/components/ChatBubbleSeal/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { merge } from "@kivid/tailwind-preset";
+import { Seal } from "../../../Seal";
+
+import type { ChatBubbleSealProps } from "./types";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { SizeEnum } from "../../../../enums";
+import { useChatBubbleContext } from "../../contexts";
+
+export const ChatBubbleSeal: React.FC<ChatBubbleSealProps> = ({
+  className,
+  ...props
+}) => {
+  const { contentType, colorState } = useChatBubbleContext();
+
+  if (!contentType || contentType === "custom") {
+    return null;
+  }
+
+  const sealVariantMap = {
+    check: SealVariantEnum.SUCCESS,
+    alert: SealVariantEnum.ALERT,
+    error: SealVariantEnum.ERROR,
+  };
+
+  return (
+    <Seal
+      variant={sealVariantMap[contentType]}
+      size={SizeEnum.MEDIUM}
+      inverted={colorState === "fill"}
+      className={merge("ml-[-6px]", className)}
+      {...props}
+    />
+  );
+};
+
+ChatBubbleSeal.displayName = "ChatBubble.Seal";

package/src/components/ChatBubble/components/ChatBubbleSeal/types.ts

@@ -0,0 +1,5 @@
+import { SealProps } from "../../../Seal/types";
+
+export interface ChatBubbleSealProps extends Omit<SealProps, "variant"> {
+  className?: string;
+}

package/src/components/ChatBubble/components/ChatBubbleText/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { merge } from "@kivid/tailwind-preset";
+import { Typography } from "../../../Typography";
+
+import type { ChatBubbleTextProps } from "./types";
+import { useChatBubbleContext } from "../../contexts";
+
+/**
+ * Typography component for bubble text content
+ */
+export const ChatBubbleText: React.FC<ChatBubbleTextProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { colorState, contentType } = useChatBubbleContext();
+
+  // Text color based on bubble colorState
+  const textColorClass =
+    colorState === "fill" && contentType !== "custom"
+      ? "text-chia-200"
+      : "text-chia-800";
+
+  return (
+    <Typography
+      variant="body_large"
+      weight="600"
+      className={merge(textColorClass, className)}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+};
+
+ChatBubbleText.displayName = "ChatBubble.Text";

package/src/components/ChatBubble/components/ChatBubbleText/types.ts

@@ -0,0 +1,6 @@
+import { TypographyProps } from "../../../Typography/types";
+
+export interface ChatBubbleTextProps
+  extends Omit<TypographyProps, "variant" | "weight"> {
+  className?: string;
+}

package/src/components/ChatBubble/components/ChatBubbleTime/index.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import { Typography } from "../../../Typography";
+import { chatBubbleTimeVariants } from "../../assets/class-variants";
+import type { ChatBubbleTimeProps } from "./types";
+
+/**
+ * Time component for displaying message timestamp
+ */
+export const ChatBubbleTime: React.FC<ChatBubbleTimeProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <View
+      className={chatBubbleTimeVariants()}
+      accessibilityLabel={`Message time: ${children}`}
+      accessibilityRole="text"
+    >
+      <Typography
+        variant="label_small"
+        weight="600"
+        className={merge("text-chia-600", className)}
+        {...props}
+      >
+        {children}
+      </Typography>
+    </View>
+  );
+};
+
+ChatBubbleTime.displayName = "ChatBubble.Time";

package/src/components/ChatBubble/components/ChatBubbleTime/types.ts

@@ -0,0 +1,6 @@
+import { TextProps } from "react-native";
+
+export interface ChatBubbleTimeProps extends Omit<TextProps, "children"> {
+  className?: string;
+  children: React.ReactNode;
+}

package/src/components/ChatBubble/components/index.ts

@@ -0,0 +1,6 @@
+export { ChatBubbleEar } from "./ChatBubbleEar";
+export { ChatBubbleContent } from "./ChatBubbleContent";
+export { ChatBubbleSeal } from "./ChatBubbleSeal";
+export { ChatBubbleText } from "./ChatBubbleText";
+export { ChatBubbleTime } from "./ChatBubbleTime";
+export { ChatBubbleLoading } from "./ChatBubbleLoading";

package/src/components/ChatBubble/contexts/ChatBubbleContext/index.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+import type { ChatBubbleContextValue } from "./types";
+
+export const ChatBubbleContext = createContext<ChatBubbleContextValue | null>(
+  null
+);
+
+export const useChatBubbleContext = () => {
+  const context = useContext(ChatBubbleContext);
+  if (!context) {
+    throw new Error(
+      "ChatBubble compound components must be used within a ChatBubble"
+    );
+  }
+  return context;
+};

package/src/components/ChatBubble/contexts/ChatBubbleContext/types.ts

@@ -0,0 +1,11 @@
+import {
+  ChatBubbleColorState,
+  ChatBubbleMessageType,
+  ChatBubbleType,
+} from "../../types";
+
+export interface ChatBubbleContextValue {
+  contentType?: ChatBubbleType;
+  colorState: ChatBubbleColorState;
+  messageType: ChatBubbleMessageType;
+}

package/src/components/ChatBubble/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./ChatBubbleContext";

package/src/components/ChatBubble/index.tsx

@@ -0,0 +1,115 @@
+import { View } from "react-native";
+import { ChatBubbleEar } from "./components";
+import {
+  ChatBubbleContent,
+  ChatBubbleSeal,
+  ChatBubbleText,
+  ChatBubbleTime,
+  ChatBubbleLoading,
+} from "./components";
+
+import { chatBubbleBoxVariants } from "./assets/class-variants";
+import type { ChatBubbleProps } from "./types";
+import { elevationDown100 } from "../../styles/mixins/shadows";
+import { merge } from "@kivid/tailwind-preset";
+import { ChatBubbleContext } from "./contexts";
+import type { ChatBubbleContextValue } from "./contexts/ChatBubbleContext/types";
+
+
+export function ChatBubble(props: ChatBubbleProps) {
+  const {
+    contentType = "custom",
+    colorState = "outline",
+    hasEar = false,
+    className,
+    children,
+    time: timeFromProps,
+    messageType = "initial",
+    ...restOfProps
+  } = props;
+
+  const [hours, minutes] = new Date().toLocaleTimeString().split(":");
+  const time = timeFromProps ? timeFromProps : `${hours}:${minutes}`;
+
+  const colorMap = {
+    check: "#3DCC78",
+    alert: "#FF8B59",
+    error: "#E65245",
+    custom: "#FAFCFC",
+  };
+
+  const tailColor =
+    colorState === "outline" ? "#FAFCFC" : colorMap[contentType];
+
+  const contextInitialValue: ChatBubbleContextValue = {
+    contentType,
+    colorState,
+    messageType,
+  };
+
+  const accessibilityLabelMap = {
+    check: "Success message",
+    alert: "Warning message",
+    error: "Error message",
+    custom: "Custom message",
+  };
+
+  function renderChatBubbleEar() {
+    if (hasEar) {
+      return <ChatBubbleEar color={tailColor} type={colorState} />;
+    }
+
+    return null;
+  }
+
+  const bubbleWithEarOffset = hasEar ? "mr-[8.8px]" : "";
+
+  return (
+    <ChatBubbleContext.Provider value={contextInitialValue}>
+      <View
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabelMap[contentType]}
+        accessible={true}
+        className={merge("flex", className)}
+        {...restOfProps}
+      >
+        <View className={`relative flex-row items-end ${bubbleWithEarOffset}`}>
+          <View
+            className={
+              "w-[11px] h-[9px] mr-[-3.2px] pb-[1.2px] z-10 items-center justify-center"
+            }
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+          >
+            {renderChatBubbleEar()}
+          </View>
+
+          <View
+            className={merge(
+              chatBubbleBoxVariants({
+                contentType,
+                colorState,
+                hasEar,
+                messageType,
+              })
+            )}
+            style={{
+              boxShadow: elevationDown100,
+            }}
+            accessibilityRole="text"
+          >
+            {children}
+          </View>
+        </View>
+        <ChatBubbleTime>{time}</ChatBubbleTime>
+      </View>
+    </ChatBubbleContext.Provider>
+  );
+}
+
+ChatBubble.Content = ChatBubbleContent;
+ChatBubble.Seal = ChatBubbleSeal;
+ChatBubble.Text = ChatBubbleText;
+ChatBubble.Loading = ChatBubbleLoading;
+
+ChatBubble.displayName = "ChatBubble";

package/src/components/ChatBubble/types.ts

@@ -0,0 +1,15 @@
+import type { ViewProps } from "react-native";
+
+export type ChatBubbleType = "check" | "alert" | "error" | "custom";
+export type ChatBubbleColorState = "fill" | "outline";
+export type ChatBubbleMessageType = "initial" | "followUp";
+
+export interface ChatBubbleProps extends Omit<ViewProps, "children"> {
+  contentType?: ChatBubbleType;
+  colorState?: ChatBubbleColorState;
+  hasEar?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  time?: string;
+  messageType?: ChatBubbleMessageType;
+}

package/src/components/{InputCheckbox → CheckboxInput}/assets/class-variants.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 import { CheckboxVariantEnum } from "../enums";
 
-export const inputCheckboxVariants = cva(
+export const checkboxInputVariants = cva(
   "flex items-center justify-center w-[20px] h-[20px] rounded-500 border transition-all duration-200",
   {
     variants: {

package/src/components/{InputCheckbox → CheckboxInput}/index.tsx

@@ -1,20 +1,21 @@
-import type { InputCheckboxProps } from "./types";
+import type { CheckboxInputProps } from "./types";
 import { CheckboxVariantEnum, SelectVariantEnum } from "./enums";
-import { inputCheckboxVariants } from "./assets/class-variants";
+import { checkboxInputVariants } from "./assets/class-variants";
 import { TouchableOpacity, View } from "react-native";
 import { CheckIcon, IndeterminateIcon } from "./icons";
 
-export function InputCheckbox(props: InputCheckboxProps) {
+export function CheckboxInput(props: CheckboxInputProps) {
   const {
     isChecked = false,
     selectType = SelectVariantEnum.SELECTED,
     variant = CheckboxVariantEnum.JAVA,
     onChange,
-    disabled = false
+    disabled = false,
+    className,
   } = props;
 
   function handleChange() {
-    onChange(!isChecked);
+    onChange?.(!isChecked);
   }
 
   function renderIcon() {
@@ -37,12 +38,13 @@ export function InputCheckbox(props: InputCheckboxProps) {
         accessible
         accessibilityRole="checkbox"
         accessibilityState={{ checked: isChecked }}
+        className={className}
       >
         <View
-          className={inputCheckboxVariants({
+          className={checkboxInputVariants({
             variant,
             disabled,
-            isChecked
+            isChecked,
           })}
         >
           {renderIcon()}
@@ -50,4 +52,4 @@ export function InputCheckbox(props: InputCheckboxProps) {
       </TouchableOpacity>
     </View>
   );
-}
+}

package/src/components/{InputCheckbox → CheckboxInput}/types.ts

@@ -4,10 +4,11 @@ export type CheckboxVariant = CheckboxVariantEnum;
 
 export type CheckboxSelectType = SelectVariantEnum;
 
-export interface InputCheckboxProps {
+export interface CheckboxInputProps {
   isChecked?: boolean;
   selectType?: CheckboxSelectType;
   variant?: CheckboxVariant;
   disabled?: boolean;
-  onChange(value: boolean): void;
+  className?: string;
+  onChange?(value: boolean): void;
 }

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

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

package/src/components/Chip/index.tsx

@@ -5,17 +5,19 @@ import { Seal } from "../Seal";
 import { View } from "react-native";
 import { SealVariantEnum } from "../Seal/enums";
 import { Typography } from "../Typography";
+import { SizeEnum } from "../../enums";
 
 export function Chip(props: ChipProps) {
   const {
     label,
     className,
     sealVariant = SealVariantEnum.ADD,
-    size = "medium",
+    size = SizeEnum.MEDIUM,
     variant = "outline",
   } = props;
 
-  const typographyVariant = size === "medium" ? "label_small" : "label_medium";
+  const typographyVariant =
+    size === SizeEnum.MEDIUM ? "label_small" : "label_medium";
 
   const textColorClass =
     variant === "filled" ? "text-chia-200" : "text-chia-900";
@@ -27,7 +29,7 @@ export function Chip(props: ChipProps) {
       <Seal
         variant={sealVariant}
         inverted={variant === "filled"}
-        size="small"
+        size={SizeEnum.SMALL}
       />
       <Typography
         variant={typographyVariant}

package/src/components/Chip/types.ts

@@ -1,7 +1,8 @@
 import type { SealVariant } from "../Seal/types";
-import { ChipSizeEnum, ChipVariantEnum } from "./enums";
+import { ChipVariantEnum } from "./enums";
+import { SizeEnum } from "../../enums";
 
-export type ChipSize = ChipSizeEnum;
+export type ChipSize = SizeEnum.MEDIUM | SizeEnum.LARGE;
 export type ChipVariant = ChipVariantEnum;
 
 export interface ChipProps {

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

@@ -0,0 +1,126 @@
+import { cva } from "class-variance-authority";
+import {
+  IconButtonCornersEnum,
+  IconButtonSizeEnum,
+  IconButtonVariantEnum,
+} from "../enums";
+
+const buttonVariants = cva(
+  [
+    "flex flex-row items-center justify-center max-w-fit",
+    "disabled:cursor-not-allowed",
+    "relative overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        [IconButtonVariantEnum.GRAPE]: [
+          "bg-grape-500",
+          "disabled:bg-grape-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.JAVA]: [
+          "bg-java-500",
+          "disabled:bg-java-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.PEAR]: [
+          "bg-pear-500",
+          "disabled:bg-pear-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.TANGERINE]: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.PITAYA]: [
+          "bg-pitaya-500 border border-pitaya-500",
+          "disabled:bg-pitaya-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.BLACKBERRY]: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-500 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.CHIA]: [
+          "bg-chia-700",
+          "disabled:bg-chia-700 disabled:opacity-30",
+        ],
+        [IconButtonVariantEnum.OUTLINE]: [
+          "bg-chia-100 border-100 border-chia-400",
+          "disabled:bg-chia-200 disabled:opacity-50",
+        ],
+        [IconButtonVariantEnum.GHOST]: [
+          "bg-transparent",
+          "disabled:opacity-30",
+        ],
+      },
+      size: {
+        [IconButtonSizeEnum.SMALL]: "px-400 py-300",
+        [IconButtonSizeEnum.MEDIUM]: "px-500 py-400",
+        [IconButtonSizeEnum.LARGE]: "px-600 py-400",
+        [IconButtonSizeEnum.XLARGE]: "px-700 py-500",
+        [IconButtonSizeEnum.XXLARGE]: "px-800 py-600",
+      },
+      corners: {
+        [IconButtonCornersEnum.SMALL]: "rounded-500",
+        [IconButtonCornersEnum.MEDIUM]: "rounded-700",
+      },
+      selected: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: IconButtonVariantEnum.GRAPE,
+        selected: true,
+        className: "bg-grape-600",
+      },
+      {
+        variant: IconButtonVariantEnum.JAVA,
+        selected: true,
+        className: "bg-java-600",
+      },
+      {
+        variant: IconButtonVariantEnum.PEAR,
+        selected: true,
+        className: "bg-pear-600",
+      },
+      {
+        variant: IconButtonVariantEnum.TANGERINE,
+        selected: true,
+        className: "bg-tangerine-600",
+      },
+      {
+        variant: IconButtonVariantEnum.BLACKBERRY,
+        selected: true,
+        className: "bg-blackberry-600",
+      },
+      {
+        variant: IconButtonVariantEnum.CHIA,
+        selected: true,
+        className: "bg-chia-600",
+      },
+      {
+        variant: IconButtonVariantEnum.OUTLINE,
+        selected: true,
+        className: "bg-outline-600",
+      },
+      {
+        variant: IconButtonVariantEnum.PITAYA,
+        selected: true,
+        className: "bg-pitaya-600",
+      },
+      {
+        variant: IconButtonVariantEnum.GHOST,
+        selected: true,
+        className: "bg-grape-100 border-100 border-grape-300",
+      },
+    ],
+    defaultVariants: {
+      variant: IconButtonVariantEnum.GRAPE,
+      size: IconButtonSizeEnum.MEDIUM,
+      corners: IconButtonCornersEnum.MEDIUM,
+      selected: false,
+    },
+  }
+);
+
+export { buttonVariants };