feat: upgrade framer-motion

lifeomic · Jan 4, 2024 · de8def9 · de8def9
1 parent b4e101a
commit de8def9
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 205 deletions.
diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "clsx": "^1.1.0",
     "deepmerge": "^4.2.2",
     "focus-visible": "^5.1.0",
-    "framer-motion": "^1.10.3",
+    "framer-motion": "^5.6.0",
     "react-day-picker": "^7.4.10",
     "react-focus-lock": "^2.3.1",
     "react-hotkeys": "^2.0.0",

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { Checkbox } from './Checkbox';
@@ -29,147 +30,182 @@ const meta: Meta<typeof Checkbox> = {
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
 
-export const Unchecked: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'A checkbox component for form usage. Under the covers, this is an input element with `type="checkbox"`.',
-      },
-    },
-  },
-  args: {
-    checked: false,
-  },
-};
-
-export const Checked: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The checked state of the checkbox. Normally this is controlled in combination with `onChange` handler.',
-      },
-    },
-  },
-  args: {
-    checked: true,
-  },
-};
-
-export const DisabledChecked: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Applies the disabled state to the element.',
-      },
-    },
-  },
-  args: {
-    disabled: true,
-    checked: true,
-  },
+const Check = ({ label }: { label: string }) => {
+  const [state, setState] = React.useState(false);
+  return (
+    <Checkbox
+      label={`${label}: value = ${state}`}
+      checked={state}
+      onChange={() => {
+        // alert('changed ' + label);
+        setState((value) => !value);
+      }}
+    />
+  );
 };
 
-export const DisabledUnchecked: Story = {
-  args: {
-    disabled: true,
-    checked: false,
-  },
-};
+const list = Array.from(new Array(20));
 
-export const HelpMessage: Story = {
+export const MobileIssue: Story = {
   parameters: {
     docs: {
       description: {
-        story:
-          'Caption, help text to display underneath the element. This should be supplemental text to the label, typically an expanded description of the option.',
+        story: 'issue',
       },
     },
   },
-  args: {
-    helpMessage: 'This is some helper text.',
-  },
-};
-
-export const WithError: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Sets an error style on the element.',
-      },
-    },
-  },
-  args: {
-    hasError: true,
+  render: () => {
+    return (
+      <>
+        {list.map((_, index) => {
+          return <Check key={index} label={String(index)} />;
+        })}
+      </>
+    );
   },
 };
 
-export const WithErrorText: Story = {
-  args: {
-    hasError: true,
-    errorMessage: 'This is an error!',
-  },
-};
-
-export const ShowRequiredLabel: Story = {
-  args: {
-    showRequiredLabel: true,
-  },
-};
-
-export const WithHelpAndErrorText: Story = {
-  args: {
-    hasError: true,
-    errorMessage: 'This is an error!',
-    helpMessage: 'This is some helper text.',
-  },
-};
-
-export const Indeterminate: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Applies the indeterminate state to the element. Primarily used when a parent checkbox has a mix of checked and unchecked children checkboxes.',
-      },
-    },
-  },
-  args: {
-    checked: true,
-    indeterminate: true,
-  },
-};
-
-export const IndeterminateDisabled: Story = {
-  args: {
-    checked: true,
-    disabled: true,
-    indeterminate: true,
-  },
-};
-
-export const NoLabel: Story = {
-  args: {
-    label: '',
-    'aria-label': 'Checkbox with no label',
-  },
-};
-
-export const InverseDark: Story = {
-  parameters: {
-    backgrounds: { default: 'dark' },
-  },
-  args: {
-    color: 'inverse',
-  },
-};
-
-export const InverseBlue: Story = {
-  parameters: {
-    backgrounds: { default: 'blue' },
-  },
-  args: {
-    color: 'inverse',
-  },
-};
+// export const Unchecked: Story = {
+//   parameters: {
+//     docs: {
+//       description: {
+//         story:
+//           'A checkbox component for form usage. Under the covers, this is an input element with `type="checkbox"`.',
+//       },
+//     },
+//   },
+//   args: {
+//     checked: false,
+//   },
+// };
+
+// export const Checked: Story = {
+//   parameters: {
+//     docs: {
+//       description: {
+//         story:
+//           'The checked state of the checkbox. Normally this is controlled in combination with `onChange` handler.',
+//       },
+//     },
+//   },
+//   args: {
+//     checked: true,
+//   },
+// };
+
+// export const DisabledChecked: Story = {
+//   parameters: {
+//     docs: {
+//       description: {
+//         story: 'Applies the disabled state to the element.',
+//       },
+//     },
+//   },
+//   args: {
+//     disabled: true,
+//     checked: true,
+//   },
+// };
+
+// export const DisabledUnchecked: Story = {
+//   args: {
+//     disabled: true,
+//     checked: false,
+//   },
+// };
+
+// export const HelpMessage: Story = {
+//   parameters: {
+//     docs: {
+//       description: {
+//         story:
+//           'Caption, help text to display underneath the element. This should be supplemental text to the label, typically an expanded description of the option.',
+//       },
+//     },
+//   },
+//   args: {
+//     helpMessage: 'This is some helper text.',
+//   },
+// };
+
+// export const WithError: Story = {
+//   parameters: {
+//     docs: {
+//       description: {
+//         story: 'Sets an error style on the element.',
+//       },
+//     },
+//   },
+//   args: {
+//     hasError: true,
+//   },
+// };
+
+// export const WithErrorText: Story = {
+//   args: {
+//     hasError: true,
+//     errorMessage: 'This is an error!',
+//   },
+// };
+
+// export const ShowRequiredLabel: Story = {
+//   args: {
+//     showRequiredLabel: true,
+//   },
+// };
+
+// export const WithHelpAndErrorText: Story = {
+//   args: {
+//     hasError: true,
+//     errorMessage: 'This is an error!',
+//     helpMessage: 'This is some helper text.',
+//   },
+// };
+
+// export const Indeterminate: Story = {
+//   parameters: {
+//     docs: {
+//       description: {
+//         story:
+//           'Applies the indeterminate state to the element. Primarily used when a parent checkbox has a mix of checked and unchecked children checkboxes.',
+//       },
+//     },
+//   },
+//   args: {
+//     checked: true,
+//     indeterminate: true,
+//   },
+// };
+
+// export const IndeterminateDisabled: Story = {
+//   args: {
+//     checked: true,
+//     disabled: true,
+//     indeterminate: true,
+//   },
+// };
+
+// export const NoLabel: Story = {
+//   args: {
+//     label: '',
+//     'aria-label': 'Checkbox with no label',
+//   },
+// };
+
+// export const InverseDark: Story = {
+//   parameters: {
+//     backgrounds: { default: 'dark' },
+//   },
+//   args: {
+//     color: 'inverse',
+//   },
+// };
+
+// export const InverseBlue: Story = {
+//   parameters: {
+//     backgrounds: { default: 'blue' },
+//   },
+//   args: {
+//     color: 'inverse',
+//   },
+// };