mainstack-design-system 0.0.7 → 0.0.8

package/src/stories/InputFields/Select/CountrySelectWrapper.tsx

@@ -1,25 +0,0 @@
-/** @format */
-
-import {
-  CountrySelect,
-  ICountrySelectProps,
-} from "components/InputFields/SelectInput";
-import { useState } from "react";
-
-const CountrySelectWrapper = (props: ICountrySelectProps) => {
-  const [selectValue, setSelectValue] = useState<{
-    value: string;
-    label: string;
-  }>();
-  return (
-    <CountrySelect
-      {...props}
-      value={selectValue}
-      onChange={(e) => {
-        setSelectValue(e);
-      }}
-    />
-  );
-};
-
-export default CountrySelectWrapper;

package/src/stories/InputFields/Select/CreatableSelect.stories.tsx

@@ -1,48 +0,0 @@
-/** @format */
-
-import type { Meta } from "@storybook/react";
-import CreatableSelectWrapper from "./CreatableSelectWrapper";
-import { CreatableSelectInput } from "components/InputFields/SelectInput";
-
-const meta: Meta<typeof CreatableSelectInput> = {
-  title: "Components/InputFields/CreatableSelect",
-  component: CreatableSelectWrapper,
-};
-
-export default meta;
-type Story = typeof meta;
-
-export const Select: Story = {
-  args: {
-    label: "Title",
-    id: "title",
-    name: "title",
-    placeholder: "Select an option",
-    options: [
-      { value: "mr", label: "Mr" },
-      { value: "mrs", label: "Mrs" },
-      { value: "miss", label: "Miss" },
-      { value: "ms", label: "Ms" },
-      { value: "dr", label: "Dr" },
-      { value: "other", label: "Other" },
-    ],
-  },
-};
-
-export const MultiSelect: Story = {
-  args: {
-    label: "Title",
-    id: "title",
-    name: "title",
-    isMulti: true,
-    placeholder: "Select an option",
-    options: [
-      { value: "mr", label: "Mr" },
-      { value: "mrs", label: "Mrs" },
-      { value: "miss", label: "Miss" },
-      { value: "ms", label: "Ms" },
-      { value: "dr", label: "Dr" },
-      { value: "other", label: "Other" },
-    ],
-  },
-};

package/src/stories/InputFields/Select/CreatableSelectWrapper.tsx

@@ -1,25 +0,0 @@
-/** @format */
-
-import {
-  ISelectInputProps,
-  CreatableSelectInput,
-} from "components/InputFields/SelectInput";
-import { useState } from "react";
-
-const CreatableSelectWrapper = (props: ISelectInputProps) => {
-  const [selectValue, setSelectValue] = useState<{
-    value: string;
-    label: string;
-  }>();
-  return (
-    <CreatableSelectInput
-      {...props}
-      value={selectValue}
-      onChange={(e) => {
-        setSelectValue(e);
-      }}
-    />
-  );
-};
-
-export default CreatableSelectWrapper;

package/src/stories/InputFields/Select/PhoneNumberInput.stories.tsx

@@ -1,33 +0,0 @@
-/** @format */
-
-import type { Meta } from "@storybook/react";
-import { PhoneNumberInput as PhoneNumberInputType } from "components/InputFields/SelectInput";
-import PhoneNumberInputWrapper from "./PhoneNumberInputWrapper";
-
-const meta: Meta<typeof PhoneNumberInputType> = {
-  title: "Components/InputFields/PhoneNumberInput",
-  component: PhoneNumberInputWrapper,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = typeof meta;
-
-export const PhoneNumberInput: Story = {
-  args: {
-    placeholder: "+111 111111 11",
-  },
-};
-
-export const PhoneNumberInputWithLabel: Story = {
-  args: {
-    label: "Phone Number",
-  },
-};
-
-export const PhoneNumberInputWithLabelAndSubtext: Story = {
-  args: {
-    label: "Phone Number",
-    subtext: "Enter your phone number",
-  },
-};

package/src/stories/InputFields/Select/PhoneNumberInputWrapper.tsx

@@ -1,21 +0,0 @@
-/** @format */
-import {
-  IPhoneNumberInputProps,
-  PhoneNumberInput,
-} from "components/InputFields/SelectInput";
-import { useState } from "react";
-
-const PhoneNumberInputWrapper = (props: IPhoneNumberInputProps) => {
-  const [selectValue, setSelectValue] = useState();
-  return (
-    <PhoneNumberInput
-      value={selectValue}
-      onChange={(e: any) => {
-        setSelectValue(e);
-      }}
-      {...props}
-    />
-  );
-};
-
-export default PhoneNumberInputWrapper;

package/src/stories/InputFields/Select/Select.stories.tsx

@@ -1,49 +0,0 @@
-/** @format */
-
-import type { Meta } from "@storybook/react";
-import { SelectInput } from "components/InputFields/SelectInput";
-import SelectWrapper from "./SelectWrapper";
-
-const meta: Meta<typeof SelectInput> = {
-  title: "Components/InputFields/Select",
-  component: SelectWrapper,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = typeof meta;
-
-export const Select: Story = {
-  args: {
-    label: "Title",
-    id: "title",
-    name: "title",
-    placeholder: "Select an option",
-    options: [
-      { value: "mr", label: "Mr" },
-      { value: "mrs", label: "Mrs" },
-      { value: "miss", label: "Miss" },
-      { value: "ms", label: "Ms" },
-      { value: "dr", label: "Dr" },
-      { value: "other", label: "Other" },
-    ],
-  },
-};
-
-export const MultiSelect: Story = {
-  args: {
-    label: "Title",
-    id: "title",
-    name: "title",
-    isMulti: true,
-    placeholder: "Select an option",
-    options: [
-      { value: "mr", label: "Mr" },
-      { value: "mrs", label: "Mrs" },
-      { value: "miss", label: "Miss" },
-      { value: "ms", label: "Ms" },
-      { value: "dr", label: "Dr" },
-      { value: "other", label: "Other" },
-    ],
-  },
-};

package/src/stories/InputFields/Select/SelectWrapper.tsx

@@ -1,25 +0,0 @@
-/** @format */
-
-import {
-  SelectInput,
-  ISelectInputProps,
-} from "components/InputFields/SelectInput/";
-import { useState } from "react";
-
-const SelectWrapper = (props: ISelectInputProps) => {
-  const [selectValue, setSelectValue] = useState<{
-    value: string;
-    label: string;
-  }>();
-  return (
-    <SelectInput
-      {...props}
-      value={selectValue}
-      onChange={(e) => {
-        setSelectValue(e);
-      }}
-    />
-  );
-};
-
-export default SelectWrapper;

package/src/stories/InputFields/TextArea.stories.ts

@@ -1,22 +0,0 @@
-/** @format */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import TextArea from "components/InputFields/TextArea";
-
-const meta: Meta<typeof TextArea> = {
-  title: "Components/InputFields/TextArea",
-  component: TextArea,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof TextArea>;
-
-export const TextAreaField: Story = {
-  args: {
-    label: "Text Area",
-    name: "sample",
-    id: "sample",
-    textLimit: 20,
-  },
-};

package/src/stories/InputFields/UsernameInput.stories.ts

@@ -1,22 +0,0 @@
-/** @format */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import UsernameInput from "components/InputFields/UsernameInput";
-
-const meta: Meta<typeof UsernameInput> = {
-  title: "Components/InputFields/UsernameInput",
-  component: UsernameInput,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof UsernameInput>;
-
-export const UsernameField: Story = {
-  args: {
-    label: "Username",
-    name: "sample",
-    id: "sample",
-    type: "text",
-  },
-};

package/src/stories/Tiles/Tile.stories.tsx

@@ -1,71 +0,0 @@
-/** @format */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import TileWrapper from "./TileWrapper";
-import { LocalFloristFilledIcon } from "icons";
-
-const meta: Meta<typeof TileWrapper> = {
-  title: "Components/Tiles",
-  component: TileWrapper,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof TileWrapper>;
-
-export const TileWithTrailingIconAndSubtext: Story = {
-  args: {
-    title: "Tile",
-    icon: <LocalFloristFilledIcon fontSize={"28px"} />,
-    iconPosition: "trailing",
-    subText:
-      "Lorem ipsum dolor sit amet consectetur. Suscipit ac amet bibendum convallis quis turpis dolor elit ",
-  },
-};
-
-export const TileWithTopRadioIconAndSubtext: Story = {
-  args: {
-    title: "Tile",
-    icon: <LocalFloristFilledIcon fontSize={"28px"} />,
-    iconPosition: "top",
-    hasRadioButton: true,
-    subText:
-      "Lorem ipsum dolor sit amet consectetur. Suscipit ac amet bibendum convallis quis turpis dolor elit ",
-  },
-};
-export const TileWithTopIconAndSubtext: Story = {
-  args: {
-    title: "Tile",
-    icon: <LocalFloristFilledIcon fontSize={"28px"} />,
-    iconPosition: "top",
-    subText:
-      "Lorem ipsum dolor sit amet consectetur. Suscipit ac amet bibendum convallis quis turpis dolor elit ",
-  },
-};
-export const TileWithTopIcon: Story = {
-  args: {
-    title: "Tile",
-    icon: <LocalFloristFilledIcon fontSize={"28px"} />,
-    iconPosition: "top",
-    hasRadioButton: true,
-  },
-};
-export const TileWithSubtext: Story = {
-  args: {
-    title: "Tile",
-    hasRadioButton: true,
-    subText:
-      "Lorem ipsum dolor sit amet consectetur. Suscipit ac amet bibendum convallis quis turpis dolor elit ",
-  },
-};
-
-export const TileWithLeadingRadioIconAndSubtext: Story = {
-  args: {
-    title: "Tile",
-    icon: <LocalFloristFilledIcon fontSize={"28px"} />,
-    iconPosition: "leading",
-    hasRadioButton: true,
-    subText:
-      "Lorem ipsum dolor sit amet consectetur. Suscipit ac amet bibendum convallis quis turpis dolor elit ",
-  },
-};

package/src/stories/Tiles/TileWrapper.tsx

@@ -1,17 +0,0 @@
-/** @format */
-
-import Tile, { TileProps } from "components/Tiles";
-import { useState } from "react";
-
-const TileWrapper = (props: TileProps) => {
-  const [isSelected, setIsSelected] = useState(false);
-  return (
-    <Tile
-      {...props}
-      isSelected={isSelected}
-      onClick={() => setIsSelected((prev) => !prev)}
-    />
-  );
-};
-
-export default TileWrapper;

package/src/stories/Typography/DisplayText.stories.ts

@@ -1,52 +0,0 @@
-/** @format */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import Display from "components/Typography/Display";
-
-const meta: Meta<typeof Display> = {
-  title: "Components/Typography",
-  component: Display,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof Display>;
-
-export const DisplayText3XL: Story = {
-  args: {
-    size: "3xl",
-    children: "A sample text",
-  },
-};
-
-export const DisplayTextXXL: Story = {
-  args: {
-    size: "xxl",
-    children: "A sample text",
-  },
-};
-export const DisplayTextXL: Story = {
-  args: {
-    size: "xl",
-    children: "A sample text",
-  },
-};
-export const DisplayTextL: Story = {
-  args: {
-    size: "l",
-    children: "A sample text",
-  },
-};
-export const DisplayTextM: Story = {
-  args: {
-    size: "m",
-    children: "A sample text",
-  },
-};
-
-export const DisplayTextResponsive: Story = {
-  args: {
-    size: { xl: "3xl", lg: "xxl", md: "xl", base: "l" },
-    children: "A sample text",
-  },
-};

package/src/stories/Typography/HeadingText.stories.ts

@@ -1,86 +0,0 @@
-/** @format */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import Heading from "components/Typography/Heading";
-
-const meta: Meta<typeof Heading> = {
-  title: "Components/Typography",
-  component: Heading,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof Heading>;
-
-export const HeadingText3XL: Story = {
-  args: {
-    size: "3xl",
-    children: "A sample text",
-  },
-};
-export const HeadingTextXXL: Story = {
-  args: {
-    size: "xxl",
-    children: "A sample text",
-  },
-};
-export const HeadingTextXL: Story = {
-  args: {
-    size: "xl",
-    children: "A sample text",
-  },
-};
-export const HeadingTextL: Story = {
-  args: {
-    size: "l",
-    children: "A sample text",
-  },
-};
-export const HeadingTextM: Story = {
-  args: {
-    size: "m",
-    children: "A sample text",
-  },
-};
-export const HeadingTextS: Story = {
-  args: {
-    size: "s",
-    children: "A sample text",
-  },
-};
-export const HeadingTextXS: Story = {
-  args: {
-    size: "xs",
-    children: "A sample text",
-  },
-};
-export const HeadingTextXXS: Story = {
-  args: {
-    size: "xxs",
-    children: "A sample text",
-  },
-};
-export const HeadingText3XS: Story = {
-  args: {
-    size: "3xs",
-    children: "A sample text",
-  },
-};
-export const HeadingText4XS: Story = {
-  args: {
-    size: "4xs",
-    children: "A sample text",
-  },
-};
-export const HeadingText5XS: Story = {
-  args: {
-    size: "5xs",
-    children: "A sample text",
-  },
-};
-export const HeadingTextResponsive: Story = {
-  args: {
-    size: { xl: "3xl", lg: "xxl", md: "l", base: "s" },
-    children: "A sample text",
-  },
-};

package/src/stories/Typography/ParagraphText.stories.ts

@@ -1,62 +0,0 @@
-/** @format */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import Paragraph from "components/Typography/Paragraph";
-
-const meta: Meta<typeof Paragraph> = {
-  title: "Components/Typography",
-  component: Paragraph,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof Paragraph>;
-
-export const ParagraphTextXL: Story = {
-  args: {
-    size: "xl",
-    children: "A sample text",
-  },
-};
-export const ParagraphTextL: Story = {
-  args: {
-    size: "l",
-    children: "A sample text",
-  },
-};
-export const ParagraphTextM: Story = {
-  args: {
-    size: "m",
-    children: "A sample text",
-  },
-};
-export const ParagraphTextS: Story = {
-  args: {
-    size: "s",
-    children: "A sample text",
-  },
-};
-export const ParagraphTextXS: Story = {
-  args: {
-    size: "xs",
-    children: "A sample text",
-  },
-};
-export const ParagraphTextXXS: Story = {
-  args: {
-    size: "xxs",
-    children: "A sample text",
-  },
-};
-export const ParagraphText3XS: Story = {
-  args: {
-    size: "3xs",
-    children: "A sample text",
-  },
-};
-export const ParagraphTextResponsive: Story = {
-  args: {
-    size: { xl: "xl", lg: "l", md: "m", base: "s" },
-    children: "A sample text",
-  },
-};

package/src/stories/Typography/SubtitleText.stories.ts

@@ -1,93 +0,0 @@
-/** @format */
-
-import type { Meta, StoryObj } from "@storybook/react";
-import Subtitle from "components/Typography/Subtitle";
-
-const meta: Meta<typeof Subtitle> = {
-  title: "Components/Typography",
-  component: Subtitle,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof Subtitle>;
-
-export const SubtitleText3XL: Story = {
-  args: {
-    size: "3xl",
-    children: "A sample text",
-  },
-};
-export const SubtitleTextXXL: Story = {
-  args: {
-    size: "xxl",
-    children: "A sample text",
-  },
-};
-export const SubtitleTextXL: Story = {
-  args: {
-    size: "xl",
-    children: "A sample text",
-  },
-};
-export const SubtitleTextL: Story = {
-  args: {
-    size: "l",
-    children: "A sample text",
-  },
-};
-export const SubtitleTextM: Story = {
-  args: {
-    size: "m",
-    children: "A sample text",
-  },
-};
-export const SubtitleTextS: Story = {
-  args: {
-    size: "s",
-    children: "A sample text",
-  },
-};
-export const SubtitleTextXS: Story = {
-  args: {
-    size: "xs",
-    children: "A sample text",
-  },
-};
-export const SubtitleTextXXS: Story = {
-  args: {
-    size: "xxs",
-    children: "A sample text",
-  },
-};
-export const SubtitleText3XS: Story = {
-  args: {
-    size: "3xs",
-    children: "A sample text",
-  },
-};
-export const SubtitleText4XS: Story = {
-  args: {
-    size: "4xs",
-    children: "A sample text",
-  },
-};
-export const SubtitleText5XS: Story = {
-  args: {
-    size: "5xs",
-    children: "A sample text",
-  },
-};
-export const SubtitleText6XSText: Story = {
-  args: {
-    size: "6xs",
-    children: "A sample text",
-  },
-};
-
-export const SubtitleText7XS: Story = {
-  args: {
-    size: "7xs",
-    children: "A sample text",
-  },
-};

package/src/stories/Uploaders/FileUploadWrapper.tsx

@@ -1,25 +0,0 @@
-/** @format */
-
-import FileUploader, { IFileUpload } from "components/Uploader/FileUploader";
-import { PictureAsPdfIcon } from "icons";
-import { useState } from "react";
-
-const FileUploadWrapper = (props: IFileUpload) => {
-  const [file, setFile] = useState<File>();
-
-  return (
-    <FileUploader
-      {...props}
-      onHandleChange={(e) => {
-        e.preventDefault();
-        if (e.target.files) {
-          setFile(e.target.files[0]);
-        }
-      }}
-      file={file}
-      fileTypeIcon={<PictureAsPdfIcon />}
-    />
-  );
-};
-
-export default FileUploadWrapper;