feat: icons (#2700)

* feat: icons

* feat: icons

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/content/design/icons.mdx

@@ -0,0 +1,133 @@
+---
+title: Icons
+description: How we're using Nucleo Icons
+---
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { Row } from "@/app/components/row";
+
+import { Icon } from "@/app/components/icon-swatch";
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+import {Bolt,BookBookmark,Check,ChevronExpandY,Nodes,ShieldCheck,Sparkle3,TaskChecked, TaskUnchecked   } from "@unkey/icons"
+
+
+<Callout type="warn">
+  **Nucleo icons is a paid product.**
+
+  Unkey owns a license to use up to 100 icons in our open source application.
+
+  See [https://nucleoapp.com/license](https://nucleoapp.com/license).
+
+</Callout>
+
+
+
+<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 | undefiend',
+      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="Nodes"><Nodes/></Icon>
+<Icon  name="ShieldCheck"><ShieldCheck/></Icon>
+<Icon  name="Sparkle3"><Sparkle3/></Icon>
+<Icon  name="TaskUnchecked"><TaskUnchecked/></Icon>
+<Icon  name="TaskChecked"><TaskChecked/></Icon>
+</div>
+
+
+## Importing 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>

apps/engineering/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
+    "@unkey/icons": "workspace:^",
     "@unkey/ui": "workspace:^",
     "fumadocs-core": "14.4.0",
     "fumadocs-mdx": "11.1.1",

apps/engineering/tailwind.config.js

@@ -9,6 +9,7 @@ export default {
     "./mdx-components.{ts,tsx}",
     "./node_modules/fumadocs-ui/dist/**/*.js",
     "../../internal/ui/**/*.tsx",
+    "../../internal/icons/**/*.tsx",
   ],
 
   theme: unkeyUiTailwindConfig.theme,

internal/icons/LICENSE

@@ -0,0 +1,14 @@
+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

internal/icons/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@unkey/icons",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "keywords": [],
+  "author": "Andreas Thomas",
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "@unkey/tsconfig": "workspace:^"
+  },
+  "dependencies": {
+    "react": "^18.2.0"
+  }
+}

internal/icons/src/Readme.txt

@@ -0,0 +1,7 @@
+Here's the list of props you should pass to your icon instance:
+- width: icon width (available if 'Replace height/width values with props' was checked while exporting);
+- height: icon height (available if 'Replace height/width values with props' was checked while exporting);
+- fill: icon color (available if 'Replace inline colors with props' was checked while exporting);
+- secondaryfill: icon secondary color (available if 'Replace inline colors with props' was checked while exporting);
+- strokewidth: icon stroke width (available if 'Replace stroke-width values with props' was checked while exporting);
+- title: icon title (available if 'Remove <title> element' was not checked while exporting).

internal/icons/src/icons/bolt.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+import type React from "react";
+import type { IconProps } from "../props";
+
+export const Bolt: React.FC<IconProps> = (props) => {
+  return (
+    <svg {...props} height="18" width="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <path
+          d="m8.597,16.41l5.872-8.265c.118-.166,0-.395-.204-.395h-5.016l.604-5.98c.037-.26-.299-.394-.451-.18L3.531,9.855c-.118.166,0,.395.204.395h5.016l-.604,5.98c-.037.26.299.394.451.18Z"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+      </g>
+    </svg>
+  );
+};

internal/icons/src/icons/book-bookmark.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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
+ */
+
+import type React from "react";
+import type { IconProps } from "../props";
+export const BookBookmark: React.FC<IconProps> = (props) => {
+  return (
+    <svg {...props} height="18" width="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <g fill="currentColor">
+        <path
+          d="M2.75,14V4.25c0-1.105,.895-2,2-2H15.25V12.25"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          d="M11,14H7v3.5c0,.202,.122,.385,.309,.462,.187,.079,.401,.035,.545-.108l1.146-1.146,1.146,1.146c.096,.096,.224,.146,.354,.146,.064,0,.13-.012,.191-.038,.187-.077,.309-.26,.309-.462v-3.5Z"
+          fill="currentColor"
+          stroke="none"
+        />
+        <path
+          d="M5.25,15.75h-.75c-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75H15.25c-.641,.844-.734,2.547,0,3.5h-2.5"
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <circle cx="5.75" cy="9.75" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="5.75" cy="4.75" fill="currentColor" r=".75" stroke="none" />
+        <circle cx="5.75" cy="7.25" fill="currentColor" r=".75" stroke="none" />
+      </g>
+    </svg>
+  );
+};

internal/icons/src/icons/check.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+
+import type React from "react";
+import type { IconProps } from "../props";
+export const Check: React.FC<IconProps> = (props) => {
+  return (
+    <svg {...props} height="18" width="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+      <g fill="currentColor">
+        <polyline
+          fill="none"
+          points="2.75 9.25 6.75 14.25 15.25 3.75"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+      </g>
+    </svg>
+  );
+};