chore(docs): started adding v5-to-v6 documentation page info

packages/codemod/transforms/v5-to-v6/README.md

@@ -132,13 +132,13 @@ build times by switching to `@react-md/core/{{FILE}}`.
   - [ ] scrollIntoView - was removed
   - [ ] search - try to update fuzzy, caseInsensitive. Ignore `useKeyboardSearch`
   - [ ] sizing
-    - AppSizeListener -> AppSizeProvider
-    - `useResizeObserver` to use single argument and only returns a ref callback
-    - `useResizeListener`: `onResize` -> `onUpdate`, `enabled` -> `disabled`, removed `immediate`, flatten `options`
-    - removed `ResizeListener` component
-    - removed `MobileOnly`, `PhoneOnly`, `TabletOnly`, `DesktopOnly`
-    - removed `defaultValue` and `checkImmediately` from `useMediaQuery`
-    - ignore `useOrientation`, `useWidthMediaQuery`, `useAppSizeMedia`
+    - [ ] AppSizeListener -> AppSizeProvider
+    - [x] `useResizeObserver` to use single argument and only returns a ref callback
+    - [x] `useResizeListener`: `onResize` -> `onUpdate`, `enabled` -> `disabled`, removed `immediate`, flatten `options`
+    - [x] removed `ResizeListener` component
+    - [ ] removed `MobileOnly`, `PhoneOnly`, `TabletOnly`, `DesktopOnly`
+    - [ ] removed `defaultValue` and `checkImmediately` from `useMediaQuery`
+    - [x] ignore `useOrientation`, `useWidthMediaQuery`, `useAppSizeMedia`
   - [ ] throttle
   - [ ] types
   - [ ] unitToNumber

packages/codemod/transforms/v5-to-v6/table/__testfixtures__/TableCheckbox.input.tsx

@@ -0,0 +1,10 @@
+import { type ReactElement } from "react";
+import { TableCheckbox } from "react-md";
+
+export function Example(): ReactElement {
+  return (
+    <>
+      <TableCheckbox cellId="some-unique-id" />
+    </>
+  );
+}

packages/codemod/transforms/v5-to-v6/table/__testfixtures__/TableCheckbox.output.tsx

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+import { TableCheckbox } from "react-md";
+
+export function Example(): ReactElement {
+  return (<>
+    <TableCheckbox />
+  </>);
+}

packages/codemod/transforms/v5-to-v6/table/__tests__/update-table-checkbox-props.ts

@@ -0,0 +1,9 @@
+import { defineTest } from "jscodeshift/src/testUtils";
+
+const test = (fixture: string): void => {
+  defineTest(__dirname, "update-table-checkbox-props", null, fixture, {
+    parser: "tsx",
+  });
+};
+
+test("TableCheckbox");

packages/codemod/transforms/v5-to-v6/utils/__testfixtures__/ResizeObserverRefUnknown.input.tsx

@@ -1,7 +1,17 @@
-import { type ReactElement, useCallback, useState } from "react";
+import {
+  type ReactElement,
+  type Ref,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { useResizeObserver } from "react-md";
 
-export default function Example({ nodeRef }): ReactElement {
+interface ExampleProps {
+  nodeRef?: Ref<HTMLDivElement>;
+}
+
+export default function Example({ nodeRef }: ExampleProps): ReactElement {
   const [state, setState] = useState();
   const [ref, refCallback] = useResizeObserver(
     useCallback(
@@ -17,5 +27,11 @@ export default function Example({ nodeRef }): ReactElement {
     }
   );
 
-  return <div ref={ref} />;
+  useEffect(() => {
+    if (ref.current) {
+      // do something
+    }
+  }, []);
+
+  return <div ref={refCallback} />;
 }

packages/codemod/transforms/v5-to-v6/utils/__testfixtures__/ResizeObserverRefUnknown.output.tsx

@@ -1,9 +1,19 @@
-import { type ReactElement, useCallback, useState } from "react";
+import {
+  type ReactElement,
+  type Ref,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { useEnsuredRef, useResizeObserver } from "react-md";
 
-export default function Example({ nodeRef: TEMP_nodeRef }): ReactElement {
+interface ExampleProps {
+  nodeRef?: Ref<HTMLDivElement>;
+}
+
+export default function Example({ nodeRef }: ExampleProps): ReactElement {
   const [state, setState] = useState();
-  const [nodeRef, TEMP_nodeRefCallback] = useEnsuredRef(TEMP_nodeRef);
+  const [ref, nodeRefCallback] = useEnsuredRef(nodeRef);
   const refCallback = useResizeObserver({
     onUpdate: useCallback(
       entry => {
@@ -15,8 +25,14 @@ export default function Example({ nodeRef: TEMP_nodeRef }): ReactElement {
       []
     ),
 
-    ref: TEMP_nodeRefCallback
+    ref: nodeRefCallback
   });
 
-  return <div ref={ref} />;
+  useEffect(() => {
+    if (ref.current) {
+      // do something
+    }
+  }, []);
+
+  return <div ref={refCallback} />;
 }

packages/codemod/transforms/v5-to-v6/utils/__testfixtures__/useToggle.input.tsx

@@ -0,0 +1,14 @@
+import { type ReactElement } from "react";
+import { Button, useToggle } from "react-md";
+
+export default function Example(): ReactElement {
+  const [toggled, enable, disable, toggle] = useToggle();
+  return (
+    <>
+      <Button onClick={enable}>Enable</Button>
+      <Button onClick={disable}>Diable</Button>
+      <Button onClick={toggle}>Toggle</Button>
+      {toggled && <>Hello, world!</>}
+    </>
+  );
+}

packages/codemod/transforms/v5-to-v6/utils/__testfixtures__/useToggle.output.tsx

@@ -0,0 +1,19 @@
+import { type ReactElement } from "react";
+import { Button, useToggle } from "react-md";
+
+export default function Example(): ReactElement {
+  const {
+    toggled: toggled,
+    enable: enable,
+    disable: disable,
+    toggle: toggle
+  } = useToggle();
+  return (
+    <>
+      <Button onClick={enable}>Enable</Button>
+      <Button onClick={disable}>Diable</Button>
+      <Button onClick={toggle}>Toggle</Button>
+      {toggled && <>Hello, world!</>}
+    </>
+  );
+}

packages/codemod/transforms/v5-to-v6/utils/__tests__/update-use-toggle-api.ts

@@ -6,4 +6,5 @@ const test = (fixture: string): void => {
   });
 };
 
+test("useToggle");
 test("UseToggleWorstCase");

packages/codemod/transforms/v5-to-v6/utils/update-use-resize-observer-api.ts

@@ -342,13 +342,13 @@ export default function transformer(
           j.ObjectProperty.check(refOption) &&
           j.Identifier.check(refOption.value)
         ) {
-          const ref = refOption.value;
+          const refOptionIdentifier = refOption.value;
           // if it there is an inline `useRef` or `React.useRef`, don't need
           // to do the useEnsuredRef conversion
           if (
             j(component)
               .find(j.VariableDeclarator, {
-                id: { name: ref.name },
+                id: { name: refOptionIdentifier.name },
                 init: { type: "CallExpression" },
               })
               .find(j.Identifier, { name: "useRef" }).length
@@ -362,18 +362,11 @@ export default function transformer(
             .find(j.Identifier, { name: refOption.value.name })
             .at(0)
             .forEach((identifier) => {
-              const { parent, node } = identifier;
-              const prevName = node.name;
-              const tempName = `TEMP_${prevName}`;
-              const callbackName = `${tempName}Callback`;
-              if (j.ObjectProperty.check(parent?.node)) {
-                parent.node.shorthand = false;
-                parent.node.value = j.identifier(tempName);
-              } else {
-                node.name = tempName;
-              }
-
-              ref.name = callbackName;
+              const { node } = identifier;
+              const callbackName = `${node.name}Callback`;
+
+              const prevName = ref.name;
+              refOptionIdentifier.name = callbackName;
 
               j(variableDeclarator.parent).insertBefore(
                 j.variableDeclaration("const", [
@@ -382,9 +375,7 @@ export default function transformer(
                       j.identifier(prevName),
                       j.identifier(callbackName),
                     ]),
-                    j.callExpression(j.identifier("useEnsuredRef"), [
-                      j.identifier(tempName),
-                    ])
+                    j.callExpression(j.identifier("useEnsuredRef"), [node])
                   ),
                 ])
               );