From c67f980c4a23c97c3a31ddddd2187d0eba4b3dad Mon Sep 17 00:00:00 2001 From: "Calum H." Date: Tue, 25 Aug 2026 07:15:38 +0100 Subject: [PATCH] refactor: StyledInput refactor -> Input components (#6733) * feat: align style * feat: new input components * refactor: migrate to new input components * refactor: rename component * prepr * chore: group inputs like buttons * fix: lint * feat: docs * fix: lint * fix: bugs * prepr * fix slug + adjust create server project --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com> --- .../src/components/ui/ExportModal.vue | 10 +- .../src/components/ui/JavaSelector.vue | 10 +- .../src/components/ui/friends/FriendsList.vue | 6 +- .../install_flow/AddServerToInstanceModal.vue | 4 +- .../ui/library/group-instances-modal.vue | 4 +- .../ui/library/library-toolbar/index.vue | 4 +- .../library-toolbar/new-group-modal.vue | 16 +- .../instances/DefaultInstanceSettings.vue | 16 +- .../instances/ResourceManagementSettings.vue | 6 +- .../modal/EditSingleplayerWorldModal.vue | 4 +- .../ui/world/modal/ServerModalBody.vue | 12 +- .../settings-modal/general-settings.vue | 4 +- .../settings-modal/hooks-settings.vue | 14 +- .../settings-modal/java-settings.vue | 8 +- .../settings-modal/window-settings.vue | 6 +- .../share/shared-instance-members-table.vue | 4 +- .../src/pages/instance/worlds/index.vue | 4 +- .../analytics-table/index.vue | 4 +- .../components/ui/ConfirmTransferOrgModal.vue | 4 +- .../ui/ConfirmTransferProjectModal.vue | 4 +- .../ui/ProjectCollectionSaveButton.vue | 4 +- .../components/ui/admin/AssignNoticeModal.vue | 4 +- .../components/ui/admin/BatchCreditModal.vue | 20 +- .../src/components/ui/admin/TransferModal.vue | 18 +- .../src/components/ui/auth/CreateAccount.vue | 4 +- .../components/ui/auth/PasskeySettings.vue | 6 +- .../src/components/ui/auth/SignIn.vue | 15 +- .../src/components/ui/auth/SignUp.vue | 6 +- .../components/McVersionPicker.vue | 4 +- .../stages/DetailsStage.vue | 6 +- .../ui/create/CollectionCreateModal.vue | 8 +- .../ui/create/OrganizationCreateModal.vue | 10 +- .../ui/create/ProjectCreateModal.vue | 33 +- .../ui/dashboard/RevenueInputField.vue | 10 +- .../LegacyPaypalDetailsStage.vue | 4 +- .../withdraw-stages/MuralpayDetailsStage.vue | 12 +- .../withdraw-stages/MuralpayKycStage.vue | 20 +- .../TremendousDetailsStage.vue | 6 +- .../ui/moderation/GlobalDetailTracesList.vue | 4 +- .../checklist/ModerationChecklist.vue | 5 +- .../checklist/ModpackPermissionsFlow.vue | 8 +- .../disclosures/AdvertisingDisclosureCard.vue | 5 +- .../disclosures/AiDisclosureCard.vue | 5 +- .../disclosures/ArchivedDisclosureCard.vue | 5 +- .../disclosures/DerivativeDisclosureCard.vue | 10 +- .../PaidFeaturesDisclosureCard.vue | 4 +- .../PhotosensitivityDisclosureCard.vue | 11 +- .../SystemInteractionsDisclosureCard.vue | 5 +- .../disclosures/TelemetryDisclosureCard.vue | 4 +- apps/frontend/src/layouts/default.vue | 4 +- apps/frontend/src/locales/en-US/index.json | 2 +- .../src/pages/[type]/[project]/gallery.vue | 10 +- .../[type]/[project]/settings/gallery.vue | 10 +- .../[type]/[project]/settings/general.vue | 21 +- .../pages/[type]/[project]/settings/index.vue | 39 +- .../[type]/[project]/settings/license.vue | 8 +- .../pages/[type]/[project]/settings/links.vue | 12 +- .../[type]/[project]/settings/members.vue | 12 +- .../[type]/[project]/settings/permissions.vue | 4 +- .../[type]/[project]/settings/server.vue | 6 +- apps/frontend/src/pages/admin/affiliates.vue | 4 +- .../src/pages/admin/analytics/events.vue | 10 +- .../src/pages/admin/billing/[user].vue | 6 +- apps/frontend/src/pages/admin/docs.vue | 4 +- apps/frontend/src/pages/admin/emails.vue | 6 +- .../src/pages/admin/servers/lookup.vue | 4 +- .../src/pages/admin/servers/notices.vue | 20 +- apps/frontend/src/pages/admin/user_email.vue | 4 +- .../src/pages/auth/reset-password.vue | 8 +- .../src/pages/collection/[collection].vue | 8 +- .../src/pages/dashboard/affiliate-links.vue | 4 +- .../src/pages/dashboard/collections.vue | 4 +- .../frontend/src/pages/dashboard/projects.vue | 10 +- apps/frontend/src/pages/index.vue | 4 +- .../pages/moderation/external-projects.vue | 24 +- apps/frontend/src/pages/moderation/index.vue | 4 +- .../src/pages/moderation/reports/index.vue | 4 +- .../moderation/technical-review/index.vue | 4 +- .../[organization]/settings/index.vue | 10 +- .../[organization]/settings/members.vue | 8 +- .../[organization]/settings/projects.vue | 10 +- apps/frontend/src/pages/report.vue | 4 +- apps/frontend/src/pages/settings/account.vue | 14 +- .../src/pages/settings/applications.vue | 12 +- apps/frontend/src/pages/settings/flags.vue | 4 +- apps/frontend/src/pages/settings/pats.vue | 4 +- .../moderation/src/types/node/factories.ts | 4 +- .../affiliate/AffiliateLinkCreateModal.vue | 22 +- .../ui/src/components/base/BaseTerminal.vue | 6 +- packages/ui/src/components/base/Combobox.vue | 34 +- .../src/components/base/DropdownFilterBar.vue | 4 +- .../ui/src/components/base/I18nDebugPanel.vue | 4 +- .../ui/src/components/base/ManySelect.vue | 4 +- .../ui/src/components/base/MarkdownEditor.vue | 110 ++--- .../ui/src/components/base/MultiSelect.vue | 9 +- .../ui/src/components/base/Pagination.vue | 8 +- packages/ui/src/components/base/Slider.vue | 4 +- .../ui/src/components/base/StyledInput.vue | 228 --------- .../src/components/base/TimeFramePicker.vue | 2 +- packages/ui/src/components/base/index.ts | 4 +- .../src/components/base/inputs/DateInput.vue | 142 ++++++ .../base/{ => inputs}/DatePicker.vue | 68 ++- .../ui/src/components/base/inputs/Input.vue | 171 +++++++ .../base/inputs/InputClearButton.vue | 30 ++ .../src/components/base/inputs/InputFrame.vue | 64 +++ .../src/components/base/inputs/Textarea.vue | 111 +++++ .../ui/src/components/base/inputs/index.ts | 7 + .../ui/src/components/base/inputs/types.ts | 2 + .../src/components/billing/PurchaseModal.vue | 14 +- .../components/content/CollectionWidget.vue | 6 +- .../AddFilesToAttributionGroupModal.vue | 6 +- .../AddToExistingExternalProjectModal.vue | 6 +- .../AddToGlobalPermissionsDatabaseModal.vue | 14 +- .../external_files/AttributionEditor.vue | 10 +- .../ExternalProjectPermissionsCard.vue | 5 +- .../components/CustomSetupStage.vue | 4 +- .../components/FinalConfigStage.vue | 16 +- .../components/ImportInstanceStage.vue | 6 +- .../ui/src/components/modal/ConfirmModal.vue | 4 +- .../ui/src/components/modal/ShareModal.vue | 12 +- .../components/search/SearchSidebarFilter.vue | 206 ++++---- .../servers/backups/BackupCreateModal.vue | 4 +- .../servers/backups/BackupRenameModal.vue | 4 +- ...nvite-players-modal-invite-link-editor.vue | 6 +- .../ui/src/components/version/VersionPage.vue | 4 +- .../src/layouts/shared/browse-tab/layout.vue | 6 +- .../ui/src/layouts/shared/console/layout.vue | 6 +- .../managed-content-modal/index.vue | 4 +- .../components/modals/ContentInstallModal.vue | 9 +- .../modals/content-updater-modal/index.vue | 4 +- .../src/layouts/shared/content-tab/layout.vue | 6 +- .../files-tab/components/FileNavbar.vue | 13 +- .../components/editor/EditorFindReplace.vue | 6 +- .../components/modals/FileCreateItemModal.vue | 4 +- .../components/modals/FileMoveItemModal.vue | 4 +- .../components/modals/FileRenameItemModal.vue | 4 +- .../modals/FileUploadZipUrlModal.vue | 4 +- .../shared/server-settings/pages/advanced.vue | 5 +- .../shared/server-settings/pages/general.vue | 4 +- .../shared/server-settings/pages/network.vue | 8 +- .../server-settings/pages/properties.vue | 14 +- .../components/edit-user-modal.vue | 8 +- .../hosting/manage/[id]/access/access.vue | 6 +- .../layouts/wrapped/hosting/manage/index.vue | 4 +- .../settings/AccountProfileSettings.vue | 12 +- .../language-settings-selector.vue | 4 +- packages/ui/src/locales/de-CH/index.json | 7 - packages/ui/src/locales/de-DE/index.json | 7 - packages/ui/src/locales/en-US/index.json | 6 - packages/ui/src/locales/es-419/index.json | 7 - packages/ui/src/locales/es-ES/index.json | 3 - packages/ui/src/locales/it-IT/index.json | 6 - packages/ui/src/locales/pl-PL/index.json | 6 - packages/ui/src/locales/ru-RU/index.json | 6 - packages/ui/src/locales/sv-SE/index.json | 6 - packages/ui/src/locales/tr-TR/index.json | 3 - packages/ui/src/locales/uk-UA/index.json | 3 - packages/ui/src/locales/zh-CN/index.json | 7 - packages/ui/src/locales/zh-TW/index.json | 7 - .../src/stories/inputs/DateInput.stories.ts | 41 ++ .../{base => inputs}/DatePicker.stories.ts | 4 +- .../Input.stories.ts} | 206 ++------ .../ui/src/stories/inputs/Textarea.stories.ts | 61 +++ standards/frontend/BUTTONS.md | 2 +- standards/frontend/INPUTS.md | 447 ++++++++++++++++++ standards/frontend/MODALS.md | 4 +- 166 files changed, 1804 insertions(+), 1261 deletions(-) delete mode 100644 packages/ui/src/components/base/StyledInput.vue create mode 100644 packages/ui/src/components/base/inputs/DateInput.vue rename packages/ui/src/components/base/{ => inputs}/DatePicker.vue (97%) create mode 100644 packages/ui/src/components/base/inputs/Input.vue create mode 100644 packages/ui/src/components/base/inputs/InputClearButton.vue create mode 100644 packages/ui/src/components/base/inputs/InputFrame.vue create mode 100644 packages/ui/src/components/base/inputs/Textarea.vue create mode 100644 packages/ui/src/components/base/inputs/index.ts create mode 100644 packages/ui/src/components/base/inputs/types.ts create mode 100644 packages/ui/src/stories/inputs/DateInput.stories.ts rename packages/ui/src/stories/{base => inputs}/DatePicker.stories.ts (99%) rename packages/ui/src/stories/{base/StyledInput.stories.ts => inputs/Input.stories.ts} (56%) create mode 100644 packages/ui/src/stories/inputs/Textarea.stories.ts create mode 100644 standards/frontend/INPUTS.md diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue index d0cdd1410b..66e76126a2 100644 --- a/apps/app-frontend/src/components/ui/ExportModal.vue +++ b/apps/app-frontend/src/components/ui/ExportModal.vue @@ -7,8 +7,9 @@ import { FileTreeSelect, injectNotificationManager, injectPopupNotificationManager, + Input, NewModal, - StyledInput, + Textarea, useVIntl, } from '@modrinth/ui' import { save } from '@tauri-apps/plugin-dialog' @@ -194,7 +195,7 @@ function normalizeExportPath(path) {

{{ formatMessage(messages.modpackNameLabel) }}

- {{ formatMessage(messages.versionNumberLabel) }}

- {{ formatMessage(commonMessages.descriptionLabel) }}

- diff --git a/apps/app-frontend/src/components/ui/JavaSelector.vue b/apps/app-frontend/src/components/ui/JavaSelector.vue index a46f4347b1..ff0631397e 100644 --- a/apps/app-frontend/src/components/ui/JavaSelector.vue +++ b/apps/app-frontend/src/components/ui/JavaSelector.vue @@ -2,7 +2,7 @@
-
- -
-
- import { PlusIcon, SearchIcon, SquarePlusIcon } from '@modrinth/assets' -import { Button, defineMessages, StyledInput, useVIntl } from '@modrinth/ui' +import { Button, defineMessages, Input, useVIntl } from '@modrinth/ui' import { computed, inject } from 'vue' import FilterMenu from '@/components/ui/library/library-toolbar/filter-menu.vue' @@ -29,7 +29,7 @@ function openNewGroup() { - +

{{ formatMessage(messages.appDirectoryDescription) }}

diff --git a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue index 5a518b5dbd..e4b639175b 100644 --- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue +++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue @@ -6,7 +6,7 @@ import { commonMessages, defineMessages, injectNotificationManager, - StyledInput, + Input, useVIntl, } from '@modrinth/ui' import { computed, ref } from 'vue' @@ -104,7 +104,7 @@ const messages = defineMessages({

{{ formatMessage(messages.name) }}

- -import { - Combobox, - defineMessages, - type MessageDescriptor, - StyledInput, - useVIntl, -} from '@modrinth/ui' +import { Combobox, defineMessages, Input, type MessageDescriptor, useVIntl } from '@modrinth/ui' import type { ServerPackStatus } from '@/helpers/worlds.ts' @@ -65,7 +59,7 @@ defineExpose({ resourcePackOptions })