@lumx/react 3.1.5 → 3.2.0

package/src/stories/decorators/withWrapper.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+/**
+ * SB decorator adding a wrapping div around the story
+ */
+export const withWrapper = <E extends React.ElementType = 'div'>(
+    props: Omit<React.ComponentProps<E>, 'children'>,
+    as?: E,
+) => {
+    // eslint-disable-next-line react/display-name
+    return (Story: any) => {
+        const Wrapper = as || 'div';
+        return (
+            <Wrapper {...props}>
+                <Story />
+            </Wrapper>
+        );
+    };
+};

package/src/stories/utils/CustomLink.tsx

@@ -1,7 +1,13 @@
-/* eslint-disable jsx-a11y/anchor-has-content,jsx-a11y/anchor-is-valid */
 import React from 'react';
 
 /**
  * Example custom link that can be used in linkAs props.
  */
-export const CustomLink: any = ({ ...props }) => <a href="#" data-custom-link {...props} />;
+export const CustomLink = React.forwardRef<HTMLAnchorElement, { to: string; children?: React.ReactNode }>(
+    ({ to = '#', children, ...props }, ref) => (
+        <a ref={ref} href={to} data-custom-link {...props}>
+            {children}
+        </a>
+    ),
+);
+CustomLink.displayName = 'CustomLink';

package/src/stories/{knobs → utils}/lorem.ts

@@ -1,19 +1,17 @@
-const shortText = `
-Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
-Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
-dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+const tiny = `Lorem ipsum quisque tincidunt lobortis dui non auctor. Donec porta, ligula volutpat
+vehicula aliquet, dui sapien tempus felis, sed.`;
+const short = `${tiny} Ullamco laboris nisi ut aliquid ex ea
 commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
 festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
 habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
 Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
 Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
-immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+immemorabili. Nec dubitamus multa iter quae et nos invenerat.`;
+const long = `${short} Tu quoque, Brute, fili mi, nihil
 timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
 iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
 Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
-tertiam. Cras mattis iudicium purus sit amet fermentum`;
-const longText = `
-${shortText}. Prima luce, cum quibus mons aliud
+tertiam. Cras mattis iudicium purus sit amet fermentum. Prima luce, cum quibus mons aliud
 consensu ab eo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Petierunt uti sibi
 concilium totius Galliae in diem certam indicere. Etiam habebis sem dicantur magna mollis
 euismod. A communi observantia non est recedendum. Ut enim ad minim veniam, quis nostrud
@@ -56,4 +54,6 @@ Plura mihi bona sunt, inclinet, amari petere vellent. Quae vero auctorem tractat
 dicuntur. Me non paenitet nullum festiviorem excogitasse ad hoc. Unam incolunt Belgae, aliam
 Aquitani, tertiam.`;
 
-export const loremIpsum = (type: 'short' | 'long'): string => (type === 'short' ? shortText : longText);
+const types = { tiny, short, long } as const;
+
+export const loremIpsum = (type: keyof typeof types): string => types[type];

package/src/testing/utils/commonTestsSuiteRTL.ts

@@ -5,7 +5,6 @@ import { queryByClassName } from '@lumx/react/testing/utils/queries';
 
 interface CommonSetup {
     props: GenericProps;
-    container: HTMLElement;
 }
 
 interface Options<S extends CommonSetup> {
@@ -28,8 +27,8 @@ export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<
     const { baseClassName, forwardClassName, forwardAttributes } = options;
     describe('Common tests suite', () => {
         it('should render with base class name', () => {
-            const { container } = setup();
-            expect(queryByClassName(container, baseClassName)).toBeInTheDocument();
+            setup();
+            expect(queryByClassName(document.body, baseClassName)).toBeInTheDocument();
         });
 
         if (forwardClassName) {

package/src/testing/utils/index.ts

@@ -1,4 +1,2 @@
 export * from './commonTestsSuite';
 export * from './commonTestsSuiteRTL';
-
-export * from './itShouldRenderStories';

package/src/untypped-modules.d.ts

@@ -3,5 +3,3 @@
  */
 declare module 'test-data-bot';
 declare module '*.jpg';
-declare module '@storybook/addon-knobs';
-declare module '@storybook/addon-actions';

package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx

@@ -9,7 +9,7 @@ const globalState = {
 };
 
 /** Toggle apply the material CSS override. */
-async function toggleMaterialTheme(wasEnabled: boolean) {
+export async function toggleMaterialTheme(wasEnabled: boolean) {
     globalState.isEnabled = !wasEnabled;
 
     // Inject the material theme CSS file.

package/src/utils/ThemeContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { Theme } from '..';
+
+export const ThemeContext = createContext<Theme | undefined>(undefined);

package/src/utils/forwardRefPolymorphic.ts

@@ -0,0 +1,9 @@
+import React, { ElementType } from 'react';
+import { ComponentRef } from '@lumx/react/utils/type';
+
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+export function forwardRefPolymorphic<E extends ElementType, P extends { as?: E }>(
+    render: (props: P, ref: ComponentRef<E>) => React.ReactElement | null,
+) {
+    return React.forwardRef(render as any) as (props: P & { ref?: ComponentRef<E> }) => React.ReactElement | null;
+}

package/src/utils/type.ts

@@ -38,6 +38,13 @@ export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 /** Union type of all text elements */
 export type TextElement = 'span' | 'p' | HeadingElement;
 
+export type HasPolymorphicAs<E extends React.ElementType> = React.ComponentPropsWithoutRef<E> & {
+    /**
+     * Customize the rendered component.
+     */
+    as?: E;
+};
+
 export interface HasTheme {
     /**
      * Theme adapting the component to light or dark background.
@@ -45,14 +52,17 @@ export interface HasTheme {
     theme?: Theme;
 }
 
-/**
- * Define a generic props types.
- */
-export interface GenericProps {
+export interface HasClassName {
     /**
      * Class name forwarded to the root element of the component.
      */
     className?: string;
+}
+
+/**
+ * Define a generic props types.
+ */
+export interface GenericProps extends HasClassName {
     /**
      * Any prop (particularly any supported prop for a HTML element).
      */
@@ -111,3 +121,17 @@ export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
           'aria-label': string;
           'aria-labelledby'?: undefined;
       };
+
+/**
+ * Extract ref type for a component or JSX intrinsic element
+ *
+ * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
+ * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
+ */
+export type ComponentRef<C> = C extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[C]['ref']
+    : C extends Comp<any, infer T>
+    ? React.Ref<T>
+    : C extends React.JSXElementConstructor<{ ref?: infer R }>
+    ? R
+    : never;