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

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/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/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}
+    />
+  );
+};

package/src/ui/container/container.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Container } from '.';
+
+export default {
+  title: 'UI/Container',
+  component: Container,
+};
+
+export const Default = () => (
+  <Container style={{ background: 'white' }}>
+    <div
+      style={{
+        background: 'white',
+        padding: '24px',
+      }}
+    >
+      Content
+    </div>
+  </Container>
+);
+
+Default.decorators = [
+  (Story: React.FunctionComponent) => (
+    <div style={{ background: 'hotpink' }}>
+      <Story />
+    </div>
+  ),
+];

package/src/ui/container/container.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './container.module.css';
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType;
+}
+
+export const Container = ({
+  as: Component = 'div',
+  className = '',
+  ...restProps
+}: ContainerProps) => (
+  <Component className={cx(css.root, className)}>
+    <div className={css.inner} {...restProps} />
+  </Component>
+);

package/src/ui/container/index.ts

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

package/src/ui/dropdown/dropdown.module.css

@@ -25,8 +25,7 @@
 .button:focus,
 .button:active {
   outline: none;
-  box-shadow: var(--shadow-layer);
-  border-color: var(--color-outline-dark);
+  box-shadow: var(--outline-hover);
   color: var(--color-text);
 }
 

package/src/ui/file-name/file-name.jsx

@@ -24,5 +24,5 @@ FileName.propTypes = {
   as: PropTypes.elementType,
 
   /** File name source  */
-  name: PropTypes.string,
+  name: PropTypes.string | PropTypes.node,
 };

package/src/ui/filters/filters.module.css

@@ -83,11 +83,7 @@
 .filterStandalone:active .filterCheckbox,
 .filterStandalone:focus .filterCheckbox {
   z-index: var(--layout-xlow); /* show collapsed border */
-  box-shadow: var(--shadow-layer);
-}
-
-.filterStandalone:hover .filterCheckbox {
-  border-color: var(--color-outline-dark);
+  box-shadow: var(--outline-hover);
   color: var(--color-text);
 }
 

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.module.css

@@ -3,6 +3,8 @@
   display: flex;
   align-items: stretch;
   justify-content: flex-start;
+  width: 100%;
+  overflow: hidden;
 }
 
 .item {

package/src/ui/hover-card/hover-card.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { HoverCard, HoverCardProps } from '.';
+
+export default {
+  title: 'UI/HoverCard',
+  component: HoverCard,
+} as Meta;
+
+const Template: Story<HoverCardProps> = (props) => (
+  <>
+    <HoverCard {...props} />
+    <p style={{ position: 'relative', zIndex: 1, maxWidth: 360 }}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur
+      vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit
+      eget risus
+    </p>
+  </>
+);
+
+export const Default = () => (
+  <Template label="main.js">
+    <h1>main.js</h1>
+    <p>info</p>
+  </Template>
+);
+
+export const WithRenderFn = () => (
+  <Template label="main.js">
+    {({ close }) => (
+      <div>
+        <h1>main.js</h1>
+        <p>info</p>
+        <button type="button" onClick={close}>
+          close
+        </button>
+      </div>
+    )}
+  </Template>
+);

package/src/ui/hover-card/{hover-card.jsx → hover-card.tsx}

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
   Hovercard,
@@ -11,10 +10,28 @@ import {
 
 import css from './hover-card.module.css';
 
-export const HoverCard = (props) => {
-  const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+export interface HoverCardProps {
+  className?: string;
+  anchorClassName?: string;
+  hoverCardClassName?: string;
+  href?: string;
+  as?: React.ElementType;
+  label: React.ReactNode;
+  children?: React.ReactNode | (({ close }: { close: () => void }) => React.ReactNode);
+}
 
-  const state = useHovercardState({ gutter: 8, timeout: 700 });
+export const HoverCard = (props: HoverCardProps) => {
+  const {
+    className = '',
+    anchorClassName = '',
+    hoverCardClassName = '',
+    href = '',
+    as = null,
+    label,
+    children,
+  } = props;
+
+  const state = useHovercardState({ gutter: 8, timeout: 800 });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
@@ -37,6 +54,7 @@ export const HoverCard = (props) => {
         href={href}
         className={cx(css.anchor, anchorClassName)}
         as={Component}
+        aria-controls={state.open ? hovercardProps.id : ''}
       >
         {label}
       </HovercardAnchor>
@@ -52,29 +70,3 @@ export const HoverCard = (props) => {
     </div>
   );
 };
-
-HoverCard.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-  /** Adopted child class name for hover card */
-  hoverCardClassName: PropTypes.string,
-  /** Adopted child class name for anchor */
-  anchorClassName: PropTypes.string,
-  /** Anchor label */
-  label: PropTypes.node,
-  /** Anchor href */
-  href: PropTypes.string,
-  /** Anchor component */
-  as: PropTypes.elementType,
-  /** Hover card component */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-};
-
-HoverCard.defaultProps = {
-  className: '',
-  hoverCardClassName: '',
-  anchorClassName: '',
-  label: '',
-  as: '',
-  href: '',
-};

package/src/ui/icon/icon.jsx

@@ -11,9 +11,13 @@ const ICONS = {
   CLOSE: 'close',
   CLOCK: 'clock',
   COMMIT: 'commit',
+  ERROR: 'error',
+  EXTERNAL_LINK: 'external-link',
   FILTER: 'filter',
+  INFO: 'info',
   HELP: 'help',
   MENU: 'menu',
+  MORE_VERTICAL: 'more-vertical',
   SORT: 'sort',
   WARNING: 'warning',
 };

package/src/ui/index.js

@@ -9,7 +9,6 @@ export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
 export { Loader } from './loader';
-export { Panels } from './panels';
 export { Skeleton } from './skeleton';
 export { SortDropdown } from './sort-dropdown';
 export { Table } from './table';

package/src/ui/input/input.module.css

@@ -1,6 +1,6 @@
 .root {
-  border: 1px solid var(--color-outline);;
-  border-radius: 0;
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
   transition: var(--transition-in);
@@ -25,8 +25,7 @@
 }
 
 .root:focus {
-  border-color: var(--color-outline-dark);
-  box-shadow: var(--shadow-layer);
+  box-shadow: var(--outline-hover);
   color: inherit;
   transition: var(--transition-out);
 }

package/src/ui/table/table.stories.tsx

@@ -0,0 +1,238 @@
+import React from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Table } from '.';
+
+const { THead, TBody, Td, Tr, Th } = Table;
+
+export default {
+  title: 'UI/Table',
+  component: Table,
+  decorators: [getWrapperDecorator()],
+};
+
+export const Default = () => (
+  <Table>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const Compact = () => (
+  <Table compact>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const Outline = () => (
+  <Table outline>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const Empty = () => <Table />;
+export const EmptyWithCustomElement = () => (
+  <Table emptyMessage={<p style={{ outline: '1px solid lightgray' }}>No items available</p>} />
+);
+
+export const WithHeaders = () => (
+  <Table>
+    <THead>
+      <Tr>
+        <Th>Col A</Th>
+        <Th>Col B</Th>
+        <Th>Col C</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithHeadersAndOutline = () => (
+  <Table outline>
+    <THead>
+      <Tr>
+        <Th>Col A</Th>
+        <Th>Col B</Th>
+        <Th>Col C</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithMultipleRowsHeader = () => (
+  <Table>
+    <THead>
+      <Tr>
+        <Th> </Th>
+        <Th colSpan={2}>Colspan</Th>
+      </Tr>
+      <Tr>
+        <Th>Col A</Th>
+        <Th>Col B</Th>
+        <Th>Col C</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithRowHeaders = () => (
+  <Table>
+    <TBody>
+      <Tr>
+        <Th>row 1</Th>
+        <Td>a1</Td>
+        <Td>b1</Td>
+        <Td>c1</Td>
+      </Tr>
+      <Tr>
+        <Th>row 2</Th>
+        <Td>a2</Td>
+        <Td>b2</Td>
+        <Td>c2</Td>
+      </Tr>
+      <Tr>
+        <Th>row 3</Th>
+        <Td>a3</Td>
+        <Td>b3</Td>
+        <Td>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);
+
+export const WithCustomContentAndAttributes = () => (
+  <Table>
+    <THead>
+      <Tr>
+        <Th> </Th>
+        <Th style={{ textAlign: 'right' }}>Col A (right)</Th>
+        <Th style={{ textAlign: 'center' }}>Col B (center)</Th>
+        <Th style={{ textDecoration: 'underline' }}>Col C(underline)</Th>
+      </Tr>
+    </THead>
+    <TBody>
+      <Tr>
+        <Th>
+          <strong>row 1</strong>
+        </Th>
+        <Td style={{ textAlign: 'right' }}>a1</Td>
+        <Td style={{ textAlign: 'center', color: 'red' }}>b1</Td>
+        <Td style={{ textDecoration: 'underline' }}>c1</Td>
+      </Tr>
+      <Tr style={{ color: 'blue', fontSize: '1.5em' }}>
+        <Th>
+          <strong>row 2</strong>
+        </Th>
+        <Td style={{ textAlign: 'right' }}>a2</Td>
+        <Td style={{ textAlign: 'center' }}>b2</Td>
+        <Td style={{ textDecoration: 'underline' }}>c2</Td>
+      </Tr>
+      <Tr>
+        <Th>
+          <strong>row 3</strong>
+        </Th>
+        <Td style={{ textAlign: 'right' }}>a3</Td>
+        <Td style={{ textAlign: 'center' }}>b3</Td>
+        <Td style={{ textDecoration: 'underline' }}>c3</Td>
+      </Tr>
+    </TBody>
+  </Table>
+);