59 | The API key is being sent from your browser to the Anthropic API.
60 |
61 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/.cursor/rules/new-docs.mdc:
--------------------------------------------------------------------------------
1 | ---
2 | description:
3 | globs:
4 | alwaysApply: false
5 | ---
6 | ## Creating new entry in Magic Docs app
7 |
8 | You are expert in creating interactive learning materials about web technologies, using [tech-stack.mdc](mdc:.cursor/rules/tech-stack.mdc)
9 |
10 | Your goal is to create end-to-end solution for mentioned by the user.
11 |
12 | Execute the following:
13 |
14 | 1) Make sure that subdirectory `src/components/docs` exists
15 | 2) Create subdirectory `src/components/docs/` (kebab-case)
16 | 3) In `src/components/docs//{Technology}Page.tsx` create a new React page component that acts as a skeleton for new page.
17 |
18 | Use h1 header as a starting point:
19 |
20 | ```
21 |
22 | : One sentence description
23 |
24 | ```
25 |
26 | 4) Now, your task is to create an interactive and engaging single-page documentation for regular developer eager to learn more about . The documentation should always cover these three elements:
27 |
28 | - Highlight the **problem space** the technology addresses
29 | - Illustrate the **conceptual architecture** of the technology
30 | - Demonstrate a **practical implementation path**
31 |
32 | You have five tools (React Components) that you can mix and in any way you want:
33 |
34 | - Text block
35 | - Code snippet
36 | - Mermaid diagram
37 | - Quiz
38 | - Resources
39 |
40 | The documentation should contain at least:
41 | - 3 text blocks
42 | - 2 code snippets
43 | - 2 quizzes
44 | - 1 mermaid diagram
45 | - 1 resources
46 |
47 | For text blocks, use professional technical terminology and industry-standard explanations. Aimed at working developers. Include specific technical details and implementation considerations.
48 |
49 | Interfaces and documentation of these tools is available below:
50 | - [tools.types.ts](mdc:src/components/tools/tools.types.ts)
51 |
52 |
53 | 6) Extend `{Technology}Page.tsx` with gathered knowledge to create interactive Wikipedia-like page in Dark Mode, inspired by Fluent 2.0 and [Layout.tsx](mdc:src/components/Layout.tsx), incorporating all the tools and creative ideas that you can imagine.
54 |
55 | General recommendations:
56 | - When developing code, always follow and [react-development.mdc](mdc:.cursor/rules/react-development.mdc)
57 | - Integrate new page with [App.tsx](mdc:src/App.tsx) and embed it as new route, always wrapping it with ``
58 | - Make sure there's a new tile added on [HomePage.tsx](mdc:src/pages/HomePage.tsx)
59 | - When building pages and instructions, be specific - as an example, instead of "Read the docs" use suggestions such as "Get familiar with the docs at angular.dev"
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Slot } from "@radix-ui/react-slot";
3 | import { cva, type VariantProps } from "class-variance-authority";
4 | import { cn } from "../../lib/utils";
5 |
6 | const buttonVariants = cva(
7 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
8 | {
9 | variants: {
10 | variant: {
11 | default:
12 | "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 dark:bg-primary/80 dark:hover:bg-primary/70",
13 | destructive:
14 | "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/80 dark:hover:bg-destructive/70",
15 | outline:
16 | "border border-neutral-200 dark:border-neutral-800 bg-white hover:bg-neutral-50 text-neutral-900 dark:text-neutral-100 shadow-xs dark:bg-neutral-900 dark:hover:bg-neutral-800 transition-colors",
17 | secondary:
18 | "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 dark:bg-secondary/70 dark:hover:bg-secondary/60",
19 | ghost:
20 | "text-neutral-900 dark:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-neutral-100",
21 | link: "text-primary underline-offset-4 hover:underline dark:text-primary/90 dark:hover:text-primary",
22 | },
23 | size: {
24 | default: "h-9 px-4 py-2 has-[>svg]:px-3",
25 | sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
26 | lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
27 | icon: "size-9",
28 | },
29 | },
30 | defaultVariants: {
31 | variant: "default",
32 | size: "default",
33 | },
34 | },
35 | );
36 |
37 | function Button({
38 | className,
39 | variant,
40 | size,
41 | asChild = false,
42 | ...props
43 | }: React.ComponentProps<"button"> &
44 | VariantProps & {
45 | asChild?: boolean;
46 | }) {
47 | const Comp = asChild ? Slot : "button";
48 |
49 | return (
50 |
55 | );
56 | }
57 |
58 | export { Button, buttonVariants };
59 |
--------------------------------------------------------------------------------
/.cursor/rules/vitest-unit-testing.mdc:
--------------------------------------------------------------------------------
1 | ---
2 | description: Unit testing with Vitest and React Testing Library
3 | globs:
4 | alwaysApply: false
5 | ---
6 |
7 | ## TESTING
8 |
9 | ### Guidelines for UNIT TESTING
10 |
11 | #### VITEST
12 |
13 | - Leverage the `vi` object for test doubles - Use `vi.fn()` for function mocks, `vi.spyOn()` to monitor existing functions, and `vi.stubGlobal()` for global mocks. Prefer spies over mocks when you only need to verify interactions without changing behavior.
14 |
15 | - Master `vi.mock()` factory patterns - Place mock factory functions at the top level of your test file, return typed mock implementations, and use `mockImplementation()` or `mockReturnValue()` for dynamic control during tests. Remember the factory runs before imports are processed.
16 |
17 | - Create setup files for reusable configuration - Define global mocks, custom matchers, and environment setup in dedicated files referenced in your `vitest.config.ts`. This keeps your test files clean while ensuring consistent test environments.
18 |
19 | - Use inline snapshots for readable assertions - Replace complex equality checks with `expect(value).toMatchInlineSnapshot()` to capture expected output directly in your test file, making changes more visible in code reviews.
20 |
21 | - Monitor coverage with purpose - Configure coverage thresholds in `vitest.config.ts` to ensure critical code paths are tested, but focus on meaningful tests rather than arbitrary coverage percentages.
22 |
23 | - Make watch mode part of your workflow - Run `vitest --watch` during development for instant feedback as you modify code, filtering tests with `-t` to focus on specific areas under development.
24 |
25 | - Explore UI mode for complex test suites - Use `vitest --ui` to visually navigate large test suites, inspect test results, and debug failures more efficiently during development.
26 |
27 | - Handle optional dependencies with smart mocking - Use conditional mocking to test code with optional dependencies by implementing `vi.mock()` with the factory pattern for modules that might not be available in all environments.
28 |
29 | - Configure jsdom for DOM testing - Set `environment: 'jsdom'` in your configuration for frontend component tests and combine with testing-library utilities for realistic user interaction simulation.
30 |
31 | - Structure tests for maintainability - Group related tests with descriptive `describe` blocks, use explicit assertion messages, and follow the Arrange-Act-Assert pattern to make tests self-documenting.
32 |
33 | - Leverage TypeScript type checking in tests - Enable strict typing in your tests to catch type errors early, use `expectTypeOf()` for type-level assertions, and ensure mocks preserve the original type signatures.
34 |
35 | - Follow 'Arrange', 'Act', 'Assert' approach to test structure for simplicity and readability.
36 |
37 |
--------------------------------------------------------------------------------
/src/components/tools/Quiz.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { QuizProps } from "./tools.types";
3 |
4 | export const Quiz: React.FC = ({ title, question }) => {
5 | const [selectedAnswer, setSelectedAnswer] = useState(null);
6 | const [showExplanation, setShowExplanation] = useState(false);
7 |
8 | const handleOptionSelect = (optionId: string) => {
9 | setSelectedAnswer(optionId);
10 | };
11 |
12 | const handleCheckAnswer = () => {
13 | if (selectedAnswer) {
14 | setShowExplanation(true);
15 | }
16 | };
17 |
18 | const handleReset = () => {
19 | setSelectedAnswer(null);
20 | setShowExplanation(false);
21 | };
22 |
23 | const isCorrect = selectedAnswer === question.correctAnswer;
24 |
25 | return (
26 |