docs fix: switching themes wipes out state (#1815)

* persist state for all updated demos

* added explanation for using Map

* added explanation for why we need to persist demo state

* added demo props as dependencies to the useEffect hooks

* implement useMemo for use[Component]Props

* moved useEffect hook into use[Component]Props

Co-authored-by: Joe Buono <[email protected]>

Author: joebuono

docs/src/pages/components/alert/demo.tsx

@@ -1,8 +1,9 @@
+import * as React from 'react';
 import { Alert } from '@aws-amplify/ui-react';
-
 import { Demo } from '@/components/Demo';
 import { AlertPropControls } from './AlertPropControls';
 import { useAlertProps } from './useAlertProps';
+import { demoState } from '@/utils/demoState';
 
 const propsToCode = (props) => {
   return (
@@ -20,13 +21,17 @@ const propsToCode = (props) => {
   );
 };
 
+const defaultAlertProps = {
+  isDismissible: false,
+  hasIcon: true,
+  heading: 'Alert heading',
+  body: 'This is the alert message',
+};
+
 export const AlertDemo = () => {
-  const alertProps = useAlertProps({
-    isDismissible: false,
-    hasIcon: true,
-    heading: 'Alert heading',
-    body: 'This is the alert message',
-  });
+  const alertProps = useAlertProps(
+    demoState.get(Alert.displayName) || defaultAlertProps
+  );
 
   return (
     <Demo

docs/src/pages/components/alert/useAlertProps.ts

@@ -1,10 +1,11 @@
-import { AlertProps } from '@aws-amplify/ui-react';
+import { demoState } from '@/utils/demoState';
+import { Alert, AlertProps } from '@aws-amplify/ui-react';
 import * as React from 'react';
 
 import { AlertPropControlsProps } from './AlertPropControls';
 
 interface UseAlertProps {
-  (initialValues: AlertProps & { body: string }): AlertPropControlsProps;
+  (initialValues: AlertProps & { body?: string }): AlertPropControlsProps;
 }
 
 export const useAlertProps: UseAlertProps = (initialValues) => {
@@ -22,16 +23,40 @@ export const useAlertProps: UseAlertProps = (initialValues) => {
   );
   const [body, setBody] = React.useState<string>(initialValues.body);
 
-  return {
-    variation,
-    setVariation,
-    isDismissible,
-    setIsDismissible,
-    hasIcon,
-    setHasIcon,
-    heading,
-    setHeading,
-    body,
-    setBody,
-  };
+  React.useEffect(() => {
+    demoState.set(Alert.displayName, {
+      variation,
+      isDismissible,
+      hasIcon,
+      heading,
+      body,
+    });
+  }, [variation, isDismissible, hasIcon, heading, body]);
+
+  return React.useMemo(
+    () => ({
+      variation,
+      setVariation,
+      isDismissible,
+      setIsDismissible,
+      hasIcon,
+      setHasIcon,
+      heading,
+      setHeading,
+      body,
+      setBody,
+    }),
+    [
+      variation,
+      setVariation,
+      isDismissible,
+      setIsDismissible,
+      hasIcon,
+      setHasIcon,
+      heading,
+      setHeading,
+      body,
+      setBody,
+    ]
+  );
 };

docs/src/pages/components/badge/demo.tsx

@@ -4,6 +4,7 @@ import { Badge } from '@aws-amplify/ui-react';
 import { BadgePropControls } from './BadgePropControls';
 import { useBadgeProps } from './useBadgeProps';
 import { Demo } from '@/components/Demo';
+import { demoState } from '@/utils/demoState';
 
 const propsToCode = (badgeProps) => {
   return (
@@ -18,10 +19,14 @@ const propsToCode = (badgeProps) => {
   );
 };
 
+const defaultBadgeProps = {
+  body: 'Badge',
+};
+
 export const BadgeDemo = () => {
-  const badgeProps = useBadgeProps({
-    body: 'Badge',
-  });
+  const badgeProps = useBadgeProps(
+    demoState.get(Badge.displayName) || defaultBadgeProps
+  );
 
   return (
     <Demo

docs/src/pages/components/badge/useBadgeProps.tsx

@@ -1,10 +1,10 @@
-import { BadgeProps } from '@aws-amplify/ui-react';
+import { Badge, BadgeProps } from '@aws-amplify/ui-react';
 import * as React from 'react';
-
+import { demoState } from '@/utils/demoState';
 import { BadgePropControlsProps } from './BadgePropControls';
 
 interface UseBadgeProps {
-  (initialValues: BadgeProps): BadgePropControlsProps;
+  (initialValues: BadgeProps & { body?: string }): BadgePropControlsProps;
 }
 
 export const useBadgeProps: UseBadgeProps = (initialValues) => {
@@ -16,12 +16,23 @@ export const useBadgeProps: UseBadgeProps = (initialValues) => {
   );
   const [body, setBody] = React.useState<string>(initialValues.body);
 
-  return {
-    variation,
-    setVariation,
-    size,
-    setSize,
-    body,
-    setBody,
-  };
+  React.useEffect(() => {
+    demoState.set(Badge.displayName, {
+      variation,
+      size,
+      body,
+    });
+  }, [variation, size, body]);
+
+  return React.useMemo(
+    () => ({
+      variation,
+      setVariation,
+      size,
+      setSize,
+      body,
+      setBody,
+    }),
+    [variation, setVariation, size, setSize, body, setBody]
+  );
 };

docs/src/pages/components/checkboxfield/demo.tsx

@@ -1,8 +1,9 @@
+import * as React from 'react';
 import { CheckboxField, CheckboxFieldProps, Flex } from '@aws-amplify/ui-react';
-
 import { Demo } from '@/components/Demo';
 import { CheckboxFieldPropControls } from './CheckboxFieldPropControls';
 import { useCheckboxFieldProps } from './useCheckboxFieldProps';
+import { demoState } from '@/utils/demoState';
 
 const propsToCode = ({
   label,
@@ -22,12 +23,18 @@ const propsToCode = ({
   );
 };
 
+const defaultCheckboxFieldProps = {
+  label: 'Subscribe',
+  name: 'subscribe',
+  value: 'yes',
+};
+
 export const CheckboxDemo = () => {
-  const props = useCheckboxFieldProps({
-    label: 'Subscribe',
-    name: 'subscribe',
-    value: 'yes',
-  });
+  const props = useCheckboxFieldProps(
+    (demoState.get(CheckboxField.displayName) as CheckboxFieldProps) ||
+      defaultCheckboxFieldProps
+  );
+
   return (
     <Demo
       code={propsToCode(props)}

docs/src/pages/components/checkboxfield/useCheckboxFieldProps.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
-import { CheckboxFieldProps } from '@aws-amplify/ui-react';
+import { CheckboxFieldProps, CheckboxField } from '@aws-amplify/ui-react';
 
 import { CheckboxFieldPropControlsProps } from './CheckboxFieldPropControls';
+import { demoState } from '@/utils/demoState';
 
 interface UseCheckboxFieldProps {
   (initialValues: CheckboxFieldProps): CheckboxFieldPropControlsProps;
@@ -31,21 +32,51 @@ export const useCheckboxFieldProps: UseCheckboxFieldProps = (initialValues) => {
     CheckboxFieldProps['labelPosition']
   >(initialValues.labelPosition);
 
-  return {
-    checked,
-    children: label,
-    setChecked,
-    isDisabled,
-    setIsDisabled,
-    label,
-    setLabel,
-    labelPosition,
-    setLabelPosition,
-    name,
-    setName,
-    size,
-    setSize,
-    value,
-    setValue,
-  };
+  React.useEffect(() => {
+    demoState.set(CheckboxField.displayName, {
+      checked,
+      isDisabled,
+      label,
+      name,
+      size,
+      value,
+      labelPosition,
+    });
+  }, [checked, isDisabled, label, name, size, value, labelPosition]);
+
+  return React.useMemo(
+    () => ({
+      checked,
+      children: label,
+      setChecked,
+      isDisabled,
+      setIsDisabled,
+      label,
+      setLabel,
+      labelPosition,
+      setLabelPosition,
+      name,
+      setName,
+      size,
+      setSize,
+      value,
+      setValue,
+    }),
+    [
+      checked,
+      setChecked,
+      isDisabled,
+      setIsDisabled,
+      label,
+      setLabel,
+      labelPosition,
+      setLabelPosition,
+      name,
+      setName,
+      size,
+      setSize,
+      value,
+      setValue,
+    ]
+  );
 };

docs/src/pages/components/divider/demo.tsx

@@ -3,6 +3,7 @@ import { Divider, Flex, Text } from '@aws-amplify/ui-react';
 import { DividerPropControls } from './DividerPropControls';
 import { useDividerProps } from './useDividerProps';
 import { Demo } from '@/components/Demo';
+import { demoState } from '@/utils/demoState';
 
 const propsToCode = (props) => {
   return (
@@ -18,10 +19,14 @@ const propsToCode = (props) => {
   );
 };
 
+const defaultDividerProps = {
+  orientation: 'horizontal',
+};
+
 export const DividerDemo = () => {
-  const dividerProps = useDividerProps({
-    orientation: 'horizontal',
-  });
+  const dividerProps = useDividerProps(
+    demoState.get(Divider.displayName) || defaultDividerProps
+  );
   const direction =
     dividerProps.orientation === 'horizontal' ? 'column' : 'row';
 

docs/src/pages/components/divider/useDividerProps.tsx

@@ -1,7 +1,8 @@
-import { DividerOptions } from '@aws-amplify/ui-react';
+import { Divider, DividerOptions } from '@aws-amplify/ui-react';
 import * as React from 'react';
 
 import { DividerPropControlsProps } from './DividerPropControls';
+import { demoState } from '@/utils/demoState';
 
 interface UseDividerProps {
   (initialValues: DividerOptions): DividerPropControlsProps;
@@ -18,12 +19,23 @@ export const useDividerProps: UseDividerProps = (initialValues) => {
     initialValues.label
   );
 
-  return {
-    size,
-    setSize,
-    orientation,
-    setOrientation,
-    label,
-    setLabel,
-  };
+  React.useEffect(() => {
+    demoState.set(Divider.displayName, {
+      size,
+      orientation,
+      label,
+    });
+  }, [size, orientation, label]);
+
+  return React.useMemo(
+    () => ({
+      size,
+      setSize,
+      orientation,
+      setOrientation,
+      label,
+      setLabel,
+    }),
+    [size, setSize, orientation, setOrientation, label, setLabel]
+  );
 };

docs/src/pages/components/expander/demo.tsx

@@ -4,6 +4,7 @@ import { Expander, ExpanderItem } from '@aws-amplify/ui-react';
 import { ExpanderPropControls } from './ExpanderPropControls';
 import { useExpanderProps } from './useExpanderProps';
 import { Demo } from '@/components/Demo';
+import { demoState } from '@/utils/demoState';
 
 const propsToCode = (expanderProps) => {
   return (
@@ -29,11 +30,15 @@ const propsToCode = (expanderProps) => {
   );
 };
 
+const defaultExpanderProps = {
+  type: 'single',
+  isCollapsible: false,
+};
+
 export const ExpanderDemo = () => {
-  const expanderProps = useExpanderProps({
-    type: 'single',
-    isCollapsible: false,
-  });
+  const expanderProps = useExpanderProps(
+    demoState.get(Expander.displayName) || defaultExpanderProps
+  );
 
   return (
     <Demo