Skip to content

Commit 30f1e81

Browse files
BadriVishalPadhyBadriVishalPadhy
committed
Merge branch 'new-contri' of https://github.com/BadriVishalPadhy/unkey into new-contri
2 parents 02c3bee + c1bbfe4 commit 30f1e81

32 files changed

+1253
-30
lines changed

‎.github/workflows/autofix.ci.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ jobs:
2323

2424
- run: pnpm biome format . --write && pnpm biome check . --apply
2525

26-
- uses: autofix-ci/action@dd55f44df8f7cdb7a6bf74c78677eb8acd40cd0a
26+
- uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
2727
lint_docs:
2828
name: Docs
2929
runs-on: ubuntu-latest

‎LICENSE

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ Copyright (c) 2023-present Unkeyed, Inc.
33
Portions of this software are licensed as follows:
44

55
* 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.
6+
* 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.
67
* All third party components incorporated into the Unkeyed,Inc Software are licensed under the original license provided by the owner of the applicable component.
78
* Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
89

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { PropsWithChildren } from "react";
2+
3+
type Props = {
4+
name: string;
5+
};
6+
export const Icon: React.FC<PropsWithChildren<Props>> = (props) => {
7+
return (
8+
<div className="flex flex-col justify-center items-center text-gray-12 gap-4">
9+
<div className="size-12 flex items-center justify-center aspect-square border border-gray-5 rounded-lg bg-gray-3 ">
10+
{props.children}
11+
</div>
12+
<span className="text-sm font-mono">
13+
{"<"}
14+
{props.name}
15+
{"/>"}
16+
</span>
17+
</div>
18+
);
19+
};
20+
21+
Icon.displayName = "Icon";

‎apps/engineering/app/components/render.tsx

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,23 @@ import { ChevronRight } from "lucide-react";
55
import { type PropsWithChildren, useState } from "react";
66
import reactElementToJSXString from "react-element-to-jsx-string";
77

8-
export const RenderComponentWithSnippet: React.FC<PropsWithChildren> = (props) => {
8+
type Props = {
9+
customCodeSnippet?: string;
10+
};
11+
12+
export const RenderComponentWithSnippet: React.FC<PropsWithChildren<Props>> = (props) => {
913
const [open, setOpen] = useState(false);
10-
const snippet = reactElementToJSXString(props.children, {
11-
showFunctions: true,
12-
useBooleanShorthandSyntax: true,
13-
displayName: (node) => {
14-
// @ts-ignore
15-
return node?.type.displayName ?? "Unknown";
16-
},
17-
});
14+
const snippet =
15+
props.customCodeSnippet ??
16+
reactElementToJSXString(props.children, {
17+
showFunctions: true,
18+
useBooleanShorthandSyntax: true,
19+
20+
displayName: (node) => {
21+
// @ts-ignore
22+
return node?.type.displayName ?? "Unknown";
23+
},
24+
});
1825
return (
1926
<div className="rounded-lg border border-gray-6 bg-gray-1 overflow-hidden">
2027
<div className="p-8 xl:p-12">{props.children}</div>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { rfcSource } from "@/app/source";
2-
import { Card } from "fumadocs-ui/components/card";
32
import defaultMdxComponents from "fumadocs-ui/mdx";
43
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page";
54
import type { Metadata } from "next";
@@ -37,16 +36,17 @@ export default async function Page(props: {
3736
<DocsPage toc={page.data.toc} full={page.data.full}>
3837
<DocsTitle>{page.data.title}</DocsTitle>
3938

40-
<Card title="">
41-
<div className="grid grid-cols-2 font-mono">
42-
<span>ID</span>
43-
<span>{page.data.title.split(" ").at(0)}</span>
39+
<div className="flex flex-col gap-2">
40+
<div className="flex justify-between items-center font-mono text-sm">
4441
<span>{page.data.authors.length > 1 ? "Authors" : "Author"}</span>
4542
<span>{page.data.authors.join(", ")}</span>
43+
</div>
44+
45+
<div className="flex justify-between items-center font-mono text-sm">
4646
<span>Date</span>
4747
<LocalDate date={new Date(page.data.date)} />
4848
</div>
49-
</Card>
49+
</div>
5050
<DocsDescription className="text-sm">{page.data.description}</DocsDescription>
5151

5252
<DocsBody className="font-mono text-sm">

‎apps/engineering/content/design/icons-export-settings.png

156 KB
Loading

‎apps/engineering/content/design/icons.mdx

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
title: Icons
3+
description: Available icons for Unkey's apps.
4+
---
5+
import { RenderComponentWithSnippet } from "@/app/components/render";
6+
import { Row } from "@/app/components/row";
7+
8+
import { Icon } from "@/app/components/icon-swatch";
9+
import { Icon as XXX } from "@unkey/icons";
10+
import { TypeTable } from 'fumadocs-ui/components/type-table';
11+
import { Step, Steps } from 'fumadocs-ui/components/steps';
12+
13+
import {
14+
Bolt,
15+
BookBookmark,
16+
Check,
17+
ChevronExpandY,
18+
Fingerprint,
19+
Layers3,
20+
Nodes,
21+
Plus,
22+
ShieldCheck,
23+
Sparkle3,
24+
TaskChecked,
25+
TaskUnchecked,
26+
Trash,
27+
TriangleWarning,
28+
Ufo,
29+
} from "@unkey/icons"
30+
31+
32+
33+
34+
<TypeTable
35+
type={{
36+
className: {
37+
description:
38+
'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.',
39+
type: 'string | undefined',
40+
default: undefined
41+
},
42+
}}
43+
/>
44+
45+
46+
47+
48+
## Customize
49+
50+
As a rule of thumb, you should only customize the color, but there's always an edge case.
51+
52+
<RenderComponentWithSnippet customCodeSnippet={`<Row>
53+
<Nodes className="text-error-9"/>
54+
<Sparkle3 className="text-warning-9 size-16"/>
55+
<TaskUnchecked className="size-[12px]"/>
56+
</Row>`}>
57+
<Row>
58+
<Nodes className="text-error-9"/>
59+
<Sparkle3 className="text-warning-9 size-16"/>
60+
<TaskUnchecked className="size-[12px]"/>
61+
</Row>
62+
</RenderComponentWithSnippet>
63+
## Icons
64+
65+
These are all the icons available to import.
66+
```tsx
67+
import { IconName } from "@unkey/icons"
68+
```
69+
70+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
71+
<Icon name="Bolt"><Bolt/></Icon>
72+
<Icon name="BookBookmark"><BookBookmark/></Icon>
73+
<Icon name="Check"><Check/></Icon>
74+
<Icon name="ChevronExpandY"><ChevronExpandY/></Icon>
75+
<Icon name="Fingerprint"><Fingerprint/></Icon>
76+
<Icon name="Layers3"><Layers3/></Icon>
77+
<Icon name="Nodes"><Nodes/></Icon>
78+
<Icon name="Plus"><Plus/></Icon>
79+
<Icon name="ShieldCheck"><ShieldCheck/></Icon>
80+
<Icon name="Sparkle3"><Sparkle3/></Icon>
81+
<Icon name="TaskChecked"><TaskChecked/></Icon>
82+
<Icon name="TaskUnchecked"><TaskUnchecked/></Icon>
83+
<Icon name="Trash"><Trash/></Icon>
84+
<Icon name="TriangleWarning"><TriangleWarning/></Icon>
85+
<Icon name="Ufo"><Ufo/></Icon>
86+
</div>
87+
88+
89+
## Adding new icons
90+
91+
Importing icons is a manual process.
92+
<Steps>
93+
94+
<Step>
95+
Open the icon in the `Nucleo UI Essential` collection and select the icon(s) you want to export.
96+
</Step>
97+
<Step>
98+
Export it as `jsx`, and remove the title.
99+
![Nucleo Export Settings](./icons-export-settings.png)
100+
</Step>
101+
102+
<Step>
103+
Update the code to match our guidelines.
104+
105+
<Steps>
106+
<Step>
107+
Rename the file to `.tsx`
108+
</Step>
109+
<Step>
110+
Add the following license block at the start of the file:
111+
```tsx
112+
/**
113+
* Copyright © Nucleo
114+
* Version 1.3, January 3, 2024
115+
* Nucleo Icons
116+
* https://nucleoapp.com/
117+
* - Redistribution of icons is prohibited.
118+
* - Icons are restricted for use only within the product they are bundled with.
119+
*
120+
* For more details:
121+
* https://nucleoapp.com/license
122+
*/
123+
```
124+
</Step>
125+
<Step>
126+
Replace the function syntax with: `export const INSERT_ICON_NAME: React.FC<IconProps> = (props) => {`
127+
</Step>
128+
<Step>
129+
Remove the default export
130+
</Step>
131+
<Step>
132+
Update all color references to `currentColor`
133+
</Step>
134+
<Step>
135+
Add `{...props}` to the root `svg` element.
136+
</Step>
137+
<Step>
138+
Export it in the `/internal/icons/src/index.ts` barrel file.
139+
</Step>
140+
<Step>
141+
Import and add it in in this file under [#icons](/design/icons#icons) in alphabetic order.
142+
</Step>
143+
</Steps>
144+
145+
</Step>
146+
147+
148+
</Steps>

0 commit comments

Comments
 (0)