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

package/src/ui/button/button.module.css

@@ -0,0 +1,366 @@
+.root {
+  /* use for vertical padding and to compute gap and horizontal spacing */
+  --button-space: 0px;
+  /* button border width */
+  --border-width: 0px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
+  appearance: none;
+  padding: 0;
+  border: var(--border-width) solid transparent;
+  background: none;
+  transition: var(--transition-out);
+  color: var(--color-text-ultra-light);
+  font-family: var(--font-family);
+  white-space: nowrap;
+}
+
+a.root {
+  text-decoration: none;
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  outline: none;
+  color: var(--color-text-light);
+  transition: var(--transition-in);
+}
+
+.glyph {
+  flex: 0 0 auto;
+}
+
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/**
+ * Kind variation
+ */
+.primary {
+  color: var(--color-primary);
+}
+
+.primary:hover,
+.primary:active,
+.primary:focus {
+  color: var(--color-primary-dark);
+}
+
+.secondary {
+  color: var(--color-secondary);
+}
+
+.secondary:hover,
+.secondary:active,
+.secondary:focus {
+  color: var(--color-secondary-dark);
+}
+
+.danger {
+  color: var(--color-danger);
+}
+
+.danger:hover,
+.danger:active,
+.danger:focus {
+  color: var(--color-danger-dark);
+}
+
+.warning {
+  color: var(--color-warning);
+}
+
+.warning:hover,
+.warning:active,
+.warning:focus {
+  color: var(--color-warning-dark);
+}
+
+.info {
+  color: var(--color-info);
+}
+
+.info:hover,
+.info:active,
+.info:focus {
+  color: var(--color-info-dark);
+}
+
+.success {
+  color: var(--color-success);
+}
+
+.success:hover,
+.success:active,
+.success:focus {
+  color: var(--color-success-dark);
+}
+
+/**
+ * Solid Kind variation
+ */
+.solid {
+  background: var(--color-text-ultra-light);
+  color: var(--color-background);
+}
+
+.solid:hover,
+.solid:active,
+.solid:focus {
+  background: var(--color-text-light);
+  color: var(--color-background);
+}
+
+.solid--primary {
+  background: var(--color-primary);
+}
+
+.solid--primary:hover,
+.solid--primary:active,
+.solid--primary:focus {
+  background: var(--color-primary-dark);
+}
+
+.solid--secondary {
+  background: var(--color-secondary);
+}
+
+.solid--secondary:hover,
+.solid--secondary:active,
+.solid--secondary:focus {
+  background: var(--color-secondary-dark);
+}
+
+.solid--danger {
+  background: var(--color-danger);
+}
+
+.solid--danger:hover,
+.solid--danger:active,
+.solid--danger:focus {
+  background: var(--color-danger-dark);
+}
+
+.solid--warning {
+  background: var(--color-warning);
+}
+
+.solid--warning:hover,
+.solid--warning:active,
+.solid--warning:focus {
+  background: var(--color-warning-dark);
+}
+
+.solid--info {
+  background: var(--color-info);
+}
+
+.solid--info:hover,
+.solid--info:active,
+.solid--info:focus {
+  background: var(--color-info-dark);
+}
+
+.solid--success {
+  background: var(--color-success);
+}
+
+.solid--success:hover,
+.solid--success:active,
+.solid--success:focus {
+  background: var(--color-success-dark);
+}
+
+/**
+ * Size variation
+ */
+.small {
+  --button-space: var(--space-xxsmall);
+
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+}
+
+.small .glyph {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.medium {
+  --button-space: var(--space-xsmall);
+
+  font-size: var(--size-medium);
+  line-height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.medium .glyph {
+  width: calc(var(--space-small) + var(--space-xxxsmall));
+  height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.large {
+  --button-space: var(--space-small);
+
+  font-size: var(--size-large);
+  line-height: var(--space-medium);
+}
+
+.large .glyph {
+  width: var(--space-medium);
+  height: var(--space-medium);
+}
+
+/**
+ * Outline variation
+ */
+.outline {
+  --border-width: 1px;
+  border-color: var(--color-outline);
+}
+
+.outline:hover,
+.outline:active,
+.outline:focus {
+  border-color: var(--color-outline-dark);
+}
+
+.outline--primary {
+  border-color: var(--color-outline-primary);
+}
+
+.outline--primary:hover,
+.outline--primary:active,
+.outline--primary:focus {
+  border-color: var(--color-outline-primary-dark);
+}
+
+.outline--secondary {
+  border-color: var(--color-outline-secondary);
+}
+
+.outline--secondary:hover,
+.outline--secondary:active,
+.outline--secondary:focus {
+  border-color: var(--color-outline-secondary-dark);
+}
+
+.outline--danger {
+  border-color: var(--color-outline-danger);
+}
+
+.outline--danger:hover,
+.outline--danger:active,
+.outline--danger:focus {
+  border-color: var(--color-outline-danger-dark);
+}
+
+.outline--warning {
+  border-color: var(--color-outline-warning);
+}
+
+.outline--warning:hover,
+.outline--warning:active,
+.outline--warning:focus {
+  border-color: var(--color-outline-warning-dark);
+}
+
+.outline--info {
+  border-color: var(--color-outline-info);
+}
+
+.outline--info:hover,
+.outline--info:active,
+.outline--info:focus {
+  border-color: var(--color-outline-info-dark);
+}
+
+.outline--success {
+  border-color: var(--color-outline-success);
+}
+
+.outline--success:hover,
+.outline--success:active,
+.outline--success:focus {
+  border-color: var(--color-outline-success-dark);
+}
+
+
+/**
+ * Padding variation
+ */
+.padding {
+  padding: calc(var(--button-space) - var(--border-width));
+}
+
+/**
+ * Radius variation
+ */
+.radius--small {
+  border-radius: var(--radius-small);
+}
+
+.radius--medium {
+  border-radius: var(--radius-medium);
+}
+
+.radius--large {
+  border-radius: var(--radius-large);
+}
+
+.radius--circle {
+  border-radius: 50%;
+}
+
+/**
+ * Active variation
+ */
+.active {
+  text-decoration: underline;
+}
+
+.active-outline-default {
+  background: var(--color-highlight);
+  text-decoration: none;
+}
+
+.active-outline-primary {
+  background: var(--color-highlight-primary);
+  text-decoration: none;
+}
+.active-outline-secondary {
+  background: var(--color-highlight-secondary);
+  text-decoration: none;
+}
+
+.active-outline-info {
+  background: var(--color-highlight-info);
+  text-decoration: none;
+}
+
+.active-outline-success {
+  background: var(--color-highlight-success);
+  text-decoration: none;
+}
+
+.active-outline-warning {
+  background: var(--color-highlight-warning);
+  text-decoration: none;
+}
+
+.active-outline-danger {
+  background: var(--color-highlight-danger);
+  text-decoration: none;
+}
+
+/**
+ * Disabled state
+ */
+.root[disabled] {
+  filter: grayscale(1);
+}

package/src/ui/button/button.stories.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { Icon } from '../icon';
+import { Button, BUTTON_SIZE, BUTTON_KIND } from '.';
+
+export default {
+  title: 'UI/Button',
+  component: Button,
+} as Meta;
+
+const Template: Story = ({ children = 'Action', ...props }) => (
+  <Button {...props}>{children}</Button>
+);
+
+const Items = (props) => (
+  <FlexStack alignItems="top" style={{ flexWrap: 'wrap', gap: '12px' }} {...props} />
+);
+
+export const Default = Template.bind({});
+
+export const All = () => (
+  <Stack space="large">
+    <Stack space="medium">
+      <h2>Size</h2>
+      <Items>
+        {Object.values(BUTTON_SIZE).map((size) => (
+          <Button size={size} key={size}>
+            Action {size}
+          </Button>
+        ))}
+      </Items>
+    </Stack>
+    <Stack space="medium">
+      <h2>Kind</h2>
+      <Stack space="medium">
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>Active</h3>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button kind={kind} key={kind} active>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>As link</h3>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button kind={kind} key={kind} as="a" href="#">
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>With icon</h3>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>Disabled</h3>
+        <Items>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+      </Stack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Outline & Kind</h2>
+      <Stack space="medium">
+        {Object.values(BUTTON_SIZE).map((size) => (
+          <Items key={size}>
+            <Button outline size={size}>
+              Action default
+            </Button>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button outline kind={kind} key={kind} size={size}>
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Active</h3>
+        <Items>
+          <Button outline active>
+            Action default
+          </Button>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button outline kind={kind} key={kind} active>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>With icon</h3>
+        {Object.values(BUTTON_SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
+              Action default
+            </Button>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                outline
+                kind={kind}
+                size={size}
+                key={kind}
+              >
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Only icon</h3>
+        {Object.values(BUTTON_SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                outline
+                kind={kind}
+                size={size}
+                key={kind}
+              />
+            ))}
+          </Items>
+        ))}
+        <h3>Disabled</h3>
+        <Items>
+          <Button outline disabled>
+            Action default
+          </Button>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button outline kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+      </Stack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Solid & Kind</h2>
+      <Stack space="medium">
+        {Object.values(BUTTON_SIZE).map((size) => (
+          <Items key={size}>
+            <Button solid size={size}>
+              Action default
+            </Button>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button solid kind={kind} key={kind} size={size}>
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Active</h3>
+        <Items>
+          <Button solid active>
+            Action default
+          </Button>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button solid kind={kind} key={kind} active>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+        <h3>With icon</h3>
+        {Object.values(BUTTON_SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
+              Action default
+            </Button>
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                solid
+                kind={kind}
+                size={size}
+                key={kind}
+              >
+                Action {kind}
+              </Button>
+            ))}
+          </Items>
+        ))}
+        <h3>Only icon</h3>
+        {Object.values(BUTTON_SIZE).map((size) => (
+          <Items key={size}>
+            <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
+            {Object.values(BUTTON_KIND).map((kind) => (
+              <Button
+                glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
+                solid
+                kind={kind}
+                size={size}
+                key={kind}
+              />
+            ))}
+          </Items>
+        ))}
+        <h3>Disabled</h3>
+        <Items>
+          <Button solid disabled>
+            Action default
+          </Button>
+          {Object.values(BUTTON_KIND).map((kind) => (
+            <Button solid kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </Items>
+      </Stack>
+    </Stack>
+  </Stack>
+);

package/src/ui/button/button.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import cx from 'classnames';
+import { Button as ButtonBaseComponent } from 'ariakit/button';
+
+import { Icon as BaseIcon } from '../icon';
+import css from './button.module.css';
+
+export const BUTTON_SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+export const BUTTON_KIND = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DANGE: 'danger',
+  WARNING: 'warning',
+  INFO: 'info',
+  SUCCES: 'success',
+} as const;
+
+export const BUTTON_GLYPHS = BaseIcon.ICONS;
+
+type Size = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
+type Kind = (typeof BUTTON_KIND)[keyof typeof BUTTON_KIND];
+
+interface ButtonProps<T extends React.ElementType> {
+  outline?: boolean;
+  solid?: boolean;
+  active?: boolean;
+  kind?: Kind | 'default';
+  size?: Size;
+  radius?: Size | 'circle' | 'none';
+  padding?: Size | 'none';
+  as?: T;
+  Icon?: React.ElementType;
+  glyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
+  rightGlyph?: React.ComponentProps<typeof BaseIcon>['glyph'];
+}
+
+const ButtonComponent = <T extends React.ElementType = 'button'>(
+  props: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
+) => {
+  const {
+    className = '',
+    outline = false,
+    solid = false,
+    active = false,
+    kind = 'default',
+    size = 'medium',
+    radius = '',
+    padding = '',
+    as: Component = ButtonBaseComponent,
+    children = null,
+    Icon = BaseIcon,
+    glyph,
+    rightGlyph,
+    ...restProps
+  } = props;
+
+  // Set padding and radius when provided or when outline/solid variations are set
+  const resolvedPadding = padding || ((outline || solid) && size);
+  const resolvedRadius = radius || ((outline || solid) && size);
+
+  const resolvedSize = Object.values(BUTTON_SIZE).includes(size) ? size : BUTTON_SIZE.MEDIUM;
+
+  const rootClassName = cx(
+    css.root,
+    kind && css[kind],
+    css[resolvedSize],
+
+    outline && css.outline,
+    outline && css[`outline--${kind}`],
+
+    solid && css.solid,
+    solid && css[`solid--${kind}`],
+
+    resolvedPadding && css.padding,
+    resolvedRadius && css[`radius--${resolvedRadius}`],
+
+    active && css.active,
+    active && outline && css[`active-outline-${kind}`],
+
+    className,
+  );
+
+  return (
+    <Component {...restProps} className={rootClassName}>
+      {glyph && <Icon glyph={glyph} className={css.glyph} />}
+      {children && <span className={css.content}>{children}</span>}
+      {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}
+    </Component>
+  );
+};
+
+export const Button = React.forwardRef(ButtonComponent);

package/src/ui/button/index.ts

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

package/src/ui/container/container.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
 
-// @ts-ignore
 import css from './container.module.css';
 
 interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {