fix(all): various fixes to bringing the library up to 2.0

demos/archiveFrontend/vercel.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "alias": "npm-library-demo.vercel.app",
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}

packages/asyncHandler/src/asyncHandler.tsx

@@ -14,11 +14,17 @@ type DefaultErrorComponent = (
   props: DefaultErrorComponentProps,
 ) => React.ReactElement;
 export interface AsyncHandlerProps {
-  request: () => Promise<any>;
-  cache: () => Record<string, unknown> | any[] | false | null;
+  /** Async function that returns a promise or an array of promises */
+  request: () => Promise<any> | Promise<any>[];
+  /** Optional cache function will be called before making the request */
+  cache: () => Record<string, any> | any[] | false | null;
+  /** Replace the default loader component */
   loaderComponent: DefaultComponent | React.ReactElement;
+  /** Replace the default no results component */
   noResultsComponent: DefaultComponent | React.ReactElement;
+  /** Replace the default error component */
   errorComponent: DefaultErrorComponent | React.ReactElement;
+  /** CSS module to target internal styles */
   cssModule?: { [key: string]: string };
 }
 interface State {
@@ -27,10 +33,10 @@ interface State {
   error?: any;
 }
 
-const { returnComponentFormat } = utils;
+const { normalizeComponentProp } = utils;
 
 export default class AsyncHandler extends React.Component<
-  AsyncHandlerProps & { children: (props: any) => any },
+  AsyncHandlerProps & { children: (props: any) => React.ReactNode },
   State
 > {
   state: State = { data: null, loading: true, error: null };
@@ -77,13 +83,16 @@ export default class AsyncHandler extends React.Component<
     } = this.props;
 
     if (error) {
-      return returnComponentFormat(ErrorComponent, { cssModule: theme, error });
+      return normalizeComponentProp(ErrorComponent, {
+        cssModule: theme,
+        error,
+      });
     }
     if (loading) {
-      return returnComponentFormat(LoaderComponent, { cssModule: theme });
+      return normalizeComponentProp(LoaderComponent, { cssModule: theme });
     }
     if (isEmpty(data)) {
-      return returnComponentFormat(NoResultsComponent, { cssModule: theme });
+      return normalizeComponentProp(NoResultsComponent, { cssModule: theme });
     }
     return children(data);
   }

packages/modal/src/modal.tsx

@@ -28,24 +28,44 @@ export type OverlayColor =
   | false;
 
 export interface ModalProps {
+  /** Modal state */
   isOpen: boolean;
+  /** Size of the modal, either as a preset or a custom CSS size */
   size?:
     | 'small'
     | 'medium'
     | 'large'
     | 'full'
     | `${number}${(typeof cssUnits)[number]}`;
+  /** Handler to close the modal. Use to set the modal state */
   onClose?: (e?: React.MouseEvent) => void;
+  /** CLose modal on overlay click */
   closeOnOverlayClick?: boolean;
+  /**
+   * When the modal opens/closes, add animation classes and
+   * preserve the modal in the DOM for the length of a timeout
+   */
   animationSupport?: boolean;
+  /** Time in milliseconds to keep the modal in the DOM and animation classes active */
   animationCloseTimeout?: number;
+  /** Custom header component */
   header?: React.FC<any> | string;
+  /** Custom footer component */
   footer?: React.FC<any> | string;
+  /** Color of the overlay */
   overlayColor?: OverlayColor;
+  /** Add a close button to the header */
   closeBtn?: boolean;
+  /**
+   * Boolean to toggle component's data-theme attribute
+   * between light and dark mode
+   */
   darkMode?: boolean;
+  /** CSS custom property overrides */
   cssVars?: CSSVars<typeof varNames>;
+  /** CSS module to target internal styles */
   cssModule?: Record<string, string>;
+  /** The main content of the modal */
   children?: React.ReactNode;
 }
 // mdx_modal_props_end

packages/navigation/src/navigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentType } from 'react';
 import {
   DefaultLinkComponent,
   utils,
@@ -13,16 +13,40 @@ import { AuthLinkTypes, NavigationLink } from './types';
 
 // mdx_navigation_props_start
 export interface NavigationProps {
+  /** Object with links configuration */
   links: NavigationLink[];
-  linkComponent?: React.ComponentType<any>;
+  /**
+   * Optional client router component.
+   * When supplied, links will be constructed with it.
+   * By default, links will be HTML anchor tags.
+   */
+  linkComponent?: ComponentType<any>;
+  /**
+   * Designate a non-standard href prop if the Router
+   * uses one. Example: React Router Link uses "to"
+   */
   linkComponentHrefAttr?: string;
+  /** Vertical or horizontal links */
   direction?: 'horizontal' | 'vertical' | 'horz' | 'vert';
-  template?: 'clean' | 'dark-buttons' | 'light-buttons' | 'none';
+  /** Choice of template */
+  template?: 'clean' | 'light-buttons' | 'dark-buttons' | 'none';
+  /** Optional CSS classes to add to Navigation container */
   classes?: string[];
+  /**
+   * Show the auth sidecar. When set to true, a logged in state
+   * false logged out. Omit or set undefined to not display
+   */
   isAuth?: boolean;
+  /** Customize the auth sidecar */
   authLinks?: AuthLinkTypes;
+  /**
+   * Boolean to toggle component's data-theme attribute
+   * between light and dark mode
+   */
   darkMode?: boolean;
+  /** CSS custom property overrides */
   cssVars?: CSSVars<typeof varNames>;
+  /** CSS module to target internal styles */
   cssModule?: Record<string, string>;
 }
 // mdx_navigation_props_end

packages/navigation/src/scss/navigation.module.scss

@@ -130,7 +130,6 @@ $darkColor: #555555;
     .signupLink,
     .logoutLink {
       background-color: var(--unl-light);
-      border-radius: 0;
       &:hover {
         background-color: var(--unl-light-darker-5);
       }
@@ -184,7 +183,6 @@ $darkColor: #555555;
     .signupLink,
     .logoutLink {
       background-color: var(--unl-dark);
-      border-radius: 0;
       color: var(--unl-text-light);
       &:hover {
         background-color: var(--unl-dark-lighter-10);
@@ -198,7 +196,8 @@ $darkColor: #555555;
   .authLinks {
     display: flex;
     align-items: center;
-    margin: 0 0 0 60px;
+    /*margin: 0 0 0 60px;*/
+    margin-left: auto;
     padding: 0;
 
     .link {
@@ -214,7 +213,6 @@ $darkColor: #555555;
     .signupLink,
     .logoutLink {
       background-color: var(--unl-light);
-      border-radius: 5px;
 
       &:hover {
         background-color: var(--unl-light-darker-5);
@@ -267,7 +265,7 @@ $darkColor: #555555;
   }
 }
 
-@media screen and (max-width: $break-sm) {
+/*@media screen and (max-width: $break-sm) {
   .container:not(.none) {
     flex-direction: column;
     .navList {
@@ -280,4 +278,4 @@ $darkColor: #555555;
       align-items: normal;
     }
   }
-}
+}*/

packages/pagination/src/pagination.tsx

@@ -45,8 +45,8 @@ const Pagination = ({
   perPage = 10,
   prevLabel = 'prev',
   nextLabel = 'next',
-  currentOffset,
-  total,
+  currentOffset = 0,
+  total = 0,
   handler,
   darkMode = false,
   cssVars,
@@ -121,6 +121,18 @@ const Pagination = ({
     [cssModule],
   );
 
+  if (perPage < 1) {
+    throw new Error('Pagination `perPage` prop should not be less than 1');
+  }
+
+  if (currentOffset < 0) {
+    throw new Error('Pagination `offset` prop should not be less than 0');
+  }
+
+  if (total < 0) {
+    throw new Error('Pagination `total` prop should not be less than 0');
+  }
+
   return total > perPage ? (
     <div
       className={clsName('container')}
@@ -160,5 +172,5 @@ const Pagination = ({
   ) : null;
 };
 
-Pagination.displayName = 'Pagination';
+Pagination.displayName = 'pagination';
 export default Pagination;

packages/pagination/src/scss/pagination.module.scss

@@ -93,7 +93,10 @@ $darkmode-page-active: $ltgray;
   &:last-child {
     margin-right: 0;
   }
-  &--active,
+  &--active {
+    background-color: var(--unl-light-mode-page-number-background-active);
+    color: var(--unl-dark-mode-text);
+  }
   &:global(.active) {
     background-color: var(--unl-light-mode-page-number-background-active);
     color: var(--unl-dark-mode-text);
@@ -107,7 +110,10 @@ $darkmode-page-active: $ltgray;
 [data-theme='dark'] .number {
   background-color: var(--unl-dark-mode-page-number-background);
   color: var(--unl-dark-mode-text);
-  &--active,
+  &--active {
+    background-color: var(--unl-dark-mode-page-number-background-active);
+    color: var(--unl-light-mode-text);
+  }
   &:global(.active) {
     background-color: var(--unl-dark-mode-page-number-background-active);
     color: var(--unl-light-mode-text);

shared/common/src/lib/mapCSSVarsToStyles.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { stringToKebab } from './utils';
 
 export type CSSVars<TVarNames extends readonly string[]> = {
-  [name in TVarNames[number]]?: CSSProperties['color'];
+  [name in TVarNames[number]]?: CSSProperties[keyof CSSProperties];
 };
 
 type MapColorsToStyles<TVarNames extends readonly string[]> = {
@@ -24,9 +24,7 @@ export const mapCSSVarsToStyles = <VarNames extends readonly string[]>({
     if (name in cssVars) {
       const kebabCaseKey = `--unl-${stringToKebab(name)}`;
 
-      styles[kebabCaseKey] = (
-        cssVars as Record<string, CSSProperties['color']>
-      )[name];
+      styles[kebabCaseKey] = (cssVars as Record<string, string>)[name];
     }
   });
 

shared/common/src/types.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 import { z, ZodTypeAny } from 'zod';
 import type { InputHTMLAttributes, SelectHTMLAttributes } from 'react';
 import type { GlobalError, UseFormRegisterReturn } from 'react-hook-form';
@@ -62,10 +62,13 @@ export type BaseFormProps = {
   onSuccess?: <T extends ZodTypeAny, Meta extends Record<string, any>>(
     resp: BaseServerResponse<FormValues<T>, Meta>,
   ) => void;
+  /**
+   * Custom header component or
+   * false to disable the default header
+   */
+  header?: ComponentType<any> | ReactNode | false;
   /** Header text for default header */
   headerText?: string;
-  /** Custom footer component */
-  footer?: ComponentType<any>;
   /** Custom loader component */
   loader?: ComponentType<DefaultLoaderProps>;
   /** Label for form submit button */
@@ -75,23 +78,19 @@ export type BaseFormProps = {
   /** Custom schema to override default schema */
   customSchema?: z.AnyZodObject | z.ZodEffects<any>;
   /**
-   * optionally send root server error message and/or
+   * Optionally send root server error message and/or
    * handler exceptions to toast
    */
   toast?: (msg: string) => void;
-  /** override the default catch error shown to user */
+  /** Override the default catch error shown to user */
   failMsg?: string;
-  /** override or remove the default success message */
-  successMessage?: ComponentType<any> | string | false | null;
-  /** Link component for client side routing */
-  linkComponent?: ComponentType<any>;
-  /** Link component's href attribute */
-  linkComponentHrefAttr?: string;
-  /** Should the first field in the form be focused on page load */
+  /** Override or remove the default success message */
+  successMessage?: ComponentType<any> | string | false;
+  /** Disable/override initial form focus if set */
   isFocused?: boolean;
   /**
-   * setting auto or undefined will honor prefers-color-scheme
-   * light or dark will force light or dark mode
+   * Boolean to toggle component's data-theme attribute
+   * between light and dark mode
    */
   darkMode?: boolean;
   /** CSS module to target internal styles */

shared/scripts/postcssRename.js

@@ -52,13 +52,17 @@ try {
 const camelToKebab = (str) =>
   str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const strategy = (selector) => `${prefix}${name}__${camelToKebab(selector)}`;
+const strategy = (selector) => `${camelToKebab(selector)}`;
+
+// transform :global(.selector) to .selector
+// return convertedCase.replace(/:global\((.+)\)/gm, ' $1');
 
 async function main() {
   return await postcss([
     renamer({
       strategy,
       ids: true,
+      prefix: `${prefix}${name}__`,
     }),
   ]).process(cssFile, { from: undefined });
 }