@simplybusiness/mobius 3.4.5 → 3.5.1

package/src/components/Flex/propUtils.test.ts

@@ -0,0 +1,124 @@
+import {
+  withoutUndefinedValues,
+  buildFlexStyles,
+  splitProps,
+} from "./propUtils";
+
+describe("withoutUndefinedValues", () => {
+  it("returns object without undefined values", () => {
+    const props = {
+      a: 1,
+      b: "Two",
+      c: [],
+      d: {},
+      e: undefined,
+      f: undefined,
+    };
+
+    const actual = withoutUndefinedValues(props);
+
+    const expected = {
+      a: 1,
+      b: "Two",
+      c: [],
+      d: {},
+    };
+
+    expect(actual).toStrictEqual(expected);
+  });
+});
+
+describe("buildFlexStyles", () => {
+  describe("given a list of props", () => {
+    it("returns a specified list of flex props", () => {
+      const props = {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        flexGrow: "1",
+        flex: "1 1 0px",
+        justifyContent: "start",
+        alignItems: "stretch",
+        alignContent: "center",
+        gap: "10px",
+        rowGap: "20px",
+        columnGap: "30px",
+      } as const;
+
+      const expectedProps = {
+        ...props,
+        display: "flex",
+      };
+
+      const actual = buildFlexStyles(props);
+
+      expect(actual).toStrictEqual(expectedProps);
+    });
+  });
+
+  describe("given a list of partially defined props", () => {
+    it("returns flex props that are defined", () => {
+      const props = {
+        flexDirection: "row",
+        flexWrap: undefined,
+        flexGrow: "1",
+        flex: undefined,
+        justifyContent: "start",
+        alignItems: undefined,
+        alignContent: "center",
+        gap: undefined,
+        rowGap: "20px",
+        columnGap: undefined,
+      } as const;
+
+      const expectedProps = {
+        flexDirection: "row",
+        flexGrow: "1",
+        justifyContent: "start",
+        alignContent: "center",
+        rowGap: "20px",
+        display: "flex",
+      };
+
+      const actual = buildFlexStyles(props);
+
+      expect(actual).toStrictEqual(expectedProps);
+    });
+  });
+});
+
+describe("splitProps", () => {
+  describe("given a list of props", () => {
+    it("returns an array with two items: 1) specified flex props; 2) all other props", () => {
+      const flexProps = {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        flexGrow: "1",
+        flex: "1 1 0px",
+        justifyContent: "start",
+        alignItems: "stretch",
+        alignContent: "center",
+        gap: "10px",
+        rowGap: "20px",
+        columnGap: "30px",
+      } as const;
+
+      const otherProps = {
+        a: 1,
+        b: "Two",
+        c: [],
+        d: {},
+      };
+
+      const props = {
+        ...flexProps,
+        ...otherProps,
+      };
+
+      const actual = splitProps(props);
+
+      const expected = [flexProps, otherProps];
+
+      expect(actual).toStrictEqual(expected);
+    });
+  });
+});

package/src/components/Flex/propUtils.ts

@@ -0,0 +1,69 @@
+import { FlexNonStyleProps, FlexProps, FlexStyleProps } from "./types";
+
+export const withoutUndefinedValues = (obj: Record<string, unknown>) =>
+  Object.fromEntries(Object.entries(obj).filter(([_, value]) => value));
+
+export const buildFlexStyles = (props: FlexStyleProps) => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+  } = props;
+
+  const styleProps = {
+    display: "flex",
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+  };
+
+  return withoutUndefinedValues(styleProps);
+};
+
+export const splitProps = (
+  props: FlexProps,
+): [FlexStyleProps, FlexNonStyleProps] => {
+  const {
+    flexDirection,
+    flexWrap,
+    flexGrow,
+    flex,
+    justifyContent,
+    alignItems,
+    alignContent,
+    gap,
+    rowGap,
+    columnGap,
+    ...otherProps
+  } = props;
+
+  return [
+    {
+      flexDirection,
+      flexWrap,
+      flexGrow,
+      flex,
+      justifyContent,
+      alignItems,
+      alignContent,
+      gap,
+      rowGap,
+      columnGap,
+    },
+    otherProps,
+  ];
+};

package/src/components/Flex/types.ts

@@ -0,0 +1,38 @@
+import { Ref, ReactNode, RefAttributes } from "react";
+import type { Property } from "csstype";
+import { DOMProps } from "@react-types/shared";
+
+export type FlexElementType = HTMLDivElement;
+
+export interface FlexStyleProps {
+  elementType?: string | React.ElementType;
+  flexDirection?: Property.FlexDirection;
+  flexWrap?: Property.FlexWrap;
+  flexGrow?: Property.FlexGrow;
+  flex?: Property.Flex;
+  /** Aligns grid items along the block (column) axis  */
+  alignItems?: Property.AlignItems;
+  /** Aligns the grid along the inline (row) axis */
+  alignContent?: Property.AlignContent;
+  /** Aligns the grid along the inline (row) axis */
+  justifyContent?: Property.JustifyContent;
+  /** How big a gap between the columns and rows */
+  gap?: Property.Gap;
+  /** How big a gap between the rows */
+  rowGap?: Property.RowGap;
+  /** How big a gap between the columns */
+  columnGap?: Property.ColumnGap;
+  style?: React.CSSProperties;
+}
+
+export interface FlexNonStyleProps
+  extends DOMProps,
+    RefAttributes<FlexElementType> {
+  children?: ReactNode;
+  /** Custom class name for setting specific CSS */
+  className?: string;
+}
+
+export interface FlexProps extends FlexStyleProps, FlexNonStyleProps {}
+
+export type FlexRef = Ref<FlexElementType>;

package/src/components/Grid/Grid.tsx

@@ -1,6 +1,5 @@
-import { Ref, forwardRef, ReactNode, RefAttributes } from "react";
+import { Ref, forwardRef, ReactNode, RefAttributes, CSSProperties } from "react";
 import { DOMProps } from "@react-types/shared";
-import { CSSObject } from "@emotion/react";
 import { ForwardedRefComponent } from "../../types/components";
 
 export type GridElementType = HTMLDivElement;
@@ -52,7 +51,7 @@ const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
       ...rest
     } = props;
 
-    const styles: CSSObject = {
+    const styles: CSSProperties = {
       boxSizing: "border-box",
       display: "grid",
       gridTemplateColumns: `repeat(${columns}, 1fr)`,
@@ -65,7 +64,7 @@ const Grid: ForwardedRefComponent<GridProps, GridElementType> = forwardRef(
       justifyItems,
     };
 
-    return <div css={styles} {...rest} />;
+    return <div style={styles} {...rest} />;
   },
 );
 

package/src/components/Grid/Item.tsx

@@ -1,6 +1,7 @@
-import { Ref, forwardRef, RefAttributes, useEffect, useState } from "react";
+"use client";
+
+import { Ref, forwardRef, RefAttributes, useEffect, useState, CSSProperties } from "react";
 import { DOMProps } from "@react-types/shared";
-import { CSSObject } from "@emotion/react";
 import { useBreakpoint } from "../../hooks";
 import { ForwardedRefComponent } from "../../types/components";
 import { SizeType } from "../../types";
@@ -67,16 +68,17 @@ const GridItem: ForwardedRefComponent<GridItemProps, GridItemElementType> =
     const [responsiveSpan, setResponsiveSpan] = useState();
 
     useEffect(() => {
+      // @ts-expect-error
       setResponsiveSpan(breakpointMap[breakpointSize]);
     }, [breakpointSize, breakpointMap]);
 
-    const styles: CSSObject = {
+    const styles: CSSProperties = {
       gridColumn: responsiveSpan ? `span ${responsiveSpan}` : undefined,
       alignSelf,
       justifySelf,
     };
 
-    return <div css={{ ...styles }} {...rest} />;
+    return <div style={{ ...styles }} {...rest} />;
   });
 
 GridItem.displayName = "GridItem";

package/src/components/Icon/IconFromObject.tsx

@@ -63,7 +63,7 @@ const IconFromObject: ForwardedRefComponent<
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox={`0 0 ${width} ${height}`}
-      css={styles}
+      style={styles}
       ref={ref}
       {...otherProps}
     >

package/src/components/Link/Link.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   forwardRef,
   Ref,

package/src/components/MaskedField/MaskedField.story.mdx

@@ -0,0 +1,58 @@
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { MaskedField, MaskedFieldProps } from "./MaskedField";
+
+<Meta title="Components/MaskedField" component={MaskedField} />
+
+# MaskedField
+
+The `MaskedField` component is used for formatting user input based on available input formatters - SSN (Social Security Number) or FEIN (Federal Employer Identification Number).
+
+## Install
+
+```bash
+yarn add @simplybusiness/mobius
+```
+
+## Usage
+
+```js
+import { MaskedField } from "@simplybusiness/mobius";
+```
+
+## Normal
+
+<Canvas>
+  <Story name="Normal" args={{ label: "MaskedField", pattern: "ssn" }}>
+    {args => <MaskedField {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={MaskedField} />
+
+## Component HTML Structure and Class names
+
+The following HTML is rendered for a MaskedField:
+
+```html
+<div class="mobius/MaskedField">
+  <label class="mobius/Label">{label}</label>
+  <input class="mobius/TextFieldInput" type="text" />
+  <div class="mobius/ErrorMessage">{errors}</div>
+</div>
+```
+
+Class names are augmented with the following flags if true:
+
+- --is-focused
+- --is-disabled
+- --is-hovered
+- --is-selected
+- --is-valid
+- --is-invalid
+- --is-optional
+
+---
+
+[See on Github](https://github.com/simplybusiness/mobius/tree/master/packages/mobius/src/components/MaskedField) | [Give feedback](https://simplybusiness.atlassian.net/CreateIssue.jspa?issuetype=10103&pid=10609) | [Get support](https://simplybusiness.slack.com/archives/C016CC0NDNE)

package/src/components/MaskedField/MaskedField.test.tsx

@@ -0,0 +1,91 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MaskedField } from ".";
+
+describe("MaskedField", () => {
+  const LABEL = "MaskedField";
+
+  describe("given Social Security Number (SSN) pattern", () => {
+    it("should render user input to match the pattern", async () => {
+      const { getByLabelText } = render(
+        <MaskedField label={LABEL} pattern="ssn" />,
+      );
+      const inputField = getByLabelText(LABEL);
+      const inputValue = "1234567890";
+      const expectedUnformatted = "123456789";
+      const expectedFormatted = "123-45-6789";
+
+      await userEvent.tab();
+      await userEvent.type(inputField, inputValue);
+
+      expect(inputField).toHaveValue(expectedUnformatted);
+
+      await userEvent.tab();
+
+      expect(inputField).toHaveValue(expectedFormatted);
+    });
+
+    describe("given a numerical and non-numerical input", () => {
+      it("should only render numerical input", async () => {
+        const { getByLabelText } = render(
+          <MaskedField label={LABEL} pattern="ssn" />,
+        );
+        const inputField = getByLabelText(LABEL);
+        const inputValue = "abc1234567890efg";
+        const expectedUnformatted = "123456789";
+        const expectedFormatted = "123-45-6789";
+
+        await userEvent.tab();
+        await userEvent.type(inputField, inputValue);
+
+        expect(inputField).toHaveValue(expectedUnformatted);
+
+        await userEvent.tab();
+
+        expect(inputField).toHaveValue(expectedFormatted);
+      });
+    });
+  });
+
+  describe("given Federal Employer Identification Number (FEIN) pattern", () => {
+    it("should render user input to match the pattern", async () => {
+      const { getByLabelText } = render(
+        <MaskedField label={LABEL} pattern="fein" />,
+      );
+      const inputField = getByLabelText(LABEL);
+      const inputValue = "1234567890";
+      const expectedUnformatted = "123456789";
+      const expectedFormatted = "12-3456789";
+
+      await userEvent.tab();
+      await userEvent.type(inputField, inputValue);
+
+      expect(inputField).toHaveValue(expectedUnformatted);
+
+      await userEvent.tab();
+
+      expect(inputField).toHaveValue(expectedFormatted);
+    });
+
+    describe("given a numerical and non-numerical input", () => {
+      it("should only render numerical input", async () => {
+        const { getByLabelText } = render(
+          <MaskedField label={LABEL} pattern="fein" />,
+        );
+        const inputField = getByLabelText(LABEL);
+        const inputValue = "abc1234567890efg";
+        const expectedUnformatted = "123456789";
+        const expectedFormatted = "12-3456789";
+
+        await userEvent.tab();
+        await userEvent.type(inputField, inputValue);
+
+        expect(inputField).toHaveValue(expectedUnformatted);
+
+        await userEvent.tab();
+
+        expect(inputField).toHaveValue(expectedFormatted);
+      });
+    });
+  });
+});

package/src/components/MaskedField/MaskedField.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Ref, forwardRef, useState, useEffect } from "react";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+import { TextField, TextFieldElementType, TextFieldProps } from "../TextField";
+import { INPUT_FORMATTERS } from "./inputFormatters";
+
+export type MaskedFieldElementType = HTMLInputElement;
+
+export interface MaskedFieldProps extends TextFieldProps, DOMProps {
+  pattern: "ssn" | "fein";
+}
+
+export type MaskedFieldRef = Ref<MaskedFieldElementType>;
+
+const MaskedField: ForwardedRefComponent<
+  MaskedFieldProps,
+  TextFieldElementType
+> = forwardRef((props: MaskedFieldProps, ref: MaskedFieldRef) => {
+  const { pattern, ...otherProps } = props;
+  const [isEditable, setIsEditable] = useState<boolean>(false);
+  const [unformatted, setUnformatted] = useState<string>("");
+  const [formatted, setFormatted] = useState<string>("");
+  const inputValue = isEditable ? unformatted : formatted;
+
+  const handleChange = (value: string) => {
+    const trimmedValue = INPUT_FORMATTERS[pattern].clean(value);
+    setUnformatted(trimmedValue);
+  };
+
+  const toggleEditable = () => {
+    setIsEditable(!isEditable);
+  };
+
+  useEffect(() => {
+    const formattedValue = INPUT_FORMATTERS[pattern].transform(unformatted);
+    setFormatted(formattedValue);
+  }, [pattern, unformatted]);
+
+  const classes = clsx("mobius", "mobius/MaskedField", otherProps.className);
+
+  return (
+    <TextField
+      onChange={handleChange}
+      value={inputValue}
+      className={classes}
+      ref={ref}
+      onFocus={toggleEditable}
+      onBlur={toggleEditable}
+      {...otherProps}
+    />
+  );
+});
+
+MaskedField.displayName = "MaskedField";
+export { MaskedField };

package/src/components/MaskedField/index.tsx

@@ -0,0 +1 @@
+export * from "./MaskedField";

package/src/components/MaskedField/inputFormatters.ts

@@ -0,0 +1,42 @@
+// SSN - Social Security Number. Format: XXX-XX-XXXX
+// FEIN - Federal Employer Identification Number. Format: XX-XXXXXXX
+
+const SSN_LENGTH = 9;
+const FEIN_LENGTH = 9;
+
+export const INPUT_FORMATTERS = {
+  ssn: {
+    clean: (value: string) => value.replace(/\D/g, "").slice(0, SSN_LENGTH),
+    transform: (value: string) => {
+      const startLength = 3;
+      const middleLength = 2;
+      const start = value.slice(0, 3);
+      const middle = value.slice(3, 5);
+      const end = value.slice(5, SSN_LENGTH);
+
+      if (value.length > startLength + middleLength) {
+        return `${start}-${middle}-${end}`;
+      }
+
+      if (value.length > startLength) {
+        return `${start}-${middle}`;
+      }
+
+      return start;
+    },
+  },
+  fein: {
+    clean: (value: string) => value.replace(/\D/g, "").slice(0, FEIN_LENGTH),
+    transform: (value: string) => {
+      const startLength = 2;
+      const start = value.slice(0, 2);
+      const end = value.slice(2, FEIN_LENGTH);
+
+      if (value.length > startLength) {
+        return `${start}-${end}`;
+      }
+
+      return start;
+    },
+  },
+};

package/src/components/Modal/Modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Children,
   isValidElement,

package/src/components/NumberField/NumberField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Ref, forwardRef, RefAttributes, ReactNode, useRef } from "react";
 import { DOMProps } from "@react-types/shared";
 import {

package/src/components/NumberField/NumberFieldButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useButton } from "@react-aria/button";
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";

package/src/components/NumberField/__snapshots__/NumberField.test.tsx.snap

@@ -37,9 +37,10 @@ exports[`NumberField should match snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mobius mobius/Icon css-jnky18"
+          class="mobius mobius/Icon"
           focusable="false"
           role="img"
+          style="height: 1em; vertical-align: -0.2em; transform-origin: center;"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -58,9 +59,10 @@ exports[`NumberField should match snapshot 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mobius mobius/Icon css-jnky18"
+          class="mobius mobius/Icon"
           focusable="false"
           role="img"
+          style="height: 1em; vertical-align: -0.2em; transform-origin: center;"
           viewBox="0 0 16 16"
           xmlns="http://www.w3.org/2000/svg"
         >

package/src/components/PasswordField/PasswordField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import clsx from "clsx";
 import { forwardRef, useState, useRef } from "react";
 import { mergeRefs } from "../../utils/mergeRefs";

package/src/components/Progress/Progress.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint no-console: "off" */
 import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
 import { DOMProps } from "@react-types/shared";
@@ -118,7 +120,7 @@ const Progress: ForwardedRefComponent<ProgressProps, ProgressElementType> =
           </Label>
         )}
         <div className="mobius/ProgressTrack">
-          <div className="mobius/ProgressBar" css={{ width: barWidth }} />
+          <div className="mobius/ProgressBar" style={{ width: barWidth }} />
         </div>
         {showValueLabel && (
           <Label data-testid="value-label">

package/src/components/Radio/Radio.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, ReactNode, useContext, Ref, RefAttributes } from "react";
 import { useRadio } from "@react-aria/radio";
 import { AriaRadioProps } from "@react-types/radio";
@@ -5,6 +7,7 @@ import { useFocusRing } from "@react-aria/focus";
 import { useHover, HoverProps } from "@react-aria/interactions";
 import { DOMProps } from "@react-types/shared";
 import clsx from "clsx";
+import styled from '@emotion/styled';
 import { RadioContext } from "./RadioContext";
 import { ForwardedRefComponent } from "../../types/components";
 import { ErrorMessage } from "../ErrorMessage";
@@ -25,6 +28,11 @@ export interface RadioProps
 
 export type RadioRef = Ref<RadioElementType>;
 
+const StyledLabel = styled(Label)`
+  display: flex;
+  align-items: center;
+`;
+
 const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
   (props: RadioProps, ref: RadioRef) => {
     const radioContext = useContext(RadioContext);
@@ -83,8 +91,7 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
 
     return (
       <>
-        <Label
-          css={{ display: "flex", alignItems: "center" }}
+        <StyledLabel
           {...hoverProps}
           className={containerClasses}
         >
@@ -105,7 +112,7 @@ const Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(
           ) : (
             <div className="mobius/RadioContent">{label || children}</div>
           )}
-        </Label>
+        </StyledLabel>
         {errorMessage && <ErrorMessage errorMessage={errorMessage} />}
       </>
     );