align on packages

.storybook/main.ts

@@ -8,7 +8,7 @@ import type { StorybookConfig } from "@storybook/react-vite";
 
 const relativePath = (...pathSegments: string[]) => path.resolve(__dirname, ...pathSegments);
 
-const fontsPath = (...pathSegments: string[]) => relativePath("..", "src", "assets", "fonts", ...pathSegments);
+const fontsPath = (...pathSegments: string[]) => relativePath("..", "packages", "core", "fonts", ...pathSegments);
 
 const config: StorybookConfig = {
 	addons: [
@@ -44,7 +44,7 @@ const config: StorybookConfig = {
 			to: "/static",
 		},
 	],
-	stories: [relativePath("..", "src", "**", "*.stories.@(js|jsx|ts|tsx|mdx)")],
+	stories: [relativePath("..", "packages", "**", "*.stories.@(js|jsx|ts|tsx|mdx)")],
 };
 
 export default config;

.storybook/preview.ts

@@ -1,8 +1,7 @@
 import type { Preview } from "@storybook/react";
 import { withThemeByClassName } from "@storybook/addon-styling";
 
-import "../src/assets/fonts/fonts.css";
-import "../src/mantle.css";
+import "../packages/core/mantle.css";
 
 const preview: Preview = {
 	parameters: {

app/components/layout.tsx

@@ -1,8 +1,8 @@
-import { Button } from "@/components/button";
-// import { Input } from "@/components/input";
-import { Select, SelectContent, SelectIcon, SelectOption, SelectTrigger } from "@/components/select";
-import { isTheme, theme, useTheme } from "@/components/theme-provider";
-import { cx } from "@/lib/cx";
+import { Button } from "@/button";
+// import { Input } from "@/input";
+import { Select, SelectContent, SelectIcon, SelectOption, SelectTrigger } from "@/select";
+import { isTheme, theme, useTheme } from "@/theme-provider";
+import { cx } from "@/cx";
 import { WithStyleProps } from "@/types/with-style-props";
 import { Link, NavLink } from "@remix-run/react";
 import { PropsWithChildren } from "react";

app/root.tsx

@@ -1,8 +1,8 @@
 import { cssBundleHref } from "@remix-run/css-bundle";
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
 import type { LinksFunction } from "@vercel/remix";
-import mantleCss from "../src/mantle.css";
-import { PreventWrongThemeFlash, ThemeProvider } from "@/components/theme-provider";
+import mantleCss from "../packages/core/mantle.css";
+import { PreventWrongThemeFlash, ThemeProvider } from "@/theme-provider";
 import { Layout } from "./components/layout";
 
 export const links: LinksFunction = () => [

app/routes/base.colors.tsx

@@ -1,4 +1,4 @@
-import { cx } from "@/lib/cx";
+import { cx } from "@/cx";
 import { WithStyleProps } from "@/types/with-style-props";
 import { HashNavLink } from "~/components/hash-nav-link";
 import type { MetaFunction } from "@vercel/remix";

app/routes/components.input.tsx

@@ -1,5 +1,5 @@
 import type { MetaFunction } from "@vercel/remix";
-import { Input } from "@/components/input";
+import { Input } from "@/input";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 
 export const meta: MetaFunction = () => {

src/components/back-to-top-button.tsx → packages/back-to-top-button/index.tsx

@@ -1,12 +1,10 @@
-"use client";
-
-import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion";
 import { useWindowScroll } from "@uidotdev/usehooks";
 import { useRef, type CSSProperties, useEffect } from "react";
-import { Portal } from "./portal";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import { Portal } from "../portal";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
 import { ArrowUpToLine } from "lucide-react";
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 
 type Props = {
 	className?: string;

src/components/button.stories.tsx → packages/button/button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from "./button";
+import { Button } from "./";
 
 const meta: Meta<typeof Button> = {
 	title: "Button",

src/components/button.tsx → packages/button/index.tsx

@@ -2,7 +2,7 @@ import { type ButtonHTMLAttributes, forwardRef } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 import type { WithAsChild } from "../types/as-child";
 import type { VariantProps } from "../types/variant-props";
 

src/components/card.stories.tsx → packages/card/card.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Card, CardBody, CardFooter, CardHeader, CardTitle } from "./card";
+import { Card, CardBody, CardFooter, CardHeader, CardTitle } from "./";
 
 const meta = {
 	title: "Card",

src/components/card.tsx → packages/card/index.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { Slot } from "@radix-ui/react-slot";
 
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 import type { WithAsChild } from "../types/as-child";
 
 export type Props = HTMLAttributes<HTMLDivElement>;

src/mantle.css → packages/core/mantle.css

@@ -1,4 +1,4 @@
-@import url("./assets/fonts/fonts.css");
+@import url("./fonts/fonts.css");
 
 @tailwind base;
 @tailwind components;

tailwind.base.config.ts → packages/core/tailwind.preset.ts

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 import defaultTheme from "tailwindcss/defaultTheme";
+import tailwindCssAnimatePlugin from "tailwindcss-animate";
 
 export default {
 	darkMode: "class",
@@ -146,5 +147,5 @@ export default {
 			},
 		},
 	},
-	plugins: [require("tailwindcss-animate")],
+	plugins: [tailwindCssAnimatePlugin],
 };

src/lib/cx.test.ts → packages/cx/cx.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { cx } from "./cx";
+import { cx } from ".";
 
 describe("cx", () => {
 	test("given '', returns ''", () => {

src/components/dropdown-menu.tsx → packages/dropdown-menu/index.tsx

@@ -1,12 +1,10 @@
-"use client";
-
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
 import type { ComponentPropsWithoutRef, ElementRef } from "react";
 import { forwardRef } from "react";
 
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

src/components/input.tsx → packages/input/index.tsx

@@ -2,7 +2,7 @@ import type { InputHTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 import type { VariantProps } from "../types/variant-props";
 import type { AutoComplete, InputType } from "../types/input";
 

src/components/input.stories.tsx → packages/input/input.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Input } from "./input";
+import { Input } from "./";
 
 const meta: Meta<typeof Input> = {
 	title: "Input",

src/components/media-object.tsx → packages/media-object/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import type { HTMLAttributes } from "react";
 
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 
 type Props = HTMLAttributes<HTMLDivElement>;
 

src/components/media-object.stories.tsx → packages/media-object/media-object.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { MediaObject, MediaObjectMedia, MediaObjectContent } from "./media-object";
+import { MediaObject, MediaObjectMedia, MediaObjectContent } from "./";
 
 const meta = {
 	title: "MediaObject",

src/components/portal.tsx → packages/portal/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { PropsWithChildren } from "react";
 import { createPortal } from "react-dom";
 

src/components/select.tsx → packages/select/index.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
 import {
 	Root,
@@ -20,7 +18,7 @@ import {
 import type { ComponentPropsWithoutRef, ElementRef } from "react";
 import { forwardRef } from "react";
 
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 
 const Select = Root;
 

src/components/tooltip.tsx → packages/tooltip/index.tsx

@@ -1,6 +1,6 @@
 import { Provider, Root, Trigger, Content } from "@radix-ui/react-tooltip";
 
-import { cx } from "../lib/cx";
+import { cx } from "../cx";
 import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
 
 const TooltipProvider = Provider;

tailwind.config.ts

@@ -1,6 +1,6 @@
-import baseConfig from "./tailwind.base.config";
+import baseConfig from "./packages/core/tailwind.preset";
 
 export default {
 	presets: [baseConfig],
-	content: ["./src/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
+	content: ["./packages/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
 };

tsconfig.json

@@ -16,7 +16,7 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"],
-      "@/*": ["./src/*"],
+      "@/*": ["./packages/*"],
     },
 
     // Remix takes care of building everything in `remix build`.

vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
 	test: {
 		globals: true,
 		environment: "jsdom",
-		setupFiles: "./src/test/setup.ts",
+		setupFiles: "./vitest.setup.ts",
 		// you might want to disable it, if you don't have tests that rely on CSS
 		// since parsing CSS is slow
 		css: true,