From 45117257e9cbf44cf2e5b04eaacf9aa9045655b6 Mon Sep 17 00:00:00 2001 From: detteiu8383 Date: Wed, 4 Oct 2023 20:44:22 +0900 Subject: [PATCH 001/278] =?UTF-8?q?WIP:=20/apps,=20/repos/[id],=20/repos/[?= =?UTF-8?q?id]/settings=E3=81=AE=E4=B8=80=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dashboard/src/assets/icons/20/add.svg | 8 + dashboard/src/assets/icons/20/arrow_back.svg | 8 + .../src/assets/icons/20/arrow_drop_down.svg | 8 + .../src/assets/icons/20/arrow_forward.svg | 8 + .../src/assets/icons/20/arrow_outward.svg | 8 + .../src/assets/icons/20/browse_activity.svg | 8 + .../src/assets/icons/20/content_copy.svg | 8 + .../src/assets/icons/20/deployed_code.svg | 8 + dashboard/src/assets/icons/20/edit.svg | 8 + dashboard/src/assets/icons/20/expand_more.svg | 8 + dashboard/src/assets/icons/20/help.svg | 8 + .../src/assets/icons/20/notifications.svg | 8 + dashboard/src/assets/icons/20/replay.svg | 8 + dashboard/src/assets/icons/20/settings.svg | 8 + dashboard/src/assets/icons/24/add.svg | 8 + dashboard/src/assets/icons/24/arrow_back.svg | 8 + .../src/assets/icons/24/arrow_drop_down.svg | 8 + .../src/assets/icons/24/arrow_drop_up.svg | 8 + .../src/assets/icons/24/arrow_forward.svg | 8 + .../src/assets/icons/24/browse_activity.svg | 8 + dashboard/src/assets/icons/24/cable.svg | 8 + dashboard/src/assets/icons/24/cancel.svg | 8 + .../src/assets/icons/24/check_circle.svg | 8 + dashboard/src/assets/icons/24/close.svg | 8 + .../src/assets/icons/24/content_copy.svg | 8 + .../src/assets/icons/24/conversion_path.svg | 8 + .../src/assets/icons/24/deployed_code.svg | 8 + .../src/assets/icons/24/developer_board.svg | 8 + .../src/assets/icons/24/do_not_disturb_on.svg | 8 + dashboard/src/assets/icons/24/error.svg | 8 + dashboard/src/assets/icons/24/expand_all.svg | 8 + dashboard/src/assets/icons/24/expand_less.svg | 8 + dashboard/src/assets/icons/24/expand_more.svg | 8 + .../assets/icons/24/format_list_bulleted.svg | 8 + dashboard/src/assets/icons/24/help.svg | 8 + .../src/assets/icons/24/insert_chart.svg | 8 + dashboard/src/assets/icons/24/lan.svg | 8 + dashboard/src/assets/icons/24/language.svg | 8 + dashboard/src/assets/icons/24/logout.svg | 8 + dashboard/src/assets/icons/24/memory.svg | 8 + .../src/assets/icons/24/notifications.svg | 8 + .../src/assets/icons/24/offline_bolt.svg | 8 + dashboard/src/assets/icons/24/open_in_new.svg | 8 + dashboard/src/assets/icons/24/password.svg | 8 + dashboard/src/assets/icons/24/person.svg | 8 + dashboard/src/assets/icons/24/search.svg | 8 + dashboard/src/assets/icons/24/settings.svg | 8 + .../src/assets/icons/24/visibility_off.svg | 8 + .../src/assets/icons/appState/deploying.svg | 8 + dashboard/src/assets/icons/appState/error.svg | 8 + .../src/assets/icons/appState/failed.svg | 8 + dashboard/src/assets/icons/appState/idle.svg | 8 + .../src/assets/icons/appState/running.svg | 8 + .../src/assets/icons/apps_placeholder.svg | 3 + dashboard/src/assets/icons/check.svg | 3 + dashboard/src/assets/logo.svg | 22 ++ dashboard/src/components/UI/AppStatus.tsx | 46 ++++ dashboard/src/components/UI/Button.tsx | 214 +++++++++++++++ dashboard/src/components/UI/CheckBoxIcon.tsx | 67 +++++ dashboard/src/components/UI/RadioIcon.tsx | 80 ++++++ dashboard/src/components/UI/TabRound.tsx | 54 ++++ dashboard/src/components/UI/TextInput.tsx | 115 ++++++++ dashboard/src/components/UI/URLText.tsx | 47 ++++ dashboard/src/components/layouts/FormBox.tsx | 39 +++ dashboard/src/components/templates/AppRow.tsx | 106 +++++++ .../src/components/templates/AppsNav.tsx | 17 ++ .../src/components/templates/FormItem.tsx | 67 +++++ dashboard/src/components/templates/Header.tsx | 28 ++ dashboard/src/components/templates/List.tsx | 72 +++++ dashboard/src/components/templates/Nav.tsx | 63 +++++ .../src/components/templates/RadioButtons.tsx | 81 ++++++ .../templates/RepositoryAuthSettings.tsx | 86 ++++++ .../components/templates/RepositoryNav.tsx | 18 ++ .../components/templates/RepositoryRow.tsx | 81 ++++++ dashboard/src/components/templates/Select.tsx | 231 ++++++++++++++++ dashboard/src/global-style.ts | 19 +- dashboard/src/libs/colorOverlay.ts | 2 + dashboard/src/pages/apps.tsx | 259 +++++++++--------- dashboard/src/pages/repos/[id].tsx | 173 ++++-------- dashboard/src/pages/repos/[id]/index.tsx | 160 +++++++++++ dashboard/src/pages/repos/[id]/settings.tsx | 123 +++++---- .../repos/[id]/settings/authorization.tsx | 98 +++++++ .../src/pages/repos/[id]/settings/general.tsx | 3 + .../src/pages/repos/[id]/settings/owner.tsx | 3 + dashboard/src/routes.tsx | 59 +++- dashboard/src/theme.ts | 146 ++++++++++ dashboard/tsconfig.json | 16 +- dashboard/vite.config.ts | 2 +- 88 files changed, 2690 insertions(+), 337 deletions(-) create mode 100644 dashboard/src/assets/icons/20/add.svg create mode 100644 dashboard/src/assets/icons/20/arrow_back.svg create mode 100644 dashboard/src/assets/icons/20/arrow_drop_down.svg create mode 100644 dashboard/src/assets/icons/20/arrow_forward.svg create mode 100644 dashboard/src/assets/icons/20/arrow_outward.svg create mode 100644 dashboard/src/assets/icons/20/browse_activity.svg create mode 100644 dashboard/src/assets/icons/20/content_copy.svg create mode 100644 dashboard/src/assets/icons/20/deployed_code.svg create mode 100644 dashboard/src/assets/icons/20/edit.svg create mode 100644 dashboard/src/assets/icons/20/expand_more.svg create mode 100644 dashboard/src/assets/icons/20/help.svg create mode 100644 dashboard/src/assets/icons/20/notifications.svg create mode 100644 dashboard/src/assets/icons/20/replay.svg create mode 100644 dashboard/src/assets/icons/20/settings.svg create mode 100644 dashboard/src/assets/icons/24/add.svg create mode 100644 dashboard/src/assets/icons/24/arrow_back.svg create mode 100644 dashboard/src/assets/icons/24/arrow_drop_down.svg create mode 100644 dashboard/src/assets/icons/24/arrow_drop_up.svg create mode 100644 dashboard/src/assets/icons/24/arrow_forward.svg create mode 100644 dashboard/src/assets/icons/24/browse_activity.svg create mode 100644 dashboard/src/assets/icons/24/cable.svg create mode 100644 dashboard/src/assets/icons/24/cancel.svg create mode 100644 dashboard/src/assets/icons/24/check_circle.svg create mode 100644 dashboard/src/assets/icons/24/close.svg create mode 100644 dashboard/src/assets/icons/24/content_copy.svg create mode 100644 dashboard/src/assets/icons/24/conversion_path.svg create mode 100644 dashboard/src/assets/icons/24/deployed_code.svg create mode 100644 dashboard/src/assets/icons/24/developer_board.svg create mode 100644 dashboard/src/assets/icons/24/do_not_disturb_on.svg create mode 100644 dashboard/src/assets/icons/24/error.svg create mode 100644 dashboard/src/assets/icons/24/expand_all.svg create mode 100644 dashboard/src/assets/icons/24/expand_less.svg create mode 100644 dashboard/src/assets/icons/24/expand_more.svg create mode 100644 dashboard/src/assets/icons/24/format_list_bulleted.svg create mode 100644 dashboard/src/assets/icons/24/help.svg create mode 100644 dashboard/src/assets/icons/24/insert_chart.svg create mode 100644 dashboard/src/assets/icons/24/lan.svg create mode 100644 dashboard/src/assets/icons/24/language.svg create mode 100644 dashboard/src/assets/icons/24/logout.svg create mode 100644 dashboard/src/assets/icons/24/memory.svg create mode 100644 dashboard/src/assets/icons/24/notifications.svg create mode 100644 dashboard/src/assets/icons/24/offline_bolt.svg create mode 100644 dashboard/src/assets/icons/24/open_in_new.svg create mode 100644 dashboard/src/assets/icons/24/password.svg create mode 100644 dashboard/src/assets/icons/24/person.svg create mode 100644 dashboard/src/assets/icons/24/search.svg create mode 100644 dashboard/src/assets/icons/24/settings.svg create mode 100644 dashboard/src/assets/icons/24/visibility_off.svg create mode 100644 dashboard/src/assets/icons/appState/deploying.svg create mode 100644 dashboard/src/assets/icons/appState/error.svg create mode 100644 dashboard/src/assets/icons/appState/failed.svg create mode 100644 dashboard/src/assets/icons/appState/idle.svg create mode 100644 dashboard/src/assets/icons/appState/running.svg create mode 100644 dashboard/src/assets/icons/apps_placeholder.svg create mode 100644 dashboard/src/assets/icons/check.svg create mode 100644 dashboard/src/assets/logo.svg create mode 100644 dashboard/src/components/UI/AppStatus.tsx create mode 100644 dashboard/src/components/UI/Button.tsx create mode 100644 dashboard/src/components/UI/CheckBoxIcon.tsx create mode 100644 dashboard/src/components/UI/RadioIcon.tsx create mode 100644 dashboard/src/components/UI/TabRound.tsx create mode 100644 dashboard/src/components/UI/TextInput.tsx create mode 100644 dashboard/src/components/UI/URLText.tsx create mode 100644 dashboard/src/components/layouts/FormBox.tsx create mode 100644 dashboard/src/components/templates/AppRow.tsx create mode 100644 dashboard/src/components/templates/AppsNav.tsx create mode 100644 dashboard/src/components/templates/FormItem.tsx create mode 100644 dashboard/src/components/templates/Header.tsx create mode 100644 dashboard/src/components/templates/List.tsx create mode 100644 dashboard/src/components/templates/Nav.tsx create mode 100644 dashboard/src/components/templates/RadioButtons.tsx create mode 100644 dashboard/src/components/templates/RepositoryAuthSettings.tsx create mode 100644 dashboard/src/components/templates/RepositoryNav.tsx create mode 100644 dashboard/src/components/templates/RepositoryRow.tsx create mode 100644 dashboard/src/components/templates/Select.tsx create mode 100644 dashboard/src/libs/colorOverlay.ts create mode 100644 dashboard/src/pages/repos/[id]/index.tsx create mode 100644 dashboard/src/pages/repos/[id]/settings/authorization.tsx create mode 100644 dashboard/src/pages/repos/[id]/settings/general.tsx create mode 100644 dashboard/src/pages/repos/[id]/settings/owner.tsx diff --git a/dashboard/src/assets/icons/20/add.svg b/dashboard/src/assets/icons/20/add.svg new file mode 100644 index 000000000..9cb54c5eb --- /dev/null +++ b/dashboard/src/assets/icons/20/add.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/arrow_back.svg b/dashboard/src/assets/icons/20/arrow_back.svg new file mode 100644 index 000000000..f5da0a071 --- /dev/null +++ b/dashboard/src/assets/icons/20/arrow_back.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/arrow_drop_down.svg b/dashboard/src/assets/icons/20/arrow_drop_down.svg new file mode 100644 index 000000000..eee5d063e --- /dev/null +++ b/dashboard/src/assets/icons/20/arrow_drop_down.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/arrow_forward.svg b/dashboard/src/assets/icons/20/arrow_forward.svg new file mode 100644 index 000000000..dbbd26d88 --- /dev/null +++ b/dashboard/src/assets/icons/20/arrow_forward.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/arrow_outward.svg b/dashboard/src/assets/icons/20/arrow_outward.svg new file mode 100644 index 000000000..705c8c11a --- /dev/null +++ b/dashboard/src/assets/icons/20/arrow_outward.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/browse_activity.svg b/dashboard/src/assets/icons/20/browse_activity.svg new file mode 100644 index 000000000..19c8cfc80 --- /dev/null +++ b/dashboard/src/assets/icons/20/browse_activity.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/content_copy.svg b/dashboard/src/assets/icons/20/content_copy.svg new file mode 100644 index 000000000..95e68b527 --- /dev/null +++ b/dashboard/src/assets/icons/20/content_copy.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/deployed_code.svg b/dashboard/src/assets/icons/20/deployed_code.svg new file mode 100644 index 000000000..cf96674ec --- /dev/null +++ b/dashboard/src/assets/icons/20/deployed_code.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/edit.svg b/dashboard/src/assets/icons/20/edit.svg new file mode 100644 index 000000000..e02a37496 --- /dev/null +++ b/dashboard/src/assets/icons/20/edit.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/expand_more.svg b/dashboard/src/assets/icons/20/expand_more.svg new file mode 100644 index 000000000..98f0ab0b2 --- /dev/null +++ b/dashboard/src/assets/icons/20/expand_more.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/help.svg b/dashboard/src/assets/icons/20/help.svg new file mode 100644 index 000000000..206adc71e --- /dev/null +++ b/dashboard/src/assets/icons/20/help.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/notifications.svg b/dashboard/src/assets/icons/20/notifications.svg new file mode 100644 index 000000000..72bc47148 --- /dev/null +++ b/dashboard/src/assets/icons/20/notifications.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/replay.svg b/dashboard/src/assets/icons/20/replay.svg new file mode 100644 index 000000000..88aeb9f36 --- /dev/null +++ b/dashboard/src/assets/icons/20/replay.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/20/settings.svg b/dashboard/src/assets/icons/20/settings.svg new file mode 100644 index 000000000..28cf9aebd --- /dev/null +++ b/dashboard/src/assets/icons/20/settings.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/add.svg b/dashboard/src/assets/icons/24/add.svg new file mode 100644 index 000000000..5af60ebb1 --- /dev/null +++ b/dashboard/src/assets/icons/24/add.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/arrow_back.svg b/dashboard/src/assets/icons/24/arrow_back.svg new file mode 100644 index 000000000..d62cded3f --- /dev/null +++ b/dashboard/src/assets/icons/24/arrow_back.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/arrow_drop_down.svg b/dashboard/src/assets/icons/24/arrow_drop_down.svg new file mode 100644 index 000000000..37603ff1e --- /dev/null +++ b/dashboard/src/assets/icons/24/arrow_drop_down.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/arrow_drop_up.svg b/dashboard/src/assets/icons/24/arrow_drop_up.svg new file mode 100644 index 000000000..ad30bbce1 --- /dev/null +++ b/dashboard/src/assets/icons/24/arrow_drop_up.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/arrow_forward.svg b/dashboard/src/assets/icons/24/arrow_forward.svg new file mode 100644 index 000000000..cd647c029 --- /dev/null +++ b/dashboard/src/assets/icons/24/arrow_forward.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/browse_activity.svg b/dashboard/src/assets/icons/24/browse_activity.svg new file mode 100644 index 000000000..fae447d0d --- /dev/null +++ b/dashboard/src/assets/icons/24/browse_activity.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/cable.svg b/dashboard/src/assets/icons/24/cable.svg new file mode 100644 index 000000000..9d8210d0c --- /dev/null +++ b/dashboard/src/assets/icons/24/cable.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/cancel.svg b/dashboard/src/assets/icons/24/cancel.svg new file mode 100644 index 000000000..202a9d360 --- /dev/null +++ b/dashboard/src/assets/icons/24/cancel.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/check_circle.svg b/dashboard/src/assets/icons/24/check_circle.svg new file mode 100644 index 000000000..7b9bc4ee4 --- /dev/null +++ b/dashboard/src/assets/icons/24/check_circle.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/close.svg b/dashboard/src/assets/icons/24/close.svg new file mode 100644 index 000000000..5150bc9d2 --- /dev/null +++ b/dashboard/src/assets/icons/24/close.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/content_copy.svg b/dashboard/src/assets/icons/24/content_copy.svg new file mode 100644 index 000000000..202fe67f2 --- /dev/null +++ b/dashboard/src/assets/icons/24/content_copy.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/conversion_path.svg b/dashboard/src/assets/icons/24/conversion_path.svg new file mode 100644 index 000000000..17034cebc --- /dev/null +++ b/dashboard/src/assets/icons/24/conversion_path.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/deployed_code.svg b/dashboard/src/assets/icons/24/deployed_code.svg new file mode 100644 index 000000000..e32e8fc5f --- /dev/null +++ b/dashboard/src/assets/icons/24/deployed_code.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/developer_board.svg b/dashboard/src/assets/icons/24/developer_board.svg new file mode 100644 index 000000000..7e2a144db --- /dev/null +++ b/dashboard/src/assets/icons/24/developer_board.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/do_not_disturb_on.svg b/dashboard/src/assets/icons/24/do_not_disturb_on.svg new file mode 100644 index 000000000..1059241ec --- /dev/null +++ b/dashboard/src/assets/icons/24/do_not_disturb_on.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/error.svg b/dashboard/src/assets/icons/24/error.svg new file mode 100644 index 000000000..6f715c42f --- /dev/null +++ b/dashboard/src/assets/icons/24/error.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/expand_all.svg b/dashboard/src/assets/icons/24/expand_all.svg new file mode 100644 index 000000000..04d817e38 --- /dev/null +++ b/dashboard/src/assets/icons/24/expand_all.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/expand_less.svg b/dashboard/src/assets/icons/24/expand_less.svg new file mode 100644 index 000000000..582f30eef --- /dev/null +++ b/dashboard/src/assets/icons/24/expand_less.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/expand_more.svg b/dashboard/src/assets/icons/24/expand_more.svg new file mode 100644 index 000000000..ddea8bb64 --- /dev/null +++ b/dashboard/src/assets/icons/24/expand_more.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/format_list_bulleted.svg b/dashboard/src/assets/icons/24/format_list_bulleted.svg new file mode 100644 index 000000000..0866061ce --- /dev/null +++ b/dashboard/src/assets/icons/24/format_list_bulleted.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/help.svg b/dashboard/src/assets/icons/24/help.svg new file mode 100644 index 000000000..e45155bfa --- /dev/null +++ b/dashboard/src/assets/icons/24/help.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/insert_chart.svg b/dashboard/src/assets/icons/24/insert_chart.svg new file mode 100644 index 000000000..58cec2ce0 --- /dev/null +++ b/dashboard/src/assets/icons/24/insert_chart.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/lan.svg b/dashboard/src/assets/icons/24/lan.svg new file mode 100644 index 000000000..f26893502 --- /dev/null +++ b/dashboard/src/assets/icons/24/lan.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/language.svg b/dashboard/src/assets/icons/24/language.svg new file mode 100644 index 000000000..3dda3a628 --- /dev/null +++ b/dashboard/src/assets/icons/24/language.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/logout.svg b/dashboard/src/assets/icons/24/logout.svg new file mode 100644 index 000000000..26766a6bb --- /dev/null +++ b/dashboard/src/assets/icons/24/logout.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/memory.svg b/dashboard/src/assets/icons/24/memory.svg new file mode 100644 index 000000000..065ab7b15 --- /dev/null +++ b/dashboard/src/assets/icons/24/memory.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/notifications.svg b/dashboard/src/assets/icons/24/notifications.svg new file mode 100644 index 000000000..06bf6b682 --- /dev/null +++ b/dashboard/src/assets/icons/24/notifications.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/offline_bolt.svg b/dashboard/src/assets/icons/24/offline_bolt.svg new file mode 100644 index 000000000..fc73efac0 --- /dev/null +++ b/dashboard/src/assets/icons/24/offline_bolt.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/open_in_new.svg b/dashboard/src/assets/icons/24/open_in_new.svg new file mode 100644 index 000000000..b15eee463 --- /dev/null +++ b/dashboard/src/assets/icons/24/open_in_new.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/password.svg b/dashboard/src/assets/icons/24/password.svg new file mode 100644 index 000000000..27d56afe4 --- /dev/null +++ b/dashboard/src/assets/icons/24/password.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/person.svg b/dashboard/src/assets/icons/24/person.svg new file mode 100644 index 000000000..94b984c0c --- /dev/null +++ b/dashboard/src/assets/icons/24/person.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/search.svg b/dashboard/src/assets/icons/24/search.svg new file mode 100644 index 000000000..5f7f8f15c --- /dev/null +++ b/dashboard/src/assets/icons/24/search.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/settings.svg b/dashboard/src/assets/icons/24/settings.svg new file mode 100644 index 000000000..05de8f5a1 --- /dev/null +++ b/dashboard/src/assets/icons/24/settings.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/24/visibility_off.svg b/dashboard/src/assets/icons/24/visibility_off.svg new file mode 100644 index 000000000..5af6ffba8 --- /dev/null +++ b/dashboard/src/assets/icons/24/visibility_off.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/appState/deploying.svg b/dashboard/src/assets/icons/appState/deploying.svg new file mode 100644 index 000000000..ffa0e51ac --- /dev/null +++ b/dashboard/src/assets/icons/appState/deploying.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/appState/error.svg b/dashboard/src/assets/icons/appState/error.svg new file mode 100644 index 000000000..69e5874dd --- /dev/null +++ b/dashboard/src/assets/icons/appState/error.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/appState/failed.svg b/dashboard/src/assets/icons/appState/failed.svg new file mode 100644 index 000000000..a542a15f9 --- /dev/null +++ b/dashboard/src/assets/icons/appState/failed.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/appState/idle.svg b/dashboard/src/assets/icons/appState/idle.svg new file mode 100644 index 000000000..a4bec4f58 --- /dev/null +++ b/dashboard/src/assets/icons/appState/idle.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/appState/running.svg b/dashboard/src/assets/icons/appState/running.svg new file mode 100644 index 000000000..f046f6f5a --- /dev/null +++ b/dashboard/src/assets/icons/appState/running.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dashboard/src/assets/icons/apps_placeholder.svg b/dashboard/src/assets/icons/apps_placeholder.svg new file mode 100644 index 000000000..21ce9b92e --- /dev/null +++ b/dashboard/src/assets/icons/apps_placeholder.svg @@ -0,0 +1,3 @@ + + + diff --git a/dashboard/src/assets/icons/check.svg b/dashboard/src/assets/icons/check.svg new file mode 100644 index 000000000..76d69811e --- /dev/null +++ b/dashboard/src/assets/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/dashboard/src/assets/logo.svg b/dashboard/src/assets/logo.svg new file mode 100644 index 000000000..27ff22845 --- /dev/null +++ b/dashboard/src/assets/logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard/src/components/UI/AppStatus.tsx b/dashboard/src/components/UI/AppStatus.tsx new file mode 100644 index 000000000..a476fbaf7 --- /dev/null +++ b/dashboard/src/components/UI/AppStatus.tsx @@ -0,0 +1,46 @@ +import DeployingIcon from '/@/assets/icons/appState/deploying.svg' +import ErrorIcon from '/@/assets/icons/appState/error.svg' +import IdleIcon from '/@/assets/icons/appState/idle.svg' +import RunningIcon from '/@/assets/icons/appState/running.svg' +import StaticIcon from '/@/assets/icons/appState/running.svg' +import { ApplicationState } from '/@/libs/application' +import { styled } from '@macaron-css/solid' +import { Component, Match, Switch } from 'solid-js' + +const Container = styled('div', { + base: { + width: '24px', + height: '24px', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }, +}) + +export interface Props { + state: ApplicationState +} + +export const AppStatus: Component = (props) => { + return ( + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/dashboard/src/components/UI/Button.tsx b/dashboard/src/components/UI/Button.tsx new file mode 100644 index 000000000..75b432668 --- /dev/null +++ b/dashboard/src/components/UI/Button.tsx @@ -0,0 +1,214 @@ +import { colorOverlay } from '/@/libs/colorOverlay' +import { colorVars, textVars } from '/@/theme' +import { styled } from '@macaron-css/solid' +import { JSX, ParentComponent, Show, splitProps } from 'solid-js' +import { tippy as tippyDir } from 'solid-tippy' + +// https://github.com/solidjs/solid/discussions/845 +const tippy = tippyDir + +const Container = styled('button', { + base: { + width: 'auto', + display: 'flex', + alignItems: 'center', + borderRadius: '8px', + gap: '4px', + + background: 'none', + border: 'none', + cursor: 'pointer', + selectors: { + '&:disabled': { + cursor: 'not-allowed', + background: colorVars.semantic.text.disabled, + }, + }, + }, + variants: { + size: { + medium: { + height: '44px', + padding: '8px 16px', + }, + small: { + height: '32px', + padding: '8px 12px', + }, + }, + full: { + true: { + width: '100%', + }, + }, + color: { + primary: { + background: colorVars.semantic.primary.main, + color: colorVars.semantic.text.white, + selectors: { + '&:hover': { + background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[200]), + }, + '&:active, &[data-active="true"]': { + background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[300]), + }, + }, + }, + ghost: { + background: colorVars.semantic.ui.secondary, + color: colorVars.semantic.text.black, + selectors: { + '&:hover': { + background: colorOverlay(colorVars.semantic.ui.secondary, colorVars.primitive.blackAlpha[50]), + }, + '&:active, &[data-active="true"]': { + background: colorOverlay(colorVars.semantic.ui.secondary, colorVars.primitive.blackAlpha[200]), + }, + }, + }, + border: { + border: `solid 1px ${colorVars.semantic.ui.border}`, + color: colorVars.semantic.text.black, + selectors: { + '&:hover': { + background: colorVars.semantic.transparent.primaryHover, + }, + '&:active, &[data-active="true"]': { + background: colorVars.semantic.transparent.primarySelected, + }, + }, + }, + text: { + color: colorVars.semantic.text.black, + selectors: { + '&:hover': { + background: colorVars.semantic.transparent.primaryHover, + }, + '&:active, &[data-active="true"]': { + color: colorVars.semantic.primary.main, + background: colorVars.semantic.transparent.primarySelected, + }, + }, + }, + primaryError: { + border: `solid 1px ${colorVars.semantic.accent.error}`, + background: colorVars.semantic.accent.error, + color: colorVars.semantic.text.white, + selectors: { + '&:hover': { + background: colorOverlay(colorVars.semantic.accent.error, colorVars.primitive.blackAlpha[200]), + }, + '&:active, &[data-active="true"]': { + background: colorOverlay(colorVars.semantic.accent.error, colorVars.primitive.blackAlpha[300]), + }, + }, + }, + borderError: { + border: `solid 1px ${colorVars.semantic.accent.error}`, + color: colorVars.semantic.accent.error, + selectors: { + '&:hover': { + background: colorVars.semantic.transparent.errorHover, + }, + '&:active, &[data-active="true"]': { + background: colorVars.semantic.transparent.errorSelected, + }, + }, + }, + textError: { + color: colorVars.semantic.accent.error, + selectors: { + '&:hover': { + background: colorVars.semantic.transparent.errorHover, + }, + '&:active, &[data-active="true"]': { + background: colorVars.semantic.transparent.errorSelected, + }, + }, + }, + }, + hasCheckbox: { + true: { + gap: '8px', + }, + }, + }, +}) +const Text = styled('div', { + base: { + whiteSpace: 'nowrap', + }, + variants: { + size: { + medium: { + ...textVars.text.bold, + }, + small: { + ...textVars.caption.bold, + }, + }, + }, +}) +const IconContainer = styled('div', { + base: { + width: '24px', + height: '24px', + }, +}) + +export interface Props extends JSX.ButtonHTMLAttributes { + color: 'primary' | 'ghost' | 'border' | 'text' | 'primaryError' | 'borderError' | 'textError' + size: 'medium' | 'small' + active?: boolean + hasCheckbox?: boolean + full?: boolean + tooltip?: string + leftIcon?: JSX.Element + rightIcon?: JSX.Element +} + +export const Button: ParentComponent = (props) => { + const [addedProps, originalButtonProps] = splitProps(props, [ + 'color', + 'size', + 'active', + 'hasCheckbox', + 'full', + 'tooltip', + 'leftIcon', + 'rightIcon', + 'children', + ]) + + return ( + + + + {addedProps.leftIcon} + + + {addedProps.children} + + + {addedProps.rightIcon} + + + + ) +} diff --git a/dashboard/src/components/UI/CheckBoxIcon.tsx b/dashboard/src/components/UI/CheckBoxIcon.tsx new file mode 100644 index 000000000..6b87b18ae --- /dev/null +++ b/dashboard/src/components/UI/CheckBoxIcon.tsx @@ -0,0 +1,67 @@ +import CheckMark from '/@/assets/icons/check.svg' +import { colorOverlay } from '/@/libs/colorOverlay' +import { colorVars } from '/@/theme' +import { styled } from '@macaron-css/solid' +import { Component, Show } from 'solid-js' + +const Container = styled('div', { + base: { + width: '100%', + height: 'auto', + aspectRatio: '1', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + borderRadius: '4px', + color: colorVars.semantic.ui.primary, + }, + variants: { + checked: { + false: { + background: colorVars.semantic.ui.background, + border: `2px solid ${colorVars.semantic.ui.tertiary}`, + selectors: { + '&:hover': { + background: colorOverlay(colorVars.semantic.ui.tertiary, colorVars.primitive.blackAlpha[200]), + }, + '&:active': { + background: colorOverlay(colorVars.semantic.ui.tertiary, colorVars.primitive.blackAlpha[300]), + }, + }, + }, + true: { + background: colorVars.semantic.primary.main, + selectors: { + '&:hover': { + background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[200]), + }, + '&:active': { + background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[300]), + }, + }, + }, + }, + disabled: { + true: { + cursor: 'not-allowed', + background: `${colorVars.semantic.text.disabled} !important`, + }, + }, + }, +}) + +export interface Props { + checked: boolean + disabled?: boolean +} + +export const CheckBoxIcon: Component = (props) => { + return ( + + + + + + ) +} diff --git a/dashboard/src/components/UI/RadioIcon.tsx b/dashboard/src/components/UI/RadioIcon.tsx new file mode 100644 index 000000000..4b1167698 --- /dev/null +++ b/dashboard/src/components/UI/RadioIcon.tsx @@ -0,0 +1,80 @@ +import CheckMark from '/@/assets/icons/check.svg' +import { colorOverlay } from '/@/libs/colorOverlay' +import { colorVars } from '/@/theme' +import { styled } from '@macaron-css/solid' +import { Component, Show } from 'solid-js' + +const Container = styled('div', { + base: { + width: '20px', + height: '20px', + + borderRadius: '9999px', + color: colorVars.semantic.ui.primary, + }, + variants: { + checked: { + false: { + background: colorVars.semantic.ui.background, + border: `2px solid ${colorVars.semantic.ui.tertiary}`, + selectors: { + '&:hover': { + background: colorOverlay(colorVars.semantic.ui.tertiary, colorVars.primitive.blackAlpha[200]), + }, + '&:active': { + background: colorOverlay(colorVars.semantic.ui.tertiary, colorVars.primitive.blackAlpha[300]), + }, + }, + }, + true: { + background: colorVars.semantic.primary.main, + selectors: { + '&::after': { + // white circle in the middle + content: '""', + width: '8px', + height: '8px', + borderRadius: '9999px', + background: colorVars.semantic.ui.primary, + }, + '&:hover': { + background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[200]), + }, + '&:active': { + background: colorOverlay(colorVars.semantic.primary.main, colorVars.primitive.blackAlpha[300]), + }, + }, + }, + }, + disabled: { + true: { + cursor: 'not-allowed', + background: `${colorVars.semantic.text.disabled} !important`, + }, + }, + }, +}) + +export interface Props { + selected: boolean + disabled?: boolean +} + +export const RadioIcon: Component = (props) => { + return ( + + + + + + + + ) +} diff --git a/dashboard/src/components/UI/TabRound.tsx b/dashboard/src/components/UI/TabRound.tsx new file mode 100644 index 000000000..3438296ab --- /dev/null +++ b/dashboard/src/components/UI/TabRound.tsx @@ -0,0 +1,54 @@ +import { colorVars, textVars } from '/@/theme' +import { styled } from '@macaron-css/solid' +import { Component, JSX, splitProps } from 'solid-js' +import { ParentComponent } from 'solid-js' + +const Container = styled('button', { + base: { + width: 'fit-content', + height: '44px', + padding: '0 16px', + display: 'flex', + alignItems: 'center', + borderRadius: '9999px', + ...textVars.h4.medium, + whiteSpace: 'nowrap', + cursor: 'pointer', + selectors: { + '&:hover': { + background: colorVars.semantic.transparent.primaryHover, + color: colorVars.semantic.text.grey, + border: `solid 1px ${colorVars.semantic.ui.border}`, + }, + }, + }, + variants: { + state: { + active: { + background: colorVars.semantic.transparent.primaryHover, + color: `${colorVars.semantic.primary.main} !important`, + border: `solid 2px ${colorVars.semantic.primary.main} !important`, + }, + default: { + background: 'none', + color: colorVars.semantic.text.grey, + border: `solid 1px ${colorVars.semantic.ui.border}`, + }, + }, + }, +}) + +export interface Props extends JSX.ButtonHTMLAttributes { + state: 'active' | 'default' + icon?: JSX.Element +} + +export const TabRound: ParentComponent = (props) => { + const [addedProps, originalButtonProps] = splitProps(props, ['state', 'children', 'icon']) + + return ( + + {addedProps.children} + + ) +} diff --git a/dashboard/src/components/UI/TextInput.tsx b/dashboard/src/components/UI/TextInput.tsx new file mode 100644 index 000000000..f7f269e3c --- /dev/null +++ b/dashboard/src/components/UI/TextInput.tsx @@ -0,0 +1,115 @@ +import { colorVars, textVars } from '/@/theme' +import { styled } from '@macaron-css/solid' +import { Component, JSX, Show, splitProps } from 'solid-js' + +const Container = styled('div', { + base: { + width: '100%', + display: 'flex', + flexDirection: 'column', + gap: '4px', + }, +}) +const InputContainer = styled('div', { + base: { + position: 'relative', + width: '100%', + }, +}) +const StyledInput = styled('input', { + base: { + width: '100%', + height: '48px', + padding: '10px 16px', + background: colorVars.semantic.ui.primary, + borderRadius: '8px', + border: 'none', + outline: `1px solid ${colorVars.semantic.ui.border}`, + color: colorVars.semantic.text.black, + ...textVars.text.regular, + '::placeholder': { + color: colorVars.semantic.text.disabled, + }, + selectors: { + '&:focus': { + outline: `2px solid ${colorVars.semantic.primary.main}`, + }, + '&:disabled': { + cursor: 'not-allowed', + background: colorVars.semantic.ui.tertiary, + }, + '&:invalid': { + outline: `2px solid ${colorVars.semantic.accent.error}`, + }, + }, + }, + variants: { + hasLeftIcon: { + true: { + paddingLeft: '44px', + }, + }, + hasRightIcon: { + true: { + paddingRight: '44px', + }, + }, + }, +}) +const LeftIcon = styled('div', { + base: { + position: 'absolute', + width: '24px', + height: '24px', + left: '16px', + top: '12px', + }, +}) +const RightIcon = styled('div', { + base: { + position: 'absolute', + width: '24px', + height: '24px', + left: '16px', + top: '12px', + }, +}) +const HelpText = styled('div', { + base: { + width: '100%', + color: colorVars.semantic.text.grey, + ...textVars.text.regular, + }, +}) + +export interface Props extends JSX.InputHTMLAttributes { + helpText?: string + leftIcon?: JSX.Element + rightIcon?: JSX.Element +} + +export const TextInput: Component = (props) => { + const [addedProps, originalInputProps] = splitProps(props, ['helpText', 'leftIcon', 'rightIcon']) + + return ( + + + + + {addedProps.leftIcon} + + + {addedProps.rightIcon} + + + + {addedProps.helpText} + + + ) +} diff --git a/dashboard/src/components/UI/URLText.tsx b/dashboard/src/components/UI/URLText.tsx new file mode 100644 index 000000000..93780bb7b --- /dev/null +++ b/dashboard/src/components/UI/URLText.tsx @@ -0,0 +1,47 @@ +import OpenInNewIcon from '/@/assets/icons/24/open_in_new.svg' +import { colorVars, textVars } from '/@/theme' +import { styled } from '@macaron-css/solid' +import { Component } from 'solid-js' +import { tippy as tippyDir } from 'solid-tippy' + +// https://github.com/solidjs/solid/discussions/845 +const tippy = tippyDir + +const StyledAnchor = styled('a', { + base: { + color: colorVars.semantic.text.link, + ...textVars.text.regular, + }, +}) +const ContentContainer = styled('div', { + base: { + display: 'flex', + flexDirection: 'row', + gap: '4px', + alignItems: 'center', + }, +}) + +export interface URLTextProps { + href: string + text: string +} + +export const URLText: Component = (props) => { + return ( +
+ + + {props.text} + + + +
+ ) +} diff --git a/dashboard/src/components/layouts/FormBox.tsx b/dashboard/src/components/layouts/FormBox.tsx new file mode 100644 index 000000000..733e39898 --- /dev/null +++ b/dashboard/src/components/layouts/FormBox.tsx @@ -0,0 +1,39 @@ +import { colorVars } from '/@/theme' +import { styled } from '@macaron-css/solid' + +const Container = styled('div', { + base: { + width: '100%', + borderRadius: '8px', + border: `1px solid ${colorVars.semantic.ui.border}`, + overflow: 'hidden', + }, +}) +const Forms = styled('div', { + base: { + width: '100%', + padding: '20px 24px', + background: colorVars.semantic.ui.primary, + }, +}) +const Actions = styled('div', { + base: { + width: '100%', + padding: '16px 24px', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-end', + gap: '8px', + background: colorVars.semantic.ui.secondary, + borderTop: `1px solid ${colorVars.semantic.ui.border}`, + }, +}) + +const FormBox = { + Container, + Forms, + Actions, +} + +export default FormBox diff --git a/dashboard/src/components/templates/AppRow.tsx b/dashboard/src/components/templates/AppRow.tsx new file mode 100644 index 000000000..9f2f8b795 --- /dev/null +++ b/dashboard/src/components/templates/AppRow.tsx @@ -0,0 +1,106 @@ +import { Application } from '/@/api/neoshowcase/protobuf/gateway_pb' +import { applicationState, getWebsiteURL } from '/@/libs/application' +import { colorOverlay } from '/@/libs/colorOverlay' +import { DiffHuman } from '/@/libs/format' +import { colorVars, textVars } from '/@/theme' +import { styled } from '@macaron-css/solid' +import { A } from '@solidjs/router' +import { Component, Show } from 'solid-js' +import { AppStatus } from '../UI/AppStatus' +import { Button } from '../UI/Button' + +const Container = styled('div', { + base: { + width: '100%', + padding: '16px 16px 16px 20px', + cursor: 'pointer', + + selectors: { + '&:hover': { + background: colorVars.primitive.blackAlpha[50], + }, + }, + }, +}) +const TitleContainer = styled('div', { + base: { + width: '100%', + display: 'flex', + alignItems: 'center', + gap: '8px', + }, +}) +const AppName = styled('div', { + base: { + width: '100%', + color: colorVars.semantic.text.black, + ...textVars.h4.regular, + }, +}) +const UpdatedAt = styled('div', { + base: { + flexShrink: 0, + color: colorVars.semantic.text.grey, + ...textVars.caption.regular, + }, +}) +const MetaContainer = styled('div', { + base: { + width: '100%', + display: 'flex', + alignItems: 'center', + gap: '4px', + padding: '0 0 0 32px', + + color: colorVars.semantic.text.grey, + ...textVars.caption.regular, + }, +}) +const LastCommitName = styled('div', { + base: { + width: '100%', + }, +}) +const UrlCount = styled('div', { + base: { + height: '20px', + padding: '0 8px', + borderRadius: '9999px', + + color: colorVars.semantic.text.black, + background: colorVars.primitive.blackAlpha[200], + }, +}) + +export interface Props { + app: Application +} + +export const AppRow: Component = (props) => { + return ( + + + + + {props.app.name} + + {(nonNullUpdatedAt) => ( + + + + )} + + + + LastCommitName + 0}> +
{getWebsiteURL(props.app.websites[0])}
+ 1}> + {`+${props.app.websites.length - 1}`} + +
+
+
+
+ ) +} diff --git a/dashboard/src/components/templates/AppsNav.tsx b/dashboard/src/components/templates/AppsNav.tsx new file mode 100644 index 000000000..039856db9 --- /dev/null +++ b/dashboard/src/components/templates/AppsNav.tsx @@ -0,0 +1,17 @@ +import AddIcon from '/@/assets/icons/24/add.svg' +import { Component } from 'solid-js' +import { Button } from '../UI/Button' +import { Nav } from './Nav' + +export const AppsNav: Component = () => { + return ( +