Merge branch 'main' into layer-layout-component

.changeset/hip-rice-rush.md

@@ -0,0 +1,8 @@
+---
+"@jpmorganchase/uitk-core": minor
+"@jpmorganchase/uitk-lab": minor
+---
+
+- Move FormField, FormFieldContext to Core
+- Move ValidationState and StateIcon to Core
+- Move `createContext` and `useId` to Core

packages/lab/src/__tests__/__e2e__/form-field/FormField.cy.tsx → packages/core/src/__tests__/__e2e__/form-field/FormField.cy.tsx

@@ -1,4 +1,5 @@
-import { FormField, Input } from "@jpmorganchase/uitk-lab";
+import { FormField } from "@jpmorganchase/uitk-core";
+import { Input } from "@jpmorganchase/uitk-lab";
 
 describe("GIVEN an Input", () => {
   describe("WHEN validation state is warning", () => {

packages/lab/src/__tests__/form-field/FormField.test.tsx → packages/core/src/__tests__/form-field/FormField.test.tsx

@@ -1,9 +1,8 @@
-import { screen, render } from "@testing-library/react";
+import { render } from "@testing-library/react";
 
-import { AriaAnnouncerProvider } from "@jpmorganchase/uitk-core";
+import { AriaAnnouncerProvider } from "../../aria-announcer";
 import { FormField, FormFieldProps } from "../../form-field";
 import { useFormFieldProps } from "../../form-field-context";
-import { Input } from "../../input";
 
 const label = "A Label";
 const labelId = "label-id";
@@ -76,17 +75,6 @@ describe("GIVEN a FormField", () => {
   });
 
   describe("WHEN disabled", () => {
-    test("Then input within should be disabled", () => {
-      render(
-        <FormField label="Disabled form field" disabled>
-          <Input defaultValue="Value" />
-        </FormField>
-      );
-      expect(screen.getByLabelText(/Disabled form field/i)).toHaveAttribute(
-        "disabled"
-      );
-    });
-
     test("THEN inner component should have disabled set from useFormFieldProps.a11yProps", () => {
       const mockFn = jest.fn();
       render(
@@ -125,17 +113,6 @@ describe("GIVEN a FormField", () => {
   });
 
   describe("WHEN readonly", () => {
-    test("Then input within should be readonly", () => {
-      render(
-        <FormField label="Readonly form field" readOnly>
-          <Input defaultValue="Value" />
-        </FormField>
-      );
-      expect(screen.getByLabelText(/Readonly form field/i)).toHaveAttribute(
-        "readonly"
-      );
-    });
-
     test("THEN inner component should have readOnly set from useFormFieldProps.a11yProps", () => {
       const mockFn = jest.fn();
       render(

packages/lab/src/form-field-context/useFormFieldProps.ts → packages/core/src/form-field-context/useFormFieldProps.ts

@@ -1,6 +1,6 @@
 import { useContext } from "react";
+import { useIsomorphicLayoutEffect } from "../utils";
 import { FormFieldContext, FormFieldContextValue } from "./FormFieldContext";
-import { useIsomorphicLayoutEffect } from "@jpmorganchase/uitk-core";
 
 interface useFormFieldPropsProps {
   focusVisible?: boolean;

packages/lab/src/form-field/FormActivationIndicator.tsx → packages/core/src/form-field/FormActivationIndicator.tsx

@@ -1,6 +1,5 @@
 import { SVGAttributes } from "react";
-import { makePrefixer } from "@jpmorganchase/uitk-core";
-
+import { makePrefixer } from "../utils";
 import { FormFieldProps } from "./FormField";
 
 import "./FormActivationIndicator.css";

packages/lab/src/form-field/FormField.tsx → packages/core/src/form-field/FormField.tsx

@@ -1,9 +1,3 @@
-import {
-  makePrefixer,
-  Tooltip,
-  useForkRef,
-  useTooltip,
-} from "@jpmorganchase/uitk-core";
 import cx from "classnames";
 import {
   Dispatch,
@@ -18,7 +12,8 @@ import {
   useState,
 } from "react";
 import { FormFieldContext } from "../form-field-context";
-import { useId } from "../utils";
+import { Tooltip, useTooltip } from "../tooltip";
+import { makePrefixer, useForkRef, useId } from "../utils";
 import { classBase } from "./constant";
 import {
   FormActivationIndicator,

packages/lab/src/form-field/FormLabel.tsx → packages/core/src/form-field/FormLabel.tsx

@@ -1,6 +1,6 @@
 import cx from "classnames";
 import { ElementType, HTMLAttributes } from "react";
-import { makePrefixer } from "@jpmorganchase/uitk-core";
+import { makePrefixer } from "../utils";
 import { FormFieldValidationState } from "./FormField";
 import {
   NecessityIndicator as DefaultNecessityIndicator,

packages/lab/src/form-field/StatusIndicator.tsx → packages/core/src/form-field/StatusIndicator.tsx

@@ -1,10 +1,8 @@
-import { Tooltip, TooltipProps, useTooltip } from "@jpmorganchase/uitk-core";
 import { IconProps } from "@jpmorganchase/uitk-icons";
 import cx from "classnames";
 import { ElementType } from "react";
-
-// TODO: temporarily import from dialog internal before finding a better home
-import { StateIcon } from "../dialog/internal/StateIcon";
+import { StateIcon } from "../state-icon";
+import { Tooltip, TooltipProps, useTooltip } from "../tooltip";
 
 export type StateIndicatorState = "error" | "info" | "warning" | "success";
 

packages/core/src/index.ts

@@ -2,13 +2,16 @@ export * from "./aria-announcer";
 export * from "./breakpoints";
 export * from "./button";
 export * from "./card";
+export * from "./form-field";
+export * from "./form-field-context";
 export * from "./layout";
 export * from "./panel";
 export * from "./popper";
 export * from "./portal";
+export * from "./state-icon";
 export * from "./theme";
-export * from "./tooltip";
 export * from "./toolkit-provider";
+export * from "./tooltip";
 export * from "./utils";
 export * from "./viewport";
 export * from "./window";

packages/lab/src/dialog/internal/StateIcon.tsx → packages/core/src/state-icon/StateIcon.tsx

@@ -1,4 +1,3 @@
-import { makePrefixer } from "@jpmorganchase/uitk-core";
 import {
   ErrorIcon,
   IconProps,
@@ -8,8 +7,8 @@ import {
 } from "@jpmorganchase/uitk-icons";
 import classnames from "classnames";
 import { forwardRef } from "react";
-
-import { State } from "../State";
+import { makePrefixer } from "../utils";
+import { ValidationState } from "./ValidationState";
 
 import "./StateIcon.css";
 
@@ -21,7 +20,7 @@ const icons = {
 };
 
 export interface StateIconProps extends IconProps {
-  state: State;
+  state: ValidationState;
 }
 
 const withBaseName = makePrefixer("uitkStateIcon");

packages/core/src/state-icon/ValidationState.ts

@@ -0,0 +1 @@
+export type ValidationState = "error" | "success" | "warning" | "info";

packages/core/src/state-icon/index.ts

@@ -0,0 +1,2 @@
+export * from "./StateIcon";
+export * from "./ValidationState";

packages/core/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./createContext";
 export * from "./debounce";
 export * from "./inferElementType";
 export * from "./makePrefixer";
@@ -6,6 +7,7 @@ export * from "./polymorphicRef";
 export * from "./setRef";
 export * from "./useControlled";
 export * from "./useForkRef";
+export * from "./useId";
 export * from "./useIsomorphicLayoutEffect";
 export * from "./useResponsiveProp";
 export * from "./marginMiddleware";

packages/core/stories/exampleData.ts

@@ -0,0 +1,64 @@
+export const usStateExampleData = [
+  "Alabama",
+  "Alaska",
+  "Arizona",
+  "Arkansas",
+  "California",
+  "Colorado",
+  "Connecticut",
+  "Delaware",
+  "Florida",
+  "Georgia",
+  "Hawaii",
+  "Idaho",
+  "Illinois",
+  "Indiana",
+  "Iowa",
+  "Kansas",
+  "Kentucky",
+  "Louisiana",
+  "Maine",
+  "Maryland",
+  "Massachusetts",
+  "Michigan",
+  "Minnesota",
+  "Mississippi",
+  "Missouri",
+  "Montana",
+  "Nebraska",
+  "Nevada",
+  "New Hampshire",
+  "New Jersey",
+  "New Mexico",
+  "New York",
+  "North Carolina",
+  "North Dakota",
+  "Ohio",
+  "Oklahoma",
+  "Oregon",
+  "Pennsylvania",
+  "Rhode Island",
+  "South Carolina",
+  "South Dakota",
+  "Tennessee",
+  "Texas",
+  "Utah",
+  "Vermont",
+  "Virginia",
+  "Washington",
+  "West Virginia",
+  "Wisconsin",
+  "Wyoming",
+];
+
+export interface objectOptionType {
+  value: number;
+  text: string;
+  id: number;
+}
+export const objectOptionsExampleData: objectOptionType[] = [
+  { value: 10, text: "A Option", id: 1 },
+  { value: 20, text: "B Option", id: 2 },
+  { value: 30, text: "C Option", id: 3 },
+  { value: 40, text: "D Option", id: 4 },
+];

packages/lab/stories/form-field.doc.stories.mdx → packages/core/stories/form-field.doc.stories.mdx

@@ -1,6 +1,7 @@
 import { Meta, Canvas, ArgsTable } from "@storybook/addon-docs";
 import { ComponentAnatomy } from "docs/components/ComponentAnatomy";
-import { FormField, Input } from "@jpmorganchase/uitk-lab";
+import { FormField } from "@jpmorganchase/uitk-core";
+import { Input } from "@jpmorganchase/uitk-lab";
 import "docs/components/ComponentAnatomy.css";
 import {
   CSSClassTable,
@@ -9,7 +10,7 @@ import {
 } from "css-variable-docgen-components";
 
 <Meta
-  title="Documentation/Lab/Form Field"
+  title="Documentation/Core/Form Field"
   component={FormField}
   parameters={{
     viewMode: "docs",
@@ -21,7 +22,7 @@ import {
 # API
 
 ```
-import { FormField } from "@jpmorganchase/uitk-lab";
+import { FormField } from "@jpmorganchase/uitk-core";
 ```
 
 ## Props

packages/lab/stories/form-field.qa.stories.tsx → packages/core/stories/form-field.qa.stories.tsx

@@ -1,16 +1,16 @@
-import cn from "classnames";
-import { FormField, Input } from "@jpmorganchase/uitk-lab";
+import { FormField } from "@jpmorganchase/uitk-core";
+import { Input } from "@jpmorganchase/uitk-lab";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { AllRenderer, QAContainer } from "docs/components";
+
 import "./form-field.qa.stories.css";
 
 export default {
-  title: "Lab/Form Field/QA",
+  title: "Core/Form Field/QA",
   component: FormField,
 } as ComponentMeta<typeof FormField>;
 
 export const AllExamplesGrid: ComponentStory<typeof FormField> = (props) => {
-  const { className } = props;
   return (
     <AllRenderer>
       <div

packages/lab/stories/form-field.stories.tsx → packages/core/stories/form-field.stories.tsx

@@ -1,16 +1,15 @@
-import { ToolkitProvider } from "@jpmorganchase/uitk-core";
 import {
-  Input,
+  ToolkitProvider,
   FormField,
   FormFieldProps,
-  Dropdown,
-} from "@jpmorganchase/uitk-lab";
+} from "@jpmorganchase/uitk-core";
+import { Input, Dropdown } from "@jpmorganchase/uitk-lab";
 import { useState } from "react";
 import { usStateExampleData } from "./exampleData";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 export default {
-  title: "Lab/Form Field",
+  title: "Core/Form Field",
   component: FormField,
 } as ComponentMeta<typeof FormField>;
 

packages/core/stories/layout/stack-layout.stories.tsx

@@ -1,19 +1,19 @@
 import {
+  Button,
   FLEX_ALIGNMENT_BASE,
-  StackLayout,
+  FormField,
   Panel,
-  Button,
+  StackLayout,
 } from "@jpmorganchase/uitk-core";
+import { SearchIcon } from "@jpmorganchase/uitk-icons";
 import {
-  FormField,
-  Input,
-  Dropdown,
   ButtonBar,
+  Dropdown,
+  Input,
   OrderedButton,
 } from "@jpmorganchase/uitk-lab";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { FlexContent } from "./flex-item.stories";
-import { SearchIcon } from "@jpmorganchase/uitk-icons";
 
 export default {
   title: "Core/Layout/StackLayout",

packages/lab/src/__tests__/dropdown/Dropdown.test.tsx

@@ -1,14 +1,12 @@
-import { FormField } from "../../form-field";
-import { ComponentType, FC } from "react";
-
+import { FormField } from "@jpmorganchase/uitk-core";
 import {
   fireEvent,
   render,
   RenderResult,
   screen,
   within,
 } from "@testing-library/react";
-
+import { ComponentType, FC } from "react";
 import {
   Dropdown,
   DropdownButton,

packages/lab/src/__tests__/input/Input.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, screen, render } from "@testing-library/react";
+import { FormField } from "@jpmorganchase/uitk-core";
 
 import { Input } from "../../input";
 
@@ -244,4 +245,27 @@ describe("GIVEN an Input", () => {
       expect(input.selectionEnd).toEqual(11);
     });
   });
+
+  describe("WHEN used in Formfield", () => {
+    test("and is disabled Then input within should be disabled", () => {
+      render(
+        <FormField label="Disabled form field" disabled>
+          <Input defaultValue="Value" />
+        </FormField>
+      );
+      expect(screen.getByLabelText(/Disabled form field/i)).toHaveAttribute(
+        "disabled"
+      );
+    });
+  });
+  test("and is readonly Then input within should be readonly", () => {
+    render(
+      <FormField label="Readonly form field" readOnly>
+        <Input defaultValue="Value" />
+      </FormField>
+    );
+    expect(screen.getByLabelText(/Readonly form field/i)).toHaveAttribute(
+      "readonly"
+    );
+  });
 });