@bundle-stats/ui 4.16.0-beta.0 → 4.16.0-beta.10

package/src/ui/textarea/index.ts

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

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

@@ -0,0 +1,57 @@
+.root {
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text-light);
+  width: 100%;
+  resize: vertical;
+  transition: var(--transition-in);
+  appearance: none;
+  outline: none;
+}
+
+.root::-webkit-input-placeholder {
+  color: var(--color-text-light);
+}
+
+.root::-moz-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:-ms-input-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:-moz-placeholder {
+  color: var(--color-text-light);
+}
+
+.root:focus {
+  box-shadow: var(--outline-hover);
+  border-color: var(--color-outline-dark);
+  color: inherit;
+  transition: var(--transition-out);
+}
+
+.root[readonly=""] {
+  color: var(--color-text-light);
+}
+
+/** Size modifier */
+/* default - medium */
+.root {
+  padding: var(--space-xsmall);
+  font-size: var(--size-medium);
+  line-height: calc(var(--space-medium) - 2px);
+}
+
+.small {
+  padding: var(--space-xxsmall);
+  font-size: var(--size-small);
+  line-height: calc(var(--space-small) - 2px);
+}
+
+.large {
+  padding: var(--space-small);
+  font-size: var(--size-large);
+  line-height: calc(var(--space-large) - 2px);
+}

package/src/ui/textarea/textarea.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Textarea } from '.';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  args: {
+    placeholder: 'Enter value',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const SizeSmall: Story = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    defaultValue: 'Lorem ipsum dolor sit amed',
+  },
+};
+export const PreviewSource: Story = {
+  args: {
+    previewSource: true,
+    rows: 6,
+    defaultValue: JSON.stringify(ReadOnly, null, 2),
+  },
+};

package/src/ui/textarea/textarea.tsx

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

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

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

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

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

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

@@ -1 +1 @@
-export * from "./metrics-table-options";
+export * from './metrics-table-options';

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

@@ -1,18 +1,10 @@
-export function MetricsTableOptions(props: any): React.JSX.Element;
-export namespace MetricsTableOptions {
-    namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let handleViewAll: PropTypes.Requireable<(...args: any[]) => any>;
-        let handleResetFilters: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-    namespace defaultProps {
-        let className_1: string;
-        export { className_1 as className };
-        let handleViewAll_1: null;
-        export { handleViewAll_1 as handleViewAll };
-        let handleResetFilters_1: null;
-        export { handleResetFilters_1 as handleResetFilters };
-    }
-}
+import type { ComponentProps } from 'react';
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Dropdown } from '../../ui/dropdown';
+type MetricsTableOptionsProps = {
+    onViewAllClick?: () => void;
+    onResetClick?: () => void;
+    onExportClick?: () => void;
+} & ComponentProps<typeof Dropdown>;
+export declare const MetricsTableOptions: (props: MetricsTableOptionsProps) => React.JSX.Element;
+export {};

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

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

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

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

package/types/i18n.d.ts

@@ -14,6 +14,9 @@ declare namespace _default {
     let PACKAGES_INFO: string;
     let RESET_FILTERS: string;
     let VIEW_ALL: string;
+    let EXPORT: string;
+    let COPY_TO_CLIPBOARD: string;
+    let COPY_TO_CLIPBOARD_DONE: string;
     let GITHUB_LINK_TITLE: string;
     let REPORT_ISSUE: string;
     let REPORT_ISSUE_LINK_TITLE: string;

package/types/ui/button/button.d.ts

@@ -13,6 +13,32 @@ export declare const BUTTON_KIND: {
     readonly INFO: "info";
     readonly SUCCES: "success";
 };
+export declare const BUTTON_GLYPHS: {
+    readonly ARROW: "arrow";
+    readonly ARROW_RIGHT_CIRCLE: "arrow-right-circle";
+    readonly CANCEL: "close";
+    readonly CHEVRON_DOWN: "chevron-down";
+    readonly CHEVRON_UP: "chevron-up";
+    readonly CHECK: "check";
+    readonly CLOSE: "close";
+    readonly CLOCK: "clock";
+    readonly COMMIT: "commit";
+    readonly CLIPBOARD: "clipboard";
+    readonly CLIPBOARD_CHECK: "clipboard-check";
+    readonly DOWNLOAD: "download";
+    readonly ERROR: "error";
+    readonly EXTERNAL_LINK: "external-link";
+    readonly FILTER: "filter";
+    readonly GITHUB: "github";
+    readonly INFO: "info";
+    readonly HELP: "help";
+    readonly TABLE: "table";
+    readonly TREEMAP: "treemap";
+    readonly MENU: "menu";
+    readonly MORE_VERTICAL: "more-vertical";
+    readonly SORT: "sort";
+    readonly WARNING: "warning";
+};
 type Size = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
 type Kind = (typeof BUTTON_KIND)[keyof typeof BUTTON_KIND];
 interface ButtonProps<T extends React.ElementType> {

package/types/ui/dialog/dialog.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from 'react';
+import React from 'react';
+import { Dialog as AriakitDialog } from 'ariakit/dialog';
+export { useDialogState } from 'ariakit/dialog';
+type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
+type DialogProps = {
+    title?: ReactNode;
+    width?: 'narrow' | 'medium' | 'wide' | 'extra-wide';
+    center?: boolean;
+    modal?: AriakitDialogProps['modal'];
+    state: AriakitDialogProps['state'];
+} & Omit<ComponentProps<'div'>, 'title'>;
+export declare const Dialog: (props: DialogProps) => React.JSX.Element;

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

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

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

@@ -11,6 +11,7 @@ declare const ICONS: {
     readonly COMMIT: "commit";
     readonly CLIPBOARD: "clipboard";
     readonly CLIPBOARD_CHECK: "clipboard-check";
+    readonly DOWNLOAD: "download";
     readonly ERROR: "error";
     readonly EXTERNAL_LINK: "external-link";
     readonly FILTER: "filter";
@@ -49,6 +50,7 @@ export declare const Icon: {
         readonly COMMIT: "commit";
         readonly CLIPBOARD: "clipboard";
         readonly CLIPBOARD_CHECK: "clipboard-check";
+        readonly DOWNLOAD: "download";
         readonly ERROR: "error";
         readonly EXTERNAL_LINK: "external-link";
         readonly FILTER: "filter";

package/types/ui/index.d.ts

@@ -3,6 +3,7 @@ export { Button } from "./button";
 export { CopyToClipboard } from "./copy-to-clipboard";
 export { Container } from "./container";
 export { ControlGroup } from "./control-group";
+export { Dialog } from "./dialog";
 export { Dropdown } from "./dropdown";
 export { EmptySet } from "./empty-set";
 export { FileName } from "./file-name";
@@ -12,8 +13,10 @@ 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";
 export { Tag } from "./tag";
+export { Textarea } from "./textarea";
 export { Tooltip } from "./tooltip";

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/tabs.d.ts

@@ -1,6 +1,6 @@
 export function Tabs({ className, ...restProps }: {
     [x: string]: any;
-    className: any;
+    className?: string | undefined;
 }): React.JSX.Element;
 export namespace Tabs {
     export namespace defaultProps {
@@ -18,8 +18,8 @@ import PropTypes from 'prop-types';
 declare function Item({ isTabActive, as: Component, className, ...restProps }: {
     [x: string]: any;
     isTabActive: any;
-    as: any;
-    className: any;
+    as?: string | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 declare namespace Item {
     export namespace defaultProps_1 {

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

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

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

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

package/src/components/metrics-table-options/metrics-table-options.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import I18N from '../../i18n';
-import { Dropdown, DropdownItem } from '../../ui/dropdown';
-
-export const MetricsTableOptions = (props) => {
-  const { className, handleViewAll, handleResetFilters, ...restProps } = props;
-
-  return (
-    <Dropdown className={className} glyph="more-vertical" {...restProps}>
-      {handleResetFilters && (
-        <DropdownItem onClick={handleResetFilters}>{I18N.RESET_FILTERS}</DropdownItem>
-      )}
-      {handleViewAll && <DropdownItem onClick={handleViewAll}>{I18N.VIEW_ALL}</DropdownItem>}
-    </Dropdown>
-  );
-};
-
-MetricsTableOptions.propTypes = {
-  className: PropTypes.string,
-  handleViewAll: PropTypes.func,
-  handleResetFilters: PropTypes.func,
-};
-
-MetricsTableOptions.defaultProps = {
-  className: '',
-  handleViewAll: null,
-  handleResetFilters: null,
-};