{"version":3,"file":"pages/BundleSize/components/cards.mjs","sources":["../../../../src/pages/BundleSize/components/cards.tsx"],"sourcesContent":["/* rslint-disable react/jsx-key */\nimport React, { useState, useMemo } from 'react';\nimport { Divider, Segmented, Avatar, Tree } from 'antd';\nimport { Client, SDK } from '@rsdoctor/types';\nimport { RightOutlined, FileFilled, GoldenFilled } from '@ant-design/icons';\n\nimport {\n  formatSize,\n  useDuplicatePackagesByErrors,\n  useThemeToken,\n} from '../../../utils';\nimport { StatisticCard } from '../../../components/Card/statistic';\nimport { SizeCard, bgColorType } from '../../../components/Card/size';\nimport Overview from '../../../components/Overall/overview';\nimport { ServerAPIProvider } from '../../../components/Manifest';\nimport { getFiles } from '../../..//components/Overall';\nimport { TextDrawer } from '../../..//components/TextDrawer';\n\nimport styles from './card.module.scss';\n\nconst { DirectoryTree } = Tree;\nconst { innerWidth } = window;\n\ninterface CardProps {\n  showProgress?: boolean;\n  data: Client.RsdoctorClientAssetsSummary['all']['total'];\n  total: number;\n  tagBgColor?: string;\n  type?: string;\n}\n\nconst AssetCard: React.FC<CardProps> = ({\n  showProgress = false,\n  data,\n  total,\n  tagBgColor,\n  type,\n}) => {\n  const token = useThemeToken();\n  const _tagBgColor = tagBgColor || token.colorPrimaryBorderHover;\n  return (\n    <SizeCard\n      type={type!}\n      files={data.files}\n      total={total}\n      showProgress={showProgress}\n      tagBgColor={_tagBgColor}\n    />\n  );\n};\n\nconst AssetCardContainer: React.FC<{\n  type?: string;\n  titles: string[];\n  datas: CardProps[];\n  bgColor?: bgColorType;\n}> = ({ titles, datas, bgColor, type }) => {\n  const [selectedTitle, setSelectedTitle] = useState(titles[0]);\n  const idx = useMemo(\n    () => titles.indexOf(selectedTitle),\n    [titles, selectedTitle],\n  );\n  const currentIdx = idx >= 0 ? idx : 0;\n  const fileType = type || selectedTitle || titles[0];\n\n  // Add bounds checking to prevent accessing undefined data\n  const currentData =\n    currentIdx >= 0 && currentIdx < datas.length\n      ? datas[currentIdx]\n      : datas[0] || {};\n\n  return (\n    <StatisticCard\n      title={\n        <div className={styles.cardTitle}>\n          <div className={styles.title}>{fileType}</div>\n          {titles.length > 1 ? (\n            <Segmented\n              defaultValue={titles[0]}\n              options={titles}\n              onChange={(value) => {\n                setSelectedTitle(value as string);\n              }}\n              size=\"small\"\n              style={{ transition: 'transform 0.3s ease' }}\n              value={selectedTitle}\n            />\n          ) : null}\n        </div>\n      }\n      value={\n        <AssetCard\n          type={fileType}\n          {...currentData}\n          tagBgColor={bgColor?.tagBgColor}\n        />\n      }\n      boxProps={{\n        style: {\n          background: bgColor?.bgColor,\n          width: innerWidth > 1300 ? '80%' : '95%',\n        },\n      }}\n    />\n  );\n};\n\nexport const BundleCards: React.FC<{\n  cwd: string;\n  errors: SDK.ErrorsData;\n  summary: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetAssetsSummary>;\n}> = ({ errors, summary }) => {\n  const duplicatePackages = useDuplicatePackagesByErrors(errors);\n  const [totalSize, totalSizeUnit] = formatSize(summary.all.total.size).split(\n    ' ',\n  );\n\n  const arr = [\n    <AssetCardContainer\n      type={'JS'}\n      titles={['Total', 'Initial']}\n      datas={[\n        {\n          data: summary.js.total,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n        {\n          data: summary.js.initial,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n      ]}\n    />,\n    <AssetCardContainer\n      type={'CSS'}\n      titles={['Total', 'Initial']}\n      datas={[\n        {\n          data: summary.css.total,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n        {\n          data: summary.css.initial,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n      ]}\n    />,\n    <AssetCardContainer\n      titles={['Images', 'Fonts', 'Media']}\n      datas={[\n        {\n          data: summary.imgs.total,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n        {\n          data: summary.fonts.total,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n        {\n          data: summary.media.total,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n      ]}\n    />,\n    <AssetCardContainer\n      type={'HTML'}\n      titles={['HTML Files']}\n      datas={[\n        {\n          data: summary.html.total,\n          total: summary.all.total.size,\n          showProgress: true,\n        },\n      ]}\n    />,\n  ];\n\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetAssetsSummary}\n      body={{ withFileContent: false }}\n    >\n      {(res) => {\n        const { treeData } = getFiles(res['all'].total);\n        return (\n          <div className={styles.container}>\n            <div className={styles.summary}>\n              <Overview\n                title={\n                  <TextDrawer\n                    buttonProps={{\n                      size: 'small',\n                    }}\n                    buttonStyle={{\n                      fontSize: 'inherit',\n                    }}\n                    drawerProps={{\n                      title: 'Files',\n                    }}\n                    text={\n                      <div style={{ color: 'var(--text-color-secondary)' }}>\n                        <span style={{ marginRight: '5px' }}>Total Files</span>\n                        <RightOutlined />\n                      </div>\n                    }\n                  >\n                    <DirectoryTree\n                      defaultExpandAll\n                      selectable={false}\n                      treeData={treeData}\n                      rootStyle={{\n                        minHeight: '800px',\n                        border: '1px solid var(--color-border)',\n                      }}\n                    />\n                  </TextDrawer>\n                }\n                description={\n                  <>\n                    <span className={styles.description}>{totalSize}</span>\n                    <span className={styles.unit}>{totalSizeUnit}</span>\n                    <div className={styles.totalNumber}>\n                      <span style={{ marginRight: '7px' }}>\n                        Number of files\n                      </span>\n                      <span style={{ fontWeight: 500 }}>\n                        {summary.all.total.count}\n                      </span>\n                    </div>\n                  </>\n                }\n                icon={\n                  <Avatar\n                    style={{ background: '#3874F6' }}\n                    shape=\"circle\"\n                    icon={<FileFilled style={{ fontSize: '18px' }} />}\n                  />\n                }\n                style={{\n                  marginBottom: '12px',\n                  minWidth: '210px',\n                }}\n              />\n              <Overview\n                style={{ minWidth: '210px' }}\n                title={\n                  <div style={{ margin: '4px 0' }}>\n                    <span style={{ marginRight: '5px' }}>\n                      Duplicate Packages\n                    </span>\n                  </div>\n                }\n                description={duplicatePackages.length}\n                icon={\n                  <Avatar\n                    style={{ background: '#13C2C2' }}\n                    shape=\"circle\"\n                    icon={<GoldenFilled style={{ fontSize: '18px' }} />}\n                  />\n                }\n              />\n            </div>\n            <Divider style={{ height: '200px' }} type=\"vertical\" />\n            <div className={styles.chartsContainer}>\n              {arr.map((e, idx) => (\n                <>\n                  <div key={idx} className={styles.chart}>\n                    {e}\n                  </div>\n                  {idx !== arr.length - 1 ? (\n                    <Divider\n                      key={`${idx}-divider`}\n                      style={{ height: '200px' }}\n                      type=\"vertical\"\n                    />\n                  ) : null}\n                </>\n              ))}\n            </div>\n          </div>\n        );\n      }}\n    </ServerAPIProvider>\n  );\n};\n"],"names":["DirectoryTree","Tree","innerWidth","window","AssetCard","showProgress","data","total","tagBgColor","type","token","useThemeToken","_tagBgColor","SizeCard","AssetCardContainer","titles","datas","bgColor","selectedTitle","setSelectedTitle","useState","idx","useMemo","currentIdx","fileType","currentData","StatisticCard","styles","Segmented","value","BundleCards","errors","summary","duplicatePackages","useDuplicatePackagesByErrors","totalSize","totalSizeUnit","formatSize","arr","ServerAPIProvider","SDK","res","treeData","getFiles","Overview","TextDrawer","RightOutlined","Avatar","FileFilled","GoldenFilled","Divider","e"],"mappings":"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"}