add examples

src/第6章_Tailwind_CSSでコンポーネントを設計する/package.json

@@ -10,12 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
     "@radix-ui/react-slot": "^1.0.2",
+    "@react-spring/web": "^9.7.3",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
+    "framer-motion": "^10.16.4",
     "lucide-react": "^0.287.0",
     "react": "^18.2.0",
+    "react-aria": "^3.29.0",
+    "react-aria-components": "^1.0.0-beta.1",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^1.14.0",
     "tailwind-variants": "^0.1.14",

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/App.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { MyDialog as HeadlessUIDialog } from "./components/headlessui/MyDialog";
 import { Button } from "./components/ui/button";
 import {
   Card,
@@ -7,24 +9,49 @@ import {
   CardHeader,
   CardTitle,
 } from "./components/ui/card";
+import { Dialog as ReactAriaDialog } from "./components/react-aria/Dialog";
+import { DialogWithComponents } from "./components/react-aria/DialogWithComponent";
+
+const Heading = ({ children }: React.PropsWithChildren) => (
+  <h1 className="text-2xl font-bold">{children}</h1>
+);
 
 function App() {
   return (
-    <div className="py-6 px-8">
-      <h1 className="text-2xl font-bold">Using shadcn-ui</h1>
-      <Card className="mt-2">
-        <CardHeader>
-          <CardTitle>Card Title</CardTitle>
-          <CardDescription>Card Description</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>Card Content</p>
-          <Button>Push me</Button>
-        </CardContent>
-        <CardFooter>
-          <p>Card Footer</p>
-        </CardFooter>
-      </Card>
+    <div className="py-6 px-8 space-y-8">
+      <section>
+        <Heading>Using shadcn-ui</Heading>
+        <Card className="mt-2">
+          <CardHeader>
+            <CardTitle>Card Title</CardTitle>
+            <CardDescription>Card Description</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>Card Content</p>
+            <Button>Push me</Button>
+          </CardContent>
+          <CardFooter>
+            <p>Card Footer</p>
+          </CardFooter>
+        </Card>
+      </section>
+
+      <section>
+        <Heading>Using Headless UI</Heading>
+        <HeadlessUIDialog title="Headless UI" description="is great!" />
+      </section>
+
+      <section>
+        <Heading>Using React Aria</Heading>
+        <ReactAriaDialog title="React Aria">AAAAAA</ReactAriaDialog>
+      </section>
+
+      <section>
+        <Heading>Using React Aria Components</Heading>
+        <DialogWithComponents title="React Aria Components">
+          AAAAAA
+        </DialogWithComponents>
+      </section>
     </div>
   );
 }

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/framer-motion/AnimatedList.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from "react";
+import { useAnimate } from "framer-motion";
+import { animate } from "framer-motion/dom";
+
+export function AnimatedList({ children }: React.PropsWithChildren) {
+  const [scope, animate] = useAnimate();
+
+  useEffect(() => {
+    animate("li", { opacity: 1 }, { duration: 1 });
+  });
+
+  return <ul ref={scope}>{children}</ul>;
+}
+
+export function fadeout() {
+  const box = document.getElementById("box");
+  if (box) {
+    animate(box, { opacity: 0 }, { duration: 0.5 });
+  }
+}

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/headlessui/MyDialog.tsx

@@ -0,0 +1,71 @@
+import { useState, useCallback } from "react";
+import classNames from "classnames";
+import { Dialog } from "@headlessui/react";
+
+interface Props {
+  title: string;
+  description: string;
+  okLabel?: string;
+  cancelLabel?: string;
+}
+
+export function MyDialog({
+  title,
+  description,
+  okLabel = "OK",
+  cancelLabel = "キャンセル",
+}: Props) {
+  const [isOpen, setIsOpen] = useState(true);
+  const onClose = useCallback(() => setIsOpen(false), []);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      className={classNames("relative", "z-50")}
+    >
+      {/* 背景（バックドロップ） */}
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+      {/* モーダル本体部分 */}
+      <div
+        className={classNames(
+          "fixed",
+          "inset-0",
+          "flex",
+          "items-center",
+          "justify-center",
+          "p-4",
+        )}
+      >
+        <Dialog.Panel
+          className={classNames(
+            "w-full",
+            "max-w-sm",
+            "rounded",
+            "bg-white",
+            "p-6",
+          )}
+        >
+          <Dialog.Title className="font-bold">{title}</Dialog.Title>
+          <Dialog.Description>{description}</Dialog.Description>
+
+          <div className="space-x-2 mt-3">
+            <button
+              className="bg-blue-500 text-white py-2 px-3 rounded-md"
+              onClick={onClose}
+            >
+              {okLabel}
+            </button>
+            <button
+              className="bg-gray-200 text-gray-500 py-2 px-3 rounded-md"
+              onClick={onClose}
+            >
+              {cancelLabel}
+            </button>
+          </div>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/headlessui/Transition.tsx

@@ -0,0 +1,60 @@
+import { useState, useCallback } from "react";
+import { Transition } from "@headlessui/react";
+
+export function MyComponent() {
+  const [isShowing, setIsShowing] = useState(false);
+  const onToggle = useCallback(() => {
+    setIsShowing((prev) => !prev);
+  }, []);
+
+  return (
+    <>
+      <button onClick={onToggle}>押すと</button>
+      <Transition
+        show={isShowing}
+        enter="transition-opacity duration-75"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        フェードインする
+      </Transition>
+    </>
+  );
+}
+
+interface SidebarProps {
+  isShowing?: boolean;
+}
+
+export function Sidebar({ isShowing }: SidebarProps) {
+  return (
+    <Transition show={isShowing}>
+      {/* 背景の暗い部分はフェードする */}
+      <Transition.Child
+        enter="transition-opacity ease-linear duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity ease-linear duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        {/* ... */}
+      </Transition.Child>
+
+      {/* サイドバーの本体はスライドする */}
+      <Transition.Child
+        enter="transition ease-in-out duration-300 transform"
+        enterFrom="-translate-x-full"
+        enterTo="translate-x-0"
+        leave="transition ease-in-out duration-300 transform"
+        leaveFrom="translate-x-0"
+        leaveTo="-translate-x-full"
+      >
+        {/* ... */}
+      </Transition.Child>
+    </Transition>
+  );
+}

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/Dialog.tsx

@@ -0,0 +1,23 @@
+import { useRef } from "react";
+import { useDialog, AriaDialogProps } from "react-aria";
+
+interface Props extends AriaDialogProps {
+  title?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function Dialog({ title, children, ...props }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { dialogProps, titleProps } = useDialog(props, ref);
+
+  return (
+    <div {...dialogProps} ref={ref} className="p-8">
+      {title && (
+        <h3 {...titleProps} className="mt-0">
+          {title}
+        </h3>
+      )}
+      {children}
+    </div>
+  );
+}

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/DialogWithComponent.tsx

@@ -0,0 +1,25 @@
+import { Button, Dialog, DialogTrigger, Modal } from "react-aria-components";
+
+interface Props {
+  title?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export function DialogWithComponents({ title, children }: Props) {
+  return (
+    <DialogTrigger>
+      <Button>開く</Button>
+      <Modal>
+        <Dialog>
+          {({ close }) => (
+            <div>
+              <h1>{title}</h1>
+              {children}
+              <Button onPress={close}>閉じる</Button>
+            </div>
+          )}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-aria/Popover.tsx

@@ -0,0 +1,11 @@
+import { Popover } from "react-aria-components";
+
+interface Props {}
+
+export function PopoverAnimation({}: Props) {
+  return (
+    <Popover className="data-[entering]:animate-[fadeIn_300ms_ease]">
+      It's popover
+    </Popover>
+  );
+}

src/第6章_Tailwind_CSSでコンポーネントを設計する/src/components/react-spring/FadeIn.tsx

@@ -0,0 +1,13 @@
+import { useSpring, animated } from "@react-spring/web";
+
+export function FadeIn() {
+  const [props] = useSpring(
+    () => ({
+      from: { opacity: 0 },
+      to: { opacity: 1 },
+    }),
+    [],
+  );
+
+  return <animated.div style={props}>Hello World</animated.div>;
+}