refactor(storybook): drop unnecessary React logic (#9103)

**Related Issue:** N/A

## Summary

This is no longer be needed after recent Storybook updates (see
#8944 and
#9030).

✨🧹✨

Author: jcfranco

package-lock.json

@@ -32,7 +32,6 @@
     "util:sync-linked-package-versions": "tsx support/syncLinkedPackageVersions.ts"
   },
   "devDependencies": {
-    "@babel/preset-react": "7.24.1",
     "@cspell/eslint-plugin": "8.6.1",
     "@esri/calcite-base": "1.2.0",
     "@esri/calcite-colors": "6.1.0",

package.json

@@ -21,12 +21,7 @@ module.exports = {
   babel: async (options) => {
     return {
       ...options,
-      presets: [
-        // we need to set this up to enable custom Storybook doc components
-        // https://storybook.js.org/docs/html/writing-docs/docs-page#with-a-custom-component
-        "@babel/preset-react",
-        "@babel/preset-typescript",
-      ],
+      presets: ["@babel/preset-typescript"],
     };
   },
 

packages/calcite-components/.storybook/main.ts

@@ -1,10 +1,5 @@
-/* @jsx React.createElement */
-
 import { CSS_UTILITY } from "../src/utils/resources";
-
-import { Description, DocsPage } from "@storybook/addon-docs";
 import { withThemeByClassName } from "@storybook/addon-themes";
-import React from "react";
 import { Scale } from "../src/components/interfaces";
 import { html } from "../support/formatting";
 import { Breakpoints } from "../src/utils/responsive";
@@ -40,11 +35,7 @@ interface DeferredAttribute {
   commit: () => Attribute;
 }
 
-export const createComponentHTML = (
-  tagName: string,
-  attributes: Attributes,
-  contentHTML: string = "",
-): string =>
+export const createComponentHTML = (tagName: string, attributes: Attributes, contentHTML: string = ""): string =>
   `<${tagName} ${attributes
     .map(({ name, value }) => {
       const booleanAttr = typeof value === "boolean";
@@ -55,17 +46,7 @@ export const createComponentHTML = (
     })
     .join(" ")}>${contentHTML}</${tagName}>`;
 
-export const globalDocsPage: typeof DocsPage = () => (
-  <React.Fragment>
-    {/* omit <Title /> as Description includes it (from component READMEs) */}
-    <Description />
-  </React.Fragment>
-);
-
-export const filterComponentAttributes = (
-  attributesList: DeferredAttribute[],
-  exceptions: string[],
-): Attributes => {
+export const filterComponentAttributes = (attributesList: DeferredAttribute[], exceptions: string[]): Attributes => {
   if (!exceptions.length) {
     return attributesList.map((attr) => attr.commit());
   }

packages/calcite-components/.storybook/utils.tsx renamed to packages/calcite-components/.storybook/utils.ts

@@ -300,9 +300,8 @@ describe("calcite-slider", () => {
       await page.mouse.up();
       await page.waitForChanges();
 
-      let isThumbFocused = await page.$eval(
-        "calcite-slider",
-        (slider) => slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
+      let isThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
       );
 
       expect(isThumbFocused).toBe(true);
@@ -313,9 +312,8 @@ describe("calcite-slider", () => {
       await page.mouse.up();
       await page.waitForChanges();
 
-      isThumbFocused = await page.$eval(
-        "calcite-slider",
-        (slider) => slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
+      isThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
       );
 
       expect(isThumbFocused).toBe(true);
@@ -326,9 +324,8 @@ describe("calcite-slider", () => {
       await page.mouse.up();
       await page.waitForChanges();
 
-      isThumbFocused = await page.$eval(
-        "calcite-slider",
-        (slider) => slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
+      isThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
       );
 
       expect(isThumbFocused).toBe(true);
@@ -359,9 +356,8 @@ describe("calcite-slider", () => {
       await page.mouse.up();
       await page.waitForChanges();
 
-      const isMinThumbFocused = await page.$eval(
-        "calcite-slider",
-        (slider) => slider.shadowRoot.activeElement?.classList.contains("thumb--minValue"),
+      const isMinThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--minValue"),
       );
 
       expect(await slider.getProperty("minValue")).toBe(0);
@@ -382,9 +378,8 @@ describe("calcite-slider", () => {
       await page.mouse.up();
       await page.waitForChanges();
 
-      const isMaxThumbFocused = await page.$eval(
-        "calcite-slider",
-        (slider) => slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
+      const isMaxThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
       );
 
       expect(await slider.getProperty("minValue")).toBe(0);
@@ -405,9 +400,8 @@ describe("calcite-slider", () => {
       await page.mouse.up();
       await page.waitForChanges();
 
-      const isMaxThumbFocused = await page.$eval(
-        "calcite-slider",
-        (slider) => slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
+      const isMaxThumbFocused = await page.$eval("calcite-slider", (slider) =>
+        slider.shadowRoot.activeElement?.classList.contains("thumb--value"),
       );
 
       expect(await slider.getProperty("minValue")).toBe(0);