@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.20

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

@@ -1,407 +0,0 @@
-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/Chip/enums/chip-size.ts

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

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

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Chip } from ".";
-
-import { View } from "react-native";
-import { ChipSizeEnum, ChipVariantEnum } from "./enums";
-import { SealVariantEnum } from "../Seal/enums";
-
-const meta: Meta<typeof Chip> = {
-  title: "Components/Chip",
-  component: Chip,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: Object.values(ChipSizeEnum),
-      description: "Size of the chip",
-      table: {
-        type: { summary: Object.values(ChipSizeEnum).join(" | ") },
-        defaultValue: { summary: "medium" },
-      },
-    },
-    sealVariant: {
-      control: { type: "select" },
-      options: Object.values(SealVariantEnum),
-      description: "Style variant of the chip",
-      table: {
-        type: { summary: Object.values(SealVariantEnum).join(" | ") },
-        defaultValue: { summary: SealVariantEnum.ADD },
-      },
-    },
-    variant: {
-      control: { type: "select" },
-      options: Object.values(ChipVariantEnum),
-      description: "Visual style of the chip",
-      table: {
-        type: { summary: Object.values(ChipVariantEnum).join(" | ") },
-        defaultValue: { summary: ChipVariantEnum.OUTLINE },
-      },
-    },
-    label: {
-      control: "text",
-      description: "Label text of the chip",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    className: {
-      control: "text",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Chip>;
-
-export const Default: Story = {
-  args: {
-    label: "Add",
-  },
-};
-
-export const AllVariants: Story = {
-  render: (args) => (
-    <View className="flex flex-wrap gap-300">
-      <Chip {...args} sealVariant={SealVariantEnum.ADD} label="Add" />
-      <Chip {...args} sealVariant={SealVariantEnum.SUCCESS} label="Success" />
-      <Chip {...args} sealVariant={SealVariantEnum.ERROR} label="Error" />
-      <Chip {...args} sealVariant={SealVariantEnum.ALERT} label="Alert" />
-      <Chip {...args} sealVariant={SealVariantEnum.MINUS} label="Minus" />
-      <Chip {...args} sealVariant={SealVariantEnum.RIGHT} label="Right" />
-      <Chip {...args} sealVariant={SealVariantEnum.LEFT} label="Left" />
-    </View>
-  ),
-  args: {
-    size: ChipSizeEnum.MEDIUM,
-  },
-};
-
-export const Sizes: Story = {
-  render: (args) => (
-    <View className="flex flex-wrap gap-300 items-center">
-      <Chip {...args} size={ChipSizeEnum.MEDIUM} label="Medium" />
-      <Chip {...args} size={ChipSizeEnum.LARGE} label="Large" />
-    </View>
-  ),
-  args: {
-    sealVariant: SealVariantEnum.ADD,
-  },
-};

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

@@ -1,110 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { HighlightedText } from ".";
-
-const meta = {
-  title: "Components/HighlightedText",
-  component: HighlightedText,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    text: {
-      control: "text",
-    },
-    highlightText: {
-      control: "text",
-    },
-    className: {
-      control: "text",
-    },
-    highlightTextClassName: {
-      control: "text",
-    },
-    reverse: {
-      control: "boolean",
-      description:
-        "If true, the highlighted text will be displayed before the regular text.",
-    },
-  },
-} satisfies Meta<typeof HighlightedText>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    text: "This is a default text",
-  },
-};
-
-export const WithHighlight: Story = {
-  args: {
-    text: "This is text with",
-    highlightText: "highlighted content",
-  },
-};
-
-export const LabelVariant: Story = {
-  args: {
-    text: "Label text",
-    highlightText: "important",
-    className: "text-label_medium_300",
-    highlightTextClassName: "text-label_medium_700",
-  },
-};
-
-export const BodyVariant: Story = {
-  args: {
-    text: "Body text content",
-    highlightText: "highlighted part",
-    className: "text-body_medium_300",
-    highlightTextClassName: "text-body_medium_700",
-  },
-};
-
-export const TitleVariant: Story = {
-  args: {
-    text: "Title text content",
-    highlightText: "highlighted part",
-    className: "text-title_medium_300",
-    highlightTextClassName: "text-title_medium_700",
-  },
-};
-
-export const HeadlineVariant: Story = {
-  args: {
-    text: "Headline text content",
-    highlightText: "highlighted part",
-    className: "text-headline_medium_300",
-    highlightTextClassName: "text-headline_medium_700",
-  },
-};
-
-export const DisplayVariant: Story = {
-  args: {
-    text: "Display text content",
-    highlightText: "highlighted part",
-    className: "text-display_medium_300",
-    highlightTextClassName: "text-display_medium_700",
-  },
-};
-
-export const WithCustomClasses: Story = {
-  args: {
-    text: "Styled text",
-    highlightText: "with custom styling",
-    className: "text-tangerine-900",
-    highlightTextClassName: "text-mango-900 underline",
-  },
-};
-
-export const ReverseHighlight: Story = {
-  args: {
-    text: "text with reverse highlight",
-    highlightText: "Highlighted first",
-    reverse: true,
-    className: "text-label_medium_300",
-    highlightTextClassName: "text-label_medium_700",
-  },
-};