Merge pull request #5 from technologiestiftung/test/init

.env.example

@@ -15,3 +15,6 @@ MDX_DOCS_PATH=pages
 
 NEXT_SECRET_BASIC_AUTH_USER=
 NEXT_SECRET_BASIC_AUTH_PASSWORD=
+
+STORYBOOK_DISABLE_TELEMETRY=1
+NEXT_TELEMETRY_DISABLED=1

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	extends: ["next/core-web-vitals"],
+	extends: ["next/core-web-vitals", "plugin:storybook/recommended"],
 	plugins: ["prettier"],
 	root: true,
 };

.gitignore

@@ -438,3 +438,21 @@ dist
 .yarn/install-state.gz
 .pnp.*
 .vscode/settings.json
+stories/assets/code-brackets.svg
+stories/assets/colors.svg
+stories/assets/comments.svg
+stories/assets/direction.svg
+stories/assets/flow.svg
+stories/assets/plugin.svg
+stories/assets/repo.svg
+stories/assets/stackalt.svg
+stories/button.css
+stories/Button.stories.ts
+stories/Button.tsx
+stories/header.css
+stories/Header.stories.ts
+stories/Header.tsx
+stories/Introduction.mdx
+stories/page.css
+stories/Page.stories.ts
+stories/Page.tsx

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+const config: StorybookConfig = {
+	stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-interactions",
+	],
+	framework: {
+		name: "@storybook/nextjs",
+		options: {},
+	},
+	docs: {
+		autodocs: "tag",
+	},
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/,
+			},
+		},
+	},
+};
+
+export default preview;

__tests__/Home.test.tsx

@@ -0,0 +1,11 @@
+import { expect, test } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import Home from "../pages/index";
+
+test("home", () => {
+	render(<Home />);
+	const main = within(screen.getByRole("main"));
+	expect(
+		main.getByRole("heading", { level: 1, name: /Handbuch GPT Search/i })
+	).toBeDefined();
+});

components/SearchDialog.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import * as React from "react";
-import { Button } from "@/components/ui/button";
+import { Button } from "./ui/button";
 import {
 	Dialog,
 	DialogContent,
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
+} from "./ui/dialog";
+import { Input } from "./ui/input";
 
 import {
 	X,

components/ui/button.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
 	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",

components/ui/command.tsx

@@ -5,8 +5,8 @@ import { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { cn } from "../../lib/utils";
+import { Dialog, DialogContent } from "./dialog";
 
 const Command = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive>,
@@ -42,10 +42,10 @@ const CommandInput = React.forwardRef<
 	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
 	<div
-		className="flex items-center border-b border-b-slate-100 px-4 dark:border-b-slate-700"
+		className="flex items-center px-4 border-b border-b-slate-100 dark:border-b-slate-700"
 		cmdk-input-wrapper=""
 	>
-		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<Search className="w-4 h-4 mr-2 opacity-50 shrink-0" />
 		<CommandPrimitive.Input
 			ref={ref}
 			className={cn(
@@ -78,7 +78,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
 	<CommandPrimitive.Empty
 		ref={ref}
-		className="py-6 text-center text-sm"
+		className="py-6 text-sm text-center"
 		{...props}
 	/>
 ));

components/ui/dialog.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Dialog = DialogPrimitive.Root;
 

components/ui/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 export interface InputProps
 	extends React.InputHTMLAttributes<HTMLInputElement> {}

components/ui/label.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
 
 const Label = React.forwardRef<
 	React.ElementRef<typeof LabelPrimitive.Root>,