@bundle-stats/ui 4.16.0-beta.1 → 4.16.0-beta.11

package/src/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--color-highlight);
 }

package/src/components/preview-source/preview-source.stories.tsx

@@ -29,7 +29,25 @@ const SOURCE = JSON.stringify(
 
 export const Default: Story = {
   args: {
-    source: SOURCE,
+    source: JSON.stringify(
+      [
+        {
+          label: 'Hey',
+          runs: [
+            { value: 1, name: 'a' },
+            { value: 2, name: 'b' },
+          ],
+        },
+      ],
+      null,
+      2,
+    ),
+    download: 'bundle-stats--assets.json',
+  },
+};
+
+export const Empty: Story = {
+  args: {
     download: 'bundle-stats--assets.json',
   },
 };

package/src/components/preview-source/preview-source.tsx

@@ -9,8 +9,14 @@ import { Tooltip } from '../../ui/tooltip';
 import { Textarea } from '../../ui/textarea';
 import css from './preview-source.module.css';
 
+const DEFAULT_ROWS = 10;
+
 type PreviewSourceProps = {
-  source: string;
+  source?: string;
+  /**
+   * Textarea rows
+   */
+  rows?: number;
   /**
    * Link download attribute
    * @example
@@ -20,28 +26,31 @@ type PreviewSourceProps = {
 } & ComponentProps<'div'>;
 
 export const PreviewSource = (props: PreviewSourceProps) => {
-  const { className = '', source, download = false, ...restProps } = props;
+  const { className = '', source, rows = DEFAULT_ROWS, download = false, ...restProps } = props;
+
+  const isEmpty = !source;
+  const rootClassName = cx(css.root, className, isEmpty && css.isEmpty);
 
   return (
-    <div className={cx(css.root, className)} {...restProps}>
-      <ControlGroup className={css.toolbar}>
-        <CopyToClipboard outline size="small" text={source} />
-        {download && (
-          <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
-            <Button
-              outline
-              rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
-              size="small"
-              as="a"
-              href={`data:application/json,${encodeURIComponent(source)}`}
-              download={download}
-            />
-          </Tooltip>
-        )}
-      </ControlGroup>
-      <Textarea previewSource readOnly rows={12} className={css.content}>
-        {source}
-      </Textarea>
+    <div className={rootClassName} {...restProps}>
+      {source && (
+        <ControlGroup className={css.toolbar}>
+          <CopyToClipboard outline size="small" text={source} />
+          {download && (
+            <Tooltip title={`Download ${download}`} className={css.downloadTooltip}>
+              <Button
+                outline
+                rightGlyph={BUTTON_GLYPHS.DOWNLOAD}
+                size="small"
+                as="a"
+                href={`data:application/json,${encodeURIComponent(source)}`}
+                download={download}
+              />
+            </Tooltip>
+          )}
+        </ControlGroup>
+      )}
+      <Textarea readOnly rows={rows} value={source} className={css.content} />
     </div>
   );
 };

package/src/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

package/src/i18n.js

@@ -22,6 +22,8 @@ export default {
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries',
   EXPORT: 'Export',
+  EXPORT_CSV: 'Export CSV',
+  EXPORT_JSON: 'Export JSON',
 
   COPY_TO_CLIPBOARD: 'Copy to clipboard',
   COPY_TO_CLIPBOARD_DONE: 'Copied to clipboard',

package/src/ui/dialog/dialog.module.css

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/src/ui/index.js

@@ -13,6 +13,7 @@ export { Icon } from './icon';
 export { Input } from './input';
 export { InputSearch } from './input-search';
 export { Loader } from './loader';
+export { Markdown } from './markdown';
 export { Skeleton } from './skeleton';
 export { Table } from './table';
 export { Tabs } from './tabs';

package/src/ui/markdown/index.ts

@@ -0,0 +1 @@
+export * from './markdown';

package/src/ui/markdown/markdown.module.css

@@ -0,0 +1,7 @@
+.root code {
+  padding: 2px var(--space-xxxsmall);
+  background: var(--color-highlight);
+  outline: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}

package/src/ui/markdown/markdown.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Markdown } from '.';
+
+const meta: Meta<typeof Markdown> = {
+  title: 'UI/Markdown',
+  component: Markdown,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: '**One line** _markdown_ content',
+  },
+};
+
+const MULTI_LINE_MARKDOWN = `
+**Lorem ipsum** dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et malesuada.
+
+Eget nunc scelerisque viverra mauris in. Ipsum dolor sit amet consectetur adipiscing.
+`;
+
+export const MultiLine: Story = {
+  args: {
+    content: MULTI_LINE_MARKDOWN,
+  },
+};

package/src/ui/markdown/markdown.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentProps, ElementType, useMemo } from 'react';
+import cx from 'classnames';
+import snarkdown from 'snarkdown';
+
+import css from './markdown.module.css';
+
+type MarkdownProps = {
+  content?: string;
+  as?: ElementType;
+} & ComponentProps<'div'>;
+
+export const Markdown = (props: MarkdownProps) => {
+  const { className = '', content = '', as: Component = 'div', ...restProps } = props;
+
+  const html = useMemo(() => snarkdown(content), [content]);
+
+  return (
+    <Component
+      className={cx(css.root, className)}
+      {...restProps}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};

package/src/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/src/ui/tabs/index.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/src/ui/tabs/tabs.module.css

@@ -4,12 +4,16 @@
 }
 
 .item {
+  appearance: none;
+  background: none;
+  border: 0;
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) var(--space-small);
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
+  transition: var(--ui-transition-out);
 }
 
 .item::after {
@@ -26,8 +30,9 @@
 .item:hover,
 .item:active,
 .item:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-primary);
   outline: none;
+  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
@@ -43,7 +48,3 @@
 .itemActive::after {
   background: currentColor;
 }
-
-.item + .item {
-  _margin-left: var(--space-medium);
-}

package/src/ui/tabs/tabs.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Tabs, TabItem } from '.';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs>
+      <TabItem isTabActive>Option A</TabItem>
+      <TabItem>Option B</TabItem>
+      <TabItem>Option C</TabItem>
+    </Tabs>
+  ),
+};

package/src/ui/tabs/tabs.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ElementType } from 'react';
+import React from 'react';
+import cx from 'classnames';
+
+import css from './tabs.module.css';
+
+export type TabItemProps<T extends ElementType> = {
+  isTabActive?: boolean;
+  as?: T;
+} & ComponentProps<T>;
+
+export const TabItem = <T extends ElementType = 'button'>(props: TabItemProps<T>) => {
+  const { className = '', as: Component = 'button', isTabActive = false, ...restProps } = props;
+
+  return (
+    <Component
+      role="tab"
+      className={cx(css.item, className, isTabActive && css.itemActive)}
+      {...restProps}
+    />
+  );
+};
+
+export type TabsProps = ComponentProps<'div'>;
+
+export const Tabs = (props: TabsProps) => {
+  const { className = '', ...restProps } = props;
+
+  return <div role="tablist" className={cx(css.root, className)} {...restProps} />;
+};
+
+Tabs.Item = TabItem;

package/src/ui/textarea/textarea.module.css

@@ -36,13 +36,6 @@
   color: var(--color-text-light);
 }
 
-/**
- * Source variation
- */
-.previewSource {
-  font-family: var(--font-family-fixed);
-}
-
 /** Size modifier */
 /* default - medium */
 .root {

package/src/ui/textarea/textarea.tsx

@@ -5,19 +5,13 @@ import cx from 'classnames';
 import css from './textarea.module.css';
 
 export type TextareaProps = {
-  previewSource?: boolean;
   size?: 'small' | 'medium' | 'large';
 } & ComponentProps<'textarea'>;
 
 export const Textarea = (props: TextareaProps) => {
-  const { className = '', previewSource = false, size = '', ...restProps } = props;
+  const { className = '', size = '', ...restProps } = props;
 
-  const rootClassName = cx(
-    css.root,
-    previewSource && css.previewSource,
-    size && css[size],
-    className,
-  );
+  const rootClassName = cx(css.root, size && css[size], className);
 
   return <textarea className={rootClassName} {...restProps} />;
 };

package/types/components/metrics-table-export/metrics-table-export.d.ts

@@ -4,6 +4,7 @@ import type { ReportMetricRow } from '@bundle-stats/utils';
 import { Stack } from '../../layout/stack';
 type MetricsTableExportProps = {
     items: Array<ReportMetricRow>;
+    initialSourceType?: string;
     download: string;
 } & ComponentProps<typeof Stack>;
 export declare const MetricsTableExport: (props: MetricsTableExportProps) => React.JSX.Element;

package/types/components/metrics-table-options/metrics-table-options.d.ts

@@ -4,7 +4,7 @@ import { Dropdown } from '../../ui/dropdown';
 type MetricsTableOptionsProps = {
     onViewAllClick?: () => void;
     onResetClick?: () => void;
-    onExportClick?: () => void;
+    onExportClick?: (sourceType: string) => void;
 } & ComponentProps<typeof Dropdown>;
 export declare const MetricsTableOptions: (props: MetricsTableOptionsProps) => React.JSX.Element;
 export {};

package/types/components/preview-source/preview-source.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 type PreviewSourceProps = {
-    source: string;
+    source?: string;
+    rows?: number;
     download?: string;
 } & ComponentProps<'div'>;
 export declare const PreviewSource: (props: PreviewSourceProps) => React.JSX.Element;

package/types/i18n.d.ts

@@ -15,6 +15,8 @@ declare namespace _default {
     let RESET_FILTERS: string;
     let VIEW_ALL: string;
     let EXPORT: string;
+    let EXPORT_CSV: string;
+    let EXPORT_JSON: string;
     let COPY_TO_CLIPBOARD: string;
     let COPY_TO_CLIPBOARD_DONE: string;
     let GITHUB_LINK_TITLE: string;

package/types/ui/index.d.ts

@@ -13,6 +13,7 @@ export { Icon } from "./icon";
 export { Input } from "./input";
 export { InputSearch } from "./input-search";
 export { Loader } from "./loader";
+export { Markdown } from "./markdown";
 export { Skeleton } from "./skeleton";
 export { Table } from "./table";
 export { Tabs } from "./tabs";

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

@@ -0,0 +1 @@
+export * from './markdown';

package/types/ui/markdown/markdown.d.ts

@@ -0,0 +1,7 @@
+import React, { ComponentProps, ElementType } from 'react';
+type MarkdownProps = {
+    content?: string;
+    as?: ElementType;
+} & ComponentProps<'div'>;
+export declare const Markdown: (props: MarkdownProps) => React.JSX.Element;
+export {};

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

@@ -1 +1 @@
-export { Tabs } from "./tabs";
+export * from './tabs';

package/types/ui/tabs/tabs.d.ts

@@ -1,42 +1,12 @@
-export function Tabs({ className, ...restProps }: {
-    [x: string]: any;
-    className?: string | undefined;
-}): React.JSX.Element;
-export namespace Tabs {
-    export namespace defaultProps {
-        let className: string;
-    }
-    export namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-    }
-    export { Item };
-}
+import type { ComponentProps, ElementType } from 'react';
 import React from 'react';
-import PropTypes from 'prop-types';
-declare function Item({ isTabActive, as: Component, className, ...restProps }: {
-    [x: string]: any;
-    isTabActive: any;
-    as?: string | undefined;
-    className?: string | undefined;
-}): React.JSX.Element;
-declare namespace Item {
-    export namespace defaultProps_1 {
-        export let isTabActive: boolean;
-        let className_2: string;
-        export { className_2 as className };
-        export let as: string;
-    }
-    export { defaultProps_1 as defaultProps };
-    export namespace propTypes_1 {
-        let isTabActive_1: PropTypes.Requireable<boolean>;
-        export { isTabActive_1 as isTabActive };
-        let className_3: PropTypes.Requireable<string>;
-        export { className_3 as className };
-        let as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        export { as_1 as as };
-    }
-    export { propTypes_1 as propTypes };
-}
-export {};
+export type TabItemProps<T extends ElementType> = {
+    isTabActive?: boolean;
+    as?: T;
+} & ComponentProps<T>;
+export declare const TabItem: <T extends ElementType = "button">(props: TabItemProps<T>) => React.JSX.Element;
+export type TabsProps = ComponentProps<'div'>;
+export declare const Tabs: {
+    (props: TabsProps): React.JSX.Element;
+    Item: <T extends ElementType = "button">(props: TabItemProps<T>) => React.JSX.Element;
+};

package/types/ui/textarea/textarea.d.ts

@@ -1,7 +1,6 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 export type TextareaProps = {
-    previewSource?: boolean;
     size?: 'small' | 'medium' | 'large';
 } & ComponentProps<'textarea'>;
 export declare const Textarea: (props: TextareaProps) => React.JSX.Element;

package/lib/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}

package/lib-esm/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}

package/src/components/metrics-table-export/metrics-table-export.module.css

@@ -1,8 +0,0 @@
-.panels {
-}
-
-.panel {
-  min-height: 320px;
-  height: 60vh;
-  max-height: 480px;
-}

package/src/ui/tabs/index.js

@@ -1 +0,0 @@
-export { Tabs } from './tabs';

package/src/ui/tabs/tabs.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-
-import css from './tabs.module.css';
-
-const Item = ({ isTabActive, as: Component = 'span', className = '', ...restProps }) => (
-  <Component className={cx(css.item, className, isTabActive && css.itemActive)} {...restProps} />
-);
-
-Item.defaultProps = {
-  isTabActive: false,
-  className: '',
-  as: 'span',
-};
-
-Item.propTypes = {
-  isTabActive: PropTypes.bool,
-  className: PropTypes.string,
-  as: PropTypes.elementType,
-};
-
-export const Tabs = ({ className = '', ...restProps }) => (
-  <nav className={cx(css.root, className)} {...restProps} />
-);
-
-Tabs.defaultProps = {
-  className: '',
-};
-
-Tabs.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Component children */
-  children: PropTypes.node.isRequired,
-};
-
-Tabs.Item = Item;