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

package/src/components/Toast/index.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef } from "react";
+import { View, Animated, Pressable } from "react-native";
+import { ToastProps } from "./types";
+import { ToastPositionEnum, ToastVariantEnum } from "./enums";
+import { containerVariants, toastVariants } from "./assets/class-variants";
+
+import { Close } from "@kivid/icons/native";
+import Typography from "../Typography";
+import { merge } from "@kivid/tailwind-preset";
+import { Seal } from "../Seal";
+import { SealVariantEnum } from "../Seal/enums";
+import { elevationDown100 } from "../../styles/mixins/shadows";
+
+
+export function Toast(props: ToastProps) {
+  const {
+    description,
+    isToastOpen,
+    onCloseToast,
+    className,
+    descriptionClassName,
+    durationInMilliSeconds = 3000,
+    position = ToastPositionEnum.TOP,
+    variant = ToastVariantEnum.SUCCESS
+  } = props;
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (!isToastOpen) return;
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+
+    timerRef.current = setTimeout(() => {
+      Animated.timing(animatedValue, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start(() => {
+        onCloseToast(false);
+      });
+    }, durationInMilliSeconds);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [isToastOpen]);
+
+  if (!isToastOpen) return null;
+
+  function handleClose() {
+    onCloseToast(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }
+
+  const toastStyle = toastVariants({ variant });
+  const containerStyle = containerVariants({ position });
+
+  const iconMap = {
+    [ToastVariantEnum.SUCCESS]: () => <Seal variant={SealVariantEnum.SUCCESS} inverted />,
+    [ToastVariantEnum.ERROR]: () => <Seal variant={SealVariantEnum.ERROR} inverted />,
+    [ToastVariantEnum.WARNING]: () => <Seal variant={SealVariantEnum.ALERT} inverted />,
+  };
+
+  const Icon = iconMap[variant];
+
+  return (
+    <Animated.View
+      className={containerStyle}
+    >
+      <View
+        className={merge(toastStyle, className)}
+        style={{
+          boxShadow: elevationDown100
+        }}
+      >
+        <View className="flex flex-row items-center gap-500">
+          <Icon />
+
+          <View className="flex items-center gap-8">
+            <Typography
+              className={merge("title_small font-bold text-chia-100", descriptionClassName)}
+            >
+              {description}
+            </Typography>
+          </View>
+        </View>
+
+        <Pressable className="cursor-pointer" onPress={handleClose}>
+          <Close color="#FAFCFC" size={30} />
+        </Pressable>
+      </View>
+    </Animated.View>
+  );
+};

package/src/components/Toast/types.ts

@@ -0,0 +1,12 @@
+import type { ToastPositionEnum, ToastVariantEnum } from "./enums";
+
+export interface ToastProps {
+  className?: string;
+  descriptionClassName?: string;
+  description: string;
+  variant?: ToastVariantEnum;
+  position?: ToastPositionEnum;
+  durationInMilliSeconds?: number;
+  isToastOpen: boolean;
+  onCloseToast: (value: boolean) => void;
+}

package/src/components/Tooltip/assets/class-variant.ts

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+import { TooltipVariantEnum } from "../enum";
+
+export const contentVariants = cva(
+  "bg-chia-200 rounded-500 p-400 px-3 py-2 border z-50",
+  {
+    variants: {
+      variant: {
+        [TooltipVariantEnum.ERROR]: "text-red-600 border-blackberry-300",
+        [TooltipVariantEnum.TRIGGER]: "border-chia-400",
+      },
+    },
+  }
+);
+
+export const pointerVariants = cva(
+  "absolute -top-[9px] mx-4 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent",
+  {
+    variants: {
+      variant: {
+        [TooltipVariantEnum.ERROR]: "border-b-blackberry-300",
+        [TooltipVariantEnum.TRIGGER]: "border-b-chia-400",
+      },
+    },
+  }
+);

package/src/components/Tooltip/components/Content/index.tsx

@@ -0,0 +1,93 @@
+import { View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import { ContentProps } from "./types";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum";
+import { contentVariants, pointerVariants } from "../../assets/class-variant";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { Seal } from "../../../Seal";
+import Typography from "../../../Typography";
+import { SizeEnum } from "../../../../enums";
+
+export function Content(props: ContentProps) {
+  const {
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    className,
+    isVisible,
+    translateX,
+    pointerOffset,
+    pointerClassName,
+    containerClassName,
+    onLayout,
+  } = props;
+
+  const pointerStyle = pointerVariants({ variant });
+  const contentStyle = contentVariants({ variant });
+  const mergedContainerClassName = merge(
+    "absolute top-full mt-[9px] z-50 self-center",
+    containerClassName
+  );
+
+  function renderContent() {
+    if (variant === TooltipVariantEnum.ERROR) {
+      return (
+        <View className="flex flex-row items-center gap-2">
+          <Seal variant={SealVariantEnum.ERROR} size={SizeEnum.SMALL} />
+          {typeof message === "string" ? (
+            <Typography
+              className="text-blackberry-500"
+              variant="body_small"
+              weight="600"
+            >
+              {message}
+            </Typography>
+          ) : (
+            message
+          )}
+        </View>
+      );
+    }
+
+    return typeof message === "string" ? (
+      <Typography className="text-chia-900" variant="body_small" weight="600">
+        {message}
+      </Typography>
+    ) : (
+      message
+    );
+  }
+
+  if (!isVisible) return null;
+
+  const mappedPointerPosition: Record<
+    TooltipPointerOffsetEnum,
+    "flex-start" | "flex-end" | "center"
+  > = {
+    [TooltipPointerOffsetEnum.LEFT]: "flex-start",
+    [TooltipPointerOffsetEnum.RIGHT]: "flex-end",
+    [TooltipPointerOffsetEnum.CENTER]: "center",
+  };
+
+  return (
+    <View
+      className={mergedContainerClassName}
+      style={{
+        transform: [{ translateX: translateX ?? 0 }],
+      }}
+      onLayout={onLayout}
+    >
+      <View className={merge(contentStyle, className)}>
+        {renderContent()}
+        <View
+          className={merge(pointerStyle, pointerClassName)}
+          style={{
+            alignSelf:
+              mappedPointerPosition[
+                pointerOffset ?? TooltipPointerOffsetEnum.CENTER
+              ],
+          }}
+        />
+      </View>
+    </View>
+  );
+}

package/src/components/Tooltip/components/Content/types.ts

@@ -0,0 +1,14 @@
+import { LayoutChangeEvent } from "react-native";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum";
+
+export interface ContentProps {
+  message: string | React.ReactNode;
+  variant?: TooltipVariantEnum;
+  className?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+  isVisible: boolean;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  translateX?: number;
+  pointerOffset?: TooltipPointerOffsetEnum;
+}

package/src/components/Tooltip/components/index.ts

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

package/src/components/Tooltip/enum/index.ts

@@ -0,0 +1,10 @@
+export enum TooltipVariantEnum {
+  ERROR = "error",
+  TRIGGER = "trigger",
+}
+
+export enum TooltipPointerOffsetEnum {
+  LEFT = "left",
+  CENTER = "center",
+  RIGHT = "right",
+}

package/src/components/Tooltip/hooks/index.ts

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

package/src/components/Tooltip/hooks/tooltip-position.ts

@@ -0,0 +1,85 @@
+import { useState, useCallback, useMemo } from "react";
+import { Dimensions, LayoutChangeEvent, LayoutRectangle } from "react-native";
+import { TooltipPointerOffsetEnum } from "../enum";
+
+interface TooltipPositionData {
+  triggerLayout: LayoutRectangle | null;
+  tooltipLayout: LayoutRectangle | null;
+  screenWidth: number;
+  adjustedPosition: {
+    translateX?: number;
+  };
+  pointerOffset?: TooltipPointerOffsetEnum;
+}
+
+export function useTooltipPosition(): {
+  positionData: TooltipPositionData;
+  onTriggerLayout: (event: LayoutChangeEvent) => void;
+  onTooltipLayout: (event: LayoutChangeEvent) => void;
+} {
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(
+    null
+  );
+  const [tooltipLayout, setTooltipLayout] = useState<LayoutRectangle | null>(
+    null
+  );
+
+  const screenWidth = Dimensions.get("window").width;
+
+  const onTriggerLayout = useCallback((event: LayoutChangeEvent) => {
+    setTriggerLayout(event.nativeEvent.layout);
+  }, []);
+
+  const onTooltipLayout = useCallback((event: LayoutChangeEvent) => {
+    setTooltipLayout(event.nativeEvent.layout);
+  }, []);
+
+  const pointerOffset = useMemo(() => {
+    if (!triggerLayout || !tooltipLayout)
+      return TooltipPointerOffsetEnum.CENTER;
+
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+
+    if (elementPositionX === 0) {
+      return TooltipPointerOffsetEnum.LEFT;
+    }
+
+    if (tooltipPositionXAxis > screenWidth) {
+      return TooltipPointerOffsetEnum.RIGHT;
+    }
+
+    return TooltipPointerOffsetEnum.CENTER;
+  }, [triggerLayout, tooltipLayout]);
+
+  const calculateAdjustedPosition = useCallback(() => {
+    if (!triggerLayout || !tooltipLayout) {
+      return { translateX: 0 };
+    }
+
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+
+    if (elementPositionX === 0) {
+      return { translateX: -tooltipLayout.x };
+    }
+
+    if (tooltipPositionXAxis > screenWidth) {
+      return { translateX: tooltipLayout.x };
+    }
+
+    return { translateX: 0 };
+  }, [triggerLayout, tooltipLayout, screenWidth]);
+
+  return {
+    positionData: {
+      triggerLayout,
+      tooltipLayout,
+      screenWidth,
+      adjustedPosition: calculateAdjustedPosition(),
+      pointerOffset,
+    },
+    onTriggerLayout,
+    onTooltipLayout,
+  };
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,38 @@
+import { View } from "react-native";
+import { Content } from "./components";
+import { useTooltipPosition } from "./hooks";
+import { TooltipProps } from "./types";
+
+import { TooltipVariantEnum } from "./enum";
+
+export function Tooltip(props: TooltipProps) {
+  const {
+    children,
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    isVisible,
+    className,
+    containerClassName,
+    pointerClassName,
+  } = props;
+  const { positionData, onTriggerLayout, onTooltipLayout } =
+    useTooltipPosition();
+
+  return (
+    <View className="relative" onLayout={onTriggerLayout}>
+      {children}
+
+      <Content
+        message={message}
+        variant={variant}
+        isVisible={isVisible}
+        onLayout={onTooltipLayout}
+        translateX={positionData.adjustedPosition.translateX}
+        pointerOffset={positionData.pointerOffset}
+        className={className}
+        containerClassName={containerClassName}
+        pointerClassName={pointerClassName}
+      />
+    </View>
+  );
+}

package/src/components/Tooltip/types.ts

@@ -0,0 +1,13 @@
+import { ViewStyle } from "react-native";
+import { TooltipVariantEnum } from "./enum";
+
+export interface TooltipProps {
+  children?: React.ReactNode;
+  message: React.ReactNode;
+  variant?: TooltipVariantEnum;
+  className?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+  isVisible: boolean;
+  style?: ViewStyle;
+}

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

@@ -27,7 +27,7 @@ const getWeightVariants = () => {
   };
 };
 
-export const typographyVariants = cva("font-nunito-regular", {
+export const typographyVariants = cva("font-nunito-regular text-chia-900", {
   variants: {
     variant: {
       label_small: "text-[12px] leading-[16px]",

package/src/components/index.ts

@@ -2,6 +2,9 @@ export * from "./Avatar";
 export * from "./Button";
 export type * from "./Button/types";
 
+export * from "./ChatBubble";
+export type * from "./ChatBubble/types";
+
 export * from "./Chip";
 export * from "./Chip/types";
 export * from "./Chip/enums";
@@ -10,13 +13,13 @@ export * from "./InformationStatus";
 export type * from "./InformationStatus/types";
 export * from "./InformationStatus/enums";
 
-export * from "./InputCheckbox";
-export type * from "./InputCheckbox/types";
-export * from "./InputCheckbox/enums";
+export * from "./CheckboxInput";
+export type * from "./CheckboxInput/types";
+export * from "./CheckboxInput/enums";
 
-export * from "./InputOTP";
-export type * from "./InputOTP/types";
-export * from "./InputOTP/enums";
+export * from "./OtpInput";
+export type * from "./OtpInput/types";
+export * from "./OtpInput/enums";
 
 export * from "./HighlightedText";
 export type * from "./HighlightedText/types";
@@ -37,3 +40,26 @@ export * from "./Toggle/enums";
 
 export * from "./Typography";
 export type * from "./Typography/types";
+
+export * from "./Toast";
+export type * from "./Toast/types";
+export * from "./Toast/enums";
+
+export * from "./Tooltip";
+export type * from "./Tooltip/types";
+
+export * from "./ListButton";
+export type * from "./ListButton/types";
+export * from "./ListButton/enums";
+
+export * from "./TextInput";
+export type * from "./TextInput/types";
+export * from "./TextInput/enums";
+
+export * from "./SelectButton";
+export type * from "./SelectButton/types";
+export * from "./SelectButton/enums";
+
+export * from "./RadioInput";
+export type * from "./RadioInput/types";
+export * from "./RadioInput/enums";

package/src/{components/Avatar/enums/size.ts → enums/corners.ts}

@@ -1,5 +1,4 @@
-export enum AvatarSizeEnum {
-  XSMALL = "xsmall",
+export enum CornersEnum {
   SMALL = "small",
   MEDIUM = "medium",
   LARGE = "large",

package/src/enums/index.ts

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

package/src/enums/size.ts

@@ -0,0 +1,10 @@
+export enum SizeEnum {
+  XXSMALL = "xxsmall",
+  XSMALL = "xsmall",
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+  XLARGE = "xlarge",
+  XXLARGE = "xxlarge",
+  XXXLARGE = "xxxlarge",
+}

package/src/index.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./enums";

package/src/storybook-utils/components/CodeBlock/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View, Text, ScrollView } from "react-native";
+import { CodeBlockProps } from "./types";
+
+export function CodeBlock({
+  children,
+  title,
+  showLineNumbers = false,
+  maxHeight = 400,
+}: CodeBlockProps) {
+  const lines = children.trim().split("\n");
+
+  return (
+    <View className="border border-chia-400 rounded-400 overflow-hidden mb-4">
+      {title && (
+        <View className="bg-chia-200 px-4 py-2 border-b border-chia-400">
+          <Text className="text-chia-900 font-semibold text-sm">{title}</Text>
+        </View>
+      )}
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{ maxHeight }}
+      >
+        <View className="bg-chia-100 p-4 w-full">
+          {lines.map((line, index) => (
+            <View key={index} className="flex-row">
+              {showLineNumbers && (
+                <Text className="text-chia-600 font-mono text-xs mr-4 w-8 text-right">
+                  {index + 1}
+                  {"  "}
+                </Text>
+              )}
+              <Text className="text-chia-900 font-mono text-xs flex-1">
+                {line || " "}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+export default CodeBlock;

package/src/storybook-utils/components/CodeBlock/types.ts

@@ -0,0 +1,6 @@
+export interface CodeBlockProps {
+  children: string;
+  title?: string;
+  showLineNumbers?: boolean;
+  maxHeight?: number;
+}

package/src/storybook-utils/components/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Storybook Utilities - Documentation Components
+ *
+ * These components are NOT part of the design system.
+ * They are utility components specifically for Storybook documentation.
+ *
+ * DO NOT export these from the main components index.
+ * DO NOT create stories for these components.
+ */
+
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock/types";

package/src/storybook-utils/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Storybook Utilities
+ *
+ * These are utility components and helpers specifically for Storybook documentation.
+ * They are NOT part of the design system and should not be exported from the main package.
+ */
+
+export * from "./components";

package/src/styles/index.ts

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

package/src/styles/mixins/index.ts

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

package/src/styles/mixins/shadows/elevation-down-100.tsx

@@ -0,0 +1,2 @@
+export const elevationDown100 =
+  "1px 1px 2px 0 rgba(119, 128, 128, 0.02), 1px 1px 4px 0 rgba(119, 128, 128, 0.02), 2px 2px 6px 0 rgba(119, 128, 128, 0.02), 2px 2px 16px 0 rgba(119, 128, 128, 0.06)";

package/src/styles/mixins/shadows/elevation-down-200.tsx

@@ -0,0 +1,2 @@
+export const elevationDown200 =
+  "2px 2px 4px 0 rgba(119, 128, 128, 0.08), 4px 4px 6px 0 rgba(119, 128, 128, 0.06), 6px 6px 8px 0 rgba(119, 128, 128, 0.04), 8px 8px 24px 0 rgba(119, 128, 128, 0.08)";

package/src/styles/mixins/shadows/elevation-down-300.tsx

@@ -0,0 +1,2 @@
+export const elevation300 =
+  "4px 4px 4px 0 rgba(119, 128, 128, 0.08), 12px 12px 6px 0 rgba(119, 128, 128, 0.06), 18px 18px 16px 0 rgba(119, 128, 128, 0.04), 12px 12px 40px 0 rgba(119, 128, 128, 0.24)";

package/src/styles/mixins/shadows/elevation-up-100.tsx

@@ -0,0 +1,2 @@
+export const elevationUp100 =
+  "0 -2px 2px 0 rgba(119, 128, 128, 0.02), 0 -4px 4px 0 rgba(119, 128, 128, 0.02), 0 -8px 16px 0 rgba(119, 128, 128, 0.02), 0 -8px 32px 0 rgba(119, 128, 128, 0.08)";

package/src/styles/mixins/shadows/elevation-up-200.tsx

@@ -0,0 +1,2 @@
+export const elevationUp200 =
+  "0 -2px 2px 0 rgba(119, 128, 128, 0.04), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.06), 0 -12px 32px 0 rgba(119, 128, 128, 0.12)";

package/src/styles/mixins/shadows/elevation-up-300.tsx

@@ -0,0 +1,2 @@
+export const elevationUp300 =
+  "0 -2px 2px 0 rgba(119, 128, 128, 0.06), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.12), 0 -16px 48px 0 rgba(119, 128, 128, 0.24)";

package/src/styles/mixins/shadows/index.ts

@@ -0,0 +1,6 @@
+export * from "./elevation-down-100";
+export * from "./elevation-down-200";
+export * from "./elevation-down-300";
+export * from "./elevation-up-100";
+export * from "./elevation-up-200";
+export * from "./elevation-up-300";

package/dist/README.md

@@ -1,57 +0,0 @@
-![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
-
-# getting started
-
-```sh
-npx create-expo-app --template expo-template-storybook AwesomeStorybook
-```
-
-or
-
-```sh
-yarn create expo-app --template expo-template-storybook AwesomeStorybook
-```
-
-# app
-
-```sh
-yarn start
-```
-
-# RN Storybook (ondevice)
-
-In this template you can now run `yarn storybook` to start ondevice storybook or `yarn start` to start your expo app.
-This works via env variables and expo constants.
-
-```sh
-# either
-yarn storybook
-
-# ios
-yarn storybook:ios
-
-# android
-yarn storybook:android
-```
-
-If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader
-
-To update the stories one time
-
-```sh
-yarn storybook-generate
-```
-
-# Web
-
-Start react native web storybook:
-
-```
-yarn storybook:web
-```
-
-build react native web storybook:
-
-```sh
-yarn build-storybook
-```