feat: add multiple stories

.eslintrc.json

@@ -1,8 +1,5 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    "plugin:storybook/recommended"
-  ],
+  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
   "rules": {
     "react/no-unescaped-entities": "off",
     "@next/next/no-img-element": "off"

package.json

@@ -64,4 +64,3 @@
     "webpack": "^5.86.0"
   }
 }
-

src/components/form/PageSeven.tsx

@@ -13,15 +13,18 @@ const PageSeven = () => {
       <img className="select-none" src={url} alt={card.title} />
 
       <CodeWrapper title="URL">
-        <CodeBlock code={url} />
+        <CodeBlock language="xml" code={url} />
       </CodeWrapper>
 
       <CodeWrapper title="Markdown">
-        <CodeBlock code={`[![${card.title}](${url})`} />
+        <CodeBlock language="xml" code={`[![${card.title}](${url})`} />
       </CodeWrapper>
 
       <CodeWrapper title="HTML">
-        <CodeBlock code={`<img src="${url}" alt="${card.title}" />`} />
+        <CodeBlock
+          language="xml"
+          code={`<img src="${url}" alt="${card.title}" />`}
+        />
       </CodeWrapper>
     </FormWrapper>
   );

src/components/ui/CodeBlock.stories.tsx

@@ -0,0 +1,27 @@
+import CodeBlock from "./CodeBlock";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CodeBlock> = {
+  title: "ui/CodeBlock",
+  component: CodeBlock,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+export const HTML: Story = {
+  args: {
+    code: '<div class="bg-red-500">Hello</div>',
+    language: "xml",
+  },
+};
+
+export const JavaScript: Story = {
+  args: {
+    code: `const greet = (name) => {
+  console.log(\`Hello, \${name}!\`);
+}`,
+    language: "javascript",
+  },
+};

src/components/ui/CodeBlock.tsx

@@ -1,17 +1,20 @@
-import { cn } from "@/lib/utils/cn";
+import { cn } from "../../lib/utils/cn";
 import { useState } from "react";
 import { MdCheck, MdContentCopy } from "react-icons/md";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import javascript from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
 import xml from "react-syntax-highlighter/dist/esm/languages/hljs/xml";
 import theme from "react-syntax-highlighter/dist/esm/styles/hljs/vs2015";
 
 SyntaxHighlighter.registerLanguage("xml", xml);
+SyntaxHighlighter.registerLanguage("javascript", javascript);
 
 type Props = {
   code: string;
+  language: "xml" | "javascript";
 };
 
-const CodeBlock = ({ code }: Props) => {
+const CodeBlock = ({ code, language }: Props) => {
   const [clicked, setClicked] = useState<boolean>(false);
 
   return (
@@ -36,7 +39,7 @@ const CodeBlock = ({ code }: Props) => {
 
       <div className="relative select-text overflow-x-auto overflow-y-hidden whitespace-nowrap rounded-md bg-gh-bg-secondary font-mono text-sm text-gh-text">
         <SyntaxHighlighter
-          language="xml"
+          language={language}
           style={theme}
           showLineNumbers={false}
           wrapLongLines={false}

src/components/ui/Input.stories.tsx

@@ -0,0 +1,28 @@
+import Input from "./Input";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Input> = {
+  title: "ui/Input",
+  component: Input,
+  tags: ["autodocs"],
+  args: {
+    placeholder: "This is a placeholder",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Primary: Story = {};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+  },
+};

src/components/ui/Input.tsx

@@ -1,4 +1,5 @@
-import { cn } from "@/lib/utils/cn";
+import { cn } from "../../lib/utils/cn";
+import { OmitNullableKeys } from "../../types";
 import { VariantProps, cva } from "class-variance-authority";
 import { InputHTMLAttributes, forwardRef, useCallback, useState } from "react";
 
@@ -20,7 +21,7 @@ const inputVariants = cva(
 
 interface InputProps
   extends InputHTMLAttributes<HTMLInputElement>,
-    VariantProps<typeof inputVariants> {
+    OmitNullableKeys<VariantProps<typeof inputVariants>> {
   label?: string;
 }
 

src/components/ui/Link.stories.tsx

@@ -0,0 +1,18 @@
+import Link from "./Link";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Link> = {
+  title: "ui/Link",
+  component: Link,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Link>;
+
+export const GitHub: Story = {
+  args: {
+    children: "GitHub",
+    href: "https://github.com/0l1v3rr/github-readme-tech-stack",
+  },
+};

src/components/ui/Link.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils/cn";
+import { cn } from "../../lib/utils/cn";
 import { AnchorHTMLAttributes, FC, ReactNode } from "react";
 
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {

src/components/ui/Quote.stories.tsx

@@ -0,0 +1,32 @@
+import Quote from "./Quote";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Quote> = {
+  title: "ui/Quote",
+  component: Quote,
+  tags: ["autodocs"],
+  args: {
+    children: "This is a quote.",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Quote>;
+
+export const Info: Story = {
+  args: {
+    variant: "Info",
+  },
+};
+
+export const Note: Story = {
+  args: {
+    variant: "Note",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: "Warning",
+  },
+};

src/components/ui/Quote.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils/cn";
+import { cn } from "../../lib/utils/cn";
 import { FC, ReactNode } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 

src/components/ui/Select.stories.tsx

@@ -0,0 +1,29 @@
+import Select from "./Select";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Select> = {
+  title: "ui/Select",
+  component: Select,
+  // tags: ["autodocs"],
+  args: {
+    options: [
+      { label: "Hungary", value: "hungary" },
+      { label: "UK", value: "uk" },
+      { label: "USA", value: "usa" },
+    ],
+    select: () => {},
+    selected: { label: "Hungary", value: "hungary" },
+    label: "Countries",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const BasicSelect: Story = {};
+
+export const WithFilter: Story = {
+  args: {
+    filter: true,
+  },
+};

src/components/ui/Select.tsx

@@ -1,7 +1,7 @@
-import Input from "@/components/ui/Input";
-import { useOuterClick } from "@/hooks/useOuterClick";
-import { cn } from "@/lib/utils/cn";
-import { SelectOption } from "@/types";
+import { useOuterClick } from "../../hooks/useOuterClick";
+import { cn } from "../../lib/utils/cn";
+import { SelectOption } from "../../types";
+import Input from "./Input";
 import {
   ButtonHTMLAttributes,
   FC,

src/components/ui/TrueFalseInput.stories.tsx

@@ -0,0 +1,21 @@
+import TrueFalseInput from "./TrueFalseInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TrueFalseInput> = {
+  title: "ui/TrueFalseInput",
+  component: TrueFalseInput,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof TrueFalseInput>;
+
+export const YesOrNo: Story = {
+  args: {
+    value: true,
+    setValue: () => {},
+    trueLabel: "Yes",
+    falseLabel: "No",
+    className: "w-32",
+  },
+};

src/components/ui/TrueFalseInput.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils/cn";
+import { cn } from "../../lib/utils/cn";
 import { FC, HTMLAttributes } from "react";
 
 interface TrueFalseInputProps extends HTMLAttributes<HTMLDivElement> {

src/types.ts

@@ -82,5 +82,5 @@ export type BadgeDataTransfer = {
 export type OmitNull<T> = T extends null ? never : T;
 
 export type OmitNullableKeys<T> = {
-  [Key in keyof T]-?: OmitNullableKeys<OmitNull<T[Key]>>;
+  [Key in keyof T]: OmitNullableKeys<OmitNull<T[Key]>>;
 };