+
+
+
+ No results found.
+
+
+
+ Calendar
+
+
+
+ Search Emoji
+
+
+
+ Calculator
+
+
+
+
+
+
+ Profile
+ ⌘P
+
+
+
+ Billing
+ ⌘B
+
+
+
+ Settings
+ ⌘S
+
+
+
+
+
+ );
+ },
+};
diff --git a/src/common/components/Heading/Heading.stories.tsx b/src/common/components/Heading/Heading.stories.tsx
new file mode 100644
index 00000000..2ce60d07
--- /dev/null
+++ b/src/common/components/Heading/Heading.stories.tsx
@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Heading } from "./Heading";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+ title: "Common/Heading",
+ component: Heading,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ["autodocs"],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ args: {
+ as: "h1",
+ className: "text-7xl",
+ children: "Heading 1",
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Heading1: Story = {
+ ...Default,
+};
+
+export const Heading2: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ as: "h2",
+ className: "text-6xl",
+ children: "Heading 2",
+ },
+};
+
+export const Heading3: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ as: "h3",
+ className: "text-5xl",
+ children: "Heading 3",
+ },
+};
+
+export const Heading4: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ as: "h4",
+ className: "text-4xl",
+ children: "Heading 4",
+ },
+};
+
+export const Heading5: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ as: "h5",
+ className: "text-3xl",
+ children: "Heading 5",
+ },
+};
+
+export const Heading6: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ as: "h6",
+ className: "text-2xl",
+ children: "Heading 6",
+ },
+};
+
+export const Heading7: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ as: "h6",
+ className: "text-xl",
+ children: "Heading 7",
+ },
+};
diff --git a/src/common/components/Input/Input.stories.tsx b/src/common/components/Input/Input.stories.tsx
new file mode 100644
index 00000000..52038f3b
--- /dev/null
+++ b/src/common/components/Input/Input.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+import { StarLineAltIcon } from "@/common/components/CustomIcon";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+ title: "Common/Input",
+ component: Input,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ["autodocs"],
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+ argTypes: {},
+ args: {
+ label: "default",
+ helperText: "helper text",
+ contentLeft: ,
+ contentRight: ,
+ placeholder: "placeholder",
+ isError: false,
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ label: "default",
+ helperText: "helper text",
+ contentLeft: ,
+ contentRight: ,
+ placeholder: "placeholder",
+ },
+};
+export const DefaultWithError: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ helperText: "error helper text",
+ isError: true,
+ },
+};
diff --git a/src/common/components/LockCtaOverlay/LockCtaOverlay.stories.tsx b/src/common/components/LockCtaOverlay/LockCtaOverlay.stories.tsx
new file mode 100644
index 00000000..c2dc6097
--- /dev/null
+++ b/src/common/components/LockCtaOverlay/LockCtaOverlay.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LockCtaOverlay } from "./LockCtaOverlay";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+ title: "Common/LockCtaOverlay",
+ component: LockCtaOverlay,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ["autodocs"],
+ args: {},
+ render: (args) => (
+
+
+
+ ),
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const DefaultForRating: Story = {};
+
+export const BorderVariantForRating: Story = {
+ ...DefaultForRating,
+ args: {
+ ...DefaultForRating.args,
+ variant: "border",
+ },
+};
+
+export const DefaultForReview: Story = {
+ ...DefaultForRating,
+ args: {
+ ...DefaultForRating.args,
+ ctaType: "review",
+ },
+};
+
+export const BorderVariantForReview: Story = {
+ ...DefaultForReview,
+ args: {
+ ...DefaultForReview.args,
+ variant: "border",
+ },
+};
diff --git a/src/common/components/Logo/Logo.stories.tsx b/src/common/components/Logo/Logo.stories.tsx
new file mode 100644
index 00000000..d3b45922
--- /dev/null
+++ b/src/common/components/Logo/Logo.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Logo } from "./Logo";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+ title: "Common/Logo",
+ component: Logo,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ["autodocs"],
+ args: {
+ hideText: false,
+ hideLogo: false,
+ },
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const LogoOnly: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ hideText: true,
+ },
+};
+
+export const TextOnly: Story = {
+ ...Default,
+ args: {
+ ...Default.args,
+ hideLogo: true,
+ },
+};
diff --git a/src/common/components/Modal/Modal.stories.tsx b/src/common/components/Modal/Modal.stories.tsx
new file mode 100644
index 00000000..aab16f98
--- /dev/null
+++ b/src/common/components/Modal/Modal.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "@/common/components/Button";
+import { Modal } from "./Modal";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+ title: "Common/Modal",
+ component: Modal,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ["autodocs"],
+ args: {},
+ // More on argTypes: https://storybook.js.org/docs/api/argtypes
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const longText = `
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+ tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nulla tincidunt, sapien nec varius aliquet, libero nunc tincidunt
+ libero, nec dictum libero libero ac odio. Nulla facilisi. Sed
+ auctor
+ `;
+
+export const Default: Story = {
+ render: () => {
+ return (
+
+
+
+
+
+
+ All button variants
+
+
+