fix reviews

mParticle · Jan 18, 2024 · 293ba07 · 293ba07
1 parent de807e3
commit 293ba07
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 69 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "printWidth": 100
 }
diff --git a/src/components/data-entry/AutoComplete/AutoComplete.stories.tsx b/src/components/data-entry/AutoComplete/AutoComplete.stories.tsx
@@ -145,7 +145,11 @@ export const ExampleBasic: Story = {
     const getPanelValue = (searchText: string) =>
       !searchText
         ? []
-        : ([mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)] as IAutoCompleteProps['options'])
+        : ([
+            mockVal(searchText),
+            mockVal(searchText, 2),
+            mockVal(searchText, 3),
+          ] as IAutoCompleteProps['options'])
     const onSelect = (data: string) => {
       alert('onSelect:' + data)
     }
@@ -204,7 +208,12 @@ export const ExampleCustomized: Story = {
     return (
       <>
         <ExampleStory title="You could set custom Option label.">
-          <AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here" options={options} />
+          <AutoComplete
+            style={{ width: 200 }}
+            onSearch={handleSearch}
+            placeholder="input here"
+            options={options}
+          />
         </ExampleStory>
       </>
     )
@@ -219,7 +228,11 @@ export const ExampleCustomizeInput: Story = {
       setOptions(
         !value
           ? []
-          : ([{ value }, { value: value + value }, { value: value + value + value }] as IAutoCompleteProps['options']),
+          : ([
+              { value },
+              { value: value + value },
+              { value: value + value + value },
+            ] as IAutoCompleteProps['options']),
       )
     }
 
@@ -233,7 +246,12 @@ export const ExampleCustomizeInput: Story = {
 
     return (
       <ExampleStory title="Customize Input Component">
-        <AutoComplete options={options} style={{ width: 200 }} onSelect={onSelect} onSearch={handleSearch}>
+        <AutoComplete
+          options={options}
+          style={{ width: 200 }}
+          onSelect={onSelect}
+          onSearch={handleSearch}
+        >
           <Input.TextArea
             placeholder="input here"
             className="custom"
@@ -318,7 +336,11 @@ export const ExampleLookupPatternsCertainCategory: Story = {
           title={
             <>
               Demonstration of{' '}
-              <a href="https://ant.design/docs/spec/reaction/#lookup-patterns" target="_blank" rel="noreferrer">
+              <a
+                href="https://ant.design/docs/spec/reaction/#lookup-patterns"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Lookup Patterns: Certain Category
               </a>
               Basic Usage, set options of autocomplete with options property.
@@ -356,7 +378,11 @@ export const ExampleLookupPatternsUnCertainCategory: Story = {
               <Flex justify="space-between">
                 <span>
                   Found {query} on{' '}
-                  <a href={`https://s.taobao.com/search?q=${query}`} target="_blank" rel="noopener noreferrer">
+                  <a
+                    href={`https://s.taobao.com/search?q=${query}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
                     {category}
                   </a>
                 </span>
@@ -380,7 +406,11 @@ export const ExampleLookupPatternsUnCertainCategory: Story = {
           title={
             <>
               Demonstration of{' '}
-              <a href="https://ant.design/docs/spec/reaction#lookup-patterns" target="_blank" rel="noreferrer">
+              <a
+                href="https://ant.design/docs/spec/reaction#lookup-patterns"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Lookup Patterns: Certain Category
               </a>
               Basic Usage, set options of autocomplete with options property.
@@ -413,7 +443,11 @@ export const ExampleStatus: Story = {
     const getPanelValue = (searchText: string) =>
       !searchText
         ? []
-        : ([mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)] as IAutoCompleteProps['options'])
+        : ([
+            mockVal(searchText),
+            mockVal(searchText, 2),
+            mockVal(searchText, 3),
+          ] as IAutoCompleteProps['options'])
 
     return (
       <ExampleStory title="Add status to AutoComplete with status, which could be error or warning.">
@@ -451,7 +485,11 @@ export const ExampleClearButton: Story = {
     const getPanelValue = (searchText: string) =>
       !searchText
         ? []
-        : ([mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)] as IAutoCompleteProps['options'])
+        : ([
+            mockVal(searchText),
+            mockVal(searchText, 2),
+            mockVal(searchText, 3),
+          ] as IAutoCompleteProps['options'])
 
     return (
       <>

diff --git a/src/components/data-entry/Checkbox/Checkbox.stories.tsx b/src/components/data-entry/Checkbox/Checkbox.stories.tsx
@@ -1,30 +1,28 @@
-import { type Meta, type StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Checkbox, Divider } from "src/components";
-import { useState } from "react";
-import { ExampleStory } from "src/utils/ExampleStory";
-import { type CheckboxValueType } from "antd/es/checkbox/Group";
-import { type ICheckboxProps } from "src/components/data-entry/Checkbox/Checkbox";
-import { userEvent } from "@storybook/test";
+import { Checkbox, Divider } from 'src/components'
+import { useState } from 'react'
+import { ExampleStory } from 'src/utils/ExampleStory'
+import { type CheckboxValueType } from 'antd/es/checkbox/Group'
+import { type ICheckboxProps } from 'src/components/data-entry/Checkbox/Checkbox'
+import { userEvent } from '@storybook/test'
 
 const meta: Meta<typeof Checkbox> = {
-  title: "Aquarium/Data Entry/Checkbox",
-  component: (props) => {
-    const [checked, setChecked] = useState<boolean>(
-      props.checked ?? props.defaultChecked ?? false,
-    );
+  title: 'Aquarium/Data Entry/Checkbox',
+  component: props => {
+    const [checked, setChecked] = useState<boolean>(props.checked ?? props.defaultChecked ?? false)
     return (
       <>
-        {" "}
+        {' '}
         <Checkbox
           {...props}
           checked={checked}
-          onChange={(e) => {
-            setChecked(!checked);
+          onChange={e => {
+            setChecked(!checked)
           }}
-        />{" "}
+        />{' '}
       </>
-    );
+    )
   },
 
   args: {
@@ -33,92 +31,76 @@ const meta: Meta<typeof Checkbox> = {
     defaultChecked: false,
     disabled: false,
     indeterminate: false,
-    onChange: (e) => {
-      alert(`checked = ${e.target.checked}`);
+    onChange: e => {
+      alert(`checked = ${e.target.checked}`)
     },
   },
-};
-export default meta;
+}
+export default meta
 
-type Story = StoryObj<typeof Checkbox>;
+type Story = StoryObj<typeof Checkbox>
 
 /*
   Initial story templates generated by AI.
   Customize the stories based on specific requirements.
 */
 
-export const Primary: Story = {};
+export const Primary: Story = {}
 
 export const WithAutoFocus: Story = {
   args: {
     autoFocus: true,
   },
-};
+}
 
 export const DefaultChecked: Story = {
   args: {
     defaultChecked: true,
   },
-};
+}
 
 export const Disabled: Story = {
   args: {
     disabled: true,
   },
-};
+}
 
 export const Indeterminate: Story = {
   args: {
     indeterminate: true,
   },
-};
+}
 
 export const ExampleCheckAll: Story = {
   render: () => {
-    const plainOptions = ["A", "B", "C"];
-    const defaultCheckedList = ["A", "C"];
+    const plainOptions = ['A', 'B', 'C']
+    const defaultCheckedList = ['A', 'C']
 
-    const [checkedList, setCheckedList] =
-      useState<CheckboxValueType[]>(defaultCheckedList);
+    const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(defaultCheckedList)
 
-    const checkAll = plainOptions.length === checkedList.length;
-    const indeterminate =
-      checkedList.length > 0 && checkedList.length < plainOptions.length;
+    const checkAll = plainOptions.length === checkedList.length
+    const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length
 
-    const onCheckAllChange: ICheckboxProps["onChange"] = (e) => {
-      setCheckedList(e.target.checked ? plainOptions : []);
-    };
+    const onCheckAllChange: ICheckboxProps['onChange'] = e => {
+      setCheckedList(e.target.checked ? plainOptions : [])
+    }
 
     return (
       <>
         <ExampleStory title="The `indeterminate` property can help achieve a 'check all' effect.">
-          <Checkbox
-            indeterminate={indeterminate}
-            checked={checkAll}
-            onChange={onCheckAllChange}
-          >
+          <Checkbox indeterminate={indeterminate} checked={checkAll} onChange={onCheckAllChange}>
             Check all
           </Checkbox>
           <Divider />
-          <Checkbox.Group
-            options={plainOptions}
-            value={checkedList}
-            onChange={setCheckedList}
-          />
+          <Checkbox.Group options={plainOptions} value={checkedList} onChange={setCheckedList} />
         </ExampleStory>
       </>
-    );
+    )
   },
 
-  play: async (context) => {
-    expect(
-      context.canvasElement.querySelectorAll(".ant-checkbox-checked").length,
-    ).toBe(2);
-    await userEvent.click(
-      context.canvasElement.querySelector(".ant-checkbox-indeterminate"),
-    );
-    expect(
-      context.canvasElement.querySelectorAll(".ant-checkbox-checked").length,
-    ).toBe(4);
+  play: async context => {
+    expect(context.canvasElement.querySelectorAll('.ant-checkbox-checked').length).toBe(2)
+    await userEvent.click(context.canvasElement.querySelector('.ant-checkbox-indeterminate'))
+    expect(context.canvasElement.querySelectorAll('.ant-checkbox-checked').length).toBe(4)
   },
-};
+}