@iabbb/bds-react 0.38.0-alpha.0 → 0.38.0-alpha.2

package/package.json

@@ -1,12 +1,7 @@
 {
   "name": "@iabbb/bds-react",
-  "version": "0.38.0-alpha.0",
+  "version": "0.38.0-alpha.2",
   "main": "dist/bds-react.js",
-  "exports": {
-    "./*": "./dist/*",
-    "./package.json": "./package.json",
-    "./README.md": "./README.md"
-  },
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",
     "dev": "rollup -c -w"
@@ -29,7 +24,7 @@
     "rollup": "3.25.1"
   },
   "peerDependencies": {
-    "@iabbb/bds": "0.38.0-alpha.0",
+    "@iabbb/bds": "0.38.0-alpha.1",
     "react": "^18.0.0"
   }
 }

package/dist/bds-react.js

@@ -1,9 +0,0 @@
-export { default as Button } from './Button/Button.js';
-export { default as CallToAction } from './CallToAction/CallToAction.js';
-export { default as ErrorSummary } from './ErrorSummary/ErrorSummary.js';
-export { default as FieldTextInput } from './FieldTextInput/FieldTextInput.js';
-export { default as Pagination } from './Pagination/Pagination.js';
-export { default as Typography } from './Typography/Typography.js';
-import './_rollupPluginBabelHelpers-faf45dab.js';
-import 'react';
-//# sourceMappingURL=bds-react.js.map

package/dist/bds-react.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bds-react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@bds/react",
-  "version": "0.37.2",
-  "main": "dist/bds-react.js",
-  "exports": {
-    "./*": "./dist/*"
-  },
-  "scripts": {
-    "build": "cross-env NODE_ENV=production rollup -c",
-    "dev": "rollup -c -w"
-  },
-  "dependencies": {
-    "@lit-labs/react": "1.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "7.22.8",
-    "@babel/preset-env": "7.22.7",
-    "@babel/preset-react": "7.22.5",
-    "@iabbb/bds": "*",
-    "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "25.0.2",
-    "@rollup/plugin-node-resolve": "15.1.0",
-    "@rollup/plugin-terser": "0.4.3",
-    "cross-env": "7.0.3",
-    "glob": "10.3.1",
-    "react": "18.2.0",
-    "rollup": "3.25.1"
-  },
-  "peerDependencies": {
-    "@iabbb/bds": "0.37.2",
-    "react": "^18.0.0"
-  }
-}

package/rollup.config.mjs

@@ -1,36 +0,0 @@
-import babel from '@rollup/plugin-babel';
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import { globSync } from 'glob';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-// https://gist.github.com/BenjaminWFox/567fd293013090ec565b61228088087a
-export default {
-  input: {
-    ['index']: 'src/index.js',
-    ...Object.fromEntries(
-      globSync('src/**/*.js').map((file) => [
-        path.relative('src', file.slice(0, file.length - path.extname(file).length)),
-        fileURLToPath(new URL(file, import.meta.url)),
-      ]),
-    ),
-  },
-  output: {
-    dir: 'dist',
-    format: 'es',
-    sourcemap: true,
-  },
-  plugins: [
-    resolve(),
-    babel({ 
-      presets: ['@babel/env', '@babel/preset-react']
-    }),
-    commonjs({
-      namedExports: {
-        'react-is': ['isForwardRef', 'isValidElementType'],
-      },
-    }),
-  ],
-  external: ['react']
-};

package/src/Button/Button.js

@@ -1,54 +0,0 @@
-// import clsx from 'clsx';
-import * as React from 'react';
-
-const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
-
-const Button = React.forwardRef(
-  ({ children, className, onClick, preventDoubleClick = false, variant = 'standard', ...props }, ref) => {
-    const debounceClicks = React.useRef(false);
-
-    const handleClick = (event) => {
-      // 👇 button is not configured to ignore double clicks
-      if (!preventDoubleClick) {
-        if (onClick) {
-          onClick(event);
-        }
-
-        return;
-      }
-
-      // 👇 button has been clicked recently, and subsequent clicks are prevented
-      if (debounceClicks.current) {
-        event.preventDefault();
-        return false;
-      }
-
-      if (onClick) {
-        onClick(event);
-      }
-
-      // 👇 block from double clicks
-      debounceClicks.current = true;
-
-      // 👇 and remove the block after a given amount of seconds
-      setTimeout(() => {
-        debounceClicks.current = false;
-      }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
-    };
-
-    return (
-      <button
-        className={variant === 'unstyled' ? 'bds-button-unstyled' : 'bds-button'}
-        // className={clsx(variant === 'unstyled' ? 'bds-button-unstyled' : 'bds-button', className)}
-        data-type={variant !== 'standard' && variant !== 'unstyled' ? variant : null}
-        onClick={handleClick}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  },
-);
-
-export default Button;

package/src/Button/index.js

@@ -1 +0,0 @@
-export { default } from './Button';

package/src/CallToAction/CallToAction.js

@@ -1,18 +0,0 @@
-// import clsx from 'clsx';
-import * as React from 'react';
-
-const CallToAction = React.forwardRef(({ children, className, variant = 'standard', ...props }, ref) => {
-  return (
-    <a
-      // className={clsx('bds-cta', className)}
-      className="bds-cta"
-      data-type={variant !== 'standard' ? variant : null}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </a>
-  );
-});
-
-export default CallToAction;

package/src/CallToAction/index.js

@@ -1 +0,0 @@
-export { default } from './CallToAction';

package/src/ErrorSummary/ErrorSummary.js

@@ -1,66 +0,0 @@
-import ErrorSummaryWebComponent from '@iabbb/bds/src/blocks/ErrorSummary/ErrorSummary.mjs';
-import { createComponent } from '@lit-labs/react';
-import * as React from 'react';
-
-const ReactErrorSummary = createComponent({
-  tagName: 'bds-error-summary',
-  elementClass: ErrorSummaryWebComponent,
-  react: React,
-});
-
-const FINAL_FORM_ERROR = 'FINAL_FORM/form-error';
-export const FormErrorKey = '_form';
-
-export default function ErrorSummary({ errors, mapNameToId = (name) => name, ...props }) {
-  const headingId = React.useId();
-  const groupRef = React.useRef(null);
-
-  return (
-    <ReactErrorSummary role="group" aria-labelledby={headingId} ref={groupRef} tabIndex={-1} {...props}>
-      <h2 className="bds-h5" id={headingId}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          aria-hidden="true"
-          height="1em"
-          width="1em"
-          fill="currentColor"
-        >
-          <path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" />
-        </svg>
-        Issue
-      </h2>
-      <ul>
-        {Object.keys(errors).map((errorKey) => {
-          const message = errors[errorKey];
-          const isFormError = [FINAL_FORM_ERROR, FormErrorKey].includes(errorKey);
-
-          if (isFormError) {
-            return <li key={errorKey} dangerouslySetInnerHTML={{ __html: message }} />;
-          }
-
-          const isArrayField = Array.isArray(message);
-
-          const messages = isArrayField ? message : [message];
-
-          return (
-            <React.Fragment key={errorKey}>
-              {messages.map((fieldMessage, index) => {
-                const inputId = `${mapNameToId(errorKey)}${isArrayField ? `[${index}]` : ''}`;
-
-                return (
-                  <li key={inputId}>
-                    <a href={`#${inputId}`}>
-                      {fieldMessage}
-                      {messages.length > 1 ? ` (${index + 1} of ${messages.length})` : undefined}
-                    </a>
-                  </li>
-                );
-              })}
-            </React.Fragment>
-          );
-        })}
-      </ul>
-    </ReactErrorSummary>
-  );
-}

package/src/ErrorSummary/index.js

@@ -1,2 +0,0 @@
-export { default } from './ErrorSummary';
-export * from './ErrorSummary';

package/src/FieldTextInput/FieldTextInput.js

@@ -1,50 +0,0 @@
-// import clsx from 'clsx';
-import * as React from 'react';
-
-export default function FieldTextInput({ as, error, hint, id, isOptional = false, label, ...props }) {
-  id = id ?? props.name;
-
-  const errorId = React.useId();
-  const hintId = React.useId();
-
-  const InputComponent = as ?? 'input';
-
-  return (
-    <div
-      // className={clsx('bds-text-input', 'stack')}
-      className="bds-text-input stack"
-    >
-      <label htmlFor={id}>
-        {label}
-        {isOptional && ' (optional)'}
-      </label>
-      {hint && (
-        <span className="bds-hint" id={hintId}>
-          {hint}
-        </span>
-      )}
-      {error && (
-        <span className="bds-error" id={errorId}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            aria-hidden="true"
-            height="1em"
-            width="1em"
-            fill="currentColor"
-          >
-            <path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" />
-          </svg>
-          {error}
-        </span>
-      )}
-      <InputComponent
-        aria-invalid={error ? true : undefined}
-        aria-describedby={error && hint ? `${hintId} ${errorId}` : error ? errorId : hint ? hintId : undefined}
-        aria-required={isOptional ? undefined : true}
-        id={id}
-        {...props}
-      />
-    </div>
-  );
-}

package/src/FieldTextInput/index.js

@@ -1 +0,0 @@
-export { default } from './FieldTextInput';

package/src/Pagination/Pagination.js

@@ -1,107 +0,0 @@
-// import clsx from 'clsx';
-import * as React from 'react';
-
-function usePages(currentPage, totalPages) {
-  const pages = [1, currentPage - 1, currentPage, currentPage + 1, totalPages].filter(
-    (x) => x >= 1 && x <= totalPages,
-  );
-  return [...new Set(pages)];
-}
-
-export default function Pagination({ buildPageUrl, className, currentPage, onPageClick, totalPages, ...props }) {
-  const pages = usePages(currentPage, totalPages);
-
-  return (
-    <nav
-      aria-label="pagination"
-      // className={clsx('bds-pagination', className)}
-      className="bds-pagination"
-      {...props}
-    >
-      {currentPage !== 1 && (
-        <>
-          <a href={buildPageUrl(1)} className="bds-first-page">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              focusable="false"
-              height="1em"
-              width="auto"
-              viewBox="0 63.95 512 384.1"
-            >
-              <path d="M459.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4L288 214.3v83.4l171.5 142.9zM256 352V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160C4.2 237.5 0 246.5 0 256s4.2 18.5 11.5 24.6l192 160c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29v-64z" />
-            </svg>
-            First
-          </a>
-          <a aria-label="previous" href={buildPageUrl(currentPage - 1)} rel="prev">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              focusable="false"
-              width="auto"
-              height="1em"
-              viewBox="0.02 95.9 192.08 320.17"
-            >
-              <path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6v256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z" />
-            </svg>
-            Prev.
-          </a>
-        </>
-      )}
-      <ul>
-        {pages.map((page, index) => {
-          const handlePageClick = () => {
-            if (!onPageClick) return;
-
-            onPageClick(page);
-          };
-
-          return (
-            <React.Fragment key={page}>
-              <li>
-                <a
-                  aria-current={page === currentPage ? 'page' : undefined}
-                  href={buildPageUrl(page)}
-                  onClick={handlePageClick}
-                >
-                  <span className="visually-hidden">Page</span> {page}
-                </a>
-              </li>
-              {pages[index + 1] > page + 1 ? <li data-overflow="">...</li> : null}
-            </React.Fragment>
-          );
-        })}
-      </ul>
-      {currentPage !== totalPages && (
-        <>
-          <a href={buildPageUrl(currentPage + 1)} rel="next">
-            Next
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              focusable="false"
-              viewBox="63.9 95.9 192.1 320.17"
-              width="auto"
-              height="1em"
-            >
-              <path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9S63.9 115 63.9 128v256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z" />
-            </svg>
-          </a>
-          <a href={buildPageUrl(totalPages)} className="bds-last-page">
-            Last
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              focusable="false"
-              width="auto"
-              height="1em"
-              viewBox="0 63.95 512 384.1"
-            >
-              <path d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4L224 214.3v83.4L52.5 440.6zM256 352V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4l192 160c7.3 6.1 11.5 15.1 11.5 24.6s-4.2 18.5-11.5 24.6l-192 160c-9.5 7.9-22.8 9.7-34.1 4.4S256 428.4 256 416v-64z" />
-            </svg>
-          </a>
-        </>
-      )}
-    </nav>
-  );
-}

package/src/Pagination/index.js

@@ -1 +0,0 @@
-export { default } from './Pagination';

package/src/Typography/Typography.js

@@ -1,34 +0,0 @@
-// import clsx from 'clsx';
-import * as React from 'react';
-
-const componentMap = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  body: 'p',
-};
-
-const classMap = {
-  h1: 'bds-h1',
-  h2: 'bds-h2',
-  h3: 'bds-h3',
-  h4: 'bds-h4',
-  h5: 'bds-h5',
-  body: 'bds-body',
-};
-
-const Typography = React.forwardRef(({ className, component, variant = 'body', ...props }, ref) => {
-  const Component = component ?? componentMap[variant];
-  return (
-    <Component
-      // className={clsx(classMap[variant], className)}
-      className={classMap[variant]}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-export default Typography;

package/src/Typography/index.js

@@ -1 +0,0 @@
-export { default } from './Typography';

package/src/index.js

@@ -1,6 +0,0 @@
-export { default as Button } from './Button/index';
-export { default as CallToAction } from './CallToAction/index';
-export { default as ErrorSummary } from './ErrorSummary/index';
-export { default as FieldTextInput } from './FieldTextInput/index';
-export { default as Pagination } from './Pagination/index';
-export { default as Typography } from './Typography/index';