Merge pull request #4 from fellipeutaka/refactor/use-rac

Refactor/use rac
fellipeutaka · Jan 24, 2025 · 2c3bdc0 · 2c3bdc0
2 parents 99507ab + 7a8a676
commit 2c3bdc0
Showing 343 changed files with 11,630 additions and 7,342 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,6 +5,7 @@
     "cmdk",
     "commitlint",
     "kanpeki",
+    "oklch",
     "picocolors",
     "rehype",
     "shiki",
@@ -15,6 +16,7 @@
     "velite"
   ],
   "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "editor.defaultFormatter": "biomejs.biome",
   "[html]": {
@@ -25,5 +27,9 @@
   },
   "[tailwindcss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }
diff --git a/apps/www/.gitignore b/apps/www/.gitignore
@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -25,7 +29,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# env files (can opt-in for commiting if needed)
+# env files (can opt-in for committing if needed)
 .env*
 
 # vercel

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -1,45 +1,46 @@
 {
   "name": "www",
-  "private": true,
   "type": "module",
+  "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "preview": "next build && next start",
     "type-check": "tsc --noEmit --incremental false"
   },
   "dependencies": {
-    "@iconify-icon/react": "^2.1.0",
-    "@kanpeki/demos": "workspace:*",
-    "@kanpeki/hooks": "workspace:*",
-    "@kanpeki/ui": "workspace:*",
-    "@kanpeki/utils": "workspace:*",
-    "@react-aria/interactions": "^3.22.3",
-    "@tanstack/react-virtual": "^3.10.8",
-    "@vercel/analytics": "^1.3.1",
-    "@vercel/speed-insights": "^1.0.12",
-    "geist": "^1.3.1",
-    "next": "15.0.0-rc.0",
-    "next-themes": "^0.3.0",
-    "react": "19.0.0-rc-f994737d14-20240522",
-    "react-dom": "19.0.0-rc-f994737d14-20240522"
+    "@internationalized/date": "^3.7.0",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@react-stately/data": "^3.12.1",
+    "@vercel/analytics": "^1.4.1",
+    "@vercel/speed-insights": "^1.1.0",
+    "cmdk": "^1.0.4",
+    "motion": "^11.18.2",
+    "next": "^15.1.6",
+    "next-themes": "^0.4.4",
+    "react": "^19.0.0",
+    "react-aria-components": "^1.6.0",
+    "react-dom": "^19.0.0",
+    "recharts": "^2.15.0",
+    "sonner": "^1.7.2"
   },
   "devDependencies": {
     "@kanpeki/tsconfig": "workspace:*",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/unist": "^3.0.3",
-    "clsx": "^2.1.1",
-    "postcss": "^8.4.47",
+    "cva": "1.0.0-beta.3",
+    "postcss": "^8.5.1",
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
-    "shiki": "^1.22.0",
-    "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.13",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.0.0",
+    "tailwindcss-motion": "^1.0.1",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
-    "velite": "^0.1.1"
+    "velite": "^0.2.2"
   }
 }
diff --git a/apps/www/postcss.config.js b/apps/www/postcss.config.js
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    "@tailwindcss/postcss": {},
   },
 };
 

diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json
diff --git a/apps/www/src/app/_components/feature-section.tsx b/apps/www/src/app/_components/feature-section.tsx
@@ -1,5 +1,5 @@
-import { Card } from "@kanpeki/ui/card";
-import { Icons } from "@kanpeki/ui/icons";
+import { Card } from "~/components/ui/card";
+import { Icons } from "~/components/ui/icons";
 import { siteConfig } from "~/config/site";
 
 const features = [
@@ -94,7 +94,7 @@ export function FeatureSection() {
         <h2 className="font-bold text-3xl tracking-tighter sm:text-5xl">
           Why Choose {siteConfig.name}?
         </h2>
-        <p className="max-w-3xl text-balance text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+        <p className="max-w-3xl text-balance text-muted-fg md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
           {siteConfig.name} offers a wide range of high-quality, customizable
           React components that will help you build stunning web applications
           with ease.

diff --git a/apps/www/src/app/_components/hero-illustration.tsx b/apps/www/src/app/_components/hero-illustration.tsx
@@ -1,7 +1,5 @@
-"use client";
-
-import AvatarGroupDemo from "@kanpeki/demos/avatar-group";
-import CardDemo from "@kanpeki/demos/card-demo";
+import AvatarGroupDemo from "~/demos/avatar-group";
+import CardDemo from "~/demos/card-demo";
 
 export function HeroIllustration() {
   return (

diff --git a/apps/www/src/app/_components/hero-section.tsx b/apps/www/src/app/_components/hero-section.tsx
@@ -1,11 +1,11 @@
-import { Icons } from "@kanpeki/ui/icons";
-import { LinkButton } from "@kanpeki/ui/link-button";
+import { LinkButton } from "~/components/ui/button";
+import { Icons } from "~/components/ui/icons";
 import { siteConfig } from "~/config/site";
 import { HeroIllustration } from "./hero-illustration";
 
 export function HeroSection() {
   return (
-    <section className="w-full items-start justify-between md:flex md:max-w-7xl">
+    <section className="w-full items-start justify-between md:flex">
       <div className="space-y-6 pt-4">
         <LinkButton
           href={siteConfig.links.github}
@@ -17,15 +17,15 @@ export function HeroSection() {
         >
           <Icons.Sparkles className="mr-2 size-4 text-primary" />
           Star us on GitHub
-          <Icons.ChevronRight className="ml-2 size-4 transition group-hover:translate-x-0.5" />
+          <Icons.ChevronRight className="ml-2 size-4 transition group-data-hovered:translate-x-0.5" />
         </LinkButton>
         <h1 className="max-w-xl text-balance font-bold font-display text-4xl leading-tight tracking-tight md:text-5xl lg:text-6xl">
           Elevate Your Design to{" "}
-          <span className="bg-gradient-to-br from-primary to-[hsl(24,93%,58%)] bg-clip-text text-transparent">
+          <span className="bg-linear-to-br from-primary to-[hsl(24,93%,58%)] bg-clip-text text-transparent">
             Perfection
           </span>
         </h1>
-        <p className="text-md text-muted-foreground md:text-lg lg:text-xl">
+        <p className="text-md text-muted-fg md:text-lg lg:text-xl">
           Accessible, flexible, mobile friendly, modern UI components.
         </p>
         <div className="flex flex-col gap-4 sm:flex-row">
@@ -60,18 +60,18 @@ export function HeroSection() {
             <Icons.TailwindCSS className="size-10" />
           </a>
           <a
-            href="https://www.radix-ui.com"
+            href="https://react-spectrum.adobe.com/react-aria/hooks.html"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Icons.RadixUI className="size-10" />
+            <Icons.Adobe className="size-10 text-red-600" />
           </a>
           <a
-            href="https://react-spectrum.adobe.com/react-aria/hooks.html"
+            href="https://www.radix-ui.com"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Icons.Adobe className="size-10 text-red-600" />
+            <Icons.RadixUI className="size-10" />
           </a>
         </div>
       </div>

diff --git a/apps/www/src/app/_components/open-source-section.tsx b/apps/www/src/app/_components/open-source-section.tsx
@@ -1,17 +1,17 @@
-import { Icons } from "@kanpeki/ui/icons";
 import { Suspense } from "react";
+import { Icons } from "~/components/ui/icons";
 import { siteConfig } from "~/config/site";
 
 export function OpenSourceSection() {
   return (
     <section className="space-y-4 text-center">
       <h2 className="mx-auto max-w-2xl font-bold text-3xl tracking-tighter lg:text-5xl">
         Proudly{" "}
-        <span className="bg-gradient-to-br from-primary to-[hsl(24,93%,58%)] bg-clip-text text-transparent">
+        <span className="bg-linear-to-br from-primary to-[hsl(24,93%,58%)] bg-clip-text text-transparent">
           open-source
         </span>
       </h2>
-      <p className="mx-auto max-w-2xl text-balance text-lg text-muted-foreground">
+      <p className="mx-auto max-w-2xl text-balance text-lg text-muted-fg">
         Our source code is available on GitHub - feel free to read, review, or
         contribute to it however you want!
       </p>

diff --git a/apps/www/src/app/docs/[[...slug]]/_components/contribute.tsx b/apps/www/src/app/docs/[[...slug]]/_components/contribute.tsx
@@ -0,0 +1,61 @@
+import { Icons } from "~/components/ui/icons";
+import { Link } from "~/components/ui/link/link";
+import { getGitHubIssueUrl, getGithubFileUrl } from "~/utils/github";
+import type { Doc } from "~/utils/mdx";
+
+interface ContributeProps {
+  doc: Doc;
+}
+
+export function Contribute({ doc }: ContributeProps) {
+  const contributeLinks = [
+    {
+      text: "Report an issue",
+      icon: Icons.Bug,
+      href: getGitHubIssueUrl({
+        owner: "fellipeutaka",
+        repo: "kanpeki",
+        title: `[bug]: ${doc.slugAsParams}`,
+        labels: ["bug", "documentation"],
+        template: "bug_report.md",
+      }),
+    },
+    {
+      text: "Request a feature",
+      icon: Icons.Lightbulb,
+      href: getGitHubIssueUrl({
+        owner: "fellipeutaka",
+        repo: "kanpeki",
+        title: `[feat]: ${doc.slugAsParams}`,
+        labels: ["enhancement"],
+        template: "feature_request.md",
+      }),
+    },
+    {
+      text: "Edit this page",
+      icon: Icons.Pencil,
+      href: getGithubFileUrl(doc.slug),
+    },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <p className="font-medium">Contribute</p>
+      <ul className="space-y-2">
+        {contributeLinks.map((link) => (
+          <li key={link.href}>
+            <Link
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center text-muted-fg text-sm data-hovered:text-fg"
+            >
+              <link.icon className="mr-2 size-4" />
+              {link.text}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}