feat: design system (#2667)

* feat: design system

* feat: button

* feat: button

apps/engineering/app/components/render.tsx

@@ -0,0 +1,19 @@
+import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
+import type { PropsWithChildren } from "react";
+import reactElementToJSXString from "react-element-to-jsx-string";
+
+export const RenderComponentWithSnippet: React.FC<PropsWithChildren> = (props) => {
+  return (
+    <div>
+      {props.children}
+      <CodeBlock>
+        <Pre>
+          {reactElementToJSXString(props.children, {
+            showFunctions: true,
+            useBooleanShorthandSyntax: true,
+          })}
+        </Pre>
+      </CodeBlock>
+    </div>
+  );
+};

apps/engineering/app/components/row.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react";
+
+export const Row: React.FC<PropsWithChildren> = (props) => {
+  return <div className="flex w-full items-center justify-around gap-8">{props.children}</div>;
+};
+
+Row.displayName = "Row";

apps/engineering/app/design/[[...slug]]/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { componentSource } from "@/app/source";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
+//import { createTypeTable } from 'fumadocs-typescript/ui';
+
+import { notFound } from "next/navigation";
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+
+  const page = componentSource.getPage(params.slug);
+
+  if (!page) {
+    notFound();
+  }
+  //const { AutoTypeTable } = createTypeTable();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+
+      <DocsDescription>{page.data.description}</DocsDescription>
+
+      <DocsBody>
+        <MDX components={{ ...defaultMdxComponents }} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+/*
+export async function generateStaticParams() {
+  return componentSource.generateParams();
+}
+
+export function generateMetadata({ params }: { params: { slug?: string[] } }) {
+  const page = componentSource.getPage(params.slug);
+  if (!page) {
+    notFound();
+  }
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  } satisfies Metadata;
+}
+*/

apps/engineering/app/design/layout.tsx

@@ -0,0 +1,12 @@
+import { componentSource } from "@/app/source";
+import "@unkey/ui/css";
+import { DocsLayout } from "fumadocs-ui/layouts/notebook";
+import type { ReactNode } from "react";
+import { baseOptions } from "../layout.config";
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={componentSource.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}

apps/engineering/app/docs/[[...slug]]/page.tsx

@@ -5,12 +5,11 @@ import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page
 import type { Metadata } from "next";
 
 import { notFound } from "next/navigation";
-
-export default async function Page({
-  params,
-}: {
-  params: { slug?: string[] };
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
 }) {
+  const params = await props.params;
+
   const page = source.getPage(params.slug);
   if (!page) {
     notFound();
@@ -53,8 +52,8 @@ export async function generateStaticParams() {
   return source.generateParams();
 }
 
-export function generateMetadata({ params }: { params: { slug?: string[] } }) {
-  const page = source.getPage(params.slug);
+export async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) {
+  const page = source.getPage((await params).slug);
   if (!page) {
     notFound();
   }

apps/engineering/app/layout.config.tsx

@@ -35,6 +35,11 @@ export const baseOptions: HomeLayoutProps = {
       url: "/rfcs",
       active: "nested-url",
     },
+    {
+      text: "Design",
+      url: "/design",
+      active: "nested-url",
+    },
     {
       text: "GitHub",
       url: "https://github.com/unkeyed/unkey",

apps/engineering/app/layout.tsx

@@ -1,15 +1,18 @@
 import { RootProvider } from "fumadocs-ui/provider";
-import { Inter } from "next/font/google";
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
+
 import type { ReactNode } from "react";
-import "./global.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
+import "./global.css";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${GeistSans.variable} ${GeistMono.variable}`}
+      suppressHydrationWarning
+    >
       <body>
         <RootProvider>{children}</RootProvider>
       </body>

apps/engineering/app/rfcs/[[...slug]]/page.tsx

@@ -7,11 +7,11 @@ import { LocalDate } from "./local-date";
 
 import { notFound } from "next/navigation";
 
-export default async function Page({
-  params,
-}: {
-  params: { slug?: string[] };
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
 }) {
+  const params = await props.params;
+
   const page = rfcSource.getPage(params.slug);
 
   if (!page) {
@@ -60,8 +60,8 @@ export async function generateStaticParams() {
   return rfcSource.generateParams();
 }
 
-export function generateMetadata({ params }: { params: { slug?: string[] } }) {
-  const page = rfcSource.getPage(params.slug);
+export async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) {
+  const page = rfcSource.getPage((await params).slug);
   if (!page) {
     notFound();
   }

apps/engineering/app/source.ts

@@ -1,4 +1,4 @@
-import { docs, meta, rfcs } from "@/.source";
+import { components, docs, meta, rfcs } from "@/.source";
 import { loader } from "fumadocs-core/source";
 import { createMDXSource } from "fumadocs-mdx";
 
@@ -11,3 +11,8 @@ export const rfcSource = loader({
   baseUrl: "/rfcs",
   source: createMDXSource(rfcs, []),
 });
+
+export const componentSource = loader({
+  baseUrl: "/design",
+  source: createMDXSource(components, []),
+});

apps/engineering/content/design/colors.mdx

@@ -0,0 +1,128 @@
+---
+title: Colors
+description: Color scale and usage
+---
+
+
+
+
+
+
+
+Unkey uses [Radix Colors](https://www.radix-ui.com/colors) and its scale.
+Darkmode is handled automatically, outside of specific edge cases we don't need to apply separate `dark:` classes.
+
+| Step  | Use Case                                |
+|-------|-----------------------------------------|
+| 1     | App background                          |
+| 2     | Subtle background                       |
+| 3     | UI element background                   |
+| 4     | Hovered UI element background           |
+| 5     | Active / Selected UI element background |
+| 6     | Subtle borders and separators           |
+| 7     | UI element border and focus rings       |
+| 8     | Hovered UI element border               |
+| 9     | Solid backgrounds                       |
+| 10    | Hovered solid backgrounds               |
+| 11    | Low-contrast text                       |
+| 12    | High-contrast text                      |
+
+[Read more](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale)
+
+
+## gray
+<div className="grid grid-cols-12 gap-2">
+  <div className="rounded-lg aspect-square bg-gray-1"/>
+  <div className="rounded-lg aspect-square bg-gray-2"/>
+  <div className="rounded-lg aspect-square bg-gray-3"/>
+  <div className="rounded-lg aspect-square bg-gray-4"/>
+  <div className="rounded-lg aspect-square bg-gray-5"/>
+  <div className="rounded-lg aspect-square bg-gray-6"/>
+  <div className="rounded-lg aspect-square bg-gray-7"/>
+  <div className="rounded-lg aspect-square bg-gray-8"/>
+  <div className="rounded-lg aspect-square bg-gray-9"/>
+  <div className="rounded-lg aspect-square bg-gray-10"/>
+  <div className="rounded-lg aspect-square bg-gray-11"/>
+  <div className="rounded-lg aspect-square bg-gray-12"/>
+</div>
+
+## success
+<div className="grid grid-cols-12 gap-2">
+  <div className="rounded-lg aspect-square bg-success-1"/>
+  <div className="rounded-lg aspect-square bg-success-2"/>
+  <div className="rounded-lg aspect-square bg-success-3"/>
+  <div className="rounded-lg aspect-square bg-success-4"/>
+  <div className="rounded-lg aspect-square bg-success-5"/>
+  <div className="rounded-lg aspect-square bg-success-6"/>
+  <div className="rounded-lg aspect-square bg-success-7"/>
+  <div className="rounded-lg aspect-square bg-success-8"/>
+  <div className="rounded-lg aspect-square bg-success-9"/>
+  <div className="rounded-lg aspect-square bg-success-10"/>
+  <div className="rounded-lg aspect-square bg-success-11"/>
+  <div className="rounded-lg aspect-square bg-success-12"/>
+</div>
+
+## info
+<div className="grid grid-cols-12 gap-2">
+  <div className="rounded-lg aspect-square bg-info-1"/>
+  <div className="rounded-lg aspect-square bg-info-2"/>
+  <div className="rounded-lg aspect-square bg-info-3"/>
+  <div className="rounded-lg aspect-square bg-info-4"/>
+  <div className="rounded-lg aspect-square bg-info-5"/>
+  <div className="rounded-lg aspect-square bg-info-6"/>
+  <div className="rounded-lg aspect-square bg-info-7"/>
+  <div className="rounded-lg aspect-square bg-info-8"/>
+  <div className="rounded-lg aspect-square bg-info-9"/>
+  <div className="rounded-lg aspect-square bg-info-10"/>
+  <div className="rounded-lg aspect-square bg-info-11"/>
+  <div className="rounded-lg aspect-square bg-info-12"/>
+</div>
+
+
+## warning
+<div className="grid grid-cols-12 gap-2">
+  <div className="rounded-lg aspect-square bg-warning-1"/>
+  <div className="rounded-lg aspect-square bg-warning-2"/>
+  <div className="rounded-lg aspect-square bg-warning-3"/>
+  <div className="rounded-lg aspect-square bg-warning-4"/>
+  <div className="rounded-lg aspect-square bg-warning-5"/>
+  <div className="rounded-lg aspect-square bg-warning-6"/>
+  <div className="rounded-lg aspect-square bg-warning-7"/>
+  <div className="rounded-lg aspect-square bg-warning-8"/>
+  <div className="rounded-lg aspect-square bg-warning-9"/>
+  <div className="rounded-lg aspect-square bg-warning-10"/>
+  <div className="rounded-lg aspect-square bg-warning-11"/>
+  <div className="rounded-lg aspect-square bg-warning-12"/>
+</div>
+
+## error
+<div className="grid grid-cols-12 gap-2">
+  <div className="rounded-lg aspect-square bg-error-1"/>
+  <div className="rounded-lg aspect-square bg-error-2"/>
+  <div className="rounded-lg aspect-square bg-error-3"/>
+  <div className="rounded-lg aspect-square bg-error-4"/>
+  <div className="rounded-lg aspect-square bg-error-5"/>
+  <div className="rounded-lg aspect-square bg-error-6"/>
+  <div className="rounded-lg aspect-square bg-error-7"/>
+  <div className="rounded-lg aspect-square bg-error-8"/>
+  <div className="rounded-lg aspect-square bg-error-9"/>
+  <div className="rounded-lg aspect-square bg-error-10"/>
+  <div className="rounded-lg aspect-square bg-error-11"/>
+  <div className="rounded-lg aspect-square bg-error-12"/>
+</div>
+
+## feature
+<div className="grid grid-cols-12 gap-2">
+  <div className="rounded-lg aspect-square bg-feature-1"/>
+  <div className="rounded-lg aspect-square bg-feature-2"/>
+  <div className="rounded-lg aspect-square bg-feature-3"/>
+  <div className="rounded-lg aspect-square bg-feature-4"/>
+  <div className="rounded-lg aspect-square bg-feature-5"/>
+  <div className="rounded-lg aspect-square bg-feature-6"/>
+  <div className="rounded-lg aspect-square bg-feature-7"/>
+  <div className="rounded-lg aspect-square bg-feature-8"/>
+  <div className="rounded-lg aspect-square bg-feature-9"/>
+  <div className="rounded-lg aspect-square bg-feature-10"/>
+  <div className="rounded-lg aspect-square bg-feature-11"/>
+  <div className="rounded-lg aspect-square bg-feature-12"/>
+</div>