Skip to content

Commit 40fedbc

Browse files
0l1v3rr0l1v3rr
committed
feat: add multiple stories
1 parent 33d0c0f commit 40fedbc

16 files changed

+179
-21
lines changed

‎.eslintrc.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
{
2-
"extends": [
3-
"next/core-web-vitals",
4-
"plugin:storybook/recommended"
5-
],
2+
"extends": ["next/core-web-vitals", "plugin:storybook/recommended"],
63
"rules": {
74
"react/no-unescaped-entities": "off",
85
"@next/next/no-img-element": "off"

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,3 @@
6464
"webpack": "^5.86.0"
6565
}
6666
}
67-

‎src/components/form/PageSeven.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,18 @@ const PageSeven = () => {
1313
<img className="select-none" src={url} alt={card.title} />
1414

1515
<CodeWrapper title="URL">
16-
<CodeBlock code={url} />
16+
<CodeBlock language="xml" code={url} />
1717
</CodeWrapper>
1818

1919
<CodeWrapper title="Markdown">
20-
<CodeBlock code={`[![${card.title}](${url})`} />
20+
<CodeBlock language="xml" code={`[![${card.title}](${url})`} />
2121
</CodeWrapper>
2222

2323
<CodeWrapper title="HTML">
24-
<CodeBlock code={`<img src="${url}" alt="${card.title}" />`} />
24+
<CodeBlock
25+
language="xml"
26+
code={`<img src="${url}" alt="${card.title}" />`}
27+
/>
2528
</CodeWrapper>
2629
</FormWrapper>
2730
);

‎src/components/ui/CodeBlock.stories.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import CodeBlock from "./CodeBlock";
2+
import { Meta, StoryObj } from "@storybook/react";
3+
4+
const meta: Meta<typeof CodeBlock> = {
5+
title: "ui/CodeBlock",
6+
component: CodeBlock,
7+
tags: ["autodocs"],
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof CodeBlock>;
12+
13+
export const HTML: Story = {
14+
args: {
15+
code: '<div class="bg-red-500">Hello</div>',
16+
language: "xml",
17+
},
18+
};
19+
20+
export const JavaScript: Story = {
21+
args: {
22+
code: `const greet = (name) => {
23+
console.log(\`Hello, \${name}!\`);
24+
}`,
25+
language: "javascript",
26+
},
27+
};

‎src/components/ui/CodeBlock.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import { cn } from "@/lib/utils/cn";
1+
import { cn } from "../../lib/utils/cn";
22
import { useState } from "react";
33
import { MdCheck, MdContentCopy } from "react-icons/md";
44
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
5+
import javascript from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
56
import xml from "react-syntax-highlighter/dist/esm/languages/hljs/xml";
67
import theme from "react-syntax-highlighter/dist/esm/styles/hljs/vs2015";
78

89
SyntaxHighlighter.registerLanguage("xml", xml);
10+
SyntaxHighlighter.registerLanguage("javascript", javascript);
911

1012
type Props = {
1113
code: string;
14+
language: "xml" | "javascript";
1215
};
1316

14-
const CodeBlock = ({ code }: Props) => {
17+
const CodeBlock = ({ code, language }: Props) => {
1518
const [clicked, setClicked] = useState<boolean>(false);
1619

1720
return (
@@ -36,7 +39,7 @@ const CodeBlock = ({ code }: Props) => {
3639

3740
<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">
3841
<SyntaxHighlighter
39-
language="xml"
42+
language={language}
4043
style={theme}
4144
showLineNumbers={false}
4245
wrapLongLines={false}

‎src/components/ui/Input.stories.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Input from "./Input";
2+
import { Meta, StoryObj } from "@storybook/react";
3+
4+
const meta: Meta<typeof Input> = {
5+
title: "ui/Input",
6+
component: Input,
7+
tags: ["autodocs"],
8+
args: {
9+
placeholder: "This is a placeholder",
10+
},
11+
};
12+
13+
export default meta;
14+
type Story = StoryObj<typeof Input>;
15+
16+
export const Primary: Story = {};
17+
18+
export const Secondary: Story = {
19+
args: {
20+
variant: "secondary",
21+
},
22+
};
23+
24+
export const Danger: Story = {
25+
args: {
26+
variant: "danger",
27+
},
28+
};

‎src/components/ui/Input.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { cn } from "@/lib/utils/cn";
1+
import { cn } from "../../lib/utils/cn";
2+
import { OmitNullableKeys } from "../../types";
23
import { VariantProps, cva } from "class-variance-authority";
34
import { InputHTMLAttributes, forwardRef, useCallback, useState } from "react";
45

@@ -20,7 +21,7 @@ const inputVariants = cva(
2021

2122
interface InputProps
2223
extends InputHTMLAttributes<HTMLInputElement>,
23-
VariantProps<typeof inputVariants> {
24+
OmitNullableKeys<VariantProps<typeof inputVariants>> {
2425
label?: string;
2526
}
2627

‎src/components/ui/Link.stories.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Link from "./Link";
2+
import { Meta, StoryObj } from "@storybook/react";
3+
4+
const meta: Meta<typeof Link> = {
5+
title: "ui/Link",
6+
component: Link,
7+
tags: ["autodocs"],
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof Link>;
12+
13+
export const GitHub: Story = {
14+
args: {
15+
children: "GitHub",
16+
href: "https://github.com/0l1v3rr/github-readme-tech-stack",
17+
},
18+
};

‎src/components/ui/Link.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { cn } from "@/lib/utils/cn";
1+
import { cn } from "../../lib/utils/cn";
22
import { AnchorHTMLAttributes, FC, ReactNode } from "react";
33

44
interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {

‎src/components/ui/Quote.stories.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Quote from "./Quote";
2+
import { Meta, StoryObj } from "@storybook/react";
3+
4+
const meta: Meta<typeof Quote> = {
5+
title: "ui/Quote",
6+
component: Quote,
7+
tags: ["autodocs"],
8+
args: {
9+
children: "This is a quote.",
10+
},
11+
};
12+
13+
export default meta;
14+
type Story = StoryObj<typeof Quote>;
15+
16+
export const Info: Story = {
17+
args: {
18+
variant: "Info",
19+
},
20+
};
21+
22+
export const Note: Story = {
23+
args: {
24+
variant: "Note",
25+
},
26+
};
27+
28+
export const Warning: Story = {
29+
args: {
30+
variant: "Warning",
31+
},
32+
};

0 commit comments

Comments
 (0)