@sats-group/ui-lib 80.4.0 → 81.0.1

package/react/visually-button/visually-button.types.d.ts

@@ -0,0 +1,46 @@
+import type { ReactElement } from 'react';
+import type { ButtonHtmlProps, DivHtmlProps, LinkHtmlProps, ObjectValues } from '../types';
+export declare const sizes: {
+    readonly small: "small";
+    readonly basic: "basic";
+    readonly large: "large";
+};
+export declare const variants: {
+    readonly complete: "complete";
+    readonly cta: "cta";
+    readonly ctaSecondary: "cta-secondary";
+    readonly ctaSecondaryWhite: "cta-secondary-white";
+    readonly primary: "primary";
+    readonly primaryDestructive: "primary-destructive";
+    readonly primaryWhite: "primary-white";
+    readonly secondary: "secondary";
+    readonly secondaryWhite: "secondary-white";
+    readonly secondaryDestructive: "secondary-destructive";
+    readonly tertiary: "tertiary";
+    readonly tertiaryDestructive: "tertiary-destructive";
+    readonly fixedTertiary: "fixed-tertiary";
+    readonly waitlist: "waitlist";
+    readonly waitlistSecondary: "waitlist-secondary";
+};
+type CommonProps<ElementName extends string> = {
+    className?: string;
+    elementName: ElementName;
+    hasStackedIcon?: boolean;
+    iconOnly?: boolean;
+    leadingIcon?: ReactElement;
+    size?: ObjectValues<typeof sizes>;
+    spinning?: boolean;
+    testId?: string;
+    text: string;
+    trailingIcon?: ReactElement;
+    variant?: ObjectValues<typeof variants>;
+    wide?: boolean;
+};
+type Props<ElementProps, ElementName extends string> = ElementProps & CommonProps<ElementName>;
+export type VisuallyButtonButton = Props<ButtonHtmlProps, 'button'>;
+export type VisuallyButtonDiv = Props<DivHtmlProps, 'div'>;
+export type VisuallyButtonLink = Props<LinkHtmlProps, 'a'> & {
+    href: string;
+};
+export type VisuallyButton = VisuallyButtonButton | VisuallyButtonDiv | VisuallyButtonLink;
+export {};

package/react/visually-button/visually-button.types.js

@@ -0,0 +1,2 @@
+const t={small:"small",basic:"basic",large:"large"},e={complete:"complete",cta:"cta",ctaSecondary:"cta-secondary",ctaSecondaryWhite:"cta-secondary-white",primary:"primary",primaryDestructive:"primary-destructive",primaryWhite:"primary-white",secondary:"secondary",secondaryWhite:"secondary-white",secondaryDestructive:"secondary-destructive",tertiary:"tertiary",tertiaryDestructive:"tertiary-destructive",fixedTertiary:"fixed-tertiary",waitlist:"waitlist",waitlistSecondary:"waitlist-secondary"};export{t as sizes,e as variants};
+//# sourceMappingURL=visually-button.types.js.map

package/react/visually-button/visually-button.types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/visually-button/visually-button.types.ts"],
+  "sourcesContent": ["import type { ReactElement } from 'react';\n\nimport type {\n  ButtonHtmlProps,\n  DivHtmlProps,\n  LinkHtmlProps,\n  ObjectValues,\n} from '../types';\n\nexport const sizes = {\n  small: 'small',\n  basic: 'basic',\n  large: 'large',\n} as const;\n\nexport const variants = {\n  complete: 'complete',\n  cta: 'cta',\n  ctaSecondary: 'cta-secondary',\n  ctaSecondaryWhite: 'cta-secondary-white',\n  primary: 'primary',\n  primaryDestructive: 'primary-destructive',\n  primaryWhite: 'primary-white',\n  secondary: 'secondary',\n  secondaryWhite: 'secondary-white',\n  secondaryDestructive: 'secondary-destructive',\n  tertiary: 'tertiary',\n  tertiaryDestructive: 'tertiary-destructive',\n  fixedTertiary: 'fixed-tertiary',\n  waitlist: 'waitlist',\n  waitlistSecondary: 'waitlist-secondary',\n} as const;\n\ntype CommonProps<ElementName extends string> = {\n  className?: string;\n  elementName: ElementName;\n  hasStackedIcon?: boolean;\n  iconOnly?: boolean;\n  leadingIcon?: ReactElement;\n  size?: ObjectValues<typeof sizes>;\n  spinning?: boolean;\n  testId?: string;\n  text: string;\n  trailingIcon?: ReactElement;\n  variant?: ObjectValues<typeof variants>;\n  wide?: boolean;\n};\n\ntype Props<ElementProps, ElementName extends string> = ElementProps &\n  CommonProps<ElementName>;\n\nexport type VisuallyButtonButton = Props<ButtonHtmlProps, 'button'>;\nexport type VisuallyButtonDiv = Props<DivHtmlProps, 'div'>;\nexport type VisuallyButtonLink = Props<LinkHtmlProps, 'a'> & { href: string };\n\nexport type VisuallyButton =\n  | VisuallyButtonButton\n  | VisuallyButtonDiv\n  | VisuallyButtonLink;\n"],
+  "mappings": "AASO,MAAMA,EAAQ,CACnB,MAAO,QACP,MAAO,QACP,MAAO,OACT,EAEaC,EAAW,CACtB,SAAU,WACV,IAAK,MACL,aAAc,gBACd,kBAAmB,sBACnB,QAAS,UACT,mBAAoB,sBACpB,aAAc,gBACd,UAAW,YACX,eAAgB,kBAChB,qBAAsB,wBACtB,SAAU,WACV,oBAAqB,uBACrB,cAAe,iBACf,SAAU,WACV,kBAAmB,oBACrB",
+  "names": ["sizes", "variants"]
+}

package/react/visually-hidden/index.js

@@ -0,0 +1,2 @@
+import d from"./visually-hidden";var i=d;export{i as default};
+//# sourceMappingURL=index.js.map

package/react/visually-hidden/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/visually-hidden/index.ts"],
+  "sourcesContent": ["import VisuallyHidden from './visually-hidden';\nexport default VisuallyHidden;\n"],
+  "mappings": "AAAA,OAAOA,MAAoB,oBAC3B,IAAOC,EAAQD",
+  "names": ["VisuallyHidden", "visually_hidden_default"]
+}

package/react/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const VisuallyHidden: React.FunctionComponent<React.PropsWithChildren>;
+export default VisuallyHidden;

package/react/visually-hidden/visually-hidden.js

@@ -0,0 +1,2 @@
+import*as a from"react";const t=({children:n})=>a.Children.count(n)===0?null:a.createElement("span",{className:"visually-hidden"},n);var e=t;export{e as default};
+//# sourceMappingURL=visually-hidden.js.map

package/react/visually-hidden/visually-hidden.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../react/visually-hidden/visually-hidden.tsx"],
+  "sourcesContent": ["import * as React from 'react';\n\nconst VisuallyHidden: React.FunctionComponent<React.PropsWithChildren> = ({\n  children,\n}) =>\n  React.Children.count(children) === 0 ? null : (\n    <span className=\"visually-hidden\">{children}</span>\n  );\n\nexport default VisuallyHidden;\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QAEvB,MAAMC,EAAmE,CAAC,CACxE,SAAAC,CACF,IACEF,EAAM,SAAS,MAAME,CAAQ,IAAM,EAAI,KACrCF,EAAA,cAAC,QAAK,UAAU,mBAAmBE,CAAS,EAGhD,IAAOC,EAAQF",
+  "names": ["React", "VisuallyHidden", "children", "visually_hidden_default"]
+}

package/.nvmrc

@@ -1 +0,0 @@
-v20

package/catalog-info.yaml

@@ -1,14 +0,0 @@
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: sats-ui-lib
-  title: SATS UI Library
-  links:
-    - url: https://ui-lib.sats.com
-      title: Website
-    - url: https://satsdigital.slack.com/archives/C02U0R4004F
-      title: Slack Channel
-spec:
-  type: library
-  lifecycle: production
-  owner: sats-internal-apps-team

package/eslint.config.mjs

@@ -1,93 +0,0 @@
-import { FlatCompat } from '@eslint/eslintrc';
-import js from '@eslint/js';
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
-import prettier from 'eslint-plugin-prettier';
-import react from 'eslint-plugin-react';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
-export default [
-  {
-    ignores: [
-      '**/.vscode',
-      '**/dist',
-      '**/docs',
-      '**/node_modules',
-      '**/test-results',
-    ],
-  },
-  ...compat.extends(
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ),
-  {
-    plugins: {
-      '@typescript-eslint': typescriptEslint,
-      prettier,
-      react,
-    },
-    languageOptions: {
-      globals: {},
-      parser: tsParser,
-    },
-    settings: {
-      'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
-      react: {
-        version: '20',
-      },
-    },
-    rules: {
-      '@typescript-eslint/no-require-imports': 'off',
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/ban-types': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-empty-function': 'off',
-      '@typescript-eslint/no-explicit-any': 'error',
-      '@typescript-eslint/no-redeclare': 'error',
-      '@typescript-eslint/no-unused-vars': [
-        'warn',
-        {
-          vars: 'all',
-          args: 'after-used',
-          argsIgnorePattern: '(^_|^next$)',
-        },
-      ],
-      '@typescript-eslint/prefer-literal-enum-member': 'error',
-      'arrow-parens': ['warn', 'as-needed'],
-      eqeqeq: 'error',
-      'no-console': 'warn',
-      'no-dupe-args': 'error',
-      'no-dupe-keys': 'error',
-      'no-irregular-whitespace': 'warn',
-      'no-unreachable': 'error',
-      'no-use-before-define': 'off',
-      'no-warning-comments': 'warn',
-      'prettier/prettier': [
-        'warn',
-        {
-          endOfLine: 'auto',
-          singleQuote: true,
-        },
-      ],
-      semi: 'error',
-      strict: 'off',
-    },
-  },
-  {
-    files: ['**/*.js', '**/*.ts'],
-    rules: {
-      '@typescript-eslint/no-var-requires': 'off',
-    },
-  },
-];

package/react/add-bem-modifiers.ts

@@ -1,51 +0,0 @@
-/* eslint-disable no-var, @typescript-eslint/no-explicit-any */
-var hasOwn = {}.hasOwnProperty;
-
-// NOTE: This is copied from the source of 'classnames' and modified to produce BEM modifier classes. (source: https://github.com/JedWatson/classnames/blob/master/index.js)
-
-/** Creates modifier classnames of the provided values. The API is similar to `classnames`. All values passed will be prefixed by `className` (the first argument)
- *
- * Note that unlike with `classnames`, when an array is passed all elements must be strings
-
-```
-mod("block__element", "something", { "is-active": true });
-// Returns "block__element block__element--something block__element--is-active"
-```
- */
-export function mod(...args: any[]) {
-  var baseName = args[0];
-  if (!baseName) return '';
-
-  var classes = [baseName];
-
-  for (var i = 1; i < args.length; i++) {
-    var arg = args[i];
-    if (!arg) continue;
-
-    var argType = typeof arg;
-
-    if (argType === 'string' || argType === 'number') {
-      classes.push(baseName + '--' + arg);
-    } else if (Array.isArray(arg)) {
-      if (arg.length) {
-        for (var el of arg) {
-          if (el) {
-            classes.push(baseName + '--' + el);
-          }
-        }
-      }
-    } else if (argType === 'object') {
-      if (arg.toString !== Object.prototype.toString) {
-        classes.push(baseName + '--' + arg.toString());
-      } else {
-        for (var key in arg) {
-          if (hasOwn.call(arg, key) && arg[key]) {
-            classes.push(baseName + '--' + key);
-          }
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-}

package/react/badge/badge.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import { Badge as Props, variants, themes, Types } from './badge.types';
-import Text from '../text';
-
-const Badge: React.FunctionComponent<Props> & {
-  variants: typeof variants;
-  themes: typeof themes;
-} = ({ content, theme = themes.light, variant = variants.primary }) => (
-  <Text
-    size={Text.sizes.interface}
-    className={cn('badge', `badge--theme-${theme}-${variant}`, {
-      'badge--padding-tight': content.type === Types.Icon,
-    })}
-    tight
-  >
-    {content.type === Types.Numerical
-      ? content.content >= 1000
-        ? '999+'
-        : content.content
-      : content.content}
-  </Text>
-);
-
-Badge.variants = variants;
-Badge.themes = themes;
-export default Badge;

package/react/badge/badge.types.ts

@@ -1,34 +0,0 @@
-import type { ReactElement } from 'react';
-import type { ObjectValues } from '../types';
-
-export const variants = {
-  primary: 'primary',
-  secondary: 'secondary',
-  tertiary: 'tertiary',
-} as const;
-
-export const themes = {
-  light: 'light',
-  fixed: 'fixed',
-} as const;
-
-export enum Types {
-  Numerical = 'Numerical',
-  Icon = 'Icon',
-}
-
-type Icon = {
-  type: Types.Icon;
-  content: ReactElement;
-};
-
-type Numerical = {
-  type: Types.Numerical;
-  content: number;
-};
-
-export type Badge = {
-  content: Numerical | Icon;
-  theme?: ObjectValues<typeof themes>;
-  variant?: ObjectValues<typeof variants>;
-};

package/react/banner/banner.tsx

@@ -1,93 +0,0 @@
-import cn from 'classnames';
-import React, { useState } from 'react';
-
-import Text from '../text';
-import VisuallyHidden from '../visually-hidden';
-import Error from '../icons/18/error';
-import Info from '../icons/18/info';
-import Confirm from '../icons/18/confirm';
-import WarningSign from '../icons/18/warning-sign';
-import Close from '../icons/18/close';
-
-import type { Banner as Props } from './banner.types';
-
-const typeIcon = {
-  error: <Error />,
-  information: <Info />,
-  neutral: <Info />,
-  success: <Confirm />,
-  warning: <WarningSign />,
-};
-
-const Banner: React.FunctionComponent<Props> = ({
-  dismiss,
-  icon,
-  link,
-  list,
-  nested,
-  text,
-  title,
-  type,
-}) => {
-  const [isDismissed, setDismissed] = useState(false);
-  if (isDismissed) {
-    return null;
-  }
-
-  const handleClick = () => setDismissed(true);
-
-  return (
-    <div
-      className={cn('banner', {
-        'banner--layout-dismissable': !icon && dismiss,
-        'banner--layout-icon': icon && !dismiss,
-        'banner--layout-single': !icon && !dismiss,
-        'banner--layout-triple': icon && dismiss,
-        'banner--nested': nested,
-        [`banner--type-${type}`]: type,
-      })}
-    >
-      {icon ? <div className="banner__icon">{typeIcon[type]}</div> : null}
-      <div className="banner__primary">
-        {title ? (
-          <div className="banner__title">
-            <Text theme={Text.themes.emphasis} tight>
-              {title}
-            </Text>
-          </div>
-        ) : null}
-        <Text className="banner__text" size={Text.sizes.small}>
-          {text}
-        </Text>
-        {list.length ? (
-          <Text
-            elementName="ol"
-            className="banner__list"
-            size={Text.sizes.small}
-          >
-            {list.map(item => (
-              <li key={item}>{item}</li>
-            ))}
-          </Text>
-        ) : null}
-        {link ? (
-          <Text className="banner__link">
-            <a className="banner__anchor" href={link.href}>
-              {link.text}
-            </a>
-          </Text>
-        ) : null}
-      </div>
-      {dismiss ? (
-        <div className="banner__secondary">
-          <button className="banner__dismisser" onClick={handleClick}>
-            <VisuallyHidden>{dismiss}</VisuallyHidden>
-            <Close />
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
-export default Banner;

package/react/banner/banner.types.ts

@@ -1,10 +0,0 @@
-export type Banner = {
-  dismiss?: string;
-  icon?: boolean;
-  link?: { href: string; text: string };
-  list: string[];
-  nested?: boolean;
-  text: string;
-  title?: string;
-  type: 'error' | 'information' | 'neutral' | 'success' | 'warning';
-};

package/react/bomb/bomb.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import Text from '../text';
-
-import { Bomb as Props } from './bomb.types';
-
-const Bomb: React.FC<Props> = ({ label, price }) => (
-  <div className="bomb">
-    <div className="bomb__content">
-      <Text size={Text.sizes.small} theme={Text.themes.normal}>
-        {label}
-      </Text>
-      <Text size={Text.sizes.large} theme={Text.themes['emphasis']}>
-        {price}
-      </Text>
-    </div>
-  </div>
-);
-
-export default Bomb;

package/react/bomb/bomb.types.ts

@@ -1 +0,0 @@
-export type Bomb = { label: string; price: string };

package/react/button/button.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-import type { Button as Props } from './button.types';
-
-import VisuallyButton from '../visually-button';
-
-const ButtonRef = React.forwardRef<HTMLButtonElement, Props>(
-  ({ type = 'button', ...rest }, ref) => (
-    <VisuallyButton elementName="button" ref={ref} type={type} {...rest} />
-  ),
-);
-
-ButtonRef.displayName = 'Button';
-
-const Button: typeof ButtonRef & {
-  sizes: typeof VisuallyButton.sizes;
-  variants: typeof VisuallyButton.variants;
-} = Object.assign(ButtonRef, {
-  sizes: VisuallyButton.sizes,
-  variants: VisuallyButton.variants,
-});
-
-export default Button;

package/react/checkbox/checkbox.tsx

@@ -1,176 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import useInputValidation from '../use-input-validation';
-import Text from '../text';
-
-import { Checkbox as Props, themes } from './checkbox.types';
-
-const RefCheckbox = React.forwardRef<
-  HTMLInputElement,
-  React.PropsWithChildren<Props>
->(
-  (
-    {
-      children,
-      disabled,
-      description,
-      extra,
-      intermediate,
-      isLabelVisible = true,
-      label,
-      name,
-      showCustomError = true,
-      theme,
-      value = '',
-      isUnderlined,
-      required,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const [onChange, onInvalid, error] = useInputValidation();
-
-    return (
-      <div
-        className={cn('checkbox', {
-          'checkbox--error': error,
-          'checkbox--intermediate': intermediate,
-          [`checkbox--${theme}`]: theme,
-        })}
-      >
-        <label
-          className={cn('checkbox__content', {
-            'checkbox--underline': isUnderlined,
-          })}
-        >
-          <div className="checkbox__main">
-            <div className="checkbox__main-top">
-              <div>
-                <input
-                  aria-label={isLabelVisible ? undefined : label}
-                  className="checkbox__input"
-                  type="checkbox"
-                  name={name}
-                  onChange={e => {
-                    // NOTE: If props specify an `onChange`, we need to call that too
-                    if (restProps.onChange) restProps.onChange(e);
-                    onChange(e);
-                  }}
-                  onInvalid={e => {
-                    // NOTE: If props specify an `onInvalid`, we need to call that too
-                    if (restProps.onInvalid) restProps.onInvalid(e);
-                    onInvalid(e);
-                  }}
-                  ref={ref}
-                  value={value}
-                  disabled={disabled}
-                  required={required}
-                  {...restProps}
-                />
-
-                <div
-                  className={cn('checkbox__icon', {
-                    'checkbox__icon--intermediate': intermediate,
-                    [`checkbox__icon--${theme}`]: theme,
-                  })}
-                >
-                  <svg
-                    className="checkbox__intermediate"
-                    width="10"
-                    height="10"
-                    viewBox="0 0 10 10"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <line
-                      x1="0"
-                      y1="5"
-                      x2="10"
-                      y2="5"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    />
-                  </svg>
-                  <svg
-                    className="checkbox__check"
-                    width="12"
-                    height="10"
-                    viewBox="0 0 12 10"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M4.76123 9.0605L0.700729 5L1.76123 3.9395L4.76123 6.9395L10.7612 0.939501L11.8217 2L4.76123 9.0605Z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-              </div>
-              {isLabelVisible ? (
-                <>
-                  {label ? (
-                    <Text
-                      className={cn('checkbox__label', {
-                        [`checkbox__label--${theme}`]: theme,
-                        'checkbox__label--disabled': disabled,
-                      })}
-                      size={Text.sizes.basic}
-                    >
-                      {label}
-                    </Text>
-                  ) : (
-                    <div
-                      className={cn('checkbox__label', {
-                        [`checkbox__label--${theme}`]: theme,
-                        'checkbox__label--disabled': disabled,
-                      })}
-                    >
-                      {children}
-                    </div>
-                  )}
-                </>
-              ) : null}
-              {required ? <span className="checkbox__asterisk">*</span> : null}
-            </div>
-            {description && (
-              <Text
-                className={cn('checkbox__description', {
-                  [`checkbox__label--${theme}`]: theme,
-                  'checkbox__label--disabled': disabled,
-                })}
-                size={Text.sizes.small}
-              >
-                {description}
-              </Text>
-            )}
-          </div>
-        </label>
-
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error && showCustomError && (
-          <div
-            aria-hidden="true"
-            className={cn('checkbox__error', {
-              [`checkbox__error--${theme}`]: theme,
-            })}
-          >
-            {error}
-          </div>
-        )}
-
-        {extra && <span className="checkbox__extra">{extra}</span>}
-      </div>
-    );
-  },
-);
-
-// NOTE: If this isn't set, stack traces say "forwardRef" instead of "Checkbox"
-RefCheckbox.displayName = 'Checkbox';
-
-// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared
-const Checkbox: typeof RefCheckbox & {
-  themes: typeof themes;
-} = Object.assign(RefCheckbox, { themes });
-
-export default Checkbox;

package/react/checkbox/checkbox.types.ts

@@ -1,19 +0,0 @@
-import { ObjectValues, InputHtmlProps } from '../types';
-
-export const themes = {
-  light: 'light',
-  blue: 'blue',
-} as const;
-
-export type Checkbox = Omit<InputHtmlProps, 'value'> & {
-  intermediate?: boolean;
-  description?: string;
-  extra?: React.ReactNode;
-  isLabelVisible?: boolean;
-  label?: string;
-  name: string;
-  value: string;
-  showCustomError?: boolean;
-  theme?: ObjectValues<typeof themes>;
-  isUnderlined?: boolean;
-};