@kivid/native-components 1.0.0-alpha.1 → 1.0.0-alpha.11

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

@@ -1,619 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-native";
-import { Title } from "./index";
-import { GradientDocLab200BasicPink } from "@butterfly/icons/native";
-
-import { View } from "react-native";
-import { HighlightedText } from "../HighlightedText";
-import { IconVariants } from "./components/icon/types";
-
-const meta = {
-  title: "Components/Title",
-  component: Title,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "Title component with multiple variants, sizes, and states matching the Figma design system.",
-      },
-    },
-  },
-  tags: ["autodocs"],
-  args: {
-    children: "Default Title",
-    head: <Title.Marker />,
-  },
-} satisfies Meta<typeof Title>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithMarker: Story = {
-  render: () => (
-    <View className="flex items-center">
-      <Title head={<Title.Marker />}>
-        <HighlightedText text="Title" highlightText="with marker" />
-      </Title>
-    </View>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Title with Marker with default value.",
-      },
-    },
-  },
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <View className="flex items-center">
-      <Title head={<Title.Icon variants={IconVariants.WARNING} />}>
-        <HighlightedText text="Warning" highlightText="icon" />
-      </Title>
-    </View>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Title with Icon with default value.",
-      },
-    },
-  },
-};
-
-export const WithCustomIcon: Story = {
-  render: () => {
-    return (
-      <View className="flex items-center">
-        <Title
-          head={
-            <Title.Icon
-              size="medium"
-              variants={IconVariants.CUSTOM}
-              customIcon={<GradientDocLab200BasicPink size={48} />}
-            />
-          }
-        >
-          <HighlightedText
-            text="Custom"
-            highlightText="icon"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_700"
-          />
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title with Icon receives a config to render a custom icon.",
-      },
-    },
-  },
-};
-
-export const Large2X: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_500"
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_500"
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            className="mt-400"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="2xlarge"
-          head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title
-          variant="2xlarge"
-          head={<Title.Marker size="medium" color="chia" />}
-        >
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title 2x large with Headline, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const LargeX: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-headline_medium_300"
-            highlightTextClassName="text-headline_medium_500"
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-headline_medium_300"
-            highlightTextClassName="text-headline_medium_500"
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="xlarge"
-          head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title
-          variant="xlarge"
-          head={<Title.Marker size="medium" color="chia" />}
-        >
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title x large with Headline, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const Large: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-headline_small_300"
-            highlightTextClassName="text-headline_small_500"
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-headline_small_300"
-            highlightTextClassName="text-headline_small_500"
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="large"
-          head={<Title.Icon variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="large" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title large with Headline, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const Medium: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-title_large_300"
-            highlightTextClassName="text-title_large_500"
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-title_large_300"
-            highlightTextClassName="text-title_large_500"
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="medium"
-          head={<Title.Icon variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="medium" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title medium with Headline, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const Small: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-title_medium_300"
-            highlightTextClassName="text-title_medium_700"
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-title_medium_300"
-            highlightTextClassName="text-title_medium_700"
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_small_500"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_small_500"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="small"
-          head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="small" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title small with Headline, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const XSmall: Story = {
-  render: () => {
-    function renderContent() {
-      return (
-        <>
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-title_small_300"
-            highlightTextClassName="text-title_small_700"
-          />
-          <HighlightedText
-            text="Sub"
-            highlightText="highlight"
-            className="text-title_small_300"
-            highlightTextClassName="text-title_small_700"
-          />
-          <HighlightedText
-            text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_small_500"
-          />
-          <HighlightedText
-            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_small_500"
-          />
-        </>
-      );
-    }
-
-    return (
-      <View className="flex items-center gap-700">
-        <Title
-          variant="xsmall"
-          head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
-        >
-          {renderContent()}
-        </Title>
-
-        <Title variant="xsmall" head={<Title.Marker color="chia" />}>
-          {renderContent()}
-        </Title>
-      </View>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Title x small with Headline, subtitle and multiples texts",
-      },
-    },
-  },
-};
-
-export const MarkerSizesAndVariants: Story = {
-  render: () => (
-    <>
-      <View className="flex flex-column gap-400 mb-700">
-        <HighlightedText
-          text="Small"
-          className="text-label_small_700 text-center"
-        />
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="blackberry" size="small" />}>
-            <HighlightedText
-              text="Blackberry"
-              className="text-label_small_700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="chia" size="small" />}>
-            <HighlightedText text="Chia" className="text-label_small_700" />
-          </Title>
-          <Title head={<Title.Marker color="java" size="small" />}>
-            <HighlightedText text="Java" className="text-label_small_700" />
-          </Title>
-          <Title head={<Title.Marker color="grape" size="small" />}>
-            <HighlightedText text="Grape" className="text-label_small_700" />
-          </Title>
-        </View>
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="mango" size="small" />}>
-            <HighlightedText text="Mango" className="text-label_small_700" />
-          </Title>
-          <Title head={<Title.Marker color="tangerine" size="small" />}>
-            <HighlightedText
-              text="Tangerine"
-              className="text-label_small_700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="pear" size="small" />}>
-            <HighlightedText text="Pear" className="text-label_small_700" />
-          </Title>
-          <Title head={<Title.Marker color="ghost" size="small" />}>
-            <HighlightedText text="Ghost" className="text-label_small_700" />
-          </Title>
-        </View>
-      </View>
-
-      <View className="flex flex-column gap-400">
-        <HighlightedText
-          text="Medium"
-          className="text-label_medium_700 text-center"
-        />
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="blackberry" />}>
-            <HighlightedText
-              text="Blackberry"
-              className="text-label_medium_700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="chia" />}>
-            <HighlightedText text="Chia" className="text-label_medium_700" />
-          </Title>
-          <Title head={<Title.Marker color="java" />}>
-            <HighlightedText text="Java" className="text-label_medium_700" />
-          </Title>
-          <Title head={<Title.Marker color="grape" />}>
-            <HighlightedText text="Grape" className="text-label_medium_700" />
-          </Title>
-        </View>
-
-        <View className="flex flex-row gap-300 justify-center">
-          <Title head={<Title.Marker color="mango" />}>
-            <HighlightedText text="Mango" className="text-label_medium_700" />
-          </Title>
-          <Title head={<Title.Marker color="tangerine" />}>
-            <HighlightedText
-              text="Tangerine"
-              className="text-label_medium_700"
-            />
-          </Title>
-          <Title head={<Title.Marker color="pear" />}>
-            <HighlightedText text="Pear" className="text-label_medium_700" />
-          </Title>
-          <Title head={<Title.Marker color="ghost" />}>
-            <HighlightedText text="Ghost" className="text-label_medium_700" />
-          </Title>
-        </View>
-      </View>
-    </>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complete showcase of the Title.Marker design system matching the Figma specifications with all variants, sizes, and states.",
-      },
-    },
-  },
-};
-
-export const IconSizesAndVariants: Story = {
-  render: () => (
-    <>
-      <View className="flex flex-column gap-300 mb-500">
-        <HighlightedText
-          text="Small"
-          className="text-label_small_700 text-center"
-        />
-
-        <View className="flex flex-row gap-300">
-          <Title head={<Title.Icon size="small" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" className="text-label_small_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="small" variants={IconVariants.WARNING} />}
-          >
-            <HighlightedText text="warning" className="text-label_small_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="small" variants={IconVariants.ERROR} />}
-          >
-            <HighlightedText text="error" className="text-label_small_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
-          >
-            <HighlightedText text="success" className="text-label_small_700" />
-          </Title>
-        </View>
-      </View>
-
-      <View className="flex flex-column gap-300 mb-500">
-        <HighlightedText
-          text="Medium"
-          className="text-label_medium_700 text-center"
-        />
-
-        <View className="flex flex-row gap-300">
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.ADD} />}
-          >
-            <HighlightedText text="add" className="text-label_medium_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.WARNING} />}
-          >
-            <HighlightedText text="warning" className="text-label_medium_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.ERROR} />}
-          >
-            <HighlightedText text="error" className="text-label_medium_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="medium" variants={IconVariants.SUCCESS} />}
-          >
-            <HighlightedText text="success" className="text-label_medium_700" />
-          </Title>
-        </View>
-      </View>
-
-      <View className="flex flex-column gap-300 mb-500">
-        <HighlightedText
-          text="Large"
-          className="text-label_large_700 text-center"
-        />
-
-        <View className="flex flex-row gap-300">
-          <Title head={<Title.Icon size="large" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" className="text-label_large_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="large" variants={IconVariants.WARNING} />}
-          >
-            <HighlightedText text="warning" className="text-label_large_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="large" variants={IconVariants.ERROR} />}
-          >
-            <HighlightedText text="error" className="text-label_large_700" />
-          </Title>
-          <Title
-            head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
-          >
-            <HighlightedText text="success" className="text-label_large_700" />
-          </Title>
-        </View>
-      </View>
-    </>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Complete showcase of the Title.Marker design system matching the Figma specifications with all variants, sizes, and states.",
-      },
-    },
-  },
-};

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

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import { Toggle } from './index';
-import type { ToggleProps } from './types';
-import { useState } from 'react';
-import { VariantEnum } from './enums';
-
-const meta: Meta<ToggleProps> = {
-  title: 'Components/Toggle',
-  component: Toggle,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    checked: {
-      control: 'boolean',
-      description: 'Whether the toggle is checked',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the toggle is disabled',
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Callback fired when the toggle state changes',
-    },
-    variant: {
-      control: 'select',
-      options: Object.values(VariantEnum),
-      description: 'The variant of the toggle',
-      table: {
-        type: { summary: Object.values(VariantEnum).join(" | ") },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    checked: false,
-    disabled: false,
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    checked: true,
-    disabled: false,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    checked: false,
-    disabled: true,
-  },
-};
-
-export const DisabledChecked: Story = {
-  args: {
-    checked: true,
-    disabled: true,
-  },
-};
-
-export const Interactive: Story = {
-  args: {
-    checked: false,
-    disabled: false,
-  },
-  render: (args) => {
-    const [checked, setChecked] = useState(args.checked);
-
-    return (
-      <Toggle
-        {...args}
-        checked={checked}
-        onChange={(newChecked) => {
-          setChecked(newChecked);
-          args.onChange?.(newChecked);
-        }}
-      />
-    );
-  },
-};