@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

package/src/layout/flex-stack/flex-stack.module.css

@@ -1,48 +1,44 @@
 .root {
   display: flex;
-  align-items: stretch;
   justify-content: flex-start;
-}
-
-.root > .item:last-child {
-  margin-right: 0;
+  gap: 0;
 }
 
 /** Space variation */
-.space--xxxsmall > .item {
-  margin: 0 var(--space-xxxsmall) 0 0;
+.space--xxxsmall {
+  gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall > .item {
-  margin: 0 var(--space-xxsmall) 0 0;
+.space--xxsmall {
+  gap: var(--space-xxsmall);
 }
 
-.space--xsmall > .item {
-  margin: 0 var(--space-xsmall) 0 0;
+.space--xsmall {
+  gap: var(--space-xsmall);
 }
 
-.space--small > .item {
-  margin: 0 var(--space-small) 0 0;
+.space--small {
+  gap: var(--space-small);
 }
 
-.space--medium > .item {
-  margin: 0 var(--space-medium) 0 0;
+.space--medium {
+  gap: var(--space-medium);
 }
 
-.space--large > .item {
-  margin: 0 var(--space-large) 0 0;
+.space--large {
+  gap: var(--space-large);
 }
 
-.space--xlarge > .item {
-  margin: 0 var(--space-xlarge) 0 0;
+.space--xlarge {
+  gap: var(--space-xlarge);
 }
 
-.space--xxlarge > .item {
-  margin: 0 var(--space-xxlarge) 0 0;
+.space--xxlarge {
+  gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge > .item {
-  margin: 0 var(--space-xxxlarge) 0 0;
+.space--xxxlarge {
+  gap: var(--space-xxxlarge);
 }
 
 /** Align items variation */

package/src/layout/flex-stack/flex-stack.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Box } from '../box';
+import { FlexStack } from '.';
+
+export default {
+  title: 'Layout/FlexStack',
+  component: FlexStack,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => (
+  <FlexStack>
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    {null}
+    Lorem ipsum 3
+  </FlexStack>
+);
+
+export const withCustomWrapper = () => (
+  <FlexStack as="main" className="wrapper">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+  </FlexStack>
+);
+
+export const withLargeSpace = () => (
+  <FlexStack space="large">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    <Box outline>Lorem ipsum 3</Box>
+  </FlexStack>
+);
+
+export const withNestedStack = () => (
+  <FlexStack space="large">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    <FlexStack space="small">
+      <Box outline>Lorem ipsum 3.1</Box>
+      <Box outline>Lorem ipsum 3.2</Box>
+    </FlexStack>
+  </FlexStack>
+);
+
+export const singleItem = () => (
+  <FlexStack>
+    <Box outline>Lorem ipsum</Box>
+  </FlexStack>
+);
+
+export const withAlignItems = () => (
+  <FlexStack alignItems="center" space="medium">
+    <h1>Title</h1>
+    <a href="#test">Option 1</a>
+  </FlexStack>
+);

package/src/layout/flex-stack/flex-stack.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../tokens';
+import css from './flex-stack.module.css';
+
+type SpaceValue = (typeof SPACES)[number];
+
+interface FlexStackProps<T extends React.ElementType> {
+  as?: T;
+  space?: SpaceValue;
+  inline?: boolean;
+  alignItems?: 'top' | 'center' | 'bottom';
+}
+
+export const FlexStack = <T extends React.ElementType = 'div'>(
+  props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>,
+) => {
+  const {
+    as: Component = 'div',
+    className = '',
+    space = NO_SPACE,
+    inline = false,
+    alignItems = '',
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(
+    css.root,
+    css[`space--${space}`],
+    css[`align-items--${alignItems}`],
+    inline && css.inline,
+    className,
+  );
+
+  return <Component {...restProps} className={rootClassName} />;
+};

package/src/layout/footer/footer.jsx

@@ -4,6 +4,7 @@ import cx from 'classnames';
 
 import config from '../../config.json';
 import { Container } from '../../ui/container';
+import I18N from '../../i18n';
 import { Box } from '../box';
 import { Stack } from '../stack';
 import css from './footer.module.css';
@@ -24,20 +25,19 @@ 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)"
+              title={I18N.GITHUB_LINK_TITLE}
             >
-              {`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"
+                title={I18N.REPORT_ISSUE_LINK_TITLE}
               >
-                Report issue
+                {I18N.REPORT_ISSUE}
               </ExternalLink>
             </span>
             <span className={css.navItem}>
@@ -45,9 +45,9 @@ export const Footer = ({ className, version }) => (
               <ExternalLink
                 className={css.navLink}
                 href={config.siteUrl}
-                title="Go to RelativeCI - Specialized insights for web bundles"
+                title={I18N.APP_LINK_TITLE}
               >
-                RelativeCI
+                {config.appName}
               </ExternalLink>
             </span>
           </nav>

package/src/layout/stack/stack.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Box } from '../box';
+import { Stack } from '.';
+
+export default {
+  title: 'Layout/Stack',
+  component: Stack,
+  decorators: [getWrapperDecorator()],
+} as Meta<typeof Stack>;
+
+export const Default = () => (
+  <Stack>
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    {null}
+    Lorem ipsum 3
+  </Stack>
+);
+
+export const WithCustomWrapper = () => (
+  <Stack as="main" className="wrapper">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+  </Stack>
+);
+
+export const WithSpace = () => (
+  <Stack space="large">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    <Box outline>Lorem ipsum 3</Box>
+  </Stack>
+);
+
+export const WithNestedStacks = () => (
+  <Stack space="large">
+    <Box outline>Lorem ipsum 1</Box>
+    <Box outline>Lorem ipsum 2</Box>
+    <Stack space="small">
+      <Box outline>Lorem ipsum 3.1</Box>
+      <Box outline>Lorem ipsum 3.2</Box>
+    </Stack>
+  </Stack>
+);
+
+export const WithSingleItem = () => (
+  <Stack>
+    <Box outline>Lorem ipsum</Box>
+  </Stack>
+);

package/src/layout/stack/stack.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../tokens';
+import { getRenderChildWithClassName } from '../../utils';
+import css from './stack.module.css';
+
+export type StackProps = {
+  as?: React.ElementType;
+  space?: (typeof SPACES)[number];
+};
+
+export const Stack = (props: StackProps & React.ComponentProps<'div'>) => {
+  const { className = '', as: Component = 'div', space = NO_SPACE, children, ...restProps } = props;
+  const rootClassName = cx(css.root, className, css[`space--${space}`]);
+
+  return (
+    <Component {...restProps} className={rootClassName}>
+      {React.Children.map(children, getRenderChildWithClassName(css.item))}
+    </Component>
+  );
+};

package/src/query-state.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from 'react';
+import isEqual from 'lodash/isEqual';
+import { QueryParamProvider, useQueryParams } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { COMPONENT_STATE_META } from '@bundle-stats/utils';
+
+interface QueryStateProviderProps {
+  children: React.ReactNode;
+}
+
+export const QueryStateProvider = (props: QueryStateProviderProps) => (
+  <QueryParamProvider adapter={ReactRouter5Adapter} {...props} />
+);
+
+export const useComponentQueryState = (componentName: string) => {
+  const [queryState, setQueryState] = useQueryParams({
+    [componentName]: COMPONENT_STATE_META[componentName],
+  });
+
+  const componentState = queryState[componentName];
+
+  const setState = useCallback(
+    (updates: Record<string, unknown>) => {
+      const newState = { ...componentState, ...updates };
+
+      // Deep check to prevent unnecessary state changes
+      if (isEqual(componentState, newState)) {
+        return;
+      }
+
+      setQueryState({ [componentName]: newState });
+    },
+    [componentState, setQueryState],
+  );
+
+  return [componentState, setState];
+};

package/src/stories/wrapper.jsx

@@ -1,19 +1,25 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-export const getWrapperDecorator = (customWrapperStyles = {}) => (storyFn) => {
-  const wrapperStyles = {
-    width: '100%',
-    height: '100%',
-    padding: '24px',
-    ...customWrapperStyles,
-  };
+import { QueryStateProvider } from '../query-state';
+
+export const getWrapperDecorator =
+  (customWrapperStyles = {}) =>
+  (Story) => {
+    const wrapperStyles = {
+      width: '100%',
+      height: '100%',
+      padding: '24px',
+      ...customWrapperStyles,
+    };
 
-  return (
-    <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
-      <div style={wrapperStyles}>
-        {storyFn()}
-      </div>
-    </MemoryRouter>
-  );
-};
+    return (
+      <MemoryRouter initialEntries={[{ pathname: '/', key: 'home' }]}>
+        <QueryStateProvider>
+          <div style={wrapperStyles}>
+            <Story />
+          </div>
+        </QueryStateProvider>
+      </MemoryRouter>
+    );
+  };

package/src/tokens.ts

@@ -0,0 +1,37 @@
+export const NO_SPACE = 'no-space';
+export const SPACE_XXXSMALL = 'xxxsmall';
+export const SPACE_XXSMALL = 'xxsmall';
+export const SPACE_XSMALL = 'xsmall';
+export const SPACE_SMALL = 'small';
+export const SPACE_MEDIUM = 'medium';
+export const SPACE_LARGE = 'large';
+export const SPACE_XLARGE = 'xlarge';
+export const SPACE_XXLARGE = 'xxlarge';
+export const SPACE_XXXLARGE = 'xxxlarge';
+
+export const SPACES = [
+  NO_SPACE,
+  SPACE_XXXSMALL,
+  SPACE_XXSMALL,
+  SPACE_XSMALL,
+  SPACE_SMALL,
+  SPACE_MEDIUM,
+  SPACE_LARGE,
+  SPACE_XLARGE,
+  SPACE_XXLARGE,
+  SPACE_XXXLARGE,
+] as const;
+
+export const KIND = {
+  DEFAULT: 'default',
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  DANGER: 'danger',
+} as const;
+
+export const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;

package/src/types.d.ts

@@ -0,0 +1,63 @@
+import type { ReportMetricRow } from '@bundle-stats/utils';
+import type { Asset, Module } from '@bundle-stats/utils/types/webpack/types';
+
+export interface SortAction {
+  field: string;
+  direction: 'asc' | 'desc' | '';
+}
+
+interface FilterFieldData {
+  label: string;
+  defaultValue: boolean;
+  disabled?: boolean;
+}
+
+interface ChildFilterFieldData extends FilterFieldData {
+  key: string;
+}
+
+type FilterGroupFieldData = {
+  label: string;
+  children: Array<ChildFilterFieldData>;
+};
+
+type FilterFieldsData = Record<string, FilterFieldData | FilterGroupFieldData>;
+
+export type ReportMetricAssetRowMetaStatus = 'added' | 'removed';
+
+export type ReportMetricAssetRow = {
+  /**
+   * Asset isEntry - at least one run has isEntry truthy
+   */
+  isEntry: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isInitial - at least one run has isInitial truthy
+   */
+  isInitial: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isChunk - at least one run has isChunk truthy
+   */
+  isChunk: ReportMetricAssetRowMetaStatus | boolean;
+  /**
+   * Asset isAsset - at least one run has isAsset truthy
+   */
+  isAsset: boolean;
+  /**
+   * Asset name is not predictive
+   */
+  isNotPredictive: boolean;
+  /**
+   * Report asset row isEntry - at least one run has isEntry
+   */
+  fileType: string;
+} & Omit<ReportMetricRow, 'runs'> & { runs: Array<(Asset & ReportMetricRun) | null> };
+
+export type ReportMetricModuleRow = {
+  thirdParty: boolean;
+  duplicated: boolean;
+  fileType: string;
+} & Omit<ReportMetricRow, 'runs'> & {
+    runs: Array<
+      (Module & ReportMetricRun & { size: number; sizeDuplicate: number; sizeTotal: number }) | null
+    >;
+  };

package/src/ui/alert/alert.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Meta, Story } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Alert } from '.';
+
+export default {
+  title: 'UI/Alert',
+  component: Alert,
+  decorators: [getWrapperDecorator()],
+} as Meta<typeof Alert>;
+
+const Template: Story = (args) => <Alert {...args}>Lorem ipsum</Alert>;
+
+export const Default = Template.bind({});
+
+export const WithKindSuccess = Template.bind({});
+
+WithKindSuccess.args = {
+  kind: 'success',
+};
+
+export const WithKindInfo = Template.bind({});
+
+WithKindInfo.args = {
+  kind: 'info',
+};
+
+export const WithKindWarning = Template.bind({});
+
+WithKindWarning.args = {
+  kind: 'warning',
+};
+
+export const WithKindDanger = Template.bind({});
+
+WithKindDanger.args = {
+  kind: 'danger',
+};

package/src/ui/alert/alert.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { KIND } from '../../tokens';
+import { Box } from '../../layout/box';
+import css from './alert.module.css';
+
+interface AlertProps {
+  kind?: (typeof KIND)[keyof typeof KIND];
+}
+
+export const Alert = (props: AlertProps & React.ComponentProps<typeof Box>) => {
+  const { className = '', kind = 'default', ...restProps } = props;
+
+  return (
+    <Box
+      padding={['xsmall', 'small']}
+      outline
+      className={cx(css.root, className, css[kind])}
+      {...restProps}
+    />
+  );
+};