From 47b8ff16618bf67f4e92b996c8b04f1ff5b87759 Mon Sep 17 00:00:00 2001 From: jon r Date: Thu, 17 Apr 2025 12:28:21 +0200 Subject: [PATCH] feat(front): add UI component library + UI docs closes #2355 #2368 #2382 #2384 --- compose.docs.yml | 1 + compose/docs.ui.yml | 21 + front/package.json | 3 + front/src/components/ui/Activity.vue | 73 ++ front/src/components/ui/Alert.vue | 36 + front/src/components/ui/Button.vue | 305 +++++++ front/src/components/ui/Card.vue | 319 +++++++ front/src/components/ui/Header.vue | 106 +++ front/src/components/ui/Heading.vue | 53 ++ front/src/components/ui/Input.vue | 164 ++++ front/src/components/ui/Layout.vue | 115 +++ front/src/components/ui/Link.vue | 168 ++++ front/src/components/ui/Loader.vue | 25 + front/src/components/ui/Markdown.vue | 92 ++ front/src/components/ui/Modal.vue | 152 ++++ front/src/components/ui/Nav.vue | 93 ++ front/src/components/ui/Pagination.vue | 183 ++++ front/src/components/ui/Pill.vue | 473 ++++++++++ front/src/components/ui/Pills.vue | 169 ++++ front/src/components/ui/Popover.vue | 163 ++++ front/src/components/ui/SanitizedHtml.vue | 12 + front/src/components/ui/Section.vue | 174 ++++ front/src/components/ui/Slider.vue | 211 +++++ front/src/components/ui/Spacer.vue | 72 ++ front/src/components/ui/Tab.vue | 25 + front/src/components/ui/Table.vue | 67 ++ front/src/components/ui/Tabs.vue | 67 ++ front/src/components/ui/Textarea.vue | 366 ++++++++ front/src/components/ui/Toc.vue | 59 ++ front/src/components/ui/Toggle.vue | 86 ++ front/src/components/ui/activity.scss | 127 +++ front/src/components/ui/alert.scss | 38 + front/src/components/ui/button.scss | 157 ++++ front/src/components/ui/button/Options.vue | 25 + front/src/components/ui/button/Play.vue | 19 + front/src/components/ui/button/options.scss | 13 + front/src/components/ui/button/play.scss | 40 + front/src/components/ui/input.scss | 131 +++ front/src/components/ui/loader.scss | 66 ++ front/src/components/ui/modal.scss | 149 ++++ front/src/components/ui/pagination.scss | 78 ++ front/src/components/ui/popover.scss | 68 ++ .../components/ui/popover/PopoverCheckbox.vue | 19 + .../src/components/ui/popover/PopoverItem.vue | 139 +++ .../components/ui/popover/PopoverRadio.vue | 35 + .../ui/popover/PopoverRadioItem.vue | 19 + .../components/ui/popover/PopoverSubmenu.vue | 44 + front/src/components/ui/tabs.scss | 85 ++ front/src/components/ui/textarea.scss | 136 +++ front/src/components/ui/toc.scss | 65 ++ front/src/components/ui/toggle.scss | 96 +++ front/ui-docs/.vitepress/config.ts | 81 ++ front/ui-docs/.vitepress/theme/Theme.vue | 106 +++ front/ui-docs/.vitepress/theme/index.ts | 56 ++ front/ui-docs/components/ui/activity.md | 137 +++ front/ui-docs/components/ui/alert.md | 98 +++ front/ui-docs/components/ui/button.md | 500 +++++++++++ front/ui-docs/components/ui/button/options.md | 17 + front/ui-docs/components/ui/button/play.md | 17 + front/ui-docs/components/ui/card.md | 423 +++++++++ front/ui-docs/components/ui/heading.md | 117 +++ front/ui-docs/components/ui/input.md | 166 ++++ front/ui-docs/components/ui/layout.md | 195 +++++ front/ui-docs/components/ui/layout/columns.md | 101 +++ front/ui-docs/components/ui/layout/flex.md | 54 ++ front/ui-docs/components/ui/layout/grid.md | 188 ++++ front/ui-docs/components/ui/layout/header.md | 88 ++ front/ui-docs/components/ui/layout/image.png | Bin 0 -> 80389 bytes front/ui-docs/components/ui/layout/section.md | 439 ++++++++++ front/ui-docs/components/ui/layout/spacer.md | 186 ++++ front/ui-docs/components/ui/layout/stack.md | 45 + front/ui-docs/components/ui/layout/table.md | 211 +++++ front/ui-docs/components/ui/link.md | 190 ++++ front/ui-docs/components/ui/loader.md | 56 ++ front/ui-docs/components/ui/modal.md | 348 ++++++++ front/ui-docs/components/ui/nav.md | 31 + front/ui-docs/components/ui/pagination.md | 30 + front/ui-docs/components/ui/pill.md | 257 ++++++ front/ui-docs/components/ui/pills.md | 303 +++++++ front/ui-docs/components/ui/popover.md | 781 +++++++++++++++++ front/ui-docs/components/ui/popover/image.png | Bin 0 -> 187407 bytes front/ui-docs/components/ui/slider.md | 100 +++ front/ui-docs/components/ui/tabs.md | 89 ++ front/ui-docs/components/ui/textarea.md | 160 ++++ front/ui-docs/components/ui/toc.md | 106 +++ front/ui-docs/components/ui/toggle.md | 70 ++ front/ui-docs/contributing.md | 31 + front/ui-docs/designing-pages.md | 66 ++ front/ui-docs/image-1.png | Bin 0 -> 119779 bytes front/ui-docs/image.png | Bin 0 -> 43503 bytes front/ui-docs/index.md | 62 ++ front/ui-docs/navigation.md | 27 + front/ui-docs/using-alignment.md | 61 ++ front/ui-docs/using-color.md | 816 ++++++++++++++++++ front/ui-docs/using-components.md | 166 ++++ front/ui-docs/using-width.md | 104 +++ front/ui-docs/vite.config.ts | 40 + 97 files changed, 12521 insertions(+) create mode 100644 compose/docs.ui.yml create mode 100644 front/src/components/ui/Activity.vue create mode 100644 front/src/components/ui/Alert.vue create mode 100644 front/src/components/ui/Button.vue create mode 100644 front/src/components/ui/Card.vue create mode 100644 front/src/components/ui/Header.vue create mode 100644 front/src/components/ui/Heading.vue create mode 100644 front/src/components/ui/Input.vue create mode 100644 front/src/components/ui/Layout.vue create mode 100644 front/src/components/ui/Link.vue create mode 100644 front/src/components/ui/Loader.vue create mode 100644 front/src/components/ui/Markdown.vue create mode 100644 front/src/components/ui/Modal.vue create mode 100644 front/src/components/ui/Nav.vue create mode 100644 front/src/components/ui/Pagination.vue create mode 100644 front/src/components/ui/Pill.vue create mode 100644 front/src/components/ui/Pills.vue create mode 100644 front/src/components/ui/Popover.vue create mode 100644 front/src/components/ui/SanitizedHtml.vue create mode 100644 front/src/components/ui/Section.vue create mode 100644 front/src/components/ui/Slider.vue create mode 100644 front/src/components/ui/Spacer.vue create mode 100644 front/src/components/ui/Tab.vue create mode 100644 front/src/components/ui/Table.vue create mode 100644 front/src/components/ui/Tabs.vue create mode 100644 front/src/components/ui/Textarea.vue create mode 100644 front/src/components/ui/Toc.vue create mode 100644 front/src/components/ui/Toggle.vue create mode 100644 front/src/components/ui/activity.scss create mode 100644 front/src/components/ui/alert.scss create mode 100644 front/src/components/ui/button.scss create mode 100644 front/src/components/ui/button/Options.vue create mode 100644 front/src/components/ui/button/Play.vue create mode 100644 front/src/components/ui/button/options.scss create mode 100644 front/src/components/ui/button/play.scss create mode 100644 front/src/components/ui/input.scss create mode 100644 front/src/components/ui/loader.scss create mode 100644 front/src/components/ui/modal.scss create mode 100644 front/src/components/ui/pagination.scss create mode 100644 front/src/components/ui/popover.scss create mode 100644 front/src/components/ui/popover/PopoverCheckbox.vue create mode 100644 front/src/components/ui/popover/PopoverItem.vue create mode 100644 front/src/components/ui/popover/PopoverRadio.vue create mode 100644 front/src/components/ui/popover/PopoverRadioItem.vue create mode 100644 front/src/components/ui/popover/PopoverSubmenu.vue create mode 100644 front/src/components/ui/tabs.scss create mode 100644 front/src/components/ui/textarea.scss create mode 100644 front/src/components/ui/toc.scss create mode 100644 front/src/components/ui/toggle.scss create mode 100644 front/ui-docs/.vitepress/config.ts create mode 100644 front/ui-docs/.vitepress/theme/Theme.vue create mode 100644 front/ui-docs/.vitepress/theme/index.ts create mode 100644 front/ui-docs/components/ui/activity.md create mode 100644 front/ui-docs/components/ui/alert.md create mode 100644 front/ui-docs/components/ui/button.md create mode 100644 front/ui-docs/components/ui/button/options.md create mode 100644 front/ui-docs/components/ui/button/play.md create mode 100644 front/ui-docs/components/ui/card.md create mode 100644 front/ui-docs/components/ui/heading.md create mode 100644 front/ui-docs/components/ui/input.md create mode 100644 front/ui-docs/components/ui/layout.md create mode 100644 front/ui-docs/components/ui/layout/columns.md create mode 100644 front/ui-docs/components/ui/layout/flex.md create mode 100644 front/ui-docs/components/ui/layout/grid.md create mode 100644 front/ui-docs/components/ui/layout/header.md create mode 100644 front/ui-docs/components/ui/layout/image.png create mode 100644 front/ui-docs/components/ui/layout/section.md create mode 100644 front/ui-docs/components/ui/layout/spacer.md create mode 100644 front/ui-docs/components/ui/layout/stack.md create mode 100644 front/ui-docs/components/ui/layout/table.md create mode 100644 front/ui-docs/components/ui/link.md create mode 100644 front/ui-docs/components/ui/loader.md create mode 100644 front/ui-docs/components/ui/modal.md create mode 100644 front/ui-docs/components/ui/nav.md create mode 100644 front/ui-docs/components/ui/pagination.md create mode 100644 front/ui-docs/components/ui/pill.md create mode 100644 front/ui-docs/components/ui/pills.md create mode 100644 front/ui-docs/components/ui/popover.md create mode 100644 front/ui-docs/components/ui/popover/image.png create mode 100644 front/ui-docs/components/ui/slider.md create mode 100644 front/ui-docs/components/ui/tabs.md create mode 100644 front/ui-docs/components/ui/textarea.md create mode 100644 front/ui-docs/components/ui/toc.md create mode 100644 front/ui-docs/components/ui/toggle.md create mode 100644 front/ui-docs/contributing.md create mode 100644 front/ui-docs/designing-pages.md create mode 100644 front/ui-docs/image-1.png create mode 100644 front/ui-docs/image.png create mode 100644 front/ui-docs/index.md create mode 100644 front/ui-docs/navigation.md create mode 100644 front/ui-docs/using-alignment.md create mode 100644 front/ui-docs/using-color.md create mode 100644 front/ui-docs/using-components.md create mode 100644 front/ui-docs/using-width.md create mode 100644 front/ui-docs/vite.config.ts diff --git a/compose.docs.yml b/compose.docs.yml index 77e8cd5a9..b8d7f7063 100644 --- a/compose.docs.yml +++ b/compose.docs.yml @@ -5,3 +5,4 @@ networks: include: - path: compose/docs.sphinx.yml - path: compose/docs.openapi.yml + - path: compose/docs.ui.yml diff --git a/compose/docs.ui.yml b/compose/docs.ui.yml new file mode 100644 index 000000000..cc724e90b --- /dev/null +++ b/compose/docs.ui.yml @@ -0,0 +1,21 @@ +services: + ui: + build: + context: ../front + dockerfile: Dockerfile.dev + command: yarn dev:docs --host 0.0.0.0 + expose: ['5173'] + ports: + - '8003:5173' + volumes: + - '../front:/app' + - '/app/node_modules' + networks: ['web'] + labels: + - 'traefik.enable=true' + - 'traefik.http.routers.test-funkwhale-ui-web.rule=Host(`ui.funkwhale.test`)' + - 'traefik.http.routers.test-funkwhale-ui-web.entrypoints=web' + - 'traefik.http.services.test-funkwhale-ui.loadbalancer.server.port=5173' + - 'traefik.http.routers.test-funkwhale-ui-webs.rule=Host(`ui.funkwhale.test`)' + - 'traefik.http.routers.test-funkwhale-ui-webs.entrypoints=webs' + - 'traefik.http.routers.test-funkwhale-ui-webs.tls=true' diff --git a/front/package.json b/front/package.json index e338d2f6e..077438241 100644 --- a/front/package.json +++ b/front/package.json @@ -6,8 +6,11 @@ "author": "Funkwhale Collective ", "scripts": { "dev": "vite", + "dev:docs": "VP_DOCS=true vitepress dev ui-docs", "build": "vite build --mode development", "build:deployment": "vite build", + "build:docs": "VP_DOCS=true vitepress build ui-docs", + "serve:docs": "VP_DOCS=true vitepress serve ui-docs", "serve": "vite preview", "test": "vitest run", "test:unit": "vitest run --coverage", diff --git a/front/src/components/ui/Activity.vue b/front/src/components/ui/Activity.vue new file mode 100644 index 000000000..3904f7a2b --- /dev/null +++ b/front/src/components/ui/Activity.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/front/src/components/ui/Alert.vue b/front/src/components/ui/Alert.vue new file mode 100644 index 000000000..d17fc083a --- /dev/null +++ b/front/src/components/ui/Alert.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue new file mode 100644 index 000000000..0d606a7ec --- /dev/null +++ b/front/src/components/ui/Button.vue @@ -0,0 +1,305 @@ + + + + + diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue new file mode 100644 index 000000000..6b082afcd --- /dev/null +++ b/front/src/components/ui/Card.vue @@ -0,0 +1,319 @@ + + + + + diff --git a/front/src/components/ui/Header.vue b/front/src/components/ui/Header.vue new file mode 100644 index 000000000..34ca1e49b --- /dev/null +++ b/front/src/components/ui/Header.vue @@ -0,0 +1,106 @@ + + + + + diff --git a/front/src/components/ui/Heading.vue b/front/src/components/ui/Heading.vue new file mode 100644 index 000000000..813be2545 --- /dev/null +++ b/front/src/components/ui/Heading.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue new file mode 100644 index 000000000..0f8efb262 --- /dev/null +++ b/front/src/components/ui/Input.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue new file mode 100644 index 000000000..22ecb052f --- /dev/null +++ b/front/src/components/ui/Layout.vue @@ -0,0 +1,115 @@ + + + + + diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue new file mode 100644 index 000000000..24ec35af5 --- /dev/null +++ b/front/src/components/ui/Link.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/front/src/components/ui/Loader.vue b/front/src/components/ui/Loader.vue new file mode 100644 index 000000000..65a5e6941 --- /dev/null +++ b/front/src/components/ui/Loader.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/front/src/components/ui/Markdown.vue b/front/src/components/ui/Markdown.vue new file mode 100644 index 000000000..b90f06faf --- /dev/null +++ b/front/src/components/ui/Markdown.vue @@ -0,0 +1,92 @@ + + + diff --git a/front/src/components/ui/Modal.vue b/front/src/components/ui/Modal.vue new file mode 100644 index 000000000..ff8a7b601 --- /dev/null +++ b/front/src/components/ui/Modal.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/front/src/components/ui/Nav.vue b/front/src/components/ui/Nav.vue new file mode 100644 index 000000000..9efb6dbde --- /dev/null +++ b/front/src/components/ui/Nav.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/front/src/components/ui/Pagination.vue b/front/src/components/ui/Pagination.vue new file mode 100644 index 000000000..a65f485f7 --- /dev/null +++ b/front/src/components/ui/Pagination.vue @@ -0,0 +1,183 @@ + + + + + diff --git a/front/src/components/ui/Pill.vue b/front/src/components/ui/Pill.vue new file mode 100644 index 000000000..6f5beace1 --- /dev/null +++ b/front/src/components/ui/Pill.vue @@ -0,0 +1,473 @@ + + + + + diff --git a/front/src/components/ui/Pills.vue b/front/src/components/ui/Pills.vue new file mode 100644 index 000000000..0b2afade9 --- /dev/null +++ b/front/src/components/ui/Pills.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/front/src/components/ui/Popover.vue b/front/src/components/ui/Popover.vue new file mode 100644 index 000000000..f345f6042 --- /dev/null +++ b/front/src/components/ui/Popover.vue @@ -0,0 +1,163 @@ + + + + + diff --git a/front/src/components/ui/SanitizedHtml.vue b/front/src/components/ui/SanitizedHtml.vue new file mode 100644 index 000000000..2d522481a --- /dev/null +++ b/front/src/components/ui/SanitizedHtml.vue @@ -0,0 +1,12 @@ + + + diff --git a/front/src/components/ui/Section.vue b/front/src/components/ui/Section.vue new file mode 100644 index 000000000..9ad348070 --- /dev/null +++ b/front/src/components/ui/Section.vue @@ -0,0 +1,174 @@ + + + + + diff --git a/front/src/components/ui/Slider.vue b/front/src/components/ui/Slider.vue new file mode 100644 index 000000000..5a9d0ff8b --- /dev/null +++ b/front/src/components/ui/Slider.vue @@ -0,0 +1,211 @@ + + + + + diff --git a/front/src/components/ui/Spacer.vue b/front/src/components/ui/Spacer.vue new file mode 100644 index 000000000..0fe90161e --- /dev/null +++ b/front/src/components/ui/Spacer.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/front/src/components/ui/Tab.vue b/front/src/components/ui/Tab.vue new file mode 100644 index 000000000..316ee94b9 --- /dev/null +++ b/front/src/components/ui/Tab.vue @@ -0,0 +1,25 @@ + + + diff --git a/front/src/components/ui/Table.vue b/front/src/components/ui/Table.vue new file mode 100644 index 000000000..1db1200dc --- /dev/null +++ b/front/src/components/ui/Table.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/front/src/components/ui/Tabs.vue b/front/src/components/ui/Tabs.vue new file mode 100644 index 000000000..266a4a62a --- /dev/null +++ b/front/src/components/ui/Tabs.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/front/src/components/ui/Textarea.vue b/front/src/components/ui/Textarea.vue new file mode 100644 index 000000000..2eade843c --- /dev/null +++ b/front/src/components/ui/Textarea.vue @@ -0,0 +1,366 @@ + + +