DSD-1646: Updating NewsletterSignUp, Radio, RadioGroup, and Searchbar to Chakra 2.8 theme API

package.json

@@ -60,6 +60,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "downshift": "6.1.7",
+    "esbuild": "^0.19.10",
     "framer-motion": "10.16.4",
     "react-datepicker": "4.14.1",
     "react-intersection-observer": "9.2.2",
@@ -70,8 +71,8 @@
   },
   "peerDependencies": {
     "@chakra-ui/focus-lock": ">=2.1.0",
-    "@chakra-ui/system": ">=2.6.2",
     "@chakra-ui/react": ">=2.8.1",
+    "@chakra-ui/system": ">=2.6.2",
     "@emotion/react": ">=11.11.1",
     "@emotion/styled": ">=11.11.0",
     "framer-motion": ">=10.16.4",
@@ -123,9 +124,9 @@
     "prettier": "2.4.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
     "react-autosuggest": "10.0.2",
     "react-docgen-typescript-loader": "3.7.2",
+    "react-dom": "18.2.0",
     "react-test-renderer": "18.2.0",
     "remark-gfm": "3.0.1",
     "sass": "1.60.0",

src/components/NewsletterSignup/NewsletterSignup.mdx

@@ -9,10 +9,10 @@ import { changelogData } from "./newsletterSignupChangelogData";
 
 # NewsletterSignup
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `2.1.0`    |
-| Latest            | `2.1.2`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `2.1.0`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/NewsletterSignup/NewsletterSignup.tsx

@@ -4,6 +4,7 @@ import {
   Stack,
   useColorModeValue,
   useMultiStyleConfig,
+  ChakraComponent,
   VStack,
 } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
@@ -70,7 +71,13 @@ const defaultDescriptionText =
  * The NewsletterSignup component provides a way for patrons to register for an
  * email-based newsletter distribution list.
  */
-export const NewsletterSignup: React.FC<any> = chakra(
+export const NewsletterSignup: ChakraComponent<
+  React.ForwardRefExoticComponent<
+    React.PropsWithChildren<NewsletterSignupProps> &
+      React.RefAttributes<HTMLDivElement>
+  >,
+  React.PropsWithChildren<NewsletterSignupProps>
+> = chakra(
   forwardRef<HTMLDivElement, NewsletterSignupProps>(
     (
       {

src/components/NewsletterSignup/newsletterSignupChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Chakra 2.8 update."],
+  },
   {
     date: "2023-11-09",
     version: "2.1.2",

src/components/Radio/Radio.mdx

@@ -2,15 +2,17 @@ import { ArgTypes, Canvas, Description, Meta } from "@storybook/blocks";
 
 import * as RadioStories from "./Radio.stories";
 import Link from "../Link/Link";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import { changelogData } from "./radioChangelogData";
 
 <Meta of={RadioStories} />
 
 # Radio
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.22.0`   |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.22.0`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
@@ -20,6 +22,7 @@ import Link from "../Link/Link";
 - {<Link href="#browser-states" target="_self">Browser States</Link>}
 - {<Link href="#helper-and-error-text" target="_self">Helper and Error Text</Link>}
 - {<Link href="#label-using-jsx-elements" target="_self">Label Using JSX Elements</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -67,3 +70,7 @@ a layout to the label. View the `RadioGroup` documentation for this
 usage.
 
 <Canvas of={RadioStories.LabelUsingJSXElements} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/Radio/Radio.stories.tsx

@@ -1,6 +1,7 @@
 import { Box, HStack, VStack } from "@chakra-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
+import { argsBooleanType } from "../../helpers/storybookUtils";
 
 import Heading from "../Heading/Heading";
 import Radio from "./Radio";
@@ -13,24 +14,14 @@ const meta: Meta<typeof Radio> = {
     className: { control: false },
     id: { control: false },
     isChecked: { control: false },
-    isDisabled: {
-      table: { defaultValue: { summary: false } },
-    },
-    isInvalid: {
-      table: { defaultValue: { summary: false } },
-    },
-    isRequired: {
-      table: { defaultValue: { summary: false } },
-    },
+    isDisabled: argsBooleanType(),
+    isInvalid: argsBooleanType(),
+    isRequired: argsBooleanType(),
     key: { table: { disable: true } },
     onChange: { control: false },
     ref: { table: { disable: true } },
-    showHelperInvalidText: {
-      table: { defaultValue: { summary: true } },
-    },
-    showLabel: {
-      table: { defaultValue: { summary: true } },
-    },
+    showHelperInvalidText: argsBooleanType(true),
+    showLabel: argsBooleanType(true),
   },
 };
 

src/components/Radio/Radio.tsx

@@ -1,6 +1,7 @@
 import {
   Box,
   chakra,
+  ChakraComponent,
   Radio as ChakraRadio,
   useMultiStyleConfig,
   useStyleConfig,
@@ -51,7 +52,12 @@ export interface RadioProps {
   value?: string;
 }
 
-export const Radio: React.FC<any> = chakra(
+export const Radio: ChakraComponent<
+  React.ForwardRefExoticComponent<
+    React.PropsWithChildren<RadioProps> & React.RefAttributes<HTMLInputElement>
+  >,
+  React.PropsWithChildren<RadioProps>
+> = chakra(
   forwardRef<HTMLInputElement, RadioProps>((props, ref?) => {
     const {
       className,

src/components/Radio/radioChangelogData.ts

@@ -0,0 +1,19 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Chakra 2.8 update."],
+  },
+];

src/components/RadioGroup/RadioGroup.mdx

@@ -2,6 +2,8 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
 import * as RadioGroupStories from "./RadioGroup.stories";
 import Link from "../Link/Link";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import { changelogData } from "./radioGroupChangelogData";
 
 <Meta of={RadioGroupStories} />
 
@@ -21,6 +23,7 @@ import Link from "../Link/Link";
 - {<Link href="#browser-states" target="_self">Browser States</Link>}
 - {<Link href="#labels-using-jsx-elements" target="_self">Labels Using JSX Elements</Link>}
 - {<Link href="#getting-radio-input-values" target="_self">Getting Radio Input Values</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -200,3 +203,7 @@ export function RadioGroupUncontrolledExample() {
 />
 
 <Canvas of={RadioGroupStories.UncontrolledExample} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Spacer, VStack } from "@chakra-ui/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createRef } from "react";
 import { withDesign } from "storybook-addon-designs";
+import { argsBooleanType } from "../../helpers/storybookUtils";
 
 import Button from "../Button/Button";
 import ButtonGroup from "../ButtonGroup/ButtonGroup";
@@ -19,33 +20,19 @@ const meta: Meta<typeof RadioGroup> = {
     children: { table: { disable: true } },
     className: { control: false },
     id: { control: false },
-    isDisabled: {
-      table: { defaultValue: { summary: false } },
-    },
-    isFullWidth: {
-      table: { defaultValue: { summary: false } },
-    },
-    isInvalid: {
-      table: { defaultValue: { summary: false } },
-    },
-    isRequired: {
-      table: { defaultValue: { summary: false } },
-    },
+    isDisabled: argsBooleanType(),
+    isFullWidth: argsBooleanType(),
+    isInvalid: argsBooleanType(),
+    isRequired: argsBooleanType(),
     layout: {
       table: { defaultValue: { summary: "column" } },
     },
     key: { table: { disable: true } },
     onChange: { control: false },
     ref: { table: { disable: true } },
-    showHelperInvalidText: {
-      table: { defaultValue: { summary: true } },
-    },
-    showLabel: {
-      table: { defaultValue: { summary: true } },
-    },
-    showRequiredLabel: {
-      table: { defaultValue: { summary: true } },
-    },
+    showHelperInvalidText: argsBooleanType(true),
+    showLabel: argsBooleanType(true),
+    showRequiredLabel: argsBooleanType(true),
   },
 };
 

src/components/RadioGroup/RadioGroup.tsx

@@ -1,5 +1,6 @@
 import {
   chakra,
+  ChakraComponent,
   RadioGroup as ChakraRadioGroup,
   Stack,
   useMultiStyleConfig,
@@ -61,7 +62,13 @@ const noop = () => {};
  * for this form group element and is not needed for individual DS `Radio`
  * components when `RadioGroup` is used.
  */
-export const RadioGroup: React.FC<any> = chakra(
+export const RadioGroup: ChakraComponent<
+  React.ForwardRefExoticComponent<
+    React.PropsWithChildren<RadioGroupProps> &
+      React.RefAttributes<HTMLDivElement>
+  >,
+  React.PropsWithChildren<RadioGroupProps>
+> = chakra(
   forwardRef<HTMLDivElement, React.PropsWithChildren<RadioGroupProps>>(
     (props, ref?) => {
       const {

src/components/RadioGroup/radioGroupChangelogData.tsx

@@ -0,0 +1,19 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Chakra 2.8 update."],
+  },
+];

src/components/SearchBar/SearchBar.mdx

@@ -1,4 +1,6 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
+import { changelogData } from "./searchBarChangelogData";
 
 import * as SearchBarStories from "./SearchBar.stories";
 import Link from "../Link/Link";
@@ -22,6 +24,7 @@ import Link from "../Link/Link";
 - {<Link href="#form-states" target="_self">Form States</Link>}
 - {<Link href="#heading-and-description-text" target="_self">Heading and Description Text</Link>}
 - {<Link href="#textinput-and-onsubmit-values" target="_self">TextInput and onSubmit Values</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -351,3 +354,7 @@ export function SearchBarValueExample() {
 />
 
 <Canvas of={SearchBarStories.SearchBarValueExample} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/SearchBar/SearchBar.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { withDesign } from "storybook-addon-designs";
+import { argsBooleanType } from "../../helpers/storybookUtils";
 
 import SearchBar from "./SearchBar";
 import * as autoSuggestStories from "../Autosuggest/Autosuggest.stories-unresolved";
@@ -18,15 +19,9 @@ const meta: Meta<typeof SearchBar> = {
     },
     className: { control: false },
     id: { control: false },
-    isDisabled: {
-      table: { defaultValue: { summary: false } },
-    },
-    isInvalid: {
-      table: { defaultValue: { summary: false } },
-    },
-    isRequired: {
-      table: { defaultValue: { summary: false } },
-    },
+    isDisabled: argsBooleanType(),
+    isInvalid: argsBooleanType(),
+    isRequired: argsBooleanType(),
     method: { control: false },
     onSubmit: { control: false },
     selectProps: { control: false },

src/components/SearchBar/searchBarChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Chakra 2.8 update."],
+  },
   {
     date: "Prerelease",
     version: "Prerelease",

src/helpers/storybookUtils.ts

@@ -0,0 +1,7 @@
+/**
+ * For usage in Storybook stories to set the default value of a boolean prop.
+ */
+export const argsBooleanType = (defaultValue = false) => ({
+  control: { type: "boolean" },
+  table: { defaultValue: { summary: defaultValue } },
+});