From 2b53c8660816e34e34e619904e66ff96d12f9d2d Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Sat, 18 Feb 2023 05:15:49 +0900 Subject: [PATCH 1/6] feat: implement textField component --- .../components/CSSBaseline/CSSBaseline.tsx | 2 + .../components/Icons/CheckIcon/CheckIcon.tsx | 35 ++++---- .../components/TextField/TextField.classes.ts | 16 ++++ .../TextField/TextField.stories.tsx | 28 ++++++ .../components/TextField/TextField.styles.ts | 76 ++++++++++++++++ .../src/components/TextField/TextField.tsx | 87 +++++++++++++++++++ .../src/components/TextField/index.ts | 1 + 7 files changed, 230 insertions(+), 15 deletions(-) create mode 100644 packages/lsd-react/src/components/TextField/TextField.classes.ts create mode 100644 packages/lsd-react/src/components/TextField/TextField.stories.tsx create mode 100644 packages/lsd-react/src/components/TextField/TextField.styles.ts create mode 100644 packages/lsd-react/src/components/TextField/TextField.tsx create mode 100644 packages/lsd-react/src/components/TextField/index.ts diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx index bdc53fa..1f2d353 100644 --- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx +++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx @@ -12,6 +12,7 @@ import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles' import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles' import { defaultThemes, Theme, withTheme } from '../Theme' import { TypographyStyles } from '../Typography/Typography.styles' +import { TextFieldStyles } from '../TextField/TextField.styles' const componentStyles: Array | SerializedStyles> = [ @@ -26,6 +27,7 @@ const componentStyles: Array | SerializedStyles> = IconTagStyles, BreadcrumbStyles, BreadcrumbItemStyles, + TextFieldStyles, ] export const CSSBaseline: React.FC<{ theme?: Theme }> = ({ diff --git a/packages/lsd-react/src/components/Icons/CheckIcon/CheckIcon.tsx b/packages/lsd-react/src/components/Icons/CheckIcon/CheckIcon.tsx index d1a56a0..fd8da9d 100644 --- a/packages/lsd-react/src/components/Icons/CheckIcon/CheckIcon.tsx +++ b/packages/lsd-react/src/components/Icons/CheckIcon/CheckIcon.tsx @@ -1,17 +1,22 @@ import { LsdIcon } from '../LsdIcon' -export const CheckIcon = LsdIcon((props) => ( - - - -)) +export const CheckIcon = LsdIcon( + (props) => ( + + + + ), + { + filled: true, + }, +) diff --git a/packages/lsd-react/src/components/TextField/TextField.classes.ts b/packages/lsd-react/src/components/TextField/TextField.classes.ts new file mode 100644 index 0000000..ab3c2bd --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.classes.ts @@ -0,0 +1,16 @@ +export const textFieldClasses = { + root: `lsd-textField`, + + input: `lsd-textField__input`, + filled: `lsd-textField__icon`, + + supportingText: 'lsd-textField__supporting-text', + supportingTextLarge: 'lsd-textField__supporting-text--large', + supportingTextMedium: 'lsd-textField__supporting-text--medium', + + disabled: `lsd-textField--disabled`, + error: 'lsd-textField--error', + large: `lsd-textField--large`, + medium: `lsd-textField--medium`, + withIcon: `lsd-textField--with-icon`, +} diff --git a/packages/lsd-react/src/components/TextField/TextField.stories.tsx b/packages/lsd-react/src/components/TextField/TextField.stories.tsx new file mode 100644 index 0000000..ac489a7 --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.stories.tsx @@ -0,0 +1,28 @@ +import { Meta, Story } from '@storybook/react' +import { TextField, TextFieldProps } from './TextField' + +export default { + title: 'TextField', + component: TextField, + argTypes: { + size: { + type: { + name: 'enum', + value: ['medium', 'large'], + }, + defaultValue: 'large', + }, + }, +} as Meta + +export const Root: Story = (args) => ( + TextField +) +Root.args = { + size: 'large', + supportingText: 'Supporting text', + disabled: false, + withIcon: false, + error: false, + placeholder: 'Placeholder', +} diff --git a/packages/lsd-react/src/components/TextField/TextField.styles.ts b/packages/lsd-react/src/components/TextField/TextField.styles.ts new file mode 100644 index 0000000..c7bceeb --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.styles.ts @@ -0,0 +1,76 @@ +import { css } from '@emotion/react' +import { textFieldClasses } from './TextField.classes' + +export const TextFieldStyles = css` + .${textFieldClasses.root} { + width: auto; + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + box-sizing: border-box; + display: flex; + align-items: center; + } + + .${textFieldClasses.input} { + border: none; + outline: none; + font-size: 14px; + color: rgb(var(--lsd-text-primary)); + background: none; + width: inherit; + } + + .${textFieldClasses.input}:hover { + outline: none; + } + + .${textFieldClasses.input}::placeholder { + color: rgb(var(--lsd-text-primary)); + opacity: 0.3; + } + + .${textFieldClasses.disabled} { + cursor: default; + opacity: 0.34; + } + + .${textFieldClasses.error} { + text-decoration: line-through; + } + + .${textFieldClasses.supportingText} { + width: fit-content; + font-size: 12px; + line-height: 16px; + } + + .${textFieldClasses.large} { + width: 208px; + height: 40px; + padding: 10px 14px; + } + + .${textFieldClasses.medium} { + width: 188px; + height: 32px; + padding: 6px 12px; + } + + .${textFieldClasses.supportingTextLarge} { + margin: 8px 14px; + } + + .${textFieldClasses.supportingTextMedium} { + margin: 8px 12px; + } + + .${textFieldClasses.withIcon} { + } + + .${textFieldClasses.filled} { + cursor: pointer; + display: flex; + svg path { + --lsd-icon-primary: var(--lsd-icon-primary); + } + } +` diff --git a/packages/lsd-react/src/components/TextField/TextField.tsx b/packages/lsd-react/src/components/TextField/TextField.tsx new file mode 100644 index 0000000..ce4ebd9 --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.tsx @@ -0,0 +1,87 @@ +import clsx from 'clsx' +import React, { useState } from 'react' +import { CheckIcon, CloseIcon, ErrorIcon } from '../Icons' +import { Typography } from '../Typography' +import { textFieldClasses } from './TextField.classes' + +export type TextFieldProps = React.InputHTMLAttributes & { + size?: 'large' | 'medium' + withIcon?: boolean + error?: boolean + supportingText?: string +} + +export const TextField: React.FC & { + classes: typeof textFieldClasses +} = ({ + size = 'large', + withIcon = 'false', + supportingText = 'Supporting text', + error = false, + children, + ...props +}) => { + const [inputValue, setInputValue] = useState('') + + const onChange = (e: React.FormEvent) => { + const newValue = e.currentTarget.value + setInputValue(newValue) + } + + const onCancel = () => { + setInputValue('') + } + + return ( + <> +
+ + {withIcon && error ? ( + + + + ) : withIcon && !inputValue.length ? ( + + + + ) : withIcon && inputValue.length ? ( + + + + ) : null} +
+ {supportingText && ( + + {supportingText} + + )} + + ) +} + +TextField.classes = textFieldClasses diff --git a/packages/lsd-react/src/components/TextField/index.ts b/packages/lsd-react/src/components/TextField/index.ts new file mode 100644 index 0000000..dd7d2ac --- /dev/null +++ b/packages/lsd-react/src/components/TextField/index.ts @@ -0,0 +1 @@ +export * from './TextField' From 146337e8f407ccb34fa52cec9d45ea37d69f3f3a Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 22 Feb 2023 02:48:42 +0900 Subject: [PATCH 2/6] refactor: refactor textfield component --- .../components/TextField/TextField.classes.ts | 5 +- .../components/TextField/TextField.styles.ts | 34 ++++----- .../src/components/TextField/TextField.tsx | 74 ++++++++++--------- 3 files changed, 56 insertions(+), 57 deletions(-) diff --git a/packages/lsd-react/src/components/TextField/TextField.classes.ts b/packages/lsd-react/src/components/TextField/TextField.classes.ts index ab3c2bd..86e4657 100644 --- a/packages/lsd-react/src/components/TextField/TextField.classes.ts +++ b/packages/lsd-react/src/components/TextField/TextField.classes.ts @@ -2,14 +2,13 @@ export const textFieldClasses = { root: `lsd-textField`, input: `lsd-textField__input`, - filled: `lsd-textField__icon`, + icon: `lsd-textField__icon`, supportingText: 'lsd-textField__supporting-text', - supportingTextLarge: 'lsd-textField__supporting-text--large', - supportingTextMedium: 'lsd-textField__supporting-text--medium', disabled: `lsd-textField--disabled`, error: 'lsd-textField--error', + large: `lsd-textField--large`, medium: `lsd-textField--medium`, withIcon: `lsd-textField--with-icon`, diff --git a/packages/lsd-react/src/components/TextField/TextField.styles.ts b/packages/lsd-react/src/components/TextField/TextField.styles.ts index c7bceeb..7cf9003 100644 --- a/packages/lsd-react/src/components/TextField/TextField.styles.ts +++ b/packages/lsd-react/src/components/TextField/TextField.styles.ts @@ -6,17 +6,25 @@ export const TextFieldStyles = css` width: auto; border-bottom: 1px solid rgb(var(--lsd-border-primary)); box-sizing: border-box; - display: flex; align-items: center; } + .${textFieldClasses.root} > div { + display: flex; + justify-content: space-between; + } + + .${textFieldClasses.disabled} { + opacity: 0.34; + } + .${textFieldClasses.input} { border: none; outline: none; font-size: 14px; color: rgb(var(--lsd-text-primary)); background: none; - width: inherit; + width: 100%; } .${textFieldClasses.input}:hover { @@ -28,19 +36,13 @@ export const TextFieldStyles = css` opacity: 0.3; } - .${textFieldClasses.disabled} { - cursor: default; - opacity: 0.34; - } - .${textFieldClasses.error} { text-decoration: line-through; } .${textFieldClasses.supportingText} { width: fit-content; - font-size: 12px; - line-height: 16px; + margin-top: 20px; } .${textFieldClasses.large} { @@ -55,22 +57,12 @@ export const TextFieldStyles = css` padding: 6px 12px; } - .${textFieldClasses.supportingTextLarge} { - margin: 8px 14px; - } - - .${textFieldClasses.supportingTextMedium} { - margin: 8px 12px; - } - .${textFieldClasses.withIcon} { } - .${textFieldClasses.filled} { + .${textFieldClasses.icon} { cursor: pointer; display: flex; - svg path { - --lsd-icon-primary: var(--lsd-icon-primary); - } + align-items: center; } ` diff --git a/packages/lsd-react/src/components/TextField/TextField.tsx b/packages/lsd-react/src/components/TextField/TextField.tsx index ce4ebd9..d0ea0fe 100644 --- a/packages/lsd-react/src/components/TextField/TextField.tsx +++ b/packages/lsd-react/src/components/TextField/TextField.tsx @@ -1,50 +1,62 @@ import clsx from 'clsx' -import React, { useState } from 'react' +import React, { useRef, useState } from 'react' import { CheckIcon, CloseIcon, ErrorIcon } from '../Icons' import { Typography } from '../Typography' import { textFieldClasses } from './TextField.classes' -export type TextFieldProps = React.InputHTMLAttributes & { +export type TextFieldProps = Omit< + React.HTMLAttributes, + 'onChange' | 'value' +> & { size?: 'large' | 'medium' withIcon?: boolean error?: boolean + disabled?: boolean supportingText?: string + value?: string + onChange?: (value: any) => void } export const TextField: React.FC & { classes: typeof textFieldClasses } = ({ size = 'large', - withIcon = 'false', - supportingText = 'Supporting text', + withIcon = false, + supportingText, error = false, children, + value, + onChange, ...props }) => { + const ref = useRef(null) const [inputValue, setInputValue] = useState('') - const onChange = (e: React.FormEvent) => { + const handleChange = (e: React.FormEvent) => { const newValue = e.currentTarget.value + if (onChange) onChange(newValue) setInputValue(newValue) } const onCancel = () => { setInputValue('') + if (typeof onChange !== 'undefined') onChange('') } return ( - <> -
+
+
& { {...props} /> {withIcon && error ? ( - - + + ) : withIcon && !inputValue.length ? ( - + ) : withIcon && inputValue.length ? ( - + ) : null}
{supportingText && ( - - {supportingText} - +
+ + {supportingText} + +
)} - +
) } From 74a54a65752cb52b12c154deb96ebaec1d91ec66 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Wed, 22 Feb 2023 15:21:38 +0330 Subject: [PATCH 3/6] feat: enhance TextField functionality --- .../TextField/TextField.stories.tsx | 2 + .../src/components/TextField/TextField.tsx | 54 +++++++++-------- packages/lsd-react/src/utils/useInput.ts | 58 +++++++++++++++++++ 3 files changed, 86 insertions(+), 28 deletions(-) create mode 100644 packages/lsd-react/src/utils/useInput.ts diff --git a/packages/lsd-react/src/components/TextField/TextField.stories.tsx b/packages/lsd-react/src/components/TextField/TextField.stories.tsx index ac489a7..ca50dd0 100644 --- a/packages/lsd-react/src/components/TextField/TextField.stories.tsx +++ b/packages/lsd-react/src/components/TextField/TextField.stories.tsx @@ -25,4 +25,6 @@ Root.args = { withIcon: false, error: false, placeholder: 'Placeholder', + defaultValue: 'default value', + onChange: undefined, } diff --git a/packages/lsd-react/src/components/TextField/TextField.tsx b/packages/lsd-react/src/components/TextField/TextField.tsx index d0ea0fe..e000255 100644 --- a/packages/lsd-react/src/components/TextField/TextField.tsx +++ b/packages/lsd-react/src/components/TextField/TextField.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx' -import React, { useRef, useState } from 'react' +import React, { useRef } from 'react' +import { useInput } from '../../utils/useInput' import { CheckIcon, CloseIcon, ErrorIcon } from '../Icons' import { Typography } from '../Typography' import { textFieldClasses } from './TextField.classes' @@ -7,15 +8,17 @@ import { textFieldClasses } from './TextField.classes' export type TextFieldProps = Omit< React.HTMLAttributes, 'onChange' | 'value' -> & { - size?: 'large' | 'medium' - withIcon?: boolean - error?: boolean - disabled?: boolean - supportingText?: string - value?: string - onChange?: (value: any) => void -} +> & + Pick, 'onChange'> & { + size?: 'large' | 'medium' + withIcon?: boolean + error?: boolean + disabled?: boolean + supportingText?: string + value?: string + defaultValue?: string + inputProps?: React.InputHTMLAttributes + } export const TextField: React.FC & { classes: typeof textFieldClasses @@ -26,26 +29,18 @@ export const TextField: React.FC & { error = false, children, value, + defaultValue, onChange, + inputProps = {}, ...props }) => { - const ref = useRef(null) - const [inputValue, setInputValue] = useState('') + const ref = useRef(null) + const input = useInput({ defaultValue, value, onChange, ref }) - const handleChange = (e: React.FormEvent) => { - const newValue = e.currentTarget.value - if (onChange) onChange(newValue) - setInputValue(newValue) - } - - const onCancel = () => { - setInputValue('') - if (typeof onChange !== 'undefined') onChange('') - } + const onCancel = () => input.setValue('') return (
& { props.disabled && textFieldClasses.disabled, withIcon && textFieldClasses.withIcon, )} + {...props} >
{withIcon && error ? ( - ) : withIcon && !inputValue.length ? ( + ) : withIcon && !input.filled ? ( - ) : withIcon && inputValue.length ? ( + ) : withIcon && input.filled ? ( diff --git a/packages/lsd-react/src/utils/useInput.ts b/packages/lsd-react/src/utils/useInput.ts new file mode 100644 index 0000000..9a8925e --- /dev/null +++ b/packages/lsd-react/src/utils/useInput.ts @@ -0,0 +1,58 @@ +import React, { useEffect, useState } from 'react' + +export type InputValueType = + React.InputHTMLAttributes['value'] + +export type InputOnChangeType = + React.InputHTMLAttributes['onChange'] + +export type InputProps = { + value?: InputValueType + defaultValue?: InputValueType + onChange?: InputOnChangeType + ref?: React.RefObject +} + +export const useInput = (props: InputProps) => { + const [value, setValue] = useState( + props.value ?? props.defaultValue ?? '', + ) + + const uncontrolled = typeof props.value === 'undefined' + const filled = + typeof value === 'undefined' + ? false + : typeof value === 'string' + ? value.length > 0 + : value.toString().length > 0 + + const onChange: InputOnChangeType = (event) => { + if (uncontrolled) return setValue(event.target.value) + props.onChange && props.onChange(event) + } + + const setter = (value: InputValueType) => { + if (!props.ref?.current) return + + const element = props.ref.current + const event = new Event('input', { bubbles: true }) + + Object.getOwnPropertyDescriptor( + window.HTMLInputElement.prototype, + 'value', + )?.set?.call?.(element, value) + + element.dispatchEvent(event) + } + + useEffect(() => { + !uncontrolled && setValue(props.value) + }, [uncontrolled, props.value]) + + return { + value, + filled, + onChange, + setValue: setter, + } +} From 59fba23e9889bcf98deec1e1dc43f6571a2d4767 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 23 Feb 2023 16:59:22 +0900 Subject: [PATCH 4/6] feat: implement autocomplete component --- .../Autocomplete/Autocomplete.classes.ts | 17 ++ .../Autocomplete/Autocomplete.stories.tsx | 70 ++++++++ .../Autocomplete/Autocomplete.styles.ts | 100 +++++++++++ .../components/Autocomplete/Autocomplete.tsx | 168 ++++++++++++++++++ .../src/components/Autocomplete/index.ts | 1 + .../components/CSSBaseline/CSSBaseline.tsx | 2 + .../components/Icons/CloseIcon/CloseIcon.tsx | 35 ++-- .../Icons/SearchIcon/SearchIcon.tsx | 39 ++-- packages/lsd-react/src/index.ts | 1 + 9 files changed, 401 insertions(+), 32 deletions(-) create mode 100644 packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts create mode 100644 packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx create mode 100644 packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts create mode 100644 packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx create mode 100644 packages/lsd-react/src/components/Autocomplete/index.ts diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts b/packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts new file mode 100644 index 0000000..a335f8e --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.classes.ts @@ -0,0 +1,17 @@ +export const autocompleteClasses = { + root: `lsd-autocomplete`, + + input: `lsd-autocomplete__input`, + icon: `lsd-autocomplete__icon`, + + listBox: `lsd-autocomplete-list-box`, + dropdownItem: `lsd-autocomplete-dropdown-item`, + dropdownItemPlaceholder: `lsd-autocomplete-dropdown-item__placeholder`, + + disabled: `lsd-autocomplete--disabled`, + error: 'lsd-autocomplete--error', + + large: `lsd-autocomplete--large`, + medium: `lsd-autocomplete--medium`, + withIcon: `lsd-autocomplete--with-icon`, +} diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx new file mode 100644 index 0000000..edd5e63 --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx @@ -0,0 +1,70 @@ +import { Meta, Story } from '@storybook/react' +import { Autocomplete, AutocompleteProps } from './Autocomplete' + +export default { + title: 'Autocomplete', + component: Autocomplete, + argTypes: { + size: { + type: { + name: 'enum', + value: ['medium', 'large'], + }, + defaultValue: 'large', + }, + }, +} as Meta + +export const Root: Story = (args) => ( + Autocomplete +) +Root.args = { + size: 'large', + disabled: false, + withIcon: false, + error: false, + placeholder: 'Placeholder', + onChange: undefined, + options: [ + { + value: `1`, + name: `input`, + }, + { + value: `2`, + name: `Input`, + }, + { + value: `3`, + name: `InputValue`, + }, + { + value: `4`, + name: `Input Value`, + }, + { + value: `5`, + name: `inputValue`, + }, + { + value: `6`, + name: `input Value`, + }, + { + value: `7`, + name: `text`, + }, + { + value: `8`, + name: `Text`, + }, + { + value: `9`, + name: `placeholder`, + }, + { + value: `10`, + name: `Placeholder`, + }, + ], +} diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts b/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts new file mode 100644 index 0000000..e9243bf --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts @@ -0,0 +1,100 @@ +import { css } from '@emotion/react' +import { autocompleteClasses } from './Autocomplete.classes' + +export const AutocompleteStyles = css` + .${autocompleteClasses.root} { + width: auto; + border: 1px solid rgb(var(--lsd-border-primary)); + box-sizing: border-box; + align-items: center; + } + + .${autocompleteClasses.root} > div { + display: flex; + justify-content: space-between; + } + + .${autocompleteClasses.disabled} { + opacity: 0.34; + } + + .${autocompleteClasses.input} { + border: none; + outline: none; + font-size: 14px; + color: rgb(var(--lsd-text-primary)); + background: none; + width: 100%; + } + + .${autocompleteClasses.input}:hover { + outline: none; + } + + .${autocompleteClasses.input}::placeholder { + color: rgb(var(--lsd-text-primary)); + opacity: 0.3; + } + + .${autocompleteClasses.error} { + text-decoration: line-through; + } + + .${autocompleteClasses.large} { + width: 208px; + height: 40px; + padding: 10px 14px; + } + + .${autocompleteClasses.medium} { + width: 188px; + height: 32px; + padding: 6px 12px; + } + + .${autocompleteClasses.withIcon} { + } + + .${autocompleteClasses.icon} { + cursor: pointer; + display: flex; + align-items: center; + } + + .${autocompleteClasses.listBox} { + max-height: 400px; + overflow: auto; + border: 1px solid rgb(var(--lsd-border-primary)); + border-top: 0; + + & .${autocompleteClasses.root} { + border: 0; + + &:not(:last-child) { + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + } + } + } + + .${autocompleteClasses.dropdownItem} { + width: 100%; + box-sizing: border-box; + + display: flex; + flex-direction: row; + align-items: center; + + padding: 10px 14px; + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + cursor: pointer; + } + + .${autocompleteClasses.dropdownItem}:last-child { + border: none; + } + + .${autocompleteClasses.dropdownItemPlaceholder} { + opacity: 0.5; + white-space: pre; + } +` diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx b/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx new file mode 100644 index 0000000..f2c5424 --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx @@ -0,0 +1,168 @@ +import clsx from 'clsx' +import React, { useEffect, useRef, useState } from 'react' +import { useInput } from '../../utils/useInput' +import { DropdownOption } from '../Dropdown' +import { CloseIcon, SearchIcon } from '../Icons' +import { ListBox } from '../ListBox' +import { Portal } from '../PortalProvider/Portal' +import { Typography } from '../Typography' +import { autocompleteClasses } from './Autocomplete.classes' + +export type AutocompleteProps = Omit< + React.HTMLAttributes, + 'onChange' | 'value' +> & + Pick, 'onChange'> & { + size?: 'large' | 'medium' + withIcon?: boolean + error?: boolean + disabled?: boolean + placeholder?: string + value?: string + defaultValue?: string + options?: DropdownOption[] + inputProps?: React.InputHTMLAttributes + } + +export const Autocomplete: React.FC & { + classes: typeof autocompleteClasses +} = ({ + size = 'large', + withIcon = false, + error = false, + disabled = false, + children, + value, + defaultValue, + placeholder, + onChange, + options = [], + inputProps = {}, + ...props +}) => { + const ref = useRef(null) + const containerRef = useRef(null) + const input = useInput({ defaultValue, value, onChange, ref }) + + const [open, setOpen] = useState(false) + const [selected, setSelected] = useState('') + const [dropdownOption, setDropdownOption] = useState(options || []) + + const onCancel = () => input.setValue('') + + const handleDropdownClick = (value: string) => { + setOpen(false) + setSelected(value) + input.setValue(value) + } + + useEffect(() => { + const filteredOptions = options.filter( + (option) => + typeof input.value === 'string' && option.name.startsWith(input.value), + ) + if (input.value && filteredOptions.length && input.value !== selected) { + setDropdownOption(filteredOptions) + setOpen(true) + } else setOpen(false) + }, [input.value, setOpen, setDropdownOption]) + + useEffect(() => { + if (disabled) { + setOpen(false) + input.setValue('') + } + }, [disabled]) + + const renderDropdownItem = (option: DropdownOption) => { + if (typeof input.value === 'string') { + const suggestion = option.name.substring( + option.name.indexOf(input.value) + input.value.length, + ) + return ( + <> + + {input.value} + + + {suggestion} + + + ) + } else + return ( + + {option.name} + + ) + } + + return ( +
+
+ + {withIcon && input.value ? ( + + + + ) : withIcon && !input.value ? ( + + + + ) : null} +
+ + setOpen(false)} + className={autocompleteClasses.listBox} + > + {dropdownOption.map((opt: DropdownOption, idx: number) => ( +
handleDropdownClick(opt.name)} + > + {renderDropdownItem(opt)} +
+ ))} + + +
+ ) +} + +Autocomplete.classes = autocompleteClasses diff --git a/packages/lsd-react/src/components/Autocomplete/index.ts b/packages/lsd-react/src/components/Autocomplete/index.ts new file mode 100644 index 0000000..91cb17f --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/index.ts @@ -0,0 +1 @@ +export * from './Autocomplete' diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx index 1f2d353..a372d7b 100644 --- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx +++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx @@ -13,6 +13,7 @@ import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles' import { defaultThemes, Theme, withTheme } from '../Theme' import { TypographyStyles } from '../Typography/Typography.styles' import { TextFieldStyles } from '../TextField/TextField.styles' +import { AutocompleteStyles } from '../Autocomplete/Autocomplete.styles' const componentStyles: Array | SerializedStyles> = [ @@ -28,6 +29,7 @@ const componentStyles: Array | SerializedStyles> = BreadcrumbStyles, BreadcrumbItemStyles, TextFieldStyles, + AutocompleteStyles, ] export const CSSBaseline: React.FC<{ theme?: Theme }> = ({ diff --git a/packages/lsd-react/src/components/Icons/CloseIcon/CloseIcon.tsx b/packages/lsd-react/src/components/Icons/CloseIcon/CloseIcon.tsx index e251855..3cec07e 100644 --- a/packages/lsd-react/src/components/Icons/CloseIcon/CloseIcon.tsx +++ b/packages/lsd-react/src/components/Icons/CloseIcon/CloseIcon.tsx @@ -1,17 +1,22 @@ import { LsdIcon } from '../LsdIcon' -export const CloseIcon = LsdIcon((props) => ( - - - -)) +export const CloseIcon = LsdIcon( + (props) => ( + + + + ), + { + filled: true, + }, +) diff --git a/packages/lsd-react/src/components/Icons/SearchIcon/SearchIcon.tsx b/packages/lsd-react/src/components/Icons/SearchIcon/SearchIcon.tsx index e1db86c..1a25861 100644 --- a/packages/lsd-react/src/components/Icons/SearchIcon/SearchIcon.tsx +++ b/packages/lsd-react/src/components/Icons/SearchIcon/SearchIcon.tsx @@ -1,19 +1,24 @@ import { LsdIcon } from '../LsdIcon' -export const SearchIcon = LsdIcon((props) => ( - - - -)) +export const SearchIcon = LsdIcon( + (props) => ( + + + + ), + { + filled: true, + }, +) diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts index 9891a23..4b51af3 100644 --- a/packages/lsd-react/src/index.ts +++ b/packages/lsd-react/src/index.ts @@ -9,3 +9,4 @@ export * from './components/Tabs' export * from './components/Theme' export * from './components/Breadcrumb' export * from './components/BreadcrumbItem' +export * from './components/Autocomplete' From 61b141c65368e2b3553ea196c5fd18bd40c1f1ea Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 23 Feb 2023 15:19:55 +0330 Subject: [PATCH 5/6] refactor: use DropdownItem component in Autocomplete --- .../Autocomplete/Autocomplete.stories.tsx | 47 +------- .../Autocomplete/Autocomplete.styles.ts | 25 +---- .../components/Autocomplete/Autocomplete.tsx | 102 ++++++++---------- .../components/DropdownItem/DropdownItem.tsx | 8 +- 4 files changed, 56 insertions(+), 126 deletions(-) diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx index edd5e63..1d13e30 100644 --- a/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx @@ -1,6 +1,10 @@ import { Meta, Story } from '@storybook/react' import { Autocomplete, AutocompleteProps } from './Autocomplete' +const list = JSON.parse( + '["BitTorrent","VANIG","BenjiRolls","Status Network Token","GigTricks","Vechain","Insureum","Instant Sponsor Token","IslaCoin","Kcash","Litecoin","BoutsPro","Valorem","Artcoin","Insureum","Zen Protocol","CryptoPennies","MediBond","WishFinance","BlockNet","Big Data Block","Loom Network","Gamedex","Universal Recognition Token","Soarcoin","IZX","aelf","Bitcoin Private","TerraCoin","Coinnec","Revolution VR","SecureCoin","Swarm Fund","Fan360","LakeBanker","16BitCoin","CyberTrust","Actinium","ZestCoin","Monero 0","DACash","Bitswift","Bethereum","Hedge Token","Megastake","HeelCoin","RealChain","LiteBitcoin","SexCoin","Suretly","Internet of People","Rate3","Invictus","WorldPay","iOlite","Cashaa","NovaCoin","U Network","Gimli","Chynge.net","BMChain","Ethereum Premium","BlackShadowCoin","Javvy","Befund","Bancor Network Token","BOONSCoin","Pantos","IDEX Membership","BitStation","Lynx","Encrybit","HighVibe.Network","Credo","HiCoin","RiptideCoin","BitBoss","NXTTY","Presale Ventures","Urbit Data","Xeonbit","Newbium","Mint","Crypto Wine Exchange","HARA","Pioneer Coin","Ethereum Dark","FazzCoin","Fitrova","The EFFECT Network","CargoX","PolicyPal Network","Vechain","President Clinton","GenesysCoin","Trivver","Bitdeal","ShareMeAll","Primas","RoboAdvisorCoin","Liquid","Napoleon X","NOKU Master token","Liqnet","ZeroState","0chain","DarkCash","Sudan Gold Coin","PokerSports","Bankera","Think And Get Rich Coin","ELTCOIN","USOAMIC","XDNA","Autoria","Cosmo","Bigbom","EagsCoin","Stakinglab","SaffronCoin","BnrtxCoin","FoodCoin","PutinCoin","SID Token","Quartz","IOU1","Spend","NEO Gold","High Voltage Coin","Unobtanium","Sandcoin","FrazCoin","Sudan Gold Coin","VeriCoin","Aurora","NANJCOIN","Muse","DuckDuckCoin","Saifu","CryCash","Rustbits","BitFlip","Cpollo","Monkey Project","Coin Analyst","Scanetchain Token","Aditus","LendConnect","FOREXCOIN","Crypto Improvement Fund","Electra","Psilocybin","GameLeagueCoin","Switcheo","BitQuark","BinaryCoin","CyberVein","KATZcoin","BtcEX","ByteCoin","Shping Coin","Liquid","Stacktical","Tezos","ParkByte","Imbrex","Pinmo","Sigil","LePenCoin","OmiseGO Classic","Digix DAO","ShareRing","CryptoCarbon","CDX Network","SONM","PhoenixCoin","Incent","Tokyo Coin","Premium","Unattanium","Biotron","WETH","Rublebit","KRCoin","Aegis","Legends Cryptocurrency","VARcrypt","Witcoin","GlowShares","HOQU","VARcrypt","Linx","BlackholeCoin","NumbersCoin","ZayedCoin","CarVertical","Securosys","ElliotCoin","Zelcash","AcesCoin","EtherInc"]', +) + export default { title: 'Autocomplete', component: Autocomplete, @@ -25,46 +29,5 @@ Root.args = { error: false, placeholder: 'Placeholder', onChange: undefined, - options: [ - { - value: `1`, - name: `input`, - }, - { - value: `2`, - name: `Input`, - }, - { - value: `3`, - name: `InputValue`, - }, - { - value: `4`, - name: `Input Value`, - }, - { - value: `5`, - name: `inputValue`, - }, - { - value: `6`, - name: `input Value`, - }, - { - value: `7`, - name: `text`, - }, - { - value: `8`, - name: `Text`, - }, - { - value: `9`, - name: `placeholder`, - }, - { - value: `10`, - name: `Placeholder`, - }, - ], + options: list, } diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts b/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts index e9243bf..dcfb46e 100644 --- a/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts @@ -66,31 +66,14 @@ export const AutocompleteStyles = css` overflow: auto; border: 1px solid rgb(var(--lsd-border-primary)); border-top: 0; - - & .${autocompleteClasses.root} { - border: 0; - - &:not(:last-child) { - border-bottom: 1px solid rgb(var(--lsd-border-primary)); - } - } } .${autocompleteClasses.dropdownItem} { - width: 100%; - box-sizing: border-box; + border: 0; - display: flex; - flex-direction: row; - align-items: center; - - padding: 10px 14px; - border-bottom: 1px solid rgb(var(--lsd-border-primary)); - cursor: pointer; - } - - .${autocompleteClasses.dropdownItem}:last-child { - border: none; + &:not(:last-child) { + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + } } .${autocompleteClasses.dropdownItemPlaceholder} { diff --git a/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx b/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx index f2c5424..b84c829 100644 --- a/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx @@ -1,11 +1,10 @@ import clsx from 'clsx' -import React, { useEffect, useRef, useState } from 'react' +import React, { useEffect, useMemo, useRef, useState } from 'react' import { useInput } from '../../utils/useInput' -import { DropdownOption } from '../Dropdown' +import { DropdownItem } from '../DropdownItem' import { CloseIcon, SearchIcon } from '../Icons' import { ListBox } from '../ListBox' import { Portal } from '../PortalProvider/Portal' -import { Typography } from '../Typography' import { autocompleteClasses } from './Autocomplete.classes' export type AutocompleteProps = Omit< @@ -20,7 +19,7 @@ export type AutocompleteProps = Omit< placeholder?: string value?: string defaultValue?: string - options?: DropdownOption[] + options?: string[] inputProps?: React.InputHTMLAttributes } @@ -43,10 +42,10 @@ export const Autocomplete: React.FC & { const ref = useRef(null) const containerRef = useRef(null) const input = useInput({ defaultValue, value, onChange, ref }) + const inputValue = input.value as string const [open, setOpen] = useState(false) - const [selected, setSelected] = useState('') - const [dropdownOption, setDropdownOption] = useState(options || []) + const [selected, setSelected] = useState() const onCancel = () => input.setValue('') @@ -56,56 +55,27 @@ export const Autocomplete: React.FC & { input.setValue(value) } - useEffect(() => { - const filteredOptions = options.filter( - (option) => - typeof input.value === 'string' && option.name.startsWith(input.value), - ) - if (input.value && filteredOptions.length && input.value !== selected) { - setDropdownOption(filteredOptions) - setOpen(true) - } else setOpen(false) - }, [input.value, setOpen, setDropdownOption]) + const suggestions = useMemo( + () => + input.filled + ? options + .filter((option) => + new RegExp(`^${input.value}.+`, 'i').test(option), + ) + .map((option) => [ + option, + option.slice(0, inputValue.length), + option.slice(inputValue.length), + ]) + : options, + [input.value, options], + ) useEffect(() => { - if (disabled) { - setOpen(false) - input.setValue('') - } - }, [disabled]) + !selected && input.filled && !open && setOpen(true) + }, [input.value, selected, open]) - const renderDropdownItem = (option: DropdownOption) => { - if (typeof input.value === 'string') { - const suggestion = option.name.substring( - option.name.indexOf(input.value) + input.value.length, - ) - return ( - <> - - {input.value} - - - {suggestion} - - - ) - } else - return ( - - {option.name} - - ) - } + const isOpen = !disabled && open && suggestions.length > 0 && input.filled return (
& { placeholder={placeholder} onChange={input.onChange} disabled={disabled} + onFocus={() => setOpen(true)} className={clsx( inputProps.className, autocompleteClasses.input, @@ -146,18 +117,29 @@ export const Autocomplete: React.FC & { setOpen(false)} className={autocompleteClasses.listBox} > - {dropdownOption.map((opt: DropdownOption, idx: number) => ( -
( + + {opt[1]} + + {opt[2]} + + + } className={autocompleteClasses.dropdownItem} - onClick={() => handleDropdownClick(opt.name)} - > - {renderDropdownItem(opt)} -
+ onClick={() => handleDropdownClick(opt[0])} + onKeyDown={(e) => + e.key === 'Enter' && handleDropdownClick(opt[0]) + } + /> ))} diff --git a/packages/lsd-react/src/components/DropdownItem/DropdownItem.tsx b/packages/lsd-react/src/components/DropdownItem/DropdownItem.tsx index 2a78c13..c104e77 100644 --- a/packages/lsd-react/src/components/DropdownItem/DropdownItem.tsx +++ b/packages/lsd-react/src/components/DropdownItem/DropdownItem.tsx @@ -4,8 +4,11 @@ import { CheckboxFilledIcon, CheckboxIcon, LsdIconProps } from '../Icons' import { Typography } from '../Typography' import { dropdownItemClasses } from './DropdownItem.classes' -export type DropdownItemProps = React.HTMLAttributes & { - label: string +export type DropdownItemProps = Omit< + React.HTMLAttributes, + 'label' +> & { + label: React.ReactNode selected?: boolean withIcon?: boolean disabled?: boolean @@ -32,7 +35,6 @@ export const DropdownItem: React.FC & {
Date: Thu, 23 Feb 2023 15:21:27 +0330 Subject: [PATCH 6/6] feat: add placeholder prop to TextField component --- packages/lsd-react/src/components/TextField/TextField.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/lsd-react/src/components/TextField/TextField.tsx b/packages/lsd-react/src/components/TextField/TextField.tsx index e000255..095744d 100644 --- a/packages/lsd-react/src/components/TextField/TextField.tsx +++ b/packages/lsd-react/src/components/TextField/TextField.tsx @@ -17,6 +17,7 @@ export type TextFieldProps = Omit< supportingText?: string value?: string defaultValue?: string + placeholder?: string inputProps?: React.InputHTMLAttributes } @@ -29,6 +30,7 @@ export const TextField: React.FC & { error = false, children, value, + placeholder, defaultValue, onChange, inputProps = {}, @@ -52,6 +54,7 @@ export const TextField: React.FC & { >