@lark-apaas/coding-template-nestjs-react-fullstack 0.1.0-alpha.1

package/template/client/src/components/ui/field.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-normal",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-normal group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/template/client/src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/template/client/src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/template/client/src/components/ui/icons/file-ae-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileAeColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#BF3DBF"
+      />
+      <path
+        opacity="0.8"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#A630A6"
+      />
+      <path
+        d="M7.5153 17.957L8.27031 15.91H11.3271L12.0808 17.957C12.1108 18.0383 12.1869 18.0922 12.272 18.0922H13.1295C13.1549 18.0922 13.1801 18.0874 13.2037 18.078C13.3088 18.0361 13.3609 17.9152 13.3199 17.8078L10.4623 10.316C10.4318 10.2359 10.3562 10.1831 10.2719 10.1831H9.33439C9.25016 10.1831 9.17457 10.2359 9.144 10.316L6.28639 17.8078C6.27719 17.832 6.27246 17.8576 6.27246 17.8836C6.27246 17.9988 6.36394 18.0922 6.47679 18.0922H7.32405C7.40915 18.0922 7.48534 18.0383 7.5153 17.957ZM10.9512 14.8195H8.64627L9.8072 11.8195L10.9512 14.8195ZM15.1782 16.9365C15.3602 17.1518 15.6104 17.2584 15.9382 17.2584C16.2197 17.2584 16.4497 17.1851 16.6177 17.0448C16.6247 17.0388 16.6411 17.0253 16.659 17.0104C16.6838 16.9899 16.7116 16.9669 16.7214 16.9584C16.7717 16.915 16.8048 16.8791 16.8379 16.8294C16.8646 16.7892 16.8908 16.74 16.9186 16.677C16.9512 16.603 17.0019 16.5696 17.0902 16.5757L17.7618 16.6221C17.8817 16.6304 17.9154 16.7461 17.8852 16.8478C17.7888 17.1721 17.6808 17.3196 17.3545 17.6283C16.9795 17.9712 16.5017 18.1456 15.9382 18.1456C15.3099 18.1456 14.7882 17.9238 14.4076 17.4941C14.0222 17.0607 13.8343 16.4916 13.8343 15.7689C13.8343 15.1092 14.0155 14.5583 14.3775 14.1243C14.7564 13.6432 15.2724 13.4002 15.9148 13.4002C16.6236 13.4002 17.1721 13.6543 17.5337 14.1532C17.8511 14.5853 18.0179 15.1884 18.0343 15.9511C18.0363 16.0466 17.9605 16.1257 17.865 16.1277L17.8613 16.1278H14.8688C14.9136 16.4782 15.0164 16.7452 15.1782 16.9365ZM15.2057 14.5893C15.0474 14.7648 14.9434 14.9928 14.8919 15.2809H16.995C16.8883 14.6054 16.5432 14.2875 15.9304 14.2875C15.6254 14.2875 15.3886 14.3866 15.2057 14.5893Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template/client/src/components/ui/icons/file-ai-colorful-icon.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+export function FileAiColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#FF811A"
+      />
+      <path
+        opacity="0.5"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#C25705"
+      />
+      <path
+        d="M8.06095 17.9557L8.81597 15.9088H11.8727L12.6264 17.9557C12.6564 18.0371 12.7326 18.0909 12.8177 18.0909H13.6752C13.7006 18.0909 13.7257 18.0861 13.7494 18.0767C13.8545 18.0349 13.9065 17.9139 13.8656 17.8065L11.008 10.3147C10.9774 10.2346 10.9018 10.1818 10.8176 10.1818H9.88004C9.79582 10.1818 9.72022 10.2346 9.68965 10.3147L6.83205 17.8065C6.82284 17.8307 6.81812 17.8564 6.81812 17.8823C6.81812 17.9975 6.9096 18.0909 7.02244 18.0909H7.8697C7.9548 18.0909 8.03099 18.0371 8.06095 17.9557ZM11.4968 14.8182H9.19192L10.3529 11.8182L11.4968 14.8182Z"
+        fill="white"
+      />
+      <path
+        d="M15.414 12.8636C15.414 12.5875 15.6378 12.3636 15.914 12.3636H16.1412C16.4174 12.3636 16.6412 12.5875 16.6412 12.8636V13.0909C16.6412 13.3671 16.4174 13.5909 16.1412 13.5909H15.914C15.6378 13.5909 15.414 13.3671 15.414 13.0909V12.8636Z"
+        fill="white"
+      />
+      <path
+        d="M15.914 14.2727C15.6378 14.2727 15.414 14.4966 15.414 14.7727V17.5909C15.414 17.8671 15.6378 18.0909 15.914 18.0909H16.1412C16.4174 18.0909 16.6412 17.8671 16.6412 17.5909V14.7727C16.6412 14.4966 16.4174 14.2727 16.1412 14.2727H15.914Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template/client/src/components/ui/icons/file-android-colorful-icon.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+export function FileAndroidColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#35BD4B"
+      />
+      <path
+        opacity="0.9"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#32A645"
+      />
+      <path
+        d="M13.8667 9.32705C13.7471 9.25802 13.5942 9.29899 13.5251 9.41856L13.0551 10.2328C12.7345 10.0834 12.377 9.9999 12 9.9999C11.6127 9.9999 11.246 10.088 10.9188 10.2452L10.4582 9.44737C10.3891 9.3278 10.2362 9.28683 10.1167 9.35586C9.99708 9.4249 9.95611 9.5778 10.0251 9.69737L10.4919 10.5058C9.88929 10.9623 9.5 11.6856 9.5 12.4999H14.5C14.5 11.6752 14.1007 10.9438 13.4848 10.4884L13.9582 9.66856C14.0272 9.54899 13.9862 9.39609 13.8667 9.32705ZM11.5 11.5001C11.5 11.6381 11.3881 11.7501 11.25 11.7501C11.1119 11.7501 11 11.6381 11 11.5001C11 11.362 11.1119 11.2501 11.25 11.2501C11.3881 11.2501 11.5 11.362 11.5 11.5001ZM12.75 11.7501C12.6119 11.7501 12.5 11.6381 12.5 11.5001C12.5 11.362 12.6119 11.2501 12.75 11.2501C12.8881 11.2501 13 11.362 13 11.5001C13 11.6381 12.8881 11.7501 12.75 11.7501Z"
+        fill="white"
+      />
+      <path
+        d="M14.5 15.9999V12.9999H9.5V15.9999C9.5 16.7402 9.9022 17.3865 10.5 17.7323V18.9999C10.5 19.276 10.7239 19.4999 11 19.4999C11.2761 19.4999 11.5 19.276 11.5 18.9999V17.9999H12.5V18.9999C12.5 19.276 12.7239 19.4999 13 19.4999C13.2761 19.4999 13.5 19.276 13.5 18.9999V17.7323C14.0978 17.3865 14.5 16.7402 14.5 15.9999Z"
+        fill="white"
+      />
+      <path
+        d="M15.5 12.9999C15.2239 12.9999 15 13.2238 15 13.4999V14.9999C15 15.276 15.2239 15.4999 15.5 15.4999C15.7761 15.4999 16 15.276 16 14.9999V13.4999C16 13.2238 15.7761 12.9999 15.5 12.9999Z"
+        fill="white"
+      />
+      <path
+        d="M8.5 12.9999C8.22386 12.9999 8 13.2238 8 13.4999V14.9999C8 15.276 8.22386 15.4999 8.5 15.4999C8.77614 15.4999 9 15.276 9 14.9999V13.4999C9 13.2238 8.77614 12.9999 8.5 12.9999Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template/client/src/components/ui/icons/file-audio-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileAudioColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#35BD4B"
+      />
+      <path
+        opacity="0.9"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#32A645"
+      />
+      <path
+        d="M14.9814 9.65967C15.1899 9.70858 15.344 9.88482 15.3648 10.0979L15.4574 11.0474C15.4903 11.3855 15.1838 11.6573 14.8521 11.5842L12.5502 11.0769C12.4177 11.0477 12.2952 11.1562 12.3081 11.2912L12.8466 16.9414C12.8466 17.0285 12.8357 17.086 12.8162 17.1188C12.7684 18.2815 11.8107 19.2094 10.6363 19.2094C9.4313 19.2094 8.45447 18.2326 8.45447 17.0276C8.45447 15.8226 9.4313 14.8458 10.6363 14.8458C11.1344 14.8458 11.5935 15.0127 11.9608 15.2936L11.4549 9.50628C11.4252 9.16716 11.7358 8.89821 12.0672 8.97596L14.9814 9.65967Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template/client/src/components/ui/icons/file-code-colorful-icon.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export function FileCodeColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M10.2966 11.4764L7.76958 14.1363L10.2966 16.7961C10.3873 16.8916 10.3873 17.0447 10.293 17.1381L10.292 17.1391L9.95252 17.4774C9.8597 17.5698 9.7118 17.5677 9.62149 17.4727L6.61239 14.3054C6.52308 14.2114 6.52308 14.0611 6.61239 13.9671L9.62149 10.7999C9.7118 10.7048 9.8597 10.7027 9.95252 10.7952L10.292 11.1335C10.3852 11.2263 10.3877 11.3794 10.2976 11.4754L10.2966 11.4764ZM16.3178 14.1363L13.9712 11.4764C13.887 11.381 13.8885 11.2278 13.9746 11.1344L13.9755 11.1335L14.2908 10.7952C14.3769 10.7027 14.5143 10.7048 14.5981 10.7999L17.3923 13.9671C17.4752 14.0611 17.4752 14.2114 17.3923 14.3054L14.5981 17.4727C14.5143 17.5677 14.3769 17.5698 14.2908 17.4774L13.9755 17.1391C13.8889 17.0462 13.8866 16.8931 13.9704 16.7971L13.9712 16.7961L16.3178 14.1363ZM12.6285 9.09234L13.1203 9.14509C13.2546 9.15949 13.3509 9.27213 13.3353 9.39669L12.1614 18.7083C12.1457 18.8327 12.0244 18.9219 11.8902 18.9075L11.3984 18.8547C11.2642 18.8403 11.1679 18.7277 11.1834 18.6031L12.3574 9.2915C12.373 9.16708 12.4944 9.07796 12.6285 9.09234Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template/client/src/components/ui/icons/file-csv-colorful-icon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function FileCsvColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#35BD4B"
+      />
+      <path
+        opacity="0.9"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#32A645"
+      />
+      <path
+        d="M12.0767 10.4528C12.979 10.4528 13.7203 10.7465 14.3004 11.2514C14.5824 11.4947 14.8268 11.9192 14.9997 12.2801C15.148 12.5897 14.9123 12.9264 14.5689 12.9264H14.3771C14.1969 12.9264 14.0312 12.8291 13.9315 12.6789C13.7922 12.4691 13.5771 12.1789 13.3658 12.0284C13.022 11.776 12.5816 11.6429 12.0445 11.6429C11.2388 11.6429 10.6372 11.9481 10.229 12.5447C9.85304 13.0725 9.62122 13.7974 9.62122 14.7383C9.62122 15.7021 9.85304 16.4573 10.2183 16.9736C10.6157 17.5243 11.2388 17.8604 12.0767 17.8604C12.6246 17.8604 13.0757 17.662 13.4195 17.3867C13.6332 17.2054 13.8249 16.8625 13.9471 16.6093C14.037 16.4231 14.222 16.2954 14.4288 16.2954H14.6528C14.9804 16.2954 15.2147 16.6043 15.0974 16.9101C14.9283 17.3505 14.6578 17.9181 14.3004 18.226C13.6615 18.7765 13.153 18.9947 12.0767 19.0237C10.8407 19.057 9.85304 18.557 9.22999 17.7079C8.68213 16.9736 8.41357 15.9869 8.41357 14.7477C8.41357 13.5315 8.69287 12.5333 9.26222 11.776C9.90675 10.904 10.8521 10.4528 12.0767 10.4528Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/template/client/src/components/ui/icons/file-eml-colorful-icon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export function FileEmlColorfulIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M3 3C3 1.89543 3.89543 1 5 1H14.5858C14.851 1 15.1054 1.10536 15.2929 1.29289L20.7071 6.70711C20.8946 6.89464 21 7.149 21 7.41421V21C21 22.1046 20.1046 23 19 23H5C3.89543 23 3 22.1046 3 21V3Z"
+        fill="#336DF4"
+      />
+      <path
+        opacity="0.7"
+        d="M15 1.48284C15 1.30466 15.2154 1.21543 15.3414 1.34142L20.6586 6.65858C20.7846 6.78457 20.6953 7 20.5172 7H17C15.8954 7 15 6.10457 15 5V1.48284Z"
+        fill="#0442D2"
+      />
+      <path
+        d="M13.7358 16.9998L13.7358 13.0029L12.778 15.0234C12.5612 15.4807 11.9105 15.4807 11.6937 15.0234L10.7358 13.0029L10.7358 16.9998C10.7358 17.276 10.512 17.4998 10.2358 17.4998C9.9597 17.4998 9.73584 17.276 9.73584 16.9998L9.73584 11.6698C9.73584 10.9231 10.7485 10.6952 11.0684 11.3699L12.2358 13.8326L13.4033 11.3699C13.7232 10.6952 14.7358 10.9231 14.7358 11.6697L14.7358 16.9998C14.7358 17.276 14.512 17.4998 14.2358 17.4998C13.9597 17.4998 13.7358 17.276 13.7358 16.9998Z"
+        fill="white"
+      />
+      <path
+        d="M6.6 10.9998C5.99249 10.9998 5.5 11.4922 5.5 12.0998V16.3998C5.5 17.0073 5.99249 17.4998 6.6 17.4998H8.5C8.77614 17.4998 9 17.2759 9 16.9998C9 16.7236 8.77614 16.4998 8.5 16.4998H6.6C6.54477 16.4998 6.5 16.455 6.5 16.3998V14.7961H8.5C8.77614 14.7961 9 14.5723 9 14.2961C9 14.02 8.77614 13.7961 8.5 13.7961H6.5V12.0998C6.5 12.0445 6.54477 11.9998 6.6 11.9998H8.5C8.77614 11.9998 9 11.7759 9 11.4998C9 11.2236 8.77614 10.9998 8.5 10.9998H6.6Z"
+        fill="white"
+      />
+      <path
+        d="M16 10.9998C16.2761 10.9998 16.5 11.2236 16.5 11.4998V16.4998H18.5C18.7761 16.4998 19 16.7236 19 16.9998C19 17.2759 18.7761 17.4998 18.5 17.4998H16.5C15.9477 17.4998 15.5 17.052 15.5 16.4998V11.4998C15.5 11.2236 15.7239 10.9998 16 10.9998Z"
+        fill="white"
+      />
+    </svg>
+  );
+}