refactor: migrate all input fields to StyledInput (#5306)

* feat: StyledInput component

* migrate: auth pages to styledInput

* migrate: search/filter inputs

* migrate: dashboard inputs

* migrate: app frontend

* migrate: search related inputs

* migrate: all of app-frontend

* fix: missing inputs on app-frontend

* migrate: frontend

* feat: multiline

* migrate: textareas

* fix: storybook use text-primary

* fix: lint

* fix: merge conflict

* feat: cleanup

packages/assets/generated-icons.ts

@@ -3,8 +3,6 @@
 
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 
-export type IconComponent = FunctionalComponent<SVGAttributes>
-
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -327,6 +325,8 @@ import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon

packages/assets/styles/classes.scss

@@ -45,14 +45,7 @@
 		width: 15rem;
 	}
 
-	> :where(
-		input + *,
-		.input-group + *,
-		.textarea-wrapper + *,
-		.chips + *,
-		.resizable-textarea-wrapper + *,
-		.input-div + *
-	) {
+	> :where(input + *, .input-group + *, .chips + *, .input-div + *) {
 		margin-block-start: var(--gap-md);
 	}
 
@@ -679,33 +672,6 @@ a:not(.no-click-animation),
 
 // CUSTOM COMPONENTS
 // TODO: MOST OF THESE SHOULD BE MOVED TO AN OMORPHIA COMPONENT
-.textarea-wrapper {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-
-	textarea {
-		border-radius: var(--radius-sm);
-		flex: 1;
-		overflow-y: auto;
-		resize: none;
-		max-width: 100%;
-	}
-}
-
-.resizable-textarea-wrapper {
-	display: block;
-	flex-grow: 1;
-	width: 100%;
-	margin-bottom: 0;
-
-	textarea {
-		height: 100%;
-		border-radius: var(--radius-sm);
-		width: calc(100% - var(--gap-xl) - var(--gap-sm));
-		resize: vertical;
-	}
-}
 
 // TOOLTIPS
 

packages/assets/styles/defaults.scss

@@ -43,50 +43,8 @@ a.uncolored {
 	color: inherit;
 }
 
-input[type='text'],
-input[type='url'],
-input[type='number'],
-input[type='password'],
-textarea,
-.input-text-inherit,
-.cm-content {
-	border-radius: var(--radius-md);
-	box-sizing: border-box;
-	// safari iOS rounds inputs by default
-	// set the appearance to none to prevent this
-	appearance: none !important;
-	background: var(--color-button-bg);
-	color: var(--color-base);
-	padding: 0.5rem 1rem;
-	font-weight: var(--font-weight-medium);
-	transition: box-shadow 0.1s ease-in-out;
-	min-height: 36px;
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent;
-	border: none;
-	outline: none;
-
-	&:disabled,
-	&[disabled] {
-		opacity: 0.6;
-		pointer-events: none;
-		cursor: not-allowed;
-	}
-
-	&:focus::placeholder {
-		opacity: 0.8;
-	}
-
-	&::placeholder {
-		color: var(--color-base);
-		opacity: 0.6;
-	}
-}
-
 .cm-content {
 	white-space: pre-wrap !important;
-	box-shadow: none;
 }
 
 input[type='number'] {
@@ -122,46 +80,6 @@ input[type='number'] {
 	}
 }
 
-.iconified-input {
-	align-items: center;
-	display: inline-flex;
-	position: relative;
-
-	input {
-		padding: 0 0.5rem 0 2.5rem;
-		width: 100%;
-	}
-
-	&:focus-within svg {
-		opacity: 1;
-		color: var(--color-contrast);
-	}
-
-	svg {
-		position: absolute;
-		left: 0.75rem;
-		height: 1.25rem;
-		width: 1.25rem;
-		z-index: 1;
-
-		color: var(--color-base);
-		opacity: 0.6;
-	}
-
-	.r-btn {
-		@extend .transparent, .icon-only;
-
-		position: absolute;
-		right: 0.125rem;
-		z-index: 1;
-
-		svg {
-			position: relative;
-			left: 0;
-		}
-	}
-}
-
 svg {
 	height: 1em;
 	width: 1em;