From 759f1d661b699819e3f91b4b029af9a0c74e6542 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 11:41:43 +0100 Subject: [PATCH 01/12] reimplement current dropdown menu using ui-kit --- src/App.test.tsx | 48 ++++++++++++++++++------------- src/components/Header.tsx | 50 ++++++++++++++++----------------- src/components/HoverPopover.tsx | 24 ++++++++++++---- 3 files changed, 71 insertions(+), 51 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 41abf8f9..6448e343 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -23,38 +23,48 @@ describe("App", () => { expect(screen.getByText("Setup")).toBeVisible(); expect(screen.getByRole("banner", { name: "App header" })).toBeVisible(); expect( - screen.getByRole("heading", { name: /codeGate dashboard/i }) + screen.getByRole("heading", { name: /codeGate dashboard/i }), ).toBeVisible(); + + await userEvent.click(screen.getByText("Certificates")); + expect( - screen.getByRole("link", { + screen.getByRole("menuitem", { name: /certificate security/i, - }) + }), ).toBeVisible(); expect( - screen.getByRole("link", { - name: /set up in continue/i, - }) + screen.getByRole("menuitem", { + name: /download/i, + }), ).toBeVisible(); + await userEvent.click(screen.getByText("Certificates")); + await userEvent.click(screen.getByText("Setup")); + expect( - screen.getByRole("link", { - name: /set up in copilot/i, - }) + screen.getByRole("menuitem", { + name: /set up in continue/i, + }), ).toBeVisible(); + expect( - screen.getByRole("link", { - name: /download/i, - }) + screen.getByRole("menuitem", { + name: /set up in copilot/i, + }), ).toBeVisible(); + + await userEvent.click(screen.getByText("Setup")); + expect( screen.getByRole("link", { name: /documentation/i, - }) + }), ).toBeVisible(); await waitFor(() => expect( - screen.getByRole("link", { name: /codeGate dashboard/i }) - ).toBeVisible() + screen.getByRole("link", { name: /codeGate dashboard/i }), + ).toBeVisible(), ); }); @@ -63,8 +73,8 @@ describe("App", () => { await waitFor(() => expect( - screen.getByRole("link", { name: "CodeGate Dashboard" }) - ).toBeVisible() + screen.getByRole("link", { name: "CodeGate Dashboard" }), + ).toBeVisible(), ); const workspaceSelectionButton = screen.getByRole("button", { @@ -78,8 +88,8 @@ describe("App", () => { expect( screen.getByRole("option", { name: /anotherworkspae/i, - }) - ).toBeVisible() + }), + ).toBeVisible(), ); }); }); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2f28839c..b9c46748 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,7 +1,12 @@ import { Link } from "react-router-dom"; import { SidebarTrigger } from "./ui/sidebar"; import { HoverPopover } from "./HoverPopover"; -import { Separator, ButtonDarkMode } from "@stacklok/ui-kit"; +import { + Separator, + ButtonDarkMode, + MenuItem, + LinkButton, +} from "@stacklok/ui-kit"; import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection"; export function Header({ hasError }: { hasError?: boolean }) { @@ -30,46 +35,39 @@ export function Header({ hasError }: { hasError?: boolean }) {
- Download - - + Certificate Security - + - + Set up in Continue - - + Set up in Copilot - + -
-
- - Documentation - -
-
+ + Documentation +
diff --git a/src/components/HoverPopover.tsx b/src/components/HoverPopover.tsx index 036b6ce2..990f48d4 100644 --- a/src/components/HoverPopover.tsx +++ b/src/components/HoverPopover.tsx @@ -1,24 +1,36 @@ +import { Button, DropdownMenu, MenuTrigger, Popover } from "@stacklok/ui-kit"; import { ReactNode } from "react"; import { twMerge } from "tailwind-merge"; export function HoverPopover({ children, title, - className + className, }: { title: ReactNode; children: ReactNode; - className?: string + className?: string; }) { return ( -
+ + + + {children} + + + ); + return ( +
{title}
-
- {children} -
+
{children}
); From 48eaaec24b1927e4bda58b75e25afadd34491252 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 11:55:41 +0100 Subject: [PATCH 02/12] add icons to dropdown menus --- src/components/Header.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b9c46748..5449ab78 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -8,6 +8,7 @@ import { LinkButton, } from "@stacklok/ui-kit"; import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection"; +import { Blocks, Download, ShieldCheck } from "lucide-react"; export function Header({ hasError }: { hasError?: boolean }) { return ( @@ -36,6 +37,7 @@ export function Header({ hasError }: { hasError?: boolean }) {
} href="/certificates" className="block px-5 py-3 text-secondary hover:bg-brand-50" > @@ -44,16 +46,18 @@ export function Header({ hasError }: { hasError?: boolean }) { } > Certificate Security - + }> Set up in Continue } href="/help/copilot-setup" className="block px-5 py-3 text-secondary hover:bg-brand-50" > From 12c441973348ff29537c1cc71ab52ba303fcd0db Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 12:20:20 +0100 Subject: [PATCH 03/12] add chevrons to dropdown menus in the header --- src/components/HoverPopover.tsx | 32 +++++++++++++------------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/src/components/HoverPopover.tsx b/src/components/HoverPopover.tsx index 990f48d4..5197963c 100644 --- a/src/components/HoverPopover.tsx +++ b/src/components/HoverPopover.tsx @@ -1,11 +1,17 @@ import { Button, DropdownMenu, MenuTrigger, Popover } from "@stacklok/ui-kit"; -import { ReactNode } from "react"; -import { twMerge } from "tailwind-merge"; +import { OverlayTriggerStateContext } from "react-aria-components"; +import { ReactNode, useContext } from "react"; +import { ChevronDown, ChevronUp } from "lucide-react"; + +function PopoverIcon() { + const { isOpen = false } = useContext(OverlayTriggerStateContext) ?? {}; + + return isOpen ? : ; +} export function HoverPopover({ children, title, - className, }: { title: ReactNode; children: ReactNode; @@ -13,25 +19,13 @@ export function HoverPopover({ }) { return ( - + {children} ); - return ( -
-
- {title} -
-
-
{children}
-
-
- ); } From 0397bd1a87c075ebf39421b880916a6fcfdceb5d Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 14:38:08 +0100 Subject: [PATCH 04/12] move documentation under Help menu --- src/App.test.tsx | 11 ++++++----- src/components/Header.tsx | 27 ++++++++++++--------------- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 6448e343..54d074aa 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -20,7 +20,7 @@ describe("App", () => { render(); expect(screen.getByText(/toggle sidebar/i)).toBeVisible(); expect(screen.getByText("Certificates")).toBeVisible(); - expect(screen.getByText("Setup")).toBeVisible(); + expect(screen.getByText("Help")).toBeVisible(); expect(screen.getByRole("banner", { name: "App header" })).toBeVisible(); expect( screen.getByRole("heading", { name: /codeGate dashboard/i }), @@ -40,7 +40,7 @@ describe("App", () => { ).toBeVisible(); await userEvent.click(screen.getByText("Certificates")); - await userEvent.click(screen.getByText("Setup")); + await userEvent.click(screen.getByText("Help")); expect( screen.getByRole("menuitem", { @@ -54,13 +54,14 @@ describe("App", () => { }), ).toBeVisible(); - await userEvent.click(screen.getByText("Setup")); - expect( - screen.getByRole("link", { + screen.getByRole("menuitem", { name: /documentation/i, }), ).toBeVisible(); + + await userEvent.click(screen.getByText("Help")); + await waitFor(() => expect( screen.getByRole("link", { name: /codeGate dashboard/i }), diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5449ab78..dc3a7297 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,12 +1,7 @@ import { Link } from "react-router-dom"; import { SidebarTrigger } from "./ui/sidebar"; import { HoverPopover } from "./HoverPopover"; -import { - Separator, - ButtonDarkMode, - MenuItem, - LinkButton, -} from "@stacklok/ui-kit"; +import { Separator, ButtonDarkMode, MenuItem } from "@stacklok/ui-kit"; import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection"; import { Blocks, Download, ShieldCheck } from "lucide-react"; @@ -43,6 +38,7 @@ export function Header({ hasError }: { hasError?: boolean }) { > Download + - + }> Set up in Continue @@ -63,15 +59,16 @@ export function Header({ hasError }: { hasError?: boolean }) { > Set up in Copilot - - - Documentation - + } + > + Documentation + +
From 60836b66865a90aafb512f6a7efae6cf2efe0465 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 14:51:30 +0100 Subject: [PATCH 05/12] add discord link --- src/App.test.tsx | 9 +++++++++ src/App.tsx | 23 +++++++++-------------- src/components/Header.tsx | 18 +++++++++++++++++- 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 54d074aa..af8fb545 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -60,6 +60,15 @@ describe("App", () => { }), ).toBeVisible(); + const discordMenuItem = screen.getByRole("menuitem", { + name: /discord/i, + }); + expect(discordMenuItem).toBeVisible(); + expect(discordMenuItem).toHaveAttribute( + "href", + "https://discord.gg/stacklok", + ); + await userEvent.click(screen.getByText("Help")); await waitFor(() => diff --git a/src/App.tsx b/src/App.tsx index fc50449a..14201770 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,29 +4,24 @@ import { usePromptsData } from "./hooks/usePromptsData"; import { Sidebar } from "./components/Sidebar"; import { useSse } from "./hooks/useSse"; import Page from "./Page"; -import { useHref, useNavigate } from "react-router-dom"; -import { RouterProvider } from "@stacklok/ui-kit"; function App() { const { data: prompts, isLoading } = usePromptsData(); - const navigate = useNavigate(); useSse(); return ( - -
- - - -
-
+
+ + + +
+
-
- -
+
+
- +
); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index dc3a7297..aff41b6f 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -3,7 +3,12 @@ import { SidebarTrigger } from "./ui/sidebar"; import { HoverPopover } from "./HoverPopover"; import { Separator, ButtonDarkMode, MenuItem } from "@stacklok/ui-kit"; import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection"; -import { Blocks, Download, ShieldCheck } from "lucide-react"; +import { + Blocks, + Download, + MessageCircleQuestion, + ShieldCheck, +} from "lucide-react"; export function Header({ hasError }: { hasError?: boolean }) { return ( @@ -68,6 +73,17 @@ export function Header({ hasError }: { hasError?: boolean }) { > Documentation + + + + } + > + Discord + From 7a5d4281d9a3fc6b351d1aec21797a76b524b0a0 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 14:54:10 +0100 Subject: [PATCH 06/12] add github menu item --- src/App.test.tsx | 9 +++++++++ src/components/Header.tsx | 10 ++++++++++ 2 files changed, 19 insertions(+) diff --git a/src/App.test.tsx b/src/App.test.tsx index af8fb545..9137375a 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -69,6 +69,15 @@ describe("App", () => { "https://discord.gg/stacklok", ); + const githubMenuItem = screen.getByRole("menuitem", { + name: /github/i, + }); + expect(githubMenuItem).toBeVisible(); + expect(githubMenuItem).toHaveAttribute( + "href", + "https://github.com/stacklok/codegate", + ); + await userEvent.click(screen.getByText("Help")); await waitFor(() => diff --git a/src/components/Header.tsx b/src/components/Header.tsx index aff41b6f..c8934966 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,6 +6,7 @@ import { WorkspacesSelection } from "@/features/workspace/components/workspaces- import { Blocks, Download, + Github, MessageCircleQuestion, ShieldCheck, } from "lucide-react"; @@ -84,6 +85,15 @@ export function Header({ hasError }: { hasError?: boolean }) { > Discord + + } + > + GitHub + From abe2a75af8766f37c5bce3cfb87313c96260daee Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 14:56:26 +0100 Subject: [PATCH 07/12] add youtube menu item --- src/App.test.tsx | 9 +++++++++ src/components/Header.tsx | 10 ++++++++++ 2 files changed, 19 insertions(+) diff --git a/src/App.test.tsx b/src/App.test.tsx index 9137375a..faf71670 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -78,6 +78,15 @@ describe("App", () => { "https://github.com/stacklok/codegate", ); + const youtubeMenuItem = screen.getByRole("menuitem", { + name: /youtube/i, + }); + expect(youtubeMenuItem).toBeVisible(); + expect(youtubeMenuItem).toHaveAttribute( + "href", + "https://www.youtube.com/@Stacklok", + ); + await userEvent.click(screen.getByText("Help")); await waitFor(() => diff --git a/src/components/Header.tsx b/src/components/Header.tsx index c8934966..bdc8aea4 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -9,6 +9,7 @@ import { Github, MessageCircleQuestion, ShieldCheck, + Youtube, } from "lucide-react"; export function Header({ hasError }: { hasError?: boolean }) { @@ -94,6 +95,15 @@ export function Header({ hasError }: { hasError?: boolean }) { > GitHub + + } + > + YouTube + From 677796a4a2808dbdfc782aca91db7555510065da Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 14:57:24 +0100 Subject: [PATCH 08/12] fix documetnation icon --- src/components/Header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index bdc8aea4..1805abc8 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -5,6 +5,7 @@ import { Separator, ButtonDarkMode, MenuItem } from "@stacklok/ui-kit"; import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection"; import { Blocks, + BookOpenText, Download, Github, MessageCircleQuestion, @@ -71,7 +72,7 @@ export function Header({ hasError }: { hasError?: boolean }) { href="https://docs.codegate.ai/" target="_blank" className="block px-5 py-3 text-secondary hover:bg-brand-50" - icon={} + icon={} > Documentation From aff96c43f1e1705dcf875bfcd3cd24a6a44acfec Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 14:57:59 +0100 Subject: [PATCH 09/12] remove redundant customization of menu item styles --- src/components/Header.tsx | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 1805abc8..95a1f423 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -39,19 +39,11 @@ export function Header({ hasError }: { hasError?: boolean }) {
- } - href="/certificates" - className="block px-5 py-3 text-secondary hover:bg-brand-50" - > + } href="/certificates"> Download - } - > + }> Certificate Security @@ -60,18 +52,13 @@ export function Header({ hasError }: { hasError?: boolean }) { }> Set up in Continue - } - href="/help/copilot-setup" - className="block px-5 py-3 text-secondary hover:bg-brand-50" - > + } href="/help/copilot-setup"> Set up in Copilot } > Documentation @@ -82,7 +69,6 @@ export function Header({ hasError }: { hasError?: boolean }) { } > Discord @@ -91,7 +77,6 @@ export function Header({ hasError }: { hasError?: boolean }) { } > GitHub @@ -100,7 +85,6 @@ export function Header({ hasError }: { hasError?: boolean }) { } > YouTube From f0542ae2667da728058538b9fa8ef8c6877c7aad Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 15:03:00 +0100 Subject: [PATCH 10/12] fix wording --- src/components/Header.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 95a1f423..97711dc5 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -39,12 +39,11 @@ export function Header({ hasError }: { hasError?: boolean }) {
- } href="/certificates"> - Download - - }> - Certificate Security + About certificate security + + } href="/certificates"> + Download certificates From 77e6e71e016d59eb84176482008dd7c416144724 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 15:20:06 +0100 Subject: [PATCH 11/12] add custom icons --- README.md | 13 +++++++++++++ icons/Continue.svg | 5 +++++ icons/Copilot.svg | 5 +++++ icons/Discord.svg | 5 +++++ icons/Github.svg | 5 +++++ icons/Youtube.svg | 5 +++++ package.json | 3 ++- src/components/Header.tsx | 17 +++++------------ src/components/icons/Continue.tsx | 16 ++++++++++++++++ src/components/icons/Copilot.tsx | 16 ++++++++++++++++ src/components/icons/Discord.tsx | 16 ++++++++++++++++ src/components/icons/Github.tsx | 18 ++++++++++++++++++ src/components/icons/Youtube.tsx | 18 ++++++++++++++++++ src/components/icons/index.ts | 5 +++++ 14 files changed, 134 insertions(+), 13 deletions(-) create mode 100644 icons/Continue.svg create mode 100644 icons/Copilot.svg create mode 100644 icons/Discord.svg create mode 100644 icons/Github.svg create mode 100644 icons/Youtube.svg create mode 100644 src/components/icons/Continue.tsx create mode 100644 src/components/icons/Copilot.tsx create mode 100644 src/components/icons/Discord.tsx create mode 100644 src/components/icons/Github.tsx create mode 100644 src/components/icons/Youtube.tsx create mode 100644 src/components/icons/index.ts diff --git a/README.md b/README.md index 09a53242..6c88c90b 100644 --- a/README.md +++ b/README.md @@ -50,3 +50,16 @@ Run the production build command: ```bash npm run preview ``` + +## Custom SVG icons + +In order to generate custom SVG icons based on the Figma design, download the icon from Figma and place it +in the `icons/` folder. + +Then run: + +```bash +npm run generate-icons +``` + + diff --git a/icons/Continue.svg b/icons/Continue.svg new file mode 100644 index 00000000..b3d638d9 --- /dev/null +++ b/icons/Continue.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/Copilot.svg b/icons/Copilot.svg new file mode 100644 index 00000000..d5509498 --- /dev/null +++ b/icons/Copilot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/Discord.svg b/icons/Discord.svg new file mode 100644 index 00000000..8cd6bf6d --- /dev/null +++ b/icons/Discord.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/Github.svg b/icons/Github.svg new file mode 100644 index 00000000..d7723086 --- /dev/null +++ b/icons/Github.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/Youtube.svg b/icons/Youtube.svg new file mode 100644 index 00000000..d345df73 --- /dev/null +++ b/icons/Youtube.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/package.json b/package.json index 10b241a4..ac1f13b2 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "preview": "vite preview", "test": "vitest", "test:coverage": "vitest run --coverage", - "type-check": "tsc --noEmit -p ./tsconfig.app.json" + "type-check": "tsc --noEmit -p ./tsconfig.app.json", + "generate-icons": "npx @svgr/cli --typescript --no-dimensions --out-dir ./src/components/icons/ -- icons" }, "dependencies": { "@hey-api/client-fetch": "^0.6.0", diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 97711dc5..5cb1a929 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -3,15 +3,8 @@ import { SidebarTrigger } from "./ui/sidebar"; import { HoverPopover } from "./HoverPopover"; import { Separator, ButtonDarkMode, MenuItem } from "@stacklok/ui-kit"; import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection"; -import { - Blocks, - BookOpenText, - Download, - Github, - MessageCircleQuestion, - ShieldCheck, - Youtube, -} from "lucide-react"; +import { BookOpenText, Download, ShieldCheck } from "lucide-react"; +import { Continue, Copilot, Discord, Github, Youtube } from "./icons"; export function Header({ hasError }: { hasError?: boolean }) { return ( @@ -48,10 +41,10 @@ export function Header({ hasError }: { hasError?: boolean }) { - }> + }> Set up in Continue - } href="/help/copilot-setup"> + } href="/help/copilot-setup"> Set up in Copilot @@ -68,7 +61,7 @@ export function Header({ hasError }: { hasError?: boolean }) { } + icon={} > Discord diff --git a/src/components/icons/Continue.tsx b/src/components/icons/Continue.tsx new file mode 100644 index 00000000..9bcf0936 --- /dev/null +++ b/src/components/icons/Continue.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgContinue = (props: SVGProps) => ( + + + +); +export default SvgContinue; diff --git a/src/components/icons/Copilot.tsx b/src/components/icons/Copilot.tsx new file mode 100644 index 00000000..ffb196a9 --- /dev/null +++ b/src/components/icons/Copilot.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgCopilot = (props: SVGProps) => ( + + + +); +export default SvgCopilot; diff --git a/src/components/icons/Discord.tsx b/src/components/icons/Discord.tsx new file mode 100644 index 00000000..b7e05d5a --- /dev/null +++ b/src/components/icons/Discord.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgDiscord = (props: SVGProps) => ( + + + +); +export default SvgDiscord; diff --git a/src/components/icons/Github.tsx b/src/components/icons/Github.tsx new file mode 100644 index 00000000..7101b292 --- /dev/null +++ b/src/components/icons/Github.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgGithub = (props: SVGProps) => ( + + + +); +export default SvgGithub; diff --git a/src/components/icons/Youtube.tsx b/src/components/icons/Youtube.tsx new file mode 100644 index 00000000..64652563 --- /dev/null +++ b/src/components/icons/Youtube.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgYoutube = (props: SVGProps) => ( + + + +); +export default SvgYoutube; diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts new file mode 100644 index 00000000..b1107dfe --- /dev/null +++ b/src/components/icons/index.ts @@ -0,0 +1,5 @@ +export { default as Continue } from "./Continue"; +export { default as Copilot } from "./Copilot"; +export { default as Discord } from "./Discord"; +export { default as Github } from "./Github"; +export { default as Youtube } from "./Youtube"; From 1126f1715df30bd9124a7a7597fdc3d432aaff52 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 21 Jan 2025 15:35:27 +0100 Subject: [PATCH 12/12] remove react import from automatically generated icon components --- package.json | 2 +- src/components/icons/Continue.tsx | 1 - src/components/icons/Copilot.tsx | 1 - src/components/icons/Discord.tsx | 1 - src/components/icons/Github.tsx | 1 - src/components/icons/Youtube.tsx | 1 - 6 files changed, 1 insertion(+), 6 deletions(-) diff --git a/package.json b/package.json index ac1f13b2..c2d3aab6 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "test": "vitest", "test:coverage": "vitest run --coverage", "type-check": "tsc --noEmit -p ./tsconfig.app.json", - "generate-icons": "npx @svgr/cli --typescript --no-dimensions --out-dir ./src/components/icons/ -- icons" + "generate-icons": "npx @svgr/cli --typescript --no-dimensions --jsx-runtime automatic --out-dir ./src/components/icons/ -- icons" }, "dependencies": { "@hey-api/client-fetch": "^0.6.0", diff --git a/src/components/icons/Continue.tsx b/src/components/icons/Continue.tsx index 9bcf0936..00acb879 100644 --- a/src/components/icons/Continue.tsx +++ b/src/components/icons/Continue.tsx @@ -1,4 +1,3 @@ -import * as React from "react"; import type { SVGProps } from "react"; const SvgContinue = (props: SVGProps) => ( ) => ( ) => ( ) => ( ) => (