refactor(WIP): dashboard stack to shacdn|tailwind|radix|tanstack

apps/dashboard/.eslintrc

@@ -1,7 +1,4 @@
 {
  "root": true,
- "extends": [
- "next",
- "next/core-web-vitals"
- ]
+ "extends": ["next", "next/core-web-vitals"],
 }

apps/dashboard/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -25,16 +26,11 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
-.env
 
-# Sentry
-.sentryclirc
-
-karrio/rest/generated/.openapi-generator/
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/dashboard/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/dashboard/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/dashboard/next.config.mjs

@@ -0,0 +1,44 @@
+import { withSentryConfig } from "@sentry/nextjs";
+import path from "path";
+
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ basePath: BASE_PATH,
+ reactStrictMode: true,
+ transpilePackages: [
+ "@karrio/core",
+ "@karrio/hooks",
+ "@karrio/ui",
+ "@karrio/lib",
+ "@karrio/types",
+ "@karrio/insiders",
+ ],
+ sentry: {
+ disableServerWebpackPlugin: true,
+ disableClientWebpackPlugin: true,
+ },
+ sassOptions: {
+ includePaths: [path.join("src", "app", "styles")],
+ },
+ webpack: (config) => {
+ config.resolve.fallback = { fs: false, net: false, tls: false };
+ config.externals.push("pino-pretty", "encoding");
+ return config;
+ },
+};
+
+const sentryWebpackPluginOptions = {
+ // Additional config options for the Sentry Webpack plugin. Keep in mind that
+ // the following options are set automatically, and overriding them is not
+ // recommended:
+ // release, url, org, project, authToken, configFile, stripPrefix,
+ // urlPrefix, include, ignore
+
+ silent: true, // Suppresses all logs
+ // For all available options, see:
+ // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+export default withSentryConfig(nextConfig, sentryWebpackPluginOptions);

apps/dashboard/package.json

@@ -1,26 +1,26 @@
 {
- "name": "@karrio/dashboard",
- "version": "1.0.0",
+ "name": "@karrio/platform",
+ "version": "0.1.0",
+ "private": true,
  "scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
- "lint": "next lint",
- "gen:rest": "cd ..; ./bin/generate-rest-types",
- "gen:graph": "cd ..; ./bin/generate-graphql-types",
- "build:image": "cd ..; ./bin/build-dashboard-image"
+ "lint": "next lint"
  },
  "dependencies": {
  "@karrio/core": "*",
  "@karrio/hooks": "*",
  "@karrio/lib": "*",
  "@karrio/types": "*",
- "@karrio/ui": "*"
+ "@karrio/ui": "*",
+ "@karrio/insiders": "*"
  },
  "devDependencies": {
- "eslint": "7.32.0",
- "eslint-config-custom": "*",
- "eslint-config-next": "^13.1.2",
+ "postcss": "^8",
+ "tailwindcss": "^3.4.1",
+ "eslint": "^8",
+ "eslint-config-next": "14.2.8",
  "tsconfig": "*"
  }
 }

apps/dashboard/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+ plugins: {
+ tailwindcss: {},
+ },
+};
+
+export default config;

apps/dashboard/public/manifest.json

@@ -1,17 +1,17 @@
 {
- "short_name": "purpleboard",
- "name": "Purple Board",
+ "short_name": "karrio",
+ "name": "Karrio Board",
  "icons": [
  {
  "src": "android-chrome-192x192.png",
  "sizes": "192x192",
- "type": "image\/png",
+ "type": "image/png",
  "density": "4.0"
  },
  {
  "src": "android-chrome-512x512.png",
  "sizes": "512x512",
- "type": "image\/png",
+ "type": "image/png",
  "density": "4.0"
  }
  ],

apps/dashboard/src/app/(app)/[domain]/api/images/[name]/route.ts

@@ -0,0 +1 @@
+export { GET } from "@karrio/core/context/image";

apps/dashboard/src/app/(app)/test/admin/layout.tsx

@@ -0,0 +1 @@
+export { default } from "@karrio/core/layouts/admin-layout";

apps/dashboard/src/app/(platform)/(auth)/layout.tsx

@@ -0,0 +1 @@
+export { default } from "@karrio/insiders/layouts/dashboard-layout";

apps/dashboard/src/app/(platform)/(auth)/platform-carriers/page.tsx

@@ -0,0 +1,4 @@
+export {
+ default,
+ generateMetadata,
+} from "@karrio/insiders/modules/platform-carriers";

apps/dashboard/src/app/(platform)/(auth)/platform-orders/page.tsx

@@ -0,0 +1,4 @@
+export {
+ default,
+ generateMetadata,
+} from "@karrio/insiders/modules/platform-orders";

apps/dashboard/src/app/(platform)/(auth)/platform-shipments/page.tsx

@@ -0,0 +1,4 @@
+export {
+ default,
+ generateMetadata,
+} from "@karrio/insiders/modules/platform-shipments";

apps/dashboard/src/app/(platform)/(auth)/platform-store/page.tsx

@@ -0,0 +1,4 @@
+export {
+ default,
+ generateMetadata,
+} from "@karrio/insiders/modules/platform-store";

apps/dashboard/src/app/(platform)/(auth)/platform-trackers/page.tsx

@@ -0,0 +1,4 @@
+export {
+ default,
+ generateMetadata,
+} from "@karrio/insiders/modules/platform-trackers";

apps/dashboard/src/app/(platform)/layout.tsx

@@ -0,0 +1,2 @@
+import "../../styles/globals.css";
+export { default } from "@karrio/insiders/layouts/root-layout";

apps/dashboard/src/app/api/images/[name]/route.ts

@@ -1,43 +1 @@
-import { formatCarrierSlug, getInitials, isNoneOrEmpty } from "@karrio/lib";
-import { NextRequest } from "next/server";
-
-export async function GET(
- request: NextRequest,
- { params }: { params: { name: string } },
-) {
- const { name } = params;
- const searchParams = request.nextUrl.searchParams;
- const isIcon = name.includes("_icon");
- const [_name, ..._] = name.replace(isIcon ? "_icon" : "_logo", "").split(".");
- const carrier_name = isIcon
- ? getInitials(_name).substring(0, 2)
- : formatCarrierSlug(_name);
- const text_color = isNoneOrEmpty(searchParams.get("text_color"))
- ? "#ddd"
- : decodeURIComponent(searchParams.get("text_color") as string);
- const background = isNoneOrEmpty(searchParams.get("background"))
- ? "#7e51e1"
- : decodeURIComponent(searchParams.get("background") as string);
- const props = isIcon ? 'viewBox="0 0 512 512"' : 'viewBox="0 0 125 25"';
- const path = isIcon
- ? `<path xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;fill:${background};" d="M512,472c0,22.1-17.9,40-40,40H40c-22.1,0-40-17.9-40-40V40C0,17.9,17.9,0,40,0h432c22.1,0,40,17.9,40,40V472z"/>`
- : `<path xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;fill:${background};" d="M125,0v25H0V0H125z"/>`;
-
- const content = `<svg ${props} x="0px" y="0px" xmlns="http://www.w3.org/2000/svg">
- <g>
- ${path}
-
- <text x="50%" y="55%" alignment-baseline="middle" text-anchor="middle" fill="${text_color}" font-weight="bold" font-family="arial"
- font-size="${isIcon ? "16em" : ".95em"}" style="text-transform: uppercase; ${isIcon ? "border-radius: 40px;" : "4px"}">
- ${carrier_name}
- </text>
- </g>
- </svg>
- `;
-
- return new Response(content, {
- headers: {
- "Content-Type": "image/svg+xml",
- },
- });
-}
+export { GET } from "@karrio/core/context/image";