@bundle-stats/ui 4.9.0-beta.0 → 4.9.1-beta.1

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { Stack } from '../../layout/stack';
+import { FlexStack } from '../../layout/flex-stack';
+import { Button } from '.';
+
+export default {
+  title: 'UI/Button',
+  component: Button,
+} as Meta;
+
+const Template: Story = ({ children = 'Action', ...props }) => (
+  <Button {...props}>{children}</Button>
+);
+
+export const Default = Template.bind({});
+
+export const All = () => (
+  <Stack space="large">
+    <Stack space="medium">
+      <h2>Size</h2>
+      <FlexStack space="small" alignItems="top">
+        {Object.values(Button.SIZE).map((size) => (
+          <Button size={size} key={size}>
+            Action {size}
+          </Button>
+        ))}
+      </FlexStack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Kind</h2>
+      <Stack space="small">
+        <FlexStack space="small" alignItems="top">
+          {Object.values(Button.KIND).map((kind) => (
+            <Button kind={kind} key={kind}>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+        <h3>Disabled</h3>
+        <FlexStack space="small" alignItems="top">
+          {Object.values(Button.KIND).map((kind) => (
+            <Button kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+      </Stack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Outline & Kind</h2>
+      <Stack space="small">
+        {Object.values(Button.SIZE).map((size) => (
+          <FlexStack space="small" alignItems="top" 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>
+            ))}
+          </FlexStack>
+        ))}
+        <h3>Disabled</h3>
+        <FlexStack space="small" alignItems="top">
+          <Button outline disabled>
+            Action default
+          </Button>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button outline kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+      </Stack>
+    </Stack>
+    <Stack space="medium">
+      <h2>Solid & Kind</h2>
+      <Stack space="small">
+        {Object.values(Button.SIZE).map((size) => (
+          <FlexStack space="small" alignItems="top" 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>
+            ))}
+          </FlexStack>
+        ))}
+        <h3>Disabled</h3>
+        <FlexStack space="small" alignItems="top">
+          <Button solid disabled>
+            Action default
+          </Button>
+          {Object.values(Button.KIND).map((kind) => (
+            <Button solid kind={kind} key={kind} disabled>
+              Action {kind}
+            </Button>
+          ))}
+        </FlexStack>
+      </Stack>
+    </Stack>
+  </Stack>
+);

package/src/ui/button/button.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import cx from 'classnames';
+import { Button as ButtonBaseComponent } from 'ariakit/button';
+
+import css from './button.module.css';
+
+const SIZE = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+const KIND = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  DANGE: 'danger',
+  WARNING: 'warning',
+  INFO: 'info',
+  SUCCES: 'success',
+} as const;
+
+type Size = (typeof SIZE)[keyof typeof SIZE];
+type Kind = (typeof KIND)[keyof typeof KIND];
+
+interface ButtonProps {
+  outline?: boolean;
+  solid?: boolean;
+  kind?: Kind | 'default';
+  size?: Size;
+  radius?: Size | 'circle' | 'none';
+  padding?: Size | 'none';
+}
+
+export const Button = (props: ButtonProps & React.ComponentProps<typeof ButtonBaseComponent>) => {
+  const {
+    className = '',
+    outline = false,
+    solid = false,
+    kind = 'default',
+    size = 'medium',
+    radius = '',
+    padding = '',
+    ...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 rootClassName = cx(
+    css.root,
+    css[size],
+    kind && css[kind],
+
+    outline && css.outline,
+    outline && css[`outline--${kind}`],
+
+    solid && css.solid,
+    solid && css[`solid--${kind}`],
+
+    resolvedPadding && css[`padding--${resolvedPadding}`],
+    resolvedRadius && css[`radius--${resolvedRadius}`],
+
+    css[size],
+    className,
+  );
+
+  return <ButtonBaseComponent {...restProps} className={rootClassName} />;
+};
+
+Button.SIZE = SIZE;
+Button.KIND = KIND;

package/src/ui/button/index.ts

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

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

@@ -11,12 +11,11 @@
   border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
 
+  appearance: none;
   background: none;
   font-size: var(--size-small);
   line-height: var(--space-small);
   white-space: nowrap;
-  appearance: none;
-  cursor: pointer;
   color: var(--color-text-light);
 }
 
@@ -48,7 +47,6 @@
 .item {
   display: block;
   appearance: none;
-  cursor: pointer;
   width: 100%;
   outline: none;
   border: 0;

package/src/ui/empty-set/empty-set.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Stack } from '../../layout/stack';
 import I18N from '../../i18n';
+import { Stack } from '../../layout/stack';
+import { Button } from '../button';
 import css from './empty-set.module.css';
 
 export const EmptySet = (props) => {
@@ -12,16 +13,16 @@ export const EmptySet = (props) => {
   const actions = [
     ...(handleResetFilters
       ? [
-          <button className={css.action} type="button" onClick={handleResetFilters}>
+          <Button kind="primary" type="button" onClick={handleResetFilters} className={css.action}>
             {I18N.RESET_FILTERS}
-          </button>,
+          </Button>,
         ]
       : []),
     ...(handleViewAll
       ? [
-          <button className={css.action} type="button" onClick={handleViewAll}>
+          <Button kind="primary" type="button" onClick={handleViewAll} className={css.action}>
             {I18N.VIEW_ALL}
-          </button>,
+          </Button>,
         ]
       : []),
   ];

package/src/ui/empty-set/empty-set.module.css

@@ -1,20 +1,3 @@
 .root {
   color: var(--color-text-light);
 }
-
-.action {
-  appearance: none;
-  padding: 0;
-  background: none;
-  border: none;
-  color: var(--color-primary);
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.action:focus,
-.action:active,
-.action:hover {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}

package/src/ui/filters/filters.i18n.ts

@@ -1,5 +1,6 @@
-export const CHUNKS_NOT_FOUND = 'No chunks found';
-export const CHUNKS_SEARCH = 'Search by chunk name';
-export const CHUNKS_SEARCH_CLEAR = 'Clear search';
+export const GROUP_NOT_FOUND = 'No filters found';
+export const GROUP_SEARCH = 'Search by filter name';
+export const GROUP_SEARCH_CLEAR = 'Clear search';
 export const CLEAR = 'Clear all';
 export const CHECK = 'Check all';
+export const ONLY = 'only';

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

@@ -10,13 +10,11 @@
 }
 
 .filterCheckbox {
-  cursor: pointer;
 }
 
 .filterInput {
   flex: 0 0 auto;
   height: 1em;
-  cursor: pointer;
 }
 
 .filterLabel {
@@ -28,29 +26,12 @@
 }
 
 .filterOnlyButton {
-  padding: 0 var(--space-xxxsmall);
   display: none;
-  appearance: none;
-  border: none;
-  border-radius: var(--radius-small);
-  cursor: pointer;
   position: absolute;
   right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  transition: var(--transition-in);
-  background: var(--color-info);
-  color: var(--color-background);
   font-size: var(--size-xsmall);
-  line-height: var(--line-height-header);
-}
-
-.filterOnlyButton:hover,
-.filterOnlyButton:active,
-.filterOnlyButton:focus {
-  transition: var(--transition-out);
-  background: var(--color-info-dark);
-  color: var(--color-background);
 }
 
 /** cover item text */
@@ -129,22 +110,6 @@
   color: var(--color-text-light);
 }
 
-.filterGroupSearchNotFoundClear {
-  outline: none;
-  appearance: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-  white-space: nowrap;
-  color: var(--color-text-dark);
-}
-
-.filterGroupSearchNotFoundClear:hover,
-.filterGroupSearchNotFoundClear:active,
-.filterGroupSearchNotFoundClear:focus {
-  color: var(--color-text-dark);
-}
-
 .filterGroupItems {
   max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
   overflow: auto;
@@ -158,23 +123,6 @@
   border-top: 1px solid var(--color-outline);
 }
 
-/* clear / check all */
-.filterGroupButton {
-  margin-top: calc(0px - var(--space-xxxsmall));
-  margin-bottom: calc(0px - var(--space-xxxsmall));
-  margin-right: calc(0px - var(--space-xxxsmall));
-  padding: var(--space-xxxsmall) 0;
-  outline: none;
-  appearance: none;
-  border: none;
-  background: none;
-  cursor: pointer;
-  white-space: nowrap;
-  color: var(--color-primary);
-  font-size: var(--size-small);
-  line-height: 1;
-}
-
 .item {
   position: relative;
   flex: 0 0 auto;

package/src/ui/filters/filters.tsx

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
+import { Button } from '../button';
 import { Dropdown } from '../dropdown';
 import { InputSearch } from '../input-search';
 import * as I18N from './filters.i18n';
@@ -49,9 +50,16 @@ const Filter = (props: FilterProps) => {
       </FlexStack>
 
       {getOnOnlyClick && (
-        <button type="button" onClick={getOnOnlyClick(name)} className={css.filterOnlyButton}>
-          only
-        </button>
+        <Button
+          kind="info"
+          solid
+          size="small"
+          type="button"
+          onClick={getOnOnlyClick(name)}
+          className={css.filterOnlyButton}
+        >
+          {I18N.ONLY}
+        </Button>
       )}
     </Component>
   );
@@ -135,7 +143,7 @@ const FilterGroup = (props: FilterGroupProps) => {
                 <InputSearch
                   defaultValue={search}
                   onChange={setSearch}
-                  placeholder={I18N.CHUNKS_SEARCH}
+                  placeholder={I18N.GROUP_SEARCH}
                   debounceWait={0}
                 />
               </div>
@@ -143,15 +151,17 @@ const FilterGroup = (props: FilterGroupProps) => {
             <div className={css.filterGroupItems}>
               {filteredGroupItems.length === 0 && (
                 <Stack className={css.filterGroupSearchNotFound}>
-                  <p>{I18N.CHUNKS_NOT_FOUND}</p>
+                  <p>{I18N.GROUP_NOT_FOUND}</p>
                   <div>
-                    <button
+                    <Button
+                      size="small"
+                      kind="primary"
                       type="button"
                       onClick={() => setSearch('')}
                       className={css.filterGroupSearchNotFoundClear}
                     >
-                      {I18N.CHUNKS_SEARCH_CLEAR}
-                    </button>
+                      {I18N.GROUP_SEARCH_CLEAR}
+                    </Button>
                   </div>
                 </Stack>
               )}

package/src/ui/index.js

@@ -1,4 +1,5 @@
 export { Alert } from './alert';
+export { Button } from './button';
 export { Container } from './container';
 export { Dropdown } from './dropdown';
 export { EmptySet } from './empty-set';

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

@@ -9,33 +9,16 @@
 }
 
 .cancelButton {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  border-radius: 50%;
   position: absolute;
-  right: 2px;
+  right: var(--space-xxxsmall);
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  width: var(--space-medium);
-  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
-  transition: var(--transition-in);
 }
 
 .cancelButton:focus,
 .cancelButton:hover,
 .cancelButton:active {
   color: var(--color-text-light);
-  transition: var(--transition-out);
-}
-
-.cancelButtonIcon {
-  display: block;
-  width: var(--space-small);
-  height: var(--space-small);
 }

package/src/ui/input-search/input-search.tsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import debounce from 'lodash/debounce';
 import noop from 'lodash/noop';
 
+import { Button } from '../button';
 import { Icon } from '../icon';
 import { Input } from '../input';
 
@@ -68,14 +69,16 @@ export const InputSearch = (
         autoComplete="off"
       />
       {value && (
-        <button
-          className={css.cancelButton}
+        <Button
+          radius="circle"
+          padding="small"
           type="button"
           onClick={clearButtonOnClick}
           aria-label="Clear search"
+          className={css.cancelButton}
         >
           <Icon className={css.cancelButtonIcon} glyph={Icon.ICONS.CANCEL} />
-        </button>
+        </Button>
       )}
     </div>
   );

package/types/ui/button/button.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button as ButtonBaseComponent } from 'ariakit/button';
+declare const SIZE: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+declare const KIND: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly DANGE: "danger";
+    readonly WARNING: "warning";
+    readonly INFO: "info";
+    readonly SUCCES: "success";
+};
+type Size = (typeof SIZE)[keyof typeof SIZE];
+type Kind = (typeof KIND)[keyof typeof KIND];
+interface ButtonProps {
+    outline?: boolean;
+    solid?: boolean;
+    kind?: Kind | 'default';
+    size?: Size;
+    radius?: Size | 'circle' | 'none';
+    padding?: Size | 'none';
+}
+export declare const Button: {
+    (props: ButtonProps & React.ComponentProps<typeof ButtonBaseComponent>): React.JSX.Element;
+    SIZE: {
+        readonly SMALL: "small";
+        readonly MEDIUM: "medium";
+        readonly LARGE: "large";
+    };
+    KIND: {
+        readonly PRIMARY: "primary";
+        readonly SECONDARY: "secondary";
+        readonly DANGE: "danger";
+        readonly WARNING: "warning";
+        readonly INFO: "info";
+        readonly SUCCES: "success";
+    };
+};
+export {};

package/types/ui/button/index.d.ts

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

package/types/ui/filters/filters.i18n.d.ts

@@ -1,5 +1,6 @@
-export declare const CHUNKS_NOT_FOUND = "No chunks found";
-export declare const CHUNKS_SEARCH = "Search by chunk name";
-export declare const CHUNKS_SEARCH_CLEAR = "Clear search";
+export declare const GROUP_NOT_FOUND = "No filters found";
+export declare const GROUP_SEARCH = "Search by filter name";
+export declare const GROUP_SEARCH_CLEAR = "Clear search";
 export declare const CLEAR = "Clear all";
 export declare const CHECK = "Check all";
+export declare const ONLY = "only";

package/types/ui/index.d.ts

@@ -1,4 +1,5 @@
 export { Alert } from "./alert";
+export { Button } from "./button";
 export { Container } from "./container";
 export { Dropdown } from "./dropdown";
 export { EmptySet } from "./empty-set";