From 9a712234b1da6cf5c19d77b687282027af94b4de Mon Sep 17 00:00:00 2001 From: Gabriel Tiburcio Date: Wed, 17 Jan 2024 21:04:52 -0300 Subject: [PATCH] Fixes reviews from #3 --- .prettierrc | 7 +- .../AutoComplete/AutoComplete.stories.tsx | 345 +++++++----------- .../feedback/LoadingModal/LoadingModal.tsx | 22 +- src/components/feedback/Message/Message.tsx | 14 +- 4 files changed, 165 insertions(+), 223 deletions(-) diff --git a/.prettierrc b/.prettierrc index 0967ef424..b3ac3751d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1,6 @@ -{} +{ + "semi": false, + "singleQuote": true, + "arrowParens": "avoid", + "printWidth": 120 +} diff --git a/src/components/data-entry/AutoComplete/AutoComplete.stories.tsx b/src/components/data-entry/AutoComplete/AutoComplete.stories.tsx index c78536e88..564c98ecb 100644 --- a/src/components/data-entry/AutoComplete/AutoComplete.stories.tsx +++ b/src/components/data-entry/AutoComplete/AutoComplete.stories.tsx @@ -1,42 +1,36 @@ -import { type IAutoCompleteProps } from "src/components/data-entry/AutoComplete/AutoComplete"; -import { type Meta, type StoryObj } from "@storybook/react"; - -import { faIcons } from "@fortawesome/free-solid-svg-icons"; -import { Icon, Input, Space, AutoComplete, Flex } from "src/components"; - -import { type ISelectProps } from "src/components/data-entry/Select/Select"; -import { ExampleStory } from "src/utils/ExampleStory"; -import { useState } from "react"; +import { type IAutoCompleteProps } from 'src/components/data-entry/AutoComplete/AutoComplete' +import { type Meta, type StoryObj } from '@storybook/react' +import { type ISelectProps } from 'src/components/data-entry/Select/Select' +import { faIcons } from '@fortawesome/free-solid-svg-icons' +import { Icon, Input, Space, AutoComplete, Flex } from 'src/components' +import { ExampleStory } from 'src/utils/ExampleStory' +import { useState } from 'react' const baseOptions = [ - { label: "The quick brown fox jumps over the lazy dog", value: 1 }, - { label: "Waxy and quivering, jocks fumble the pizza", value: 2 }, - { label: "When zombies arrive, quickly fax judge Pat", value: 3 }, - { label: "Pack my red box with five dozen quality jugs", value: 4 }, - { label: "The quick onyx goblin jumps over the lazy dwarf", value: 5 }, -]; + { label: 'The quick brown fox jumps over the lazy dog', value: 1 }, + { label: 'Waxy and quivering, jocks fumble the pizza', value: 2 }, + { label: 'When zombies arrive, quickly fax judge Pat', value: 3 }, + { label: 'Pack my red box with five dozen quality jugs', value: 4 }, + { label: 'The quick onyx goblin jumps over the lazy dwarf', value: 5 }, +] const meta: Meta = { - title: "Aquarium/Data Entry/AutoComplete", - component: (props) => { - const [value, setValue] = useState(""); - const [options, setOptions] = useState([]); + title: 'Aquarium/Data Entry/AutoComplete', + component: props => { + const [value, setValue] = useState('') + const [options, setOptions] = useState([]) const onSearch = (text: string) => { - setOptions(getPanelValue(text)); - }; + setOptions(getPanelValue(text)) + } const onSelect = (value: string) => { - console.log("you selected value: " + value); - }; - - const getPanelValue = ( - searchText: string, - ): IAutoCompleteProps["options"] => { - if (!searchText) return []; - return baseOptions.filter((o) => - o.label.toLowerCase().includes(searchText.toLowerCase()), - ); - }; + console.log('you selected value: ' + value) + } + + const getPanelValue = (searchText: string): IAutoCompleteProps['options'] => { + if (!searchText) return [] + return baseOptions.filter(o => o.label.toLowerCase().includes(searchText.toLowerCase())) + } return ( <> @@ -49,7 +43,7 @@ const meta: Meta = { onChange={setValue} /> - ); + ) }, args: { @@ -65,106 +59,99 @@ const meta: Meta = { popupClassName: undefined, // filterOption: true, open: undefined, - placeholder: "Search AutoComplete", + placeholder: 'Search AutoComplete', status: undefined, style: { width: 200 }, value: undefined, onBlur: () => { - console.log("Blur Event"); + console.log('Blur Event') }, - onChange: (value) => { - alert(`Selected Value: ${value}`); + onChange: value => { + alert(`Selected Value: ${value}`) }, - onDropdownVisibleChange: (open) => { - console.log(`Dropdown Open: ${open}`); + onDropdownVisibleChange: open => { + console.log(`Dropdown Open: ${open}`) }, onFocus: () => { - console.log("Focus Event"); + console.log('Focus Event') }, - onSearch: (value) => { - alert(`Search Value: ${value}`); + onSearch: value => { + alert(`Search Value: ${value}`) }, - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions onSelect: (value, option) => { - alert(`Selected Value: ${value}, Option: ${option.label}`); + alert(`Selected Value: ${value}, Option: ${String(option.label)}`) }, onClear: () => { - alert("Clear Event"); + alert('Clear Event') }, }, argTypes: { status: { - control: "select", - options: ["error", "warning"], + control: 'select', + options: ['error', 'warning'], }, }, -}; -export default meta; +} +export default meta -type Story = StoryObj; +type Story = StoryObj /* Initial story templates generated by AI. Customize the stories based on specific requirements. */ -export const Primary: Story = {}; +export const Primary: Story = {} export const ClearButton: Story = { args: { allowClear: true, }, -}; +} export const Placeholder: Story = { args: { - placeholder: "Custom Placeholder Text", + placeholder: 'Custom Placeholder Text', }, -}; +} export const Disabled: Story = { args: { disabled: true, }, -}; +} export const NotFound: Story = { args: { notFoundContent: <>Custom Not Found Component goes here, }, -}; +} export const Borderless: Story = { args: { bordered: false, }, -}; +} export const ExampleBasic: Story = { render: () => { - const [value, setValue] = useState(""); - const [options, setOptions] = useState([]); - const [anotherOptions, setAnotherOptions] = useState< - IAutoCompleteProps["options"] - >([]); + const [value, setValue] = useState('') + const [options, setOptions] = useState([]) + const [anotherOptions, setAnotherOptions] = useState([]) const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat), - }); + }) 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); - }; + alert('onSelect:' + data) + } const onChange = (data: string) => { - setValue(data); - }; + setValue(data) + } return ( <> @@ -173,8 +160,8 @@ export const ExampleBasic: Story = { options={options} style={{ width: 200 }} onSelect={onSelect} - onSearch={(text) => { - setOptions(getPanelValue(text)); + onSearch={text => { + setOptions(getPanelValue(text)) }} placeholder="input here" /> @@ -185,84 +172,68 @@ export const ExampleBasic: Story = { options={anotherOptions} style={{ width: 200 }} onSelect={onSelect} - onSearch={(text) => { - setAnotherOptions(getPanelValue(text)); + onSearch={text => { + setAnotherOptions(getPanelValue(text)) }} onChange={onChange} placeholder="control mode" /> - ); + ) }, -}; +} export const ExampleCustomized: Story = { render: () => { - const [options, setOptions] = useState< - Array<{ value: string; label: string }> - >([]); + const [options, setOptions] = useState>([]) const handleSearch = (value: string) => { - let res: Array<{ value: string; label: string }>; - if (!value || value.includes("@")) { - res = []; + let res: Array<{ value: string; label: string }> + if (!value || value.includes('@')) { + res = [] } else { - res = ["gmail.com", "163.com", "qq.com"].map((domain) => ({ + res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({ value, label: `${value}@${domain}`, - })); + })) } - setOptions(res); - }; + setOptions(res) + } return ( <> - + - ); + ) }, -}; +} export const ExampleCustomizeInput: Story = { render: () => { - const [options, setOptions] = useState([]); + const [options, setOptions] = useState([]) const handleSearch = (value: string) => { setOptions( !value ? [] - : ([ - { value }, - { value: value + value }, - { value: value + value + value }, - ] as IAutoCompleteProps["options"]), - ); - }; + : ([{ value }, { value: value + value }, { value: value + value + value }] as IAutoCompleteProps['options']), + ) + } const handleKeyPress = (ev: React.KeyboardEvent) => { - console.log("handleKeyPress", ev); - }; + console.log('handleKeyPress', ev) + } const onSelect = (value: string) => { - alert("selected: " + value); - }; + alert('selected: ' + value) + } return ( - + - ); + ) }, -}; +} export const ExampleNonCaseSensitive: Story = { render: () => { @@ -282,23 +253,20 @@ export const ExampleNonCaseSensitive: Story = { ({ + options={baseOptions.map(o => ({ ...o, label: o.label.toUpperCase(), }))} placeholder="try to type `b`" filterOption={(inputValue, option) => - option?.label - ?.toString() - .toUpperCase() - .includes(inputValue.toUpperCase()) ?? false + option?.label?.toString().toUpperCase().includes(inputValue.toUpperCase()) ?? false } /> - ); + ) }, -}; +} export const ExampleLookupPatternsCertainCategory: Story = { render: () => { @@ -306,7 +274,7 @@ export const ExampleLookupPatternsCertainCategory: Story = { {title} - ); + ) const renderItem = (title: string, count: number) => ({ value: title, @@ -327,40 +295,30 @@ export const ExampleLookupPatternsCertainCategory: Story = { ), - }); + }) const options = [ { - label: renderTitle("Libraries"), - options: [ - renderItem("AntDesign", 10000), - renderItem("AntDesign UI", 10600), - ], + label: renderTitle('Libraries'), + options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)], }, { - label: renderTitle("Solutions"), - options: [ - renderItem("AntDesign UI FAQ", 60100), - renderItem("AntDesign FAQ", 30010), - ], + label: renderTitle('Solutions'), + options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)], }, { - label: renderTitle("Articles"), - options: [renderItem("AntDesign design language", 100000)], + label: renderTitle('Articles'), + options: [renderItem('AntDesign design language', 100000)], }, - ]; + ] return ( <> - Demonstration of{" "} - + Demonstration of{' '} + Lookup Patterns: Certain Category Basic Usage, set options of autocomplete with options property. @@ -378,60 +336,51 @@ export const ExampleLookupPatternsCertainCategory: Story = { - ); + ) }, -}; +} export const ExampleLookupPatternsUnCertainCategory: Story = { render: () => { - const getRandomInt = (max: number, min = 0) => - Math.floor(Math.random() * (max - min + 1)) + min; + const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min const searchResult = (query: string) => new Array(getRandomInt(5)) - .join(".") - .split(".") + .join('.') + .split('.') .map((_, idx) => { - const category = `${query}${idx}`; + const category = `${query}${idx}` return { value: category, label: ( - Found {query} on{" "} - + Found {query} on{' '} + {category} {getRandomInt(200, 100)} results ), - }; - }); + } + }) - const [options, setOptions] = useState["options"]>([]); + const [options, setOptions] = useState['options']>([]) const handleSearch = (value: string) => { - setOptions(value !== "" ? searchResult(value) : []); - }; + setOptions(value !== '' ? searchResult(value) : []) + } const onSelect = (value: string) => { - alert("selected: " + value); - }; + alert('selected: ' + value) + } return ( <> - Demonstration of{" "} - + Demonstration of{' '} + Lookup Patterns: Certain Category Basic Usage, set options of autocomplete with options property. @@ -450,36 +399,30 @@ export const ExampleLookupPatternsUnCertainCategory: Story = { - ); + ) }, -}; +} export const ExampleStatus: Story = { render: () => { const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat), - }); - const [options, setOptions] = useState([]); - const [anotherOptions, setAnotherOptions] = useState< - IAutoCompleteProps["options"] - >([]); + }) + const [options, setOptions] = useState([]) + const [anotherOptions, setAnotherOptions] = useState([]) 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 ( - + { - setOptions(getPanelValue(text)); + onSearch={text => { + setOptions(getPanelValue(text)) }} status="error" style={{ width: 200 }} @@ -487,32 +430,28 @@ export const ExampleStatus: Story = { { - setAnotherOptions(getPanelValue(text)); + onSearch={text => { + setAnotherOptions(getPanelValue(text)) }} status="warning" style={{ width: 200 }} /> - ); + ) }, -}; +} export const ExampleClearButton: Story = { render: () => { const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat), - }); - const [options, setOptions] = useState([]); + }) + const [options, setOptions] = useState([]) 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 ( <> @@ -520,8 +459,8 @@ export const ExampleClearButton: Story = { { - setOptions(getPanelValue(text)); + onSearch={text => { + setOptions(getPanelValue(text)) }} placeholder="No clear icon" allowClear={false} @@ -531,14 +470,14 @@ export const ExampleClearButton: Story = { { - setOptions(getPanelValue(text)); + onSearch={text => { + setOptions(getPanelValue(text)) }} placeholder="Customized clear icon" allowClear={{ clearIcon: }} /> - ); + ) }, -}; +} diff --git a/src/components/feedback/LoadingModal/LoadingModal.tsx b/src/components/feedback/LoadingModal/LoadingModal.tsx index a70510794..07e42d5f6 100644 --- a/src/components/feedback/LoadingModal/LoadingModal.tsx +++ b/src/components/feedback/LoadingModal/LoadingModal.tsx @@ -1,19 +1,17 @@ -import { useInitData } from "src/hooks/useInitData"; -import { type IModalProps, Modal } from "src/components/feedback/Modal/Modal"; -import { Skeleton } from "src/components/feedback/Skeleton/Skeleton"; +import { useInitData } from 'src/hooks/useInitData' +import { type IModalProps, Modal } from 'src/components/feedback/Modal/Modal' +import { Skeleton } from 'src/components/feedback/Skeleton/Skeleton' +import { Result } from 'src/components/feedback/Result/Result' -import { Result } from "src/components/feedback/Result/Result"; - -export interface ILoadingModalProps - extends Omit { - fetchData: () => Promise; - children: (initData: Data) => React.ReactNode; +export interface ILoadingModalProps extends Omit { + fetchData: () => Promise + children: (initData: Data) => React.ReactNode } export function LoadingModal(props: ILoadingModalProps) { - const [isInitLoading, isInitError, initData] = useInitData(props.fetchData); + const [isInitLoading, isInitError, initData] = useInitData(props.fetchData) // eslint-disable-next-line no-debugger - if (initData !== undefined) debugger; + if (initData) debugger return ( <> @@ -25,5 +23,5 @@ export function LoadingModal(props: ILoadingModalProps) { {!isInitLoading && !isInitError && props.children(initData)} - ); + ) } diff --git a/src/components/feedback/Message/Message.tsx b/src/components/feedback/Message/Message.tsx index 9746ecd0e..130cdb763 100644 --- a/src/components/feedback/Message/Message.tsx +++ b/src/components/feedback/Message/Message.tsx @@ -1,20 +1,20 @@ -import { message, type MessageArgsProps as AntMessageArgsProps } from "antd"; +import { message, type MessageArgsProps as AntMessageArgsProps } from 'antd' export interface IMessageProps extends AntMessageArgsProps { - children: React.ReactNode; + children: React.ReactNode } export const Message = (props: IMessageProps) => { - const [messageApi, contextHolder] = message.useMessage(); + const [messageApi, contextHolder] = message.useMessage() const open = (): void => { - void messageApi.open({ ...props }); - }; + void messageApi.open({ ...props }) + } return ( <> {contextHolder} {props.children} - ); -}; + ) +}