chore: update dependencies and add TodoEditor component

- Updated various dependencies in package.json to their latest versions.
- Added a new component TodoEditor in src/components/TodoEditor.tsx.

Changes include:
- @cl

Author: ryota-murakami

package.json

@@ -29,17 +29,17 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@clerk/nextjs": "^5.2.6",
+    "@clerk/nextjs": "^5.3.1",
     "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.9.0",
-    "@reduxjs/toolkit": "^2.2.6",
+    "@reduxjs/toolkit": "^2.2.7",
     "babel-plugin-react-compiler": "0.0.0-experimental-938cd9a-20240601",
     "cal-heatmap": "^4.2.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "dayjs": "^1.11.12",
-    "lucide-react": "^0.414.0",
+    "lucide-react": "^0.427.0",
     "nanoid": "^5.0.7",
     "next": "15.0.0-rc.0",
     "prisma": "^5.18.0",
@@ -49,41 +49,41 @@
     "react-redux": "^9.1.2",
     "redux-persist": "^6.0.0",
     "sonner": "^1.5.0",
-    "svix": "^1.25.0",
-    "tailwind-merge": "^2.4.0",
+    "svix": "^1.29.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "theme-change": "^2.5.0",
     "tinykeys": "^2.1.0",
-    "ts-pattern": "^5.2.0",
+    "ts-pattern": "^5.3.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
-    "@clerk/types": "^4.9.0",
+    "@clerk/types": "^4.13.1",
     "@prisma/client": "5.18.0",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-interactions": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-onboarding": "^8.2.6",
-    "@storybook/blocks": "^8.2.6",
-    "@storybook/nextjs": "^8.2.6",
-    "@storybook/react": "^8.2.6",
-    "@storybook/test": "^8.2.6",
-    "@storybook/theming": "^8.2.6",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.14",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/cal-heatmap": "^3.5.39",
     "@types/d3": "^7.4.3",
-    "@types/node": "^20.14.12",
+    "@types/node": "^22.3.0",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
-    "@vitest/ui": "^2.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.1.0",
+    "@typescript-eslint/parser": "^8.1.0",
+    "@vitest/ui": "^2.0.5",
     "daisyui": "^4.12.10",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.2.5",
@@ -93,17 +93,17 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-storybook": "^0.8.0",
     "happy-dom": "^14.12.3",
-    "husky": "^9.1.1",
-    "lint-staged": "^15.2.7",
-    "postcss": "^8.4.40",
+    "husky": "^9.1.4",
+    "lint-staged": "^15.2.9",
+    "postcss": "^8.4.41",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "rimraf": "^6.0.1",
-    "storybook": "^8.2.6",
-    "tailwindcss": "^3.4.6",
+    "storybook": "^8.2.9",
+    "tailwindcss": "^3.4.10",
     "ts-expect": "^1.3.0",
     "typescript": "5.5.4",
-    "vitest": "^2.0.4"
+    "vitest": "^2.0.5"
   },
   "volta": {
     "node": "20.16.0"

pnpm-lock.yaml

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+
+import { cn } from '@/lib/utils'
+
+export const TodoEditor: React.FC<ComponentProps<'section'>> = (props) => {
+  return (
+    <section className={cn('', props.className)}>
+      <div className="mockup-phone">
+        <div className="camera"></div>
+        <div className="display">
+          <div className="artboard artboard-demo phone-1">
+            TodoEditor Still getting ready.
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}