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

package/src/ui/table/table.module.css

@@ -89,6 +89,36 @@
   border-width: 1px;
 }
 
+/** cascade border radius */
+.root thead,
+.root thead tr:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.root thead tr:first-child th:first-child {
+  border-top-left-radius: inherit;
+}
+
+.root thead tr:first-child th:last-child {
+  border-top-right-radius: inherit;
+}
+
+.root tbody:last-child,
+.root tbody:last-child tr:last-child {
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child th:first-child,
+.root tbody:last-child tr:last-child td:first-child {
+  border-bottom-left-radius: inherit;
+}
+
+.root tbody:last-child tr:last-child td:last-child {
+  border-bottom-right-radius: inherit;
+}
+
 /* compact variation */
 .compact td,
 .compact th {

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

package/src/ui/table/table.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import cx from 'classnames';
+
+import css from './table.module.css';
+
+interface TableProps {
+  emptyMessage?: React.ReactNode;
+  compact?: boolean;
+  outline?: boolean;
+}
+
+export const Table = (props: TableProps & React.ComponentProps<'table'>) => {
+  const {
+    className = '',
+    emptyMessage = null,
+    compact = false,
+    outline = false,
+    children,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
+
+  if (!children) {
+    return <div className={cx(rootClassName, css.empty)}>{emptyMessage}</div>;
+  }
+
+  return (
+    <table className={rootClassName} {...restProps}>
+      {children}
+    </table>
+  );
+};
+
+Table.THead = 'thead' as React.ElementType;
+Table.TBody = 'tbody' as React.ElementType;
+Table.Tr = 'tr' as React.ElementType;
+Table.Th = 'th' as React.ElementType;
+Table.Td = 'td' as React.ElementType;

package/src/ui/tabs/index.ts

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

package/src/ui/tabs/tabs.module.css

@@ -4,12 +4,16 @@
 }
 
 .item {
+  appearance: none;
+  background: none;
+  border: 0;
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) var(--space-small);
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
+  transition: var(--ui-transition-out);
 }
 
 .item::after {
@@ -26,8 +30,9 @@
 .item:hover,
 .item:active,
 .item:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-primary);
   outline: none;
+  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
@@ -43,7 +48,3 @@
 .itemActive::after {
   background: currentColor;
 }
-
-.item + .item {
-  _margin-left: var(--space-medium);
-}

package/src/ui/tabs/tabs.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getWrapperDecorator } from '../../stories';
+import { Tabs, TabItem } from '.';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  decorators: [getWrapperDecorator()],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs>
+      <TabItem isTabActive>Option A</TabItem>
+      <TabItem>Option B</TabItem>
+      <TabItem>Option C</TabItem>
+    </Tabs>
+  ),
+};

package/src/ui/tabs/tabs.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ElementType } from 'react';
+import React from 'react';
+import cx from 'classnames';
+
+import css from './tabs.module.css';
+
+export type TabItemProps<T extends ElementType> = {
+  isTabActive?: boolean;
+  as?: T;
+} & ComponentProps<T>;
+
+export const TabItem = <T extends ElementType = 'button'>(props: TabItemProps<T>) => {
+  const { className = '', as: Component = 'button', isTabActive = false, ...restProps } = props;
+
+  return (
+    <Component
+      role="tab"
+      className={cx(css.item, className, isTabActive && css.itemActive)}
+      {...restProps}
+    />
+  );
+};
+
+export type TabsProps = ComponentProps<'div'>;
+
+export const Tabs = (props: TabsProps) => {
+  const { className = '', ...restProps } = props;
+
+  return <div role="tablist" className={cx(css.root, className)} {...restProps} />;
+};
+
+Tabs.Item = TabItem;

package/src/ui/tag/tag.module.css

@@ -2,12 +2,26 @@
   display: inline-block;
   font-family: var(--font-family);
   font-weight: bold;
-  background: var(--color-text-light);
+  background: var(--color-text-ultra-light);
   color: var(--color-light);
   text-align: center;
   text-transform: uppercase;
 }
 
+a.root {
+  text-decoration: none;
+  transition: var(--transition-out);
+}
+
+a.root:hover,
+a.root:focus,
+a.root:active {
+  opacity: 0.8;
+  color: var(--color-light);
+  text-decoration: none;
+  transition: var(--transition-in);
+}
+
 /** Kind variation */
 .success {
   background: var(--color-success);
@@ -28,7 +42,7 @@
 /** Size variation */
 /** default: medium */
 .root {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   min-width: var(--space-small);
   height: var(--space-small);
@@ -37,7 +51,7 @@
 }
 
 .small {
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-xsmall);
   padding: calc(var(--space-xxxsmall) / 2);
   height: var(--space-xsmall);
   min-width: var(--space-xsmall);
@@ -46,7 +60,7 @@
 }
 
 .large {
-  border-radius: var(--radius-large);
+  border-radius: var(--radius-medium);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
   min-width: var(--space-medium);
   height: var(--space-medium);

package/src/ui/tag/tag.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Tag } from '.';
+
+export default {
+  title: 'UI/Tag',
+  component: Tag,
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: Object.values(Tag.KINDS),
+    },
+    size: {
+      control: 'select',
+      options: Object.values(Tag.SIZES),
+    },
+  },
+  args: {
+    children: 'tag',
+  },
+} as Meta;
+
+const Template: Story = (args) => <Tag {...args} />;
+
+export const Default = Template.bind({});
+
+export const OneLetter = Template.bind({});
+
+OneLetter.args = {
+  children: 'd',
+};

package/src/ui/tag/tag.tsx

@@ -0,0 +1,29 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+import cx from 'classnames';
+
+import { KIND, SIZE } from '../../tokens';
+import css from './tag.module.css';
+
+export type TagProps = {
+  as?: React.ElementType;
+  kind?: (typeof KIND)[keyof typeof KIND];
+  size?: (typeof SIZE)[keyof typeof SIZE];
+} & ComponentProps<'span'>;
+
+export const Tag = (props: TagProps) => {
+  const {
+    className = '',
+    as: Component = 'span',
+    kind = KIND.DEFAULT,
+    size = SIZE.MEDIUM,
+    ...restProps
+  } = props;
+
+  const rootClassName = cx(css.root, className, css[kind], css[size]);
+
+  return <Component className={rootClassName} {...restProps} />;
+};
+
+Tag.KINDS = KIND;
+Tag.SIZES = SIZE;

package/src/ui/textarea/index.ts

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

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

@@ -0,0 +1,56 @@
+.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 {
+  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/src/ui/toolbar/toolbar.module.css

@@ -1,6 +1,4 @@
-.root {
-  padding: var(--space-small);
-}
+.root { }
 
 .content {}
 

package/src/ui/tooltip/tooltip.module.css

@@ -11,27 +11,19 @@
 }
 
 .tooltip {
+  z-index: var(--layer-xxhigh);
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-medium);
-  background: var(--color-light);
-  max-width: 24em;
-  color: var(--color-text);
+  border-radius: var(--radius-small);
+  background: var(--color-text);
+  max-width: 28em;
+  color: var(--color-background);
+  font-size: var(--size-small);
+  text-align: center;
   filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
-  font-size: var(--size-xsmall);
-  line-height: var(--space-small);
 }
 
 .arrow svg {
   display: block;
-  fill: var(--color-light);
-}
-
-.tooltipDarkMode {
-  background: var(--color-text);
-  color: var(--color-light);
-}
-
-.tooltipDarkMode .arrow svg {
   fill: var(--color-text);
 }

package/src/ui/tooltip/tooltip.stories.module.css

@@ -0,0 +1,8 @@
+.customTooltip {
+  padding: var(--space-large);
+  color: var(--color-danger);
+  font-size: var(--size-large);
+  text-align: left;
+  width: 100vw;
+  max-width: 480px;
+}