refactor(web): remove legacy tag component (#40928)

web/app/components/app/overview/customize/index.tsx

@@ -10,7 +10,6 @@ import {
 } from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Tag from '@/app/components/base/tag'
 import { useDocLink } from '@/context/i18n'
 import { AppModeEnum } from '@/types/app'
 
@@ -77,13 +76,9 @@ const CustomizeModal: FC<IShareLinkProps> = ({
         <DialogCloseButton />
         <div className="mt-4 min-h-0 flex-1 overflow-y-auto overscroll-contain">
           <div className="w-full rounded-lg border-[0.5px] border-components-panel-border px-6 py-5">
-            <Tag
-              bordered={true}
-              hideBg={true}
-              className="border-text-accent-secondary text-text-accent-secondary uppercase"
-            >
+            <span className="inline-flex shrink-0 rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-accent-secondary">
               {t(($) => $[`${prefixCustomize}.way`], { ns: 'appOverview' })} 1
-            </Tag>
+            </span>
             <p className="my-2 system-sm-medium text-text-secondary">
               {t(($) => $[`${prefixCustomize}.way1.name`], { ns: 'appOverview' })}
             </p>
@@ -164,13 +159,9 @@ const CustomizeModal: FC<IShareLinkProps> = ({
             </div>
           </div>
           <div className="mt-4 w-full rounded-lg border-[0.5px] border-components-panel-border px-6 py-5">
-            <Tag
-              bordered={true}
-              hideBg={true}
-              className="border-text-accent-secondary text-text-accent-secondary uppercase"
-            >
+            <span className="inline-flex shrink-0 rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-accent-secondary">
               {t(($) => $[`${prefixCustomize}.way`], { ns: 'appOverview' })} 2
-            </Tag>
+            </span>
             <p className="my-2 system-sm-medium text-text-secondary">
               {t(($) => $[`${prefixCustomize}.way2.name`], { ns: 'appOverview' })}
             </p>

web/app/components/base/tag/index.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import Tag from '.'
-
-const COLORS: Array<NonNullable<React.ComponentProps<typeof Tag>['color']>> = [
-  'green',
-  'yellow',
-  'red',
-  'gray',
-]
-
-const TagGallery = ({
-  bordered = false,
-  hideBg = false,
-}: {
-  bordered?: boolean
-  hideBg?: boolean
-}) => {
-  return (
-    <div className="flex w-full max-w-md flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="text-xs tracking-[0.18em] text-text-tertiary uppercase">Tag variants</div>
-      <div className="grid grid-cols-2 gap-3">
-        {COLORS.map((color) => (
-          <div
-            key={color}
-            className="flex flex-col items-start gap-2 rounded-xl border border-transparent px-3 py-2 hover:border-divider-subtle hover:bg-background-default-subtle"
-          >
-            <Tag color={color} bordered={bordered} hideBg={hideBg}>
-              {color.charAt(0).toUpperCase() + color.slice(1)}
-            </Tag>
-            <span className="text-[11px] tracking-[0.16em] text-text-quaternary uppercase">
-              {color}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-const meta = {
-  title: 'Base/Data Display/Tag',
-  component: TagGallery,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Color-coded label component. Toggle borders or remove background to fit dark/light surfaces.',
-      },
-    },
-  },
-  argTypes: {
-    bordered: { control: 'boolean' },
-    hideBg: { control: 'boolean' },
-  },
-  args: {
-    bordered: false,
-    hideBg: false,
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof TagGallery>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {}
-
-export const Outlined: Story = {
-  args: {
-    bordered: true,
-    hideBg: true,
-  },
-}

web/app/components/base/tag/index.tsx

@@ -1,51 +0,0 @@
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-
-type ITagProps = {
-  children: string | React.ReactNode
-  color?: keyof typeof COLOR_MAP
-  className?: string
-  bordered?: boolean
-  hideBg?: boolean
-}
-
-const COLOR_MAP = {
-  green: {
-    text: 'text-green-800',
-    bg: 'bg-green-100',
-  },
-  yellow: {
-    text: 'text-yellow-800',
-    bg: 'bg-yellow-100',
-  },
-  red: {
-    text: 'text-red-800',
-    bg: 'bg-red-100',
-  },
-  gray: {
-    text: 'text-gray-800',
-    bg: 'bg-gray-100',
-  },
-}
-
-export default function Tag({
-  children,
-  color = 'green',
-  className = '',
-  bordered = false,
-  hideBg = false,
-}: ITagProps) {
-  return (
-    <div
-      className={cn(
-        'inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs/5',
-        COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '',
-        bordered ? 'border border-divider-regular' : '',
-        hideBg ? 'bg-transparent' : '',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
-}