fix: drop workspaces

.eslintignore

@@ -1,4 +1,6 @@
 build
 tmp
 .cache
-.eslintrc
+.eslintrc
+public
+dist

config/eslint-config-react/index.cjs → .eslintrc.cjs

@@ -1,11 +1,16 @@
 module.exports = {
+  root: true,
   parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
   extends: [
     'eslint:recommended',
+    'plugin:prettier/recommended',
     'plugin:react/recommended',
     'plugin:jsx-a11y/recommended',
-    'prettier',
-    'plugin:prettier/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:@typescript-eslint/strict',
@@ -19,8 +24,8 @@ module.exports = {
     'prettier',
     'react-hooks',
     'import',
-    'simple-import-sort',
     '@typescript-eslint',
+    'simple-import-sort',
   ],
   rules: {
     'react/react-in-jsx-scope': 'off',
@@ -34,8 +39,9 @@ module.exports = {
     'prefer-object-spread': 'warn',
     'id-length': ['warn', {min: 2, exceptions: ['_', 'x', 'y', 'p']}],
     'sort-imports': 'off',
-    'simple-import-sort/imports': 'error',
     'no-unused-vars': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
     '@typescript-eslint/no-unused-vars': ['error'],
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
@@ -45,6 +51,17 @@ module.exports = {
     ],
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-throw-literal': 'off',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {prefer: 'type-imports', fixStyle: 'separate-type-imports'},
+    ],
+    '@typescript-eslint/no-extraneous-class': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    '@typescript-eslint/explicit-member-accessibility': [
+      'warn',
+      {accessibility: 'no-public'},
+    ],
   },
   settings: {
     react: {

packages/ui-core/.storybook/main.js → .storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -9,7 +9,11 @@ const config = {
   ],
   framework: {
     name: '@storybook/react-vite',
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: 'storybook.vite.config.ts',
+      },
+    },
   },
   docs: {
     autodocs: 'tag',

packages/ui-core/.storybook/preview.js → .storybook/preview.js

@@ -1,4 +1,4 @@
-import '../tailwind.css';
+import '../app/styles/tailwind.css';
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {

apps/dashboard/app/components/base-layout.tsx → app/components/base-layout.tsx

@@ -1,6 +1,6 @@
 import {CubeIcon} from '@heroicons/react/24/outline';
 import {Link} from '@remix-run/react';
-// import {Input} from '@white-label/ui-core/input';
+// import {Input} from '~/components/ui/input';
 import React from 'react';
 
 import {MainNav} from './main-nav';

apps/dashboard/app/components/error-feedback.tsx → app/components/error-feedback.tsx

@@ -1,4 +1,4 @@
-import {Alert, AlertDescription, AlertTitle} from '@white-label/ui-core/alert';
+import {Alert, AlertDescription, AlertTitle} from '~/components/ui/alert';
 
 export function ErrorMessage({errors}: {errors: Array<string>}) {
   return (

apps/dashboard/app/components/error-page.tsx → app/components/error-page.tsx

@@ -1,13 +1,14 @@
 import {Link} from '@remix-run/react';
-import {buttonVariants} from '@white-label/ui-core/button';
+
+import {buttonVariants} from '~/components/ui/button';
 import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@white-label/ui-core/card';
+} from '~/components/ui/card';
 
 import {GuestLayout} from './guest-layout.tsx';
 

apps/dashboard/app/components/main-nav.tsx → app/components/main-nav.tsx

@@ -8,7 +8,8 @@ import {
 } from '@heroicons/react/24/outline';
 import UserCircleIcon from '@heroicons/react/24/outline/UserCircleIcon';
 import {Link, NavLink, useParams} from '@remix-run/react';
-import {cn} from '@white-label/ui-core/utils';
+
+import {cn} from '~/utils/classname-utils';
 
 function StyledLink({
   item,

apps/dashboard/app/components/sub-menu.tsx → app/components/sub-menu.tsx

@@ -1,7 +1,8 @@
 import {NavLink} from '@remix-run/react';
-import {cn} from '@white-label/ui-core/utils';
 import React from 'react';
 
+import {cn} from '~/utils/classname-utils';
+
 export function SubMenuLink({
   to,
   children,

apps/dashboard/app/components/team-selector.tsx → app/components/team-selector.tsx

@@ -1,19 +1,15 @@
 import {useNavigate, useParams} from '@remix-run/react';
+
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@white-label/ui-core/select';
-
-import type {Membership} from '~/modules/domain/index.server';
+} from '~/components/ui/select';
+import type {Membership} from '~/core/domain/membership.server';
 
-export function TeamSelector({
-  memberships,
-}: {
-  memberships: Array<Membership.Membership>;
-}) {
+export function TeamSelector({memberships}: {memberships: Array<Membership>}) {
   const params = useParams();
   const slug = params.slug!;
 

packages/ui-core/src/alert-dialog.tsx → app/components/ui/alert-dialog.tsx

@@ -1,6 +1,8 @@
-import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import {cn} from './utils';
+import * as React from 'react';
+
+import {cn} from '~/utils/classname-utils';
+
 import {buttonVariants} from './button';
 
 const AlertDialog = AlertDialogPrimitive.Root;
@@ -15,7 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({className, ...props}, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -33,7 +35,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
         className
       )}
       {...props}
@@ -88,7 +90,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({className, ...props}, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -125,14 +127,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
+  AlertDialogDescription,
   AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
 };

packages/ui-core/src/alert.tsx → app/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import {cva, type VariantProps} from 'class-variance-authority';
 import * as React from 'react';
 
-import {cn} from './utils';
+import {cn} from '~/utils/classname-utils';
 
 const alertVariants = cva(
   'relative w-full rounded-lg border px-4 py-3 text-sm [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
@@ -60,4 +60,4 @@ const AlertDescription = React.forwardRef<
 ));
 AlertDescription.displayName = 'AlertDescription';
 
-export {Alert, AlertTitle, AlertDescription};
+export {Alert, AlertDescription, AlertTitle};

packages/ui-core/src/badge.tsx → app/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import {cva, type VariantProps} from 'class-variance-authority';
 import * as React from 'react';
 
-import {cn} from './utils';
+import {cn} from '~/utils/classname-utils';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

packages/ui-core/src/button.tsx → app/components/ui/button.tsx

@@ -2,7 +2,7 @@ import {Slot} from '@radix-ui/react-slot';
 import {cva, type VariantProps} from 'class-variance-authority';
 import * as React from 'react';
 
-import {cn} from './utils';
+import {cn} from '~/utils/classname-utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',

packages/ui-core/src/card.tsx → app/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {cn} from './utils';
+import {cn} from '~/utils/classname-utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -43,11 +43,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({className, ...props}, ref) => (
-  <p
-    ref={ref}
-    className={cn('text-sm text-gray-500', className)}
-    {...props}
-  />
+  <p ref={ref} className={cn('text-sm text-gray-500', className)} {...props} />
 ));
 CardDescription.displayName = 'CardDescription';
 
@@ -79,4 +75,4 @@ const CardFooter = React.forwardRef<
 ));
 CardFooter.displayName = 'CardFooter';
 
-export {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent};
+export {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};

packages/ui-core/src/checkbox.tsx → app/components/ui/checkbox.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import CheckIcon from '@heroicons/react/24/solid/CheckIcon';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
 
-import CheckIcon from '@heroicons/react/24/solid/CheckIcon';
-import {cn} from './utils';
+import {cn} from '~/utils/classname-utils';
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+      'peer flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}

packages/ui-core/src/dialog.tsx → app/components/ui/dialog.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import {cn} from './utils';
 import XMarkIcon from '@heroicons/react/24/solid/XMarkIcon';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+
+import {cn} from '~/utils/classname-utils';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -18,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -35,13 +36,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <XMarkIcon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -99,21 +100,21 @@ const DialogDescription = React.forwardRef<
 >(({className, ...props}, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
+  DialogTrigger,
 };