feat: creates ui package

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.rules.customizations": [
     {

apps/web/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@orbitkit/db": "workspace:^",
+    "@orbitkit/ui": "workspace:^",
     "geist": "^1.2.1",
     "next": "14.1.0",
     "next-themes": "^0.2.1",

cspell.config.yaml

@@ -5,8 +5,10 @@ ignorePaths:
   - pnpm-lock.yaml
   - .tsbuildinfo
   - .gitignore
+  - dist
 words:
   - astro
+  - clsx
   - commitlint
   - esbenp
   - ianvs
@@ -17,5 +19,6 @@ words:
   - packagejson
   - tailwindcss
   - tsbuildinfo
+  - tsup
   - turborepo
   - typecheck

packages/ui/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@orbitkit/ui",
+  "version": "0.1.0",
+  "description": "OrbitKit UI Design System Components Library",
+  "license": "MIT",
+  "author": "OrbitKit",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "default": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "require": {
+        "default": "./dist/index.cjs",
+        "types": "./dist/index.d.cts"
+      }
+    },
+    "./avatar": {
+      "import": {
+        "default": "./dist/avatar.js",
+        "types": "./dist/avatar.d.ts"
+      },
+      "require": {
+        "default": "./dist/avatar.cjs",
+        "types": "./dist/avatar.d.cts"
+      }
+    },
+    "./cn": {
+      "import": {
+        "default": "./dist/utils/cn.js",
+        "types": "./dist/utils/cn.d.ts"
+      },
+      "require": {
+        "default": "./dist/utils/cn.cjs",
+        "types": "./dist/utils/cn.d.cts"
+      }
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@orbitkit/tailwind": "workspace:^",
+    "@orbitkit/tsconfig": "workspace:^",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "autoprefixer": "^10.4.17",
+    "eslint-config-orbitkit": "workspace:^",
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.4",
+    "tailwindcss": "^3.4.1",
+    "tsup": "^8.0.1"
+  }
+}

packages/ui/src/avatar.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

packages/ui/src/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar';
+export * from './utils/cn';

packages/ui/src/utils/cn.ts

@@ -0,0 +1,8 @@
+import type { ClassValue } from 'clsx';
+
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/ui/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'tailwindcss';
+
+import { orbitKitTailwindPreset } from '@orbitkit/tailwind';
+
+const config: Config = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  darkMode: 'class',
+  presets: [orbitKitTailwindPreset],
+};
+
+export default config;

packages/ui/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": ["@orbitkit/tsconfig/react.json"],
+  "compilerOptions": {
+    "tsBuildInfoFile": ".tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
+  },
+  "exclude": ["dist", "node_modules"],
+}

packages/ui/tsup.config.ts

@@ -0,0 +1,76 @@
+import fs from 'node:fs';
+
+import prettier from 'prettier';
+import { defineConfig } from 'tsup';
+
+const entries = [
+  {
+    source: './src/index.ts',
+    export: '.',
+  },
+  {
+    source: './src/avatar.tsx',
+    export: './avatar',
+  },
+  {
+    source: './src/utils/cn.ts',
+    export: './cn',
+  },
+];
+
+export default defineConfig({
+  entry: entries.map((entry) => entry.source),
+  format: ['esm', 'cjs'],
+  splitting: true,
+  sourcemap: true,
+  minify: true,
+  clean: true,
+  dts: true,
+  outDir: 'dist',
+  async onSuccess() {
+    const packageJson = fs.readFileSync('./package.json', 'utf-8');
+    const pkg = JSON.parse(packageJson);
+    pkg.exports = entries.reduce(
+      (acc: { [key: string]: Record<string, unknown> }, entry) => {
+        acc[entry.export] = {
+          import: {
+            default: entry.source
+              .replace('src', 'dist')
+              .replace(/\.tsx?$/, '.js'),
+            types: entry.source
+              .replace('src', 'dist')
+              .replace(/\.tsx?$/, '.d.ts'),
+          },
+          require: {
+            default: entry.source
+              .replace('src', 'dist')
+              .replace(/\.tsx?$/, '.cjs'),
+            types: entry.source
+              .replace('src', 'dist')
+              .replace(/\.tsx?$/, '.d.cts'),
+          },
+        };
+        return acc;
+      },
+      {},
+    );
+
+    pkg.main = './dist/index.cjs';
+    pkg.module = './dist/index.js';
+    pkg.types = './dist/index.d.ts';
+
+    fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2));
+
+    const prettierConfig = await prettier.resolveConfig(
+      '../../prettier.config.js',
+    );
+
+    if (prettierConfig) {
+      const formatted = await prettier.format(packageJson, {
+        ...prettierConfig,
+        filepath: './package.json',
+      });
+      fs.writeFileSync('./package.json', formatted);
+    }
+  },
+});