@bundle-stats/ui 4.4.0-beta.3 → 4.4.0

package/src/components/bundle-modules/bundle-modules.module.css

@@ -22,11 +22,18 @@
 }
 
 .nameText {
-  display: inline;
+  display: inline-block;
   vertical-align: middle;
 }
 
-.hoverCard {
-  max-width: var(--entry-info-hovercard-width);
+.root .name:hover,
+.root .name:active,
+.root .name:focus {
+  text-decoration: none;
 }
 
+.root .name:hover .nameText,
+.root .name:active .nameText,
+.root .name:focus .nameText {
+  text-decoration: underline;
+}

package/src/components/bundle-packages/bundle-packages.module.css

@@ -45,20 +45,14 @@
   content: 'd';
 }
 
-
-.packageHoverCardTitleIndex {
-  color: var(--color-text-light);
-  font-weight: normal;
-}
-
-.packageHoverCardPathValue {
-  width: 100%;
-  padding: var(--space-xxxsmall);
-  background: var(--color-highlight-warning);
-  font-family: var(--font-family-monospace);
+.root .packageName:hover,
+.root .packageName:active,
+.root .packageName:focus {
+  text-decoration: none;
 }
 
-.packageHoverCardList {
-  padding: 0;
-  list-style: inside;
+.root .packageName:hover .packageNameLabel,
+.root .packageName:active .packageNameLabel,
+.root .packageName:focus .packageNameLabel {
+  text-decoration: underline;
 }

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

@@ -56,6 +56,7 @@
   max-width: 100%;
   padding: 0 2px;
   background: var(--color-highlight-warning);
+  line-height: var(--line-height);
 }
 
 .label {

package/src/components/insight-icon/insight-icon.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import { InsightType } from '@bundle-stats/utils';
 
-import { Icon } from '../../ui/icon';
+import { Icon, IconGlyph } from '../../ui/icon';
 import css from './insight-icon.module.css';
 
 const InsightTypeIconMap = new Map([
@@ -19,7 +19,7 @@ export const InsightIcon = (props: InsightIconProps) => {
   const { className, type } = props;
   const resolvedType = Object.values(InsightType).includes(type) ? type : InsightType.WARNING;
   const rootClassName = cx(css.root, css[resolvedType], className);
-  const glyph = InsightTypeIconMap.get(resolvedType) as string;
+  const glyph = InsightTypeIconMap.get(resolvedType) as IconGlyph;
 
   return <Icon glyph={glyph} className={rootClassName} />;
 };

package/src/components/jobs-header/jobs-header.tsx

@@ -4,7 +4,6 @@ import { formatDateTime } from '@bundle-stats/utils';
 
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
-import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
 import { Tag } from '../../ui/tag';
 import css from './jobs-header.module.css';

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

@@ -44,14 +44,14 @@
 .titleTooltipIcon[aria-controls=""] {
   opacity: 0;
   visibility: none;
-  transition: var(--ui-transition-out);
+  transition: opacity var(--transition-duration-out) ease-out, color var(--transition-duration-out) ease-out, visibility 0s;
 }
 
 .root:hover .titleHoverCardIcon span,
 .root:hover .titleTooltipIcon {
   opacity: 1;
   visibility: visible;
-  transition: var(--ui-transition-in);
+  transition: opacity var(--transition-duration-in) ease-in, color var(--transition-duration-in) ease-in, visibility 0s;
 }
 
 /* Size variation */

package/src/components/summary/summary.tsx

@@ -1,11 +1,10 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import cx from 'classnames';
 import get from 'lodash/get';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
 
 import { METRICS_WEBPACK_GENERAL } from '../../constants';
 import { Box } from '../../layout/box';
-import { FlexStack } from '../../layout/flex-stack';
 import { ComponentLink } from '../component-link';
 import { MetricRunInfo, MetricRunInfoProps } from '../metric-run-info';
 import css from './summary.module.css';

package/src/config.json

@@ -1,7 +1,7 @@
 {
   "appName": "RelativeCI",
   "siteUrl": "https://relative-ci.com",
-  "githubUrl": "https://github.com/relative-ci/bundle-stats",
+  "gitHubUrl": "https://github.com/relative-ci/bundle-stats",
   "documentation" : {
     "assets": "https://relative-ci.com/documentation/metrics-and-data#assets",
     "modules": "https://relative-ci.com/documentation/metrics-and-data#modules",

package/src/css/variables.css

@@ -175,8 +175,10 @@
 
   --color-shadow: rgba(0, 0, 0, 0.2);
 
-  --transition-in: all 0.2s ease-in;
-  --transition-out: all 0.17s ease-out;
+  --transition-duration-in: 0.2s;
+  --transition-duration-out: 0.17s;
+  --transition-in: all var(--transition-duration-in) ease-in;
+  --transition-out: all var(--transition-duration-out) ease-out;
 
   --layer-xlow: 1;
   --layer-low: 10;

package/src/layout/footer/footer.jsx

@@ -24,16 +24,15 @@ export const Footer = ({ className, version }) => (
         <div>
           <nav className={css.nav}>
             <ExternalLink
-              href={config.githubUrl}
+              href={config.gitHubUrl}
               className={cx(css.navItem, css.navLink)}
               title="In-depth bundle analyzer for webpack(bundle size, assets, modules, packages)"
             >
-              {`BundleStats `}
-              {version}
+              {`BundleStats ${version}`}
             </ExternalLink>
             <span className={css.navItem}>
               <ExternalLink
-                href={`${config.githubUrl}/issues`}
+                href={`${config.gitHubUrl}/issues`}
                 className={css.navLink}
                 title="Navigate to GitHub and open issue"
               >

package/src/ui/icon/icon.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Icon } from '.';
+
+export default {
+  title: 'UI/Icon',
+  component: Icon,
+  args: {
+    size: Icon.SIZE_MEDIUM,
+  },
+  argTypes: {
+    size: {
+      options: Object.values(Icon.SIZES),
+      control: { type: 'select' },
+    },
+    glyph: {
+      options: Object.values(Icon.ICONS),
+      control: { type: 'select' },
+    },
+  },
+} as Meta;
+
+const Template: Story = (args: any) => <Icon {...args} />;
+
+export const Standard = Template.bind({});
+
+Standard.args = {
+  glyph: Icon.ICONS.ARROW,
+};
+
+export const CustomSize = Template.bind({});
+
+CustomSize.args = {
+  glyph: Icon.ICONS.ARROW,
+  size: Icon.SIZE_LARGE,
+};
+
+export const All = ({ size }: Pick<React.ComponentProps<typeof Icon>, 'size'>) => (
+  <>
+    {Object.values(Icon.ICONS).map((glyph) => (
+      <div
+        style={{
+          display: 'inline-block',
+          padding: '1rem',
+          textAlign: 'center',
+        }}
+      >
+        <Icon glyph={glyph} size={size} key={glyph} />
+        <code style={{ display: 'block' }}>{glyph}</code>
+      </div>
+    ))}
+  </>
+);

package/src/ui/icon/{icon.jsx → icon.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 import css from './icon.module.css';
@@ -7,23 +6,38 @@ import css from './icon.module.css';
 const ICONS = {
   ARROW: 'arrow',
   ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
-  CANCEL: 'cancel',
+  CANCEL: 'close',
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',
   ERROR: 'error',
   EXTERNAL_LINK: 'external-link',
   FILTER: 'filter',
+  GITHUB: 'github',
   INFO: 'info',
   HELP: 'help',
   MENU: 'menu',
   MORE_VERTICAL: 'more-vertical',
   SORT: 'sort',
   WARNING: 'warning',
-};
+} as const;
+
+const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+export type IconGlyph = (typeof ICONS)[keyof typeof ICONS];
+
+interface IconProps {
+  glyph: IconGlyph;
+  size?: (typeof SIZE)[keyof typeof SIZE];
+  as?: React.ElementType;
+}
 
-export const Icon = (props) => {
-  const { className, glyph, as: Component, size, ...restProps } = props;
+export const Icon = (props: IconProps & React.ComponentProps<'span'>) => {
+  const { className = '', glyph, as: Component = 'span', size = SIZE.MEDIUM, ...restProps } = props;
 
   return (
     <Component className={cx(css.root, className, css[size])} {...restProps}>
@@ -36,20 +50,7 @@ export const Icon = (props) => {
 
 Icon.ICONS = ICONS;
 
-Icon.SIZE_SMALL = 'small';
-Icon.SIZE_MEDIUM = 'medium';
-Icon.SIZE_LARGE = 'large';
-Icon.SIZES = [Icon.SIZE_SMALL, Icon.SIZE_MEDIUM, Icon.SIZE_LARGE];
-
-Icon.defaultProps = {
-  className: '',
-  as: 'span',
-  size: Icon.SIZE_MEDIUM,
-};
-
-Icon.propTypes = {
-  className: PropTypes.string,
-  glyph: PropTypes.oneOfType([PropTypes.oneOf(Object.values(ICONS)), PropTypes.node]).isRequired,
-  as: PropTypes.node,
-  size: PropTypes.oneOf(Icon.SIZES),
-};
+Icon.SIZE_SMALL = SIZE.SMALL;
+Icon.SIZE_MEDIUM = SIZE.MEDIUM;
+Icon.SIZE_LARGE = SIZE.LARGE;
+Icon.SIZES = Object.values(SIZE);

package/types/app/header/header.d.ts

@@ -1,17 +1,7 @@
-export function Header({ className, jobs }: {
-    className: any;
-    jobs: any;
-}): JSX.Element;
-export namespace Header {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let jobs: PropTypes.Requireable<(object | null | undefined)[]>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-        let jobs_1: null;
-        export { jobs_1 as jobs };
-    }
+import React from 'react';
+import { JobsHeader } from '../../components/jobs-header';
+interface HeaderProps {
+    jobs: React.ComponentProps<typeof JobsHeader>['jobs'];
 }
-import PropTypes from 'prop-types';
+export declare const Header: ({ className, jobs }: HeaderProps & React.ComponentProps<'header'>) => JSX.Element;
+export {};

package/types/app/header/index.d.ts

@@ -1 +1 @@
-export * from "./header";
+export * from './header';

package/types/ui/icon/icon.d.ts

@@ -1,42 +1,56 @@
-export function Icon(props: any): JSX.Element;
-export namespace Icon {
-    export { ICONS };
-    export let SIZE_SMALL: string;
-    export let SIZE_MEDIUM: string;
-    export let SIZE_LARGE: string;
-    export let SIZES: string[];
-    export namespace defaultProps {
-        export let className: string;
-        export let as: string;
-        import size = Icon.SIZE_MEDIUM;
-        export { size };
-    }
-    export namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let glyph: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        let as_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { as_1 as as };
-        let size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-    }
+import React from 'react';
+declare const ICONS: {
+    readonly ARROW: "arrow";
+    readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+    readonly CANCEL: "close";
+    readonly CLOSE: "close";
+    readonly CLOCK: "clock";
+    readonly COMMIT: "commit";
+    readonly ERROR: "error";
+    readonly EXTERNAL_LINK: "external-link";
+    readonly FILTER: "filter";
+    readonly GITHUB: "github";
+    readonly INFO: "info";
+    readonly HELP: "help";
+    readonly MENU: "menu";
+    readonly MORE_VERTICAL: "more-vertical";
+    readonly SORT: "sort";
+    readonly WARNING: "warning";
+};
+declare const SIZE: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export type IconGlyph = (typeof ICONS)[keyof typeof ICONS];
+interface IconProps {
+    glyph: IconGlyph;
+    size?: (typeof SIZE)[keyof typeof SIZE];
+    as?: React.ElementType;
 }
-declare namespace ICONS {
-    let ARROW: string;
-    let ARROW_RIGHT_CIRLCE: string;
-    let CANCEL: string;
-    let CLOSE: string;
-    let CLOCK: string;
-    let COMMIT: string;
-    let ERROR: string;
-    let EXTERNAL_LINK: string;
-    let FILTER: string;
-    let INFO: string;
-    let HELP: string;
-    let MENU: string;
-    let MORE_VERTICAL: string;
-    let SORT: string;
-    let WARNING: string;
-}
-import PropTypes from 'prop-types';
+export declare const Icon: {
+    (props: IconProps & React.ComponentProps<'span'>): JSX.Element;
+    ICONS: {
+        readonly ARROW: "arrow";
+        readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
+        readonly CANCEL: "close";
+        readonly CLOSE: "close";
+        readonly CLOCK: "clock";
+        readonly COMMIT: "commit";
+        readonly ERROR: "error";
+        readonly EXTERNAL_LINK: "external-link";
+        readonly FILTER: "filter";
+        readonly GITHUB: "github";
+        readonly INFO: "info";
+        readonly HELP: "help";
+        readonly MENU: "menu";
+        readonly MORE_VERTICAL: "more-vertical";
+        readonly SORT: "sort";
+        readonly WARNING: "warning";
+    };
+    SIZE_SMALL: "small";
+    SIZE_MEDIUM: "medium";
+    SIZE_LARGE: "large";
+    SIZES: ("small" | "medium" | "large")[];
+};
 export {};

package/types/ui/icon/index.d.ts

@@ -1 +1 @@
-export * from "./icon";
+export * from './icon';

package/src/app/header/header.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import { Container } from '../../ui/container';
-import { JobsHeader } from '../../components/jobs-header';
-import css from './header.module.css';
-
-export const Header = ({ className, jobs }) => (
-  <Container as="header" className={cx(css.root, className)}>
-    <div className={css.inner}>
-      <JobsHeader className={css.jobs} jobs={jobs} />
-    </div>
-  </Container>
-);
-
-Header.propTypes = {
-  className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
-};
-
-Header.defaultProps = {
-  className: '',
-  jobs: null,
-};

package/src/assets/icons/cancel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>