Merge branch 'new-contri' of https://github.com/BadriVishalPadhy/unkey …

…into new-contri

.github/workflows/autofix.ci.yaml

@@ -23,7 +23,7 @@ jobs:
 
       - run: pnpm biome format . --write && pnpm biome check . --apply
 
-      - uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
   lint_docs:
     name: Docs
     runs-on: ubuntu-latest

LICENSE

@@ -3,6 +3,7 @@ Copyright (c) 2023-present Unkeyed, Inc.
 Portions of this software are licensed as follows:
 
 * All content that resides under https://github.com/unkeyed/unkey/tree/main/packages directory of this repository is licensed under the license defined in each package.
+* All content that resides under https://github.com/unkeyed/unkey/tree/main/internal/icons directory of this repository is licensed under the license defined in the package.
 * All third party components incorporated into the Unkeyed,Inc Software are licensed under the original license provided by the owner of the applicable component.
 * Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 

apps/engineering/app/components/icon-swatch.tsx

@@ -0,0 +1,21 @@
+import type { PropsWithChildren } from "react";
+
+type Props = {
+  name: string;
+};
+export const Icon: React.FC<PropsWithChildren<Props>> = (props) => {
+  return (
+    <div className="flex flex-col justify-center items-center text-gray-12 gap-4">
+      <div className="size-12 flex items-center  justify-center aspect-square border border-gray-5 rounded-lg bg-gray-3 ">
+        {props.children}
+      </div>
+      <span className="text-sm font-mono">
+        {"<"}
+        {props.name}
+        {"/>"}
+      </span>
+    </div>
+  );
+};
+
+Icon.displayName = "Icon";

apps/engineering/app/components/render.tsx

@@ -5,16 +5,23 @@ import { ChevronRight } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
 import reactElementToJSXString from "react-element-to-jsx-string";
 
-export const RenderComponentWithSnippet: React.FC<PropsWithChildren> = (props) => {
+type Props = {
+  customCodeSnippet?: string;
+};
+
+export const RenderComponentWithSnippet: React.FC<PropsWithChildren<Props>> = (props) => {
   const [open, setOpen] = useState(false);
-  const snippet = reactElementToJSXString(props.children, {
-    showFunctions: true,
-    useBooleanShorthandSyntax: true,
-    displayName: (node) => {
-      // @ts-ignore
-      return node?.type.displayName ?? "Unknown";
-    },
-  });
+  const snippet =
+    props.customCodeSnippet ??
+    reactElementToJSXString(props.children, {
+      showFunctions: true,
+      useBooleanShorthandSyntax: true,
+
+      displayName: (node) => {
+        // @ts-ignore
+        return node?.type.displayName ?? "Unknown";
+      },
+    });
   return (
     <div className="rounded-lg border border-gray-6 bg-gray-1 overflow-hidden">
       <div className="p-8 xl:p-12">{props.children}</div>

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

@@ -1,5 +1,4 @@
 import { rfcSource } from "@/app/source";
-import { Card } from "fumadocs-ui/components/card";
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
 import type { Metadata } from "next";
@@ -37,16 +36,17 @@ export default async function Page(props: {
     <DocsPage toc={page.data.toc} full={page.data.full}>
       <DocsTitle>{page.data.title}</DocsTitle>
 
-      <Card title="">
-        <div className="grid grid-cols-2 font-mono">
-          <span>ID</span>
-          <span>{page.data.title.split(" ").at(0)}</span>
+      <div className="flex flex-col gap-2">
+        <div className="flex justify-between items-center font-mono text-sm">
           <span>{page.data.authors.length > 1 ? "Authors" : "Author"}</span>
           <span>{page.data.authors.join(", ")}</span>
+        </div>
+
+        <div className="flex justify-between items-center font-mono text-sm">
           <span>Date</span>
           <LocalDate date={new Date(page.data.date)} />
         </div>
-      </Card>
+      </div>
       <DocsDescription className="text-sm">{page.data.description}</DocsDescription>
 
       <DocsBody className="font-mono text-sm">

apps/engineering/content/design/icons.mdx

@@ -0,0 +1,148 @@
+---
+title: Icons
+description: Available icons for Unkey's apps.
+---
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { Row } from "@/app/components/row";
+
+import { Icon } from "@/app/components/icon-swatch";
+import { Icon as XXX } from "@unkey/icons";
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+import {
+  Bolt,
+  BookBookmark,
+  Check,
+  ChevronExpandY,
+  Fingerprint,
+  Layers3,
+  Nodes,
+  Plus,
+  ShieldCheck,
+  Sparkle3,
+  TaskChecked,
+  TaskUnchecked,
+  Trash,
+  TriangleWarning,
+  Ufo,
+} from "@unkey/icons"
+
+
+
+
+<TypeTable
+  type={{
+    className: {
+      description:
+        'A className applied to the icon to override the styling in edge cases. In most cases you should not change the size of the icon.',
+      type: 'string | undefined',
+      default: undefined
+    },
+  }}
+/>
+
+
+
+
+## Customize
+
+As a rule of thumb, you should only customize the color, but there's always an edge case.
+
+<RenderComponentWithSnippet customCodeSnippet={`<Row>
+    <Nodes className="text-error-9"/>
+    <Sparkle3 className="text-warning-9 size-16"/>
+    <TaskUnchecked className="size-[12px]"/>
+</Row>`}>
+<Row>
+  <Nodes className="text-error-9"/>
+  <Sparkle3 className="text-warning-9 size-16"/>
+  <TaskUnchecked className="size-[12px]"/>
+</Row>
+</RenderComponentWithSnippet>
+## Icons
+
+These are all the icons available to import.
+```tsx
+import { IconName } from "@unkey/icons"
+```
+
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+  <Icon name="Bolt"><Bolt/></Icon>
+  <Icon name="BookBookmark"><BookBookmark/></Icon>
+  <Icon name="Check"><Check/></Icon>
+  <Icon name="ChevronExpandY"><ChevronExpandY/></Icon>
+  <Icon name="Fingerprint"><Fingerprint/></Icon>
+  <Icon name="Layers3"><Layers3/></Icon>
+  <Icon name="Nodes"><Nodes/></Icon>
+  <Icon name="Plus"><Plus/></Icon>
+  <Icon name="ShieldCheck"><ShieldCheck/></Icon>
+  <Icon name="Sparkle3"><Sparkle3/></Icon>
+  <Icon name="TaskChecked"><TaskChecked/></Icon>
+  <Icon name="TaskUnchecked"><TaskUnchecked/></Icon>
+  <Icon name="Trash"><Trash/></Icon>
+  <Icon name="TriangleWarning"><TriangleWarning/></Icon>
+  <Icon name="Ufo"><Ufo/></Icon>
+</div>
+
+
+## Adding new icons
+
+Importing icons is a manual process.
+<Steps>
+
+<Step>
+  Open the icon in the `Nucleo UI Essential` collection and select the icon(s) you want to export.
+</Step>
+<Step>
+  Export it as `jsx`, and remove the title.
+  ![Nucleo Export Settings](./icons-export-settings.png)
+</Step>
+
+<Step>
+  Update the code to match our guidelines.
+
+<Steps>
+  <Step>
+    Rename the file to `.tsx`
+  </Step>
+  <Step>
+    Add the following license block at the start of the file:
+    ```tsx
+    /**
+    * Copyright © Nucleo
+    * Version 1.3, January 3, 2024
+    * Nucleo Icons
+    * https://nucleoapp.com/
+    * - Redistribution of icons is prohibited.
+    * - Icons are restricted for use only within the product they are bundled with.
+    *
+    * For more details:
+    * https://nucleoapp.com/license
+    */
+    ```
+  </Step>
+  <Step>
+    Replace the function syntax with: `export const INSERT_ICON_NAME: React.FC<IconProps> = (props) => {`
+  </Step>
+  <Step>
+    Remove the default export
+  </Step>
+  <Step>
+    Update all color references to `currentColor`
+  </Step>
+  <Step>
+    Add `{...props}` to the root `svg` element.
+  </Step>
+  <Step>
+    Export it in the `/internal/icons/src/index.ts` barrel file.
+  </Step>
+  <Step>
+    Import and add it in in this file under [#icons](/design/icons#icons) in alphabetic order.
+  </Step>
+</Steps>
+
+</Step>
+
+
+</Steps>