@bundle-stats/ui 4.4.0-beta.1 → 4.4.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.4.0-beta.1",
+  "version": "4.4.0-beta.4",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -18,9 +18,7 @@
     "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --resolve-plugins-relative-to ../../",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit",
-    "test:unit": "jest src --passWithNoTests",
-    "test:storyshots": "jest build/storybook "
+    "test": "jest src --passWithNoTests"
   },
   "repository": {
     "type": "git",
@@ -38,53 +36,51 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
+    "@babel/preset-env": "7.22.4",
+    "@babel/preset-react": "7.22.3",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.5.16",
     "@storybook/addons": "6.5.16",
     "@storybook/builder-webpack5": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/react": "6.5.16",
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.37",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.3.2",
     "colormap": "2.3.2",
     "cross-env": "7.0.3",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.7",
-    "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.4.2",
+    "jest": "29.5.0",
     "jest-date-mock": "1.0.8",
-    "jest-environment-jsdom": "29.4.2",
+    "jest-environment-jsdom": "29.5.0",
     "lodash": "4.17.21",
-    "postcss": "8.4.21",
+    "postcss": "8.4.24",
     "prop-types": "15.8.1",
     "react": "17.0.2",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-dom": "17.0.2",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
-    "rimraf": "4.1.2",
-    "typescript": "4.9.5"
+    "rimraf": "4.4.1",
+    "typescript": "5.1.3",
+    "typescript-plugin-css-modules": "5.0.1"
   },
   "peerDependencies": {
     "classnames": "^2.0.0",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
-    "react": "^17.0.0 | ^18.0.0",
-    "react-dom": "^17.0.0 | ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.4.0-beta.1",
-    "ariakit": "2.0.0-next.43",
+    "@bundle-stats/utils": "^4.4.0-beta.4",
+    "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
-    "use-query-params": "2.2.0"
+    "use-query-params": "2.2.1"
   },
-  "gitHead": "282bd9bf5f16be3a868b946e257f1e89c27c90d6"
+  "gitHead": "435e5e73f491b318cacb6b87fce74ea3906bbece"
 }

package/src/app/app.jsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
 import { HashRouter, NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import { COMPONENT } from '@bundle-stats/utils';
 
@@ -70,24 +71,34 @@ JobsProvider.propTypes = {
 const OverviewContent = () => {
   const { jobs } = useContext(JobsContext);
 
-  const duplicatePackagesInsight = jobs[0].insights?.webpack?.duplicatePackagesV3;
-  const newPackagesInsight = jobs[0].insights?.webpack?.newPackages;
+  const insightsByName = useMemo(() => {
+    const webpackInsights = jobs?.[0]?.insights?.webpack;
+
+    if (!webpackInsights) {
+      return null
+    }
+
+    const res = {
+      ...(webpackInsights.duplicatePackagesV3 && { duplicatePackages: webpackInsights.duplicatePackagesV3 }),
+      ...(webpackInsights.newPackages && { newPackages: webpackInsights.newPackages }),
+    };
+
+    if (isEmpty(res)) {
+      return null;
+    }
+
+    return res;
+  }, [jobs]);
 
-  console.info(duplicatePackagesInsight, newPackagesInsight);
 
   return (
     <Stack space="medium">
-      {(duplicatePackagesInsight || newPackagesInsight) && (
+      {insightsByName && (
         <Container>
           <Stack space="xsmall">
             <MetricsTableTitle title="Insights" />
             <Box padding="small" outline>
-              <Insights
-                duplicatePackages={duplicatePackagesInsight}
-                newPackages={newPackagesInsight}
-                summary={jobs[0].summary?.webpack}
-                showDelta={jobs.length > 1}
-              />
+              <Insights insights={insightsByName} />
             </Box>
           </Stack>
         </Container>
@@ -114,6 +125,7 @@ const AssetsContent = () => {
           keys={METRICS_WEBPACK_ASSETS}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundleAssets jobs={jobs} setState={bundleStatsSetState} {...bundleStatsState} />
@@ -136,6 +148,7 @@ const ModulesContent = () => {
           keys={METRICS_WEBPACK_MODULES}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundleModules jobs={jobs} setState={bundleModulesSetState} {...bundleModulesState} />
@@ -158,6 +171,7 @@ const PackagesContent = () => {
           keys={METRICS_WEBPACK_PACKAGES}
           data={jobs?.[0]?.summary}
           showSummaryItemDelta={jobs?.length !== 1}
+          showSummaryItemBaseline={jobs?.length !== 1}
         />
         <Box outline>
           <BundlePackages jobs={jobs} {...bundlePackagesState} setState={bundlePackagesSetState} />
@@ -187,6 +201,7 @@ const AppComponent = ({ version, jobs }) => {
             keys={METRICS_WEBPACK_GENERAL}
             data={jobs[0].summary}
             showSummaryItemDelta={jobs.length !== 1}
+            showSummaryItemBaseline={jobs?.length !== 1}
           />
         </Container>
 

package/src/app/app.module.css

@@ -12,9 +12,14 @@
   text-align: center;
 }
 
+.header {
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-outline);
+}
+
 .summaryContainer {
   padding-top: var(--space-medium);
-  padding-bottom: var(--space-small);
+  padding-bottom: var(--space-xsmall);
 }
 
 .tabsContainer {
@@ -42,7 +47,7 @@
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 72px;
+    --header-height: 52px;
   }
 
   .header {
@@ -52,13 +57,11 @@
     top: 0;
     right: 0;
     height: var(--header-height);
-    background-color: var(--color-background);
-    border-bottom: 1px solid var(--color-outline);
   }
 
   .tabsContainer {
     position: sticky;
     top: var(--header-height);
-    z-index: 100;
+    z-index: calc(var(--layer-high) - 1);
   }
 }

package/src/app/header/header.module.css

@@ -1,30 +1,37 @@
-.inner {
-  display: flex;
-  align-items: center;
+.jobs {
+  flex: 1 1 auto;
 }
 
-.branding {
-  padding: var(--space-small);
+.tools {
   flex: 0 0 auto;
-  color: var(--color-text);
-  display: flex;
-  align-items: center;
 }
 
-.jobs {
-  flex: 1 1 auto;
+.toolsGitHub {
+  display: block;
+  border-radius: 50%;
+  opacity: 0.8;
+  transition: var(--transition-out);
 }
 
-.tools {
-  border-left: 1px solid var(--color-outline);
-  padding: var(--space-small);
-  margin: 0 0 0 auto;
-  display: flex;
-  align-items: center;
-  color: var(--color-text-light);
+.toolsGitHub:hover,
+.toolsGitHub:focus,
+.toolsGitHub:active {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.toolsGitHubIcon {
+  display: block;
 }
 
-.toolsGithub {
-  color: inherit;
-  width: var(--space-medium);
+@media (min-width: 1140px) {
+  .tools {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: var(--header-height);
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-small);
+  }
 }

package/src/app/header/header.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import cx from 'classnames';
+
+import config from '../../config.json';
+import { Container } from '../../ui/container';
+import { FlexStack } from '../../layout/flex-stack';
+import { JobsHeader } from '../../components/jobs-header';
+import css from './header.module.css';
+import { Icon } from '../../ui';
+
+interface HeaderProps {
+  jobs: React.ComponentProps<typeof JobsHeader>['jobs'];
+}
+
+export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentProps<'header'>) => (
+  <Container as="header" className={cx(css.root, className)}>
+    <FlexStack space="small" alignItems="center">
+      <JobsHeader className={css.jobs} jobs={jobs} />
+      <div className={css.tools}>
+        <a href={config.gitHubUrl} target="_blank" rel="noopener noreferrer" className={css.toolsGitHub}>
+          <Icon glyph={Icon.ICONS.GITHUB} size="large" className={css.toolsGitHubIcon} />
+        </a>
+      </div>
+    </FlexStack>
+  </Container>
+);

package/src/assets/icons/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>

package/src/assets/icons/github.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

package/src/assets/icons/more-vertical.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="1"></circle>
+  <circle cx="12" cy="5" r="1"></circle>
+  <circle cx="12" cy="19" r="1"></circle>
+</svg>

package/src/assets/icons.svg

@@ -6,10 +6,6 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 16l4-4-4-4M8 12h8"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" id="cancel" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="12" r="10"/>
-<path d="M15 9l-6 6M9 9l6 6"/>
-</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>
@@ -26,9 +22,15 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 8v4M12 16h.01"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 20V10M18 20V4M6 20v-4"/>
 </symbol>
+<symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0112.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
@@ -40,6 +42,11 @@
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 12h18M3 6h18M3 18h18"/>
 </symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="more-vertical" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="1"/>
+<circle cx="12" cy="5" r="1"/>
+<circle cx="12" cy="19" r="1"/>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
 <path d="M0 0h24v24H0z" fill="none"/>

package/src/assets/icons.svg.jsx

@@ -29,20 +29,6 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16l4-4-4-4M8 12h8" />
     </symbol>
-    <symbol
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      class="feather feather-x-circle"
-      id="cancel"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <path d="M15 9l-6 6M9 9l6 6" />
-    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -98,6 +84,19 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M12 8v4M12 16h.01" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="feather feather-external-link"
+      viewBox="0 0 24 24"
+      id="external-link"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -111,6 +110,14 @@ export const SvgIcons = (props) => (
     >
       <path d="M12 20V10M18 20V4M6 20v-4" />
     </symbol>
+    <symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0112.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+        fill="#24292f"
+      />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -151,6 +158,20 @@ export const SvgIcons = (props) => (
     >
       <path d="M3 12h18M3 6h18M3 18h18" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="more-vertical"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="12" cy="5" r="1" />
+      <circle cx="12" cy="19" r="1" />
+    </symbol>
     <symbol viewBox="0 0 24 24" fill="currentColor" id="sort" xmlns="http://www.w3.org/2000/svg">
       <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" />
       <path d="M0 0h24v24H0z" fill="none" />

package/src/components/asset-info/asset-info.module.css

@@ -1,9 +1,31 @@
-.fileName {
-  max-width: 100%;
-  padding: 2px;
-  background: var(--color-highlight-warning);
+.assetNameTag {
+  color: var(--color-background);
 }
 
-.viewModules {
-  display: block;
+.assetNameTag:hover,
+.assetNameTag:active,
+.assetNameTag:focus {
+  color: var(--color-background);
 }
+
+.assetNameTagEntry {
+  background: var(--color-info-dark);
+}
+
+.assetNameTagInitial {
+  background: var(--color-info);
+}
+
+.assetNameTagChunk {
+  background: var(--color-info-light);
+}
+
+.label {
+  display: inline-block;
+  min-width: 6em;
+}
+
+.label::after {
+  content: ' ';
+}
+

package/src/components/asset-info/asset-info.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { action } from '@storybook/addon-actions'; // eslint-disable-line import/no-extraneous-dependencies
+
+import { getWrapperDecorator } from '../../stories';
+import { AssetInfo } from '.';
+
+export default {
+  title: 'Components/AssetInfo',
+  component: AssetInfo,
+  decorators: [getWrapperDecorator()],
+} as Meta;
+
+const ITEM = {
+  label: 'static/vendor.js',
+  changed: true,
+  isChunk: true,
+  isEntry: true,
+  isInitial: true,
+  isNotPredictive: false,
+  runs: [
+    {
+      name: 'static/vendor.abcd1234.js',
+      value: 982690,
+      chunkId: '1',
+    },
+    {
+      name: 'static/vendor.defg5678.js',
+      value: 1022530,
+      displayValue: '998.56KiB',
+      chunkId: '2',
+    },
+  ],
+};
+
+const Template = (props: Pick<React.ComponentProps<typeof AssetInfo>, 'chunks'>) => (
+  <AssetInfo item={ITEM} labels={['Job #2', 'Job #1']} onClose={action('CLOSE')} {...props} />
+);
+
+export const Default: Story = Template.bind({});
+
+export const WithChunks: Story = Template.bind({});
+
+WithChunks.args = {
+  chunks: [
+    {
+      id: '1',
+      name: 'vendor',
+    },
+    {
+      id: '2',
+      name: 'app~common~utils~shared',
+    },
+  ],
+};
+
+export const WithFileType: Story = Template.bind({});
+
+WithFileType.args = {
+  chunks: [
+    {
+      id: '1',
+      name: 'vendor',
+    },
+    {
+      id: '2',
+      name: 'app~common~utils~shared',
+    },
+  ],
+  item: {
+    ...ITEM,
+    fileType: 'JS',
+  },
+};