@bundle-stats/ui 4.3.0-beta.3 → 4.3.0-rc.0

package/src/layout/box/box.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../tokens';
+import css from './box.module.css';
+
+type SpaceValue = (typeof SPACES)[number];
+
+interface BoxProps<T extends React.ElementType> {
+  as?: T;
+  padding?: SpaceValue | [SpaceValue, SpaceValue];
+  horizontalPadding?: SpaceValue;
+  verticalPadding?: SpaceValue;
+  outline?: boolean;
+  outlineHover?: boolean;
+}
+
+export const Box = <T extends React.ElementType = 'div'>(
+  props: BoxProps<T> & Omit<React.ComponentProps<T>, keyof BoxProps<T>>,
+) => {
+  const {
+    className = '',
+    as: Component = 'div',
+    padding = NO_SPACE,
+    horizontalPadding = '',
+    verticalPadding = '',
+    outline = false,
+    outlineHover = false,
+    ...restProps
+  } = props;
+
+  const [resolvedPadding, resolvedVerticalPadding, resolvedHorizontalPadding] = Array.isArray(
+    padding,
+  )
+    ? [null, ...padding]
+    : [padding, verticalPadding, horizontalPadding];
+
+  const rootClassName = cx(
+    css.root,
+    className,
+    resolvedPadding && css[`padding-${resolvedPadding}`],
+    resolvedVerticalPadding && css[`vertical-padding-${resolvedVerticalPadding}`],
+    resolvedHorizontalPadding && css[`horizontal-padding-${resolvedHorizontalPadding}`],
+    outline && css.outline,
+    outlineHover && css.outlineHover,
+  );
+
+  return <Component {...restProps} className={rootClassName} />;
+};

package/src/layout/box/index.ts

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

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,43 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { NO_SPACE, SPACES } from '../../tokens';
+import { getRenderChildWithClassName } from '../../utils';
+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,
+    children = null,
+    alignItems = '',
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(
+    className,
+    css.root,
+    css[`space--${space}`],
+    css[`align-items--${alignItems}`],
+    inline && css.inline,
+  );
+
+  return (
+    <Component {...restProps} className={rootClassName}>
+      {React.Children.map(children, getRenderChildWithClassName(css.item))}
+    </Component>
+  );
+};

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/hover-card/hover-card.jsx

@@ -14,7 +14,7 @@ import css from './hover-card.module.css';
 export const HoverCard = (props) => {
   const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 700 });
+  const state = useHovercardState({ gutter: 8, timeout: 800 });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

package/src/ui/icon/icon.jsx

@@ -16,6 +16,7 @@ const ICONS = {
   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);
 }