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..1d13e30 --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.stories.tsx @@ -0,0 +1,33 @@ +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, + 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: list, +} 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..dcfb46e --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.styles.ts @@ -0,0 +1,83 @@ +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.dropdownItem} { + border: 0; + + &:not(:last-child) { + border-bottom: 1px solid rgb(var(--lsd-border-primary)); + } + } + + .${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..b84c829 --- /dev/null +++ b/packages/lsd-react/src/components/Autocomplete/Autocomplete.tsx @@ -0,0 +1,150 @@ +import clsx from 'clsx' +import React, { useEffect, useMemo, useRef, useState } from 'react' +import { useInput } from '../../utils/useInput' +import { DropdownItem } from '../DropdownItem' +import { CloseIcon, SearchIcon } from '../Icons' +import { ListBox } from '../ListBox' +import { Portal } from '../PortalProvider/Portal' +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?: string[] + 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 inputValue = input.value as string + + const [open, setOpen] = useState(false) + const [selected, setSelected] = useState() + + const onCancel = () => input.setValue('') + + const handleDropdownClick = (value: string) => { + setOpen(false) + setSelected(value) + input.setValue(value) + } + + 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(() => { + !selected && input.filled && !open && setOpen(true) + }, [input.value, selected, open]) + + const isOpen = !disabled && open && suggestions.length > 0 && input.filled + + return ( +
+
+ setOpen(true)} + className={clsx( + inputProps.className, + autocompleteClasses.input, + error && autocompleteClasses.error, + )} + /> + {withIcon && input.value ? ( + + + + ) : withIcon && !input.value ? ( + + + + ) : null} +
+ + setOpen(false)} + className={autocompleteClasses.listBox} + > + {suggestions.map((opt, idx: number) => ( + + {opt[1]} + + {opt[2]} + + + } + className={autocompleteClasses.dropdownItem} + onClick={() => handleDropdownClick(opt[0])} + onKeyDown={(e) => + e.key === 'Enter' && handleDropdownClick(opt[0]) + } + /> + ))} + + +
+ ) +} + +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/Button/Button.classes.ts b/packages/lsd-react/src/components/Button/Button.classes.ts index f27fa6e..3852aa7 100644 --- a/packages/lsd-react/src/components/Button/Button.classes.ts +++ b/packages/lsd-react/src/components/Button/Button.classes.ts @@ -6,6 +6,8 @@ export const buttonClasses = { large: `${LSD_NAMESPACE}--large`, medium: `${LSD_NAMESPACE}--medium`, small: `${LSD_NAMESPACE}--small`, + withIcon: `${LSD_NAMESPACE}--with-icon`, text: `${LSD_NAMESPACE}-button__text`, + icon: `${LSD_NAMESPACE}-button__icon`, } diff --git a/packages/lsd-react/src/components/Button/Button.stories.tsx b/packages/lsd-react/src/components/Button/Button.stories.tsx index d834efa..17d8977 100644 --- a/packages/lsd-react/src/components/Button/Button.stories.tsx +++ b/packages/lsd-react/src/components/Button/Button.stories.tsx @@ -1,14 +1,42 @@ import { Meta, Story } from '@storybook/react' +import { useStorybookIconComponent } from '../../utils/storybook.utils' import { Button, ButtonProps } from './Button' export default { title: 'Button', component: Button, + argTypes: { + size: { + type: { + name: 'enum', + value: ['small', 'medium', 'large'], + }, + defaultValue: 'large', + }, + icon: { + type: { + name: 'enum', + value: useStorybookIconComponent.options, + }, + }, + }, } as Meta -export const Root: Story = (args) => ( - -) +export const Root: Story = ({ + icon, + ...args +}) => { + const IconComponent = useStorybookIconComponent(icon) + return ( + + ) +} + Root.args = { disabled: false, } diff --git a/packages/lsd-react/src/components/Button/Button.styles.ts b/packages/lsd-react/src/components/Button/Button.styles.ts index df6e2aa..ce56b9d 100644 --- a/packages/lsd-react/src/components/Button/Button.styles.ts +++ b/packages/lsd-react/src/components/Button/Button.styles.ts @@ -22,6 +22,7 @@ export const ButtonStyles = css` } .${buttonClasses.medium} { + padding: 6px, 24px; } .${buttonClasses.small} { @@ -35,4 +36,33 @@ export const ButtonStyles = css` } } } + + .${buttonClasses.withIcon} { + display: flex; + } + + .${buttonClasses.icon} { + display: flex; + } + + .${buttonClasses.large}.${buttonClasses.withIcon} { + padding: 10px 14px 10px 18px; + .${buttonClasses.icon} { + margin-left: 18px; + } + } + + .${buttonClasses.medium}.${buttonClasses.withIcon} { + padding: 6px 12px 6px 14px; + .${buttonClasses.icon} { + margin-left: 14px; + } + } + + .${buttonClasses.small}.${buttonClasses.withIcon} { + padding: 6px 10px 6px 12px; + .${buttonClasses.icon} { + margin-left: 10px; + } + } ` diff --git a/packages/lsd-react/src/components/Button/Button.tsx b/packages/lsd-react/src/components/Button/Button.tsx index deb9685..d6bc10f 100644 --- a/packages/lsd-react/src/components/Button/Button.tsx +++ b/packages/lsd-react/src/components/Button/Button.tsx @@ -4,11 +4,12 @@ import { buttonClasses } from './Button.classes' export type ButtonProps = React.ButtonHTMLAttributes & { size?: 'large' | 'medium' | 'small' + icon: React.ReactNode } export const Button: React.FC & { classes: typeof buttonClasses -} = ({ size = 'medium', children, ...props }) => { +} = ({ size = 'medium', icon, children, ...props }) => { return ( <> ) diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx index 6f348db..f36c9e3 100644 --- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx +++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx @@ -1,24 +1,31 @@ import { Global, SerializedStyles } from '@emotion/react' import React, { useMemo } from 'react' -import { ButtonStyles } from '../Button/Button.styles' -import { DropdownStyles } from '../Dropdown/Dropdown.styles' -import { DropdownItemStyles } from '../DropdownItem/DropdownItem.styles' -import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles' -import { IconTagStyles } from '../IconTag/IconTag.styles' -import { ListBoxStyles } from '../ListBox/ListBox.styles' -import { TabItemStyles } from '../TabItem/TabItem.styles' -import { TabsStyles } from '../Tabs/Tabs.styles' +import { AutocompleteStyles } from '../Autocomplete/Autocomplete.styles' import { BreadcrumbStyles } from '../Breadcrumb/Breadcrumb.styles' import { BreadcrumbItemStyles } from '../BreadcrumbItem/BreadcrumbItem.styles' +import { ButtonStyles } from '../Button/Button.styles' +import { CardStyles } from '../Card/Card.styles' +import { CardBodyStyles } from '../CardBody/CardBody.styles' +import { CardHeaderStyles } from '../CardHeader/CardHeader.styles' +import { CollapseStyles } from '../Collapse/Collapse.styles' +import { CollapseHeaderStyles } from '../CollapseHeader/CollapseHeader.styles' +import { DropdownStyles } from '../Dropdown/Dropdown.styles' +import { DropdownItemStyles } from '../DropdownItem/DropdownItem.styles' +import { IconButtonStyles } from '../IconButton/IconButton.styles' +import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles' +import { ListBoxStyles } from '../ListBox/ListBox.styles' +import { QuoteStyles } from '../Quote/Quote.styles' +import { TabItemStyles } from '../TabItem/TabItem.styles' +import { TabsStyles } from '../Tabs/Tabs.styles' +import { TagStyles } from '../Tag/Tag.styles' +import { TextFieldStyles } from '../TextField/TextField.styles' import { defaultThemes, Theme, withTheme } from '../Theme' import { TypographyStyles } from '../Typography/Typography.styles' -import { CardStyles } from '../Card/Card.styles' -import { CardHeaderStyles } from '../CardHeader/CardHeader.styles' -import { CardBodyStyles } from '../CardBody/CardBody.styles' const componentStyles: Array | SerializedStyles> = [ ButtonStyles, + IconButtonStyles, TypographyStyles, LsdIconStyles, TabItemStyles, @@ -26,12 +33,17 @@ const componentStyles: Array | SerializedStyles> = ListBoxStyles, DropdownStyles, DropdownItemStyles, - IconTagStyles, BreadcrumbStyles, BreadcrumbItemStyles, CardStyles, CardHeaderStyles, CardBodyStyles, + TagStyles, + TextFieldStyles, + AutocompleteStyles, + QuoteStyles, + CollapseStyles, + CollapseHeaderStyles, ] export const CSSBaseline: React.FC<{ theme?: Theme }> = ({ diff --git a/packages/lsd-react/src/components/Collapse/Collapse.classes.ts b/packages/lsd-react/src/components/Collapse/Collapse.classes.ts new file mode 100644 index 0000000..7c959d1 --- /dev/null +++ b/packages/lsd-react/src/components/Collapse/Collapse.classes.ts @@ -0,0 +1,8 @@ +export const collapseClasses = { + root: `lsd-collapse`, + + content: `lsd-collapse-content`, + + open: 'lsd-collapse--open-item', + disabled: 'lsd-collapse--disabled', +} diff --git a/packages/lsd-react/src/components/Collapse/Collapse.stories.tsx b/packages/lsd-react/src/components/Collapse/Collapse.stories.tsx new file mode 100644 index 0000000..39ebd35 --- /dev/null +++ b/packages/lsd-react/src/components/Collapse/Collapse.stories.tsx @@ -0,0 +1,34 @@ +import { Meta, Story } from '@storybook/react' +import { Typography } from '../Typography' +import { Collapse, CollapseProps } from './Collapse' + +export default { + title: 'Collapse', + component: Collapse, + argTypes: { + size: { + type: { + name: 'enum', + value: ['small', 'medium', 'large'], + }, + }, + }, +} as Meta + +export const Root: Story = (args) => ( +
+ +
+ + Slot component + +
+ +
+) + +Root.args = { + size: 'large', + label: 'Title', + disabled: false, +} diff --git a/packages/lsd-react/src/components/Collapse/Collapse.styles.ts b/packages/lsd-react/src/components/Collapse/Collapse.styles.ts new file mode 100644 index 0000000..7c542ff --- /dev/null +++ b/packages/lsd-react/src/components/Collapse/Collapse.styles.ts @@ -0,0 +1,20 @@ +import { css } from '@emotion/react' +import { collapseClasses } from './Collapse.classes' + +export const CollapseStyles = css` + .${collapseClasses.root} { + box-sizing: border-box; + display: flex; + flex-direction: column; + } + + .${collapseClasses.open} { + .${collapseClasses.content} { + border-top: 1px solid transparent; + } + } + + .${collapseClasses.content} { + border: 1px solid rgb(var(--lsd-border-primary)); + } +` diff --git a/packages/lsd-react/src/components/Collapse/Collapse.tsx b/packages/lsd-react/src/components/Collapse/Collapse.tsx new file mode 100644 index 0000000..f8be205 --- /dev/null +++ b/packages/lsd-react/src/components/Collapse/Collapse.tsx @@ -0,0 +1,58 @@ +import clsx from 'clsx' +import React, { useEffect, useRef, useState } from 'react' +import { CollapseHeader } from '../CollapseHeader' +import { collapseClasses } from './Collapse.classes' + +export type CollapseProps = Omit< + React.HTMLAttributes, + 'label' +> & { + label: string + disabled?: boolean + size?: 'small' | 'medium' | 'large' + open?: boolean + onChange?: (open: boolean) => void +} + +export const Collapse: React.FC & { + classes: typeof collapseClasses +} = ({ label, disabled = false, size = 'large', children, ...props }) => { + const ref = useRef(null) + const [open, setOpen] = useState(props.open ?? false) + + const handleChange = (value: boolean) => { + if (typeof props.open === 'undefined') return setOpen(value) + props.onChange && props.onChange(value) + } + + const onTrigger = () => !disabled && handleChange(!open) + + useEffect(() => { + disabled && open && handleChange(false) + }, [disabled, open, handleChange]) + + return ( +
+ + {open &&
{children}
} +
+ ) +} + +Collapse.classes = collapseClasses diff --git a/packages/lsd-react/src/components/Collapse/index.ts b/packages/lsd-react/src/components/Collapse/index.ts new file mode 100644 index 0000000..eeb7c6c --- /dev/null +++ b/packages/lsd-react/src/components/Collapse/index.ts @@ -0,0 +1 @@ +export * from './Collapse' diff --git a/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.classes.ts b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.classes.ts new file mode 100644 index 0000000..d61d905 --- /dev/null +++ b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.classes.ts @@ -0,0 +1,16 @@ +export const collapseHeaderClasses = { + root: `lsd-collapse-header`, + + trigger: `lsd-collapse-header-trigger`, + triggerLabel: `lsd-collapse-header-trigger__label`, + triggerIcons: `lsd-collapse-header-trigger-icons`, + triggerIcon: `lsd-collapse-header-trigger-icons__icon`, + triggerMenuIcon: `lsd-collapse-header-trigger-icons__menu-icon`, + + open: 'lsd-collapse-header--open', + disabled: 'lsd-collapse-header--disabled', + + small: `lsd-collapse-header--small`, + medium: `lsd-collapse-header--medium`, + large: `lsd-collapse-header--large`, +} diff --git a/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.stories.tsx b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.stories.tsx new file mode 100644 index 0000000..d530495 --- /dev/null +++ b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, Story } from '@storybook/react' +import { CollapseHeader, CollapseHeaderProps } from './CollapseHeader' + +export default { + title: 'CollapseHeader', + component: CollapseHeader, + argTypes: { + size: { + type: { + name: 'enum', + value: ['small', 'medium', 'large'], + }, + }, + }, +} as Meta + +export const Root: Story = (args) => ( +
+ +
+) + +Root.args = { + size: 'large', + label: 'title', + disabled: false, +} diff --git a/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.styles.ts b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.styles.ts new file mode 100644 index 0000000..d1aec23 --- /dev/null +++ b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.styles.ts @@ -0,0 +1,88 @@ +import { css } from '@emotion/react' +import { collapseHeaderClasses } from './CollapseHeader.classes' + +export const CollapseHeaderStyles = css` + .${collapseHeaderClasses.root} { + box-sizing: border-box; + } + + .${collapseHeaderClasses.root}:not(.${collapseHeaderClasses.disabled}) { + .${collapseHeaderClasses.trigger} { + &:hover { + .${collapseHeaderClasses.triggerLabel} { + text-decoration: underline; + } + } + } + } + + .${collapseHeaderClasses.trigger} { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 10px 14px 10px 18px; + + cursor: pointer; + background: none; + border: 1px solid rgb(var(--lsd-border-primary)); + + &:focus { + outline: none; + } + } + + .${collapseHeaderClasses.triggerLabel} { + cursor: inherit; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: auto; + } + + .${collapseHeaderClasses.triggerIcons} { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + } + + .${collapseHeaderClasses.triggerIcon} { + margin-right: 8px; + } + + .${collapseHeaderClasses.triggerMenuIcon} { + } + + .${collapseHeaderClasses.disabled} { + .${collapseHeaderClasses.trigger} { + opacity: 0.34; + cursor: initial; + } + } + + .${collapseHeaderClasses.large} { + .${collapseHeaderClasses.trigger} { + width: 299px; + height: 40px; + padding: 10px 18px; + } + } + + .${collapseHeaderClasses.medium} { + .${collapseHeaderClasses.trigger} { + width: 270px; + height: 32px; + padding: 6px 14px; + } + } + + .${collapseHeaderClasses.small} { + .${collapseHeaderClasses.trigger} { + width: 235px; + height: 28px; + padding: 6px 12px; + } + } +` diff --git a/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.tsx b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.tsx new file mode 100644 index 0000000..14640b2 --- /dev/null +++ b/packages/lsd-react/src/components/CollapseHeader/CollapseHeader.tsx @@ -0,0 +1,71 @@ +import clsx from 'clsx' +import React, { useEffect, useState } from 'react' +import { ArrowDownIcon, ArrowUpIcon } from '../Icons' +import { Typography } from '../Typography' +import { collapseHeaderClasses } from './CollapseHeader.classes' + +export type CollapseHeaderProps = Omit< + React.HTMLAttributes, + 'label' | 'disabled' +> & { + label: string + open: boolean + setOpen: React.Dispatch> + disabled?: boolean + onTrigger: () => void + size?: 'small' | 'medium' | 'large' +} + +export const CollapseHeader: React.FC & { + classes: typeof collapseHeaderClasses +} = ({ + label, + disabled = false, + open, + setOpen, + size = 'large', + onTrigger, + ...props +}) => { + return ( +
+ +
+ ) +} + +CollapseHeader.classes = collapseHeaderClasses diff --git a/packages/lsd-react/src/components/CollapseHeader/index.ts b/packages/lsd-react/src/components/CollapseHeader/index.ts new file mode 100644 index 0000000..438688f --- /dev/null +++ b/packages/lsd-react/src/components/CollapseHeader/index.ts @@ -0,0 +1 @@ +export * from './CollapseHeader' 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 & {
= ({ + icon, + ...args +}) => { + const Icon = useStorybookIconComponent(icon) + + return {Icon && } +} + +Root.args = { + variant: 'outlined', + icon: 'FolderIcon', + size: 'large', + disabled: false, +} diff --git a/packages/lsd-react/src/components/IconButton/IconButton.styles.ts b/packages/lsd-react/src/components/IconButton/IconButton.styles.ts new file mode 100644 index 0000000..5c3846e --- /dev/null +++ b/packages/lsd-react/src/components/IconButton/IconButton.styles.ts @@ -0,0 +1,47 @@ +import { css } from '@emotion/react' +import { iconButtonClasses } from './IconButton.classes' + +export const IconButtonStyles = css` + .${iconButtonClasses.root} { + display: flex; + width: 32px; + height: 28px; + flex-direction: row; + align-items: center; + justify-content: center; + cursor: pointer; + background: none; + border: 1px solid rgb(var(--lsd-border-primary)); + } + + .${iconButtonClasses.filled} { + background-color: rgb(var(--lsd-icon-primary)); + + svg { + --lsd-icon-primary: var(--lsd-icon-secondary); + } + } + + .${iconButtonClasses.outlined} { + } + + .${iconButtonClasses.disabled} { + opacity: 0.34; + cursor: default; + } + + .${iconButtonClasses.large} { + width: 40px; + height: 40px; + } + + .${iconButtonClasses.medium} { + width: 32px; + height: 32px; + } + + .${iconButtonClasses.small} { + width: 28px; + height: 28px; + } +` diff --git a/packages/lsd-react/src/components/IconButton/IconButton.tsx b/packages/lsd-react/src/components/IconButton/IconButton.tsx new file mode 100644 index 0000000..5781076 --- /dev/null +++ b/packages/lsd-react/src/components/IconButton/IconButton.tsx @@ -0,0 +1,35 @@ +import clsx from 'clsx' +import React from 'react' +import { iconButtonClasses } from './IconButton.classes' + +export type IconButtonProps = React.ButtonHTMLAttributes & { + variant?: 'outlined' | 'filled' + size?: 'small' | 'medium' | 'large' +} + +export const IconButton: React.FC & { + classes: typeof iconButtonClasses +} = ({ + size = 'large', + disabled, + variant = 'outlined', + children, + ...props +}) => { + return ( + + ) +} + +IconButton.classes = iconButtonClasses diff --git a/packages/lsd-react/src/components/IconButton/index.ts b/packages/lsd-react/src/components/IconButton/index.ts new file mode 100644 index 0000000..a37a7fc --- /dev/null +++ b/packages/lsd-react/src/components/IconButton/index.ts @@ -0,0 +1 @@ +export * from './IconButton' diff --git a/packages/lsd-react/src/components/IconTag/IconTag.classes.ts b/packages/lsd-react/src/components/IconTag/IconTag.classes.ts deleted file mode 100644 index 08a67fd..0000000 --- a/packages/lsd-react/src/components/IconTag/IconTag.classes.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const iconTagClasses = { - root: `lsd-icon-tag`, - - outlined: `lsd-icon-tag--outlined`, - filled: `lsd-icon-tag--filled`, -} diff --git a/packages/lsd-react/src/components/IconTag/IconTag.stories.tsx b/packages/lsd-react/src/components/IconTag/IconTag.stories.tsx deleted file mode 100644 index fc2eb12..0000000 --- a/packages/lsd-react/src/components/IconTag/IconTag.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Meta, Story } from '@storybook/react' -import { AddIcon, FolderIcon, KeyboardReturnIcon, MenuIcon } from '../Icons' -import { IconTag, IconTagProps } from './IconTag' - -export default { - title: 'IconTag', - component: IconTag, -} as Meta - -export const Root: Story = (args) => ( - - - -) - -Root.args = { - variant: 'outlined', -} diff --git a/packages/lsd-react/src/components/IconTag/IconTag.styles.ts b/packages/lsd-react/src/components/IconTag/IconTag.styles.ts deleted file mode 100644 index 7fe09c6..0000000 --- a/packages/lsd-react/src/components/IconTag/IconTag.styles.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { css } from '@emotion/react' -import { iconTagClasses } from './IconTag.classes' - -export const IconTagStyles = css` - .${iconTagClasses.root} { - display: flex; - width: 32px; - height: 28px; - flex-direction: row; - align-items: center; - justify-content: center; - border: 1px solid rgb(var(--lsd-icon-primary)); - } - - .${iconTagClasses.filled} { - background-color: rgb(var(--lsd-icon-primary)); - - svg { - --lsd-icon-primary: var(--lsd-icon-secondary); - } - } - - .${iconTagClasses.outlined} { - } -` diff --git a/packages/lsd-react/src/components/IconTag/IconTag.tsx b/packages/lsd-react/src/components/IconTag/IconTag.tsx deleted file mode 100644 index 6eeef0f..0000000 --- a/packages/lsd-react/src/components/IconTag/IconTag.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import clsx from 'clsx' -import React from 'react' -import { iconTagClasses } from './IconTag.classes' - -export type IconTagProps = React.HTMLAttributes & { - label?: string - variant?: 'outlined' | 'filled' -} - -export const IconTag: React.FC & { - classes: typeof iconTagClasses -} = ({ label, variant = 'outlined', children, ...props }) => { - return ( -
- {children} -
- ) -} - -IconTag.classes = iconTagClasses diff --git a/packages/lsd-react/src/components/IconTag/index.ts b/packages/lsd-react/src/components/IconTag/index.ts deleted file mode 100644 index 851e230..0000000 --- a/packages/lsd-react/src/components/IconTag/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './IconTag' diff --git a/packages/lsd-react/src/components/Icons/ArrowForwardIcon/ArrowForwardIcon.tsx b/packages/lsd-react/src/components/Icons/ArrowForwardIcon/ArrowForwardIcon.tsx index 6292880..acfbec6 100644 --- a/packages/lsd-react/src/components/Icons/ArrowForwardIcon/ArrowForwardIcon.tsx +++ b/packages/lsd-react/src/components/Icons/ArrowForwardIcon/ArrowForwardIcon.tsx @@ -1,17 +1,22 @@ import { LsdIcon } from '../LsdIcon' -export const ArrowForwardIcon = LsdIcon((props) => ( - - - -)) +export const ArrowForwardIcon = LsdIcon( + (props) => ( + + + + ), + { + filled: true, + }, +) 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/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/MoreIcon/MoreIcon.tsx b/packages/lsd-react/src/components/Icons/MoreIcon/MoreIcon.tsx index efc56ea..bc9ca7b 100644 --- a/packages/lsd-react/src/components/Icons/MoreIcon/MoreIcon.tsx +++ b/packages/lsd-react/src/components/Icons/MoreIcon/MoreIcon.tsx @@ -1,19 +1,24 @@ import { LsdIcon } from '../LsdIcon' -export const MoreIcon = LsdIcon((props) => ( - - - -)) +export const MoreIcon = LsdIcon( + (props) => ( + + + + ), + { + filled: true, + }, +) diff --git a/packages/lsd-react/src/components/Icons/NewPageIcon/NewPageIcon.tsx b/packages/lsd-react/src/components/Icons/NewPageIcon/NewPageIcon.tsx index e431e8b..a34aa35 100644 --- a/packages/lsd-react/src/components/Icons/NewPageIcon/NewPageIcon.tsx +++ b/packages/lsd-react/src/components/Icons/NewPageIcon/NewPageIcon.tsx @@ -1,19 +1,24 @@ import { LsdIcon } from '../LsdIcon' -export const NewPageIcon = LsdIcon((props) => ( - - - -)) +export const NewPageIcon = LsdIcon( + (props) => ( + + + + ), + { + filled: true, + }, +) diff --git a/packages/lsd-react/src/components/Icons/PickIcon/PickIcon.tsx b/packages/lsd-react/src/components/Icons/PickIcon/PickIcon.tsx new file mode 100644 index 0000000..4bc1027 --- /dev/null +++ b/packages/lsd-react/src/components/Icons/PickIcon/PickIcon.tsx @@ -0,0 +1,22 @@ +import { LsdIcon } from '../LsdIcon' + +export const PickIcon = LsdIcon( + (props) => ( + + + + ), + { filled: true }, +) diff --git a/packages/lsd-react/src/components/Icons/PickIcon/index.ts b/packages/lsd-react/src/components/Icons/PickIcon/index.ts new file mode 100644 index 0000000..6fd6c8b --- /dev/null +++ b/packages/lsd-react/src/components/Icons/PickIcon/index.ts @@ -0,0 +1 @@ +export * from './PickIcon' 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/components/Icons/index.ts b/packages/lsd-react/src/components/Icons/index.ts index d046975..40f1f7f 100644 --- a/packages/lsd-react/src/components/Icons/index.ts +++ b/packages/lsd-react/src/components/Icons/index.ts @@ -16,3 +16,4 @@ export * from './NavigateBeforeIcon' export * from './NavigateNextIcon' export * from './NewPageIcon' export * from './SearchIcon' +export * from './PickIcon' diff --git a/packages/lsd-react/src/components/Quote/Quote.classes.ts b/packages/lsd-react/src/components/Quote/Quote.classes.ts new file mode 100644 index 0000000..2b46dab --- /dev/null +++ b/packages/lsd-react/src/components/Quote/Quote.classes.ts @@ -0,0 +1,8 @@ +export const quoteClasses = { + root: `lsd-quote`, + + indentedInline: 'lsd-quote--indented-inline', + parentheses: 'lsd-quote--parentheses', + + text: 'lsd-quote__text', +} diff --git a/packages/lsd-react/src/components/Quote/Quote.stories.tsx b/packages/lsd-react/src/components/Quote/Quote.stories.tsx new file mode 100644 index 0000000..7d82342 --- /dev/null +++ b/packages/lsd-react/src/components/Quote/Quote.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, Story } from '@storybook/react' +import { Quote, QuoteProps } from './Quote' + +export default { + title: 'Quote', + component: Quote, + argTypes: { + mode: { + type: { + name: 'enum', + value: ['indented-line', 'parentheses'], + }, + }, + }, +} as Meta + +export const Root: Story = (args) => ( +
+ +
+ A wise man can learn more from a foolish question than a fool can learn + from a wise answer. +
+ +
+) +Root.args = { + mode: 'indented-line', +} diff --git a/packages/lsd-react/src/components/Quote/Quote.styles.ts b/packages/lsd-react/src/components/Quote/Quote.styles.ts new file mode 100644 index 0000000..4f86526 --- /dev/null +++ b/packages/lsd-react/src/components/Quote/Quote.styles.ts @@ -0,0 +1,27 @@ +import { css } from '@emotion/react' +import { quoteClasses } from './Quote.classes' + +export const QuoteStyles = css` + .${quoteClasses.root} { + color: rgb(var(--lsd-text-primary)); + white-space: pre-wrap; + } + + .${quoteClasses.indentedInline} { + border-left: 1px solid rgb(var(--lsd-border-primary)); + padding: 4px 8px 4px 28px; + } + + .${quoteClasses.parentheses} { + padding: 0px; + text-align: center; + } + + .${quoteClasses.parentheses}::before { + content: '***'; + } + + .${quoteClasses.parentheses}::after { + content: '***'; + } +` diff --git a/packages/lsd-react/src/components/Quote/Quote.tsx b/packages/lsd-react/src/components/Quote/Quote.tsx new file mode 100644 index 0000000..b2cfba3 --- /dev/null +++ b/packages/lsd-react/src/components/Quote/Quote.tsx @@ -0,0 +1,33 @@ +import clsx from 'clsx' +import React from 'react' +import { Typography } from '../Typography' +import { quoteClasses } from './Quote.classes' + +export type QuoteProps = React.HTMLAttributes & { + mode?: 'indented-line' | 'parentheses' +} + +export const Quote: React.FC & { + classes: typeof quoteClasses +} = ({ mode = 'indented-line', children, ...props }) => { + return ( + <> +
+ + {children} + +
+ + ) +} + +Quote.classes = quoteClasses diff --git a/packages/lsd-react/src/components/Quote/index.ts b/packages/lsd-react/src/components/Quote/index.ts new file mode 100644 index 0000000..2cfc86d --- /dev/null +++ b/packages/lsd-react/src/components/Quote/index.ts @@ -0,0 +1 @@ +export * from './Quote' diff --git a/packages/lsd-react/src/components/Tag/Tag.classes.ts b/packages/lsd-react/src/components/Tag/Tag.classes.ts new file mode 100644 index 0000000..584debb --- /dev/null +++ b/packages/lsd-react/src/components/Tag/Tag.classes.ts @@ -0,0 +1,7 @@ +export const tagClasses = { + root: `lsd-tag`, + + outlined: `lsd-tag--outlined`, + filled: `lsd-tag--filled`, + disabled: 'lsd-tag--disabled', +} diff --git a/packages/lsd-react/src/components/Tag/Tag.stories.tsx b/packages/lsd-react/src/components/Tag/Tag.stories.tsx new file mode 100644 index 0000000..1ea41b0 --- /dev/null +++ b/packages/lsd-react/src/components/Tag/Tag.stories.tsx @@ -0,0 +1,39 @@ +import { Meta, Story } from '@storybook/react' +import { FolderIcon } from '../Icons' +import { Tag, TagProps } from './Tag' + +export default { + title: 'Tag', + component: Tag, + argTypes: { + variant: { + type: { + name: 'enum', + value: ['outlined', 'filled'], + }, + }, + iconDirection: { + type: { + name: 'enum', + value: ['left', 'right', 'none'], + }, + }, + disabled: { + type: { + name: 'boolean', + value: [true, false], + }, + }, + }, +} as Meta + +export const Root: Story = (args) => ( + } /> +) + +Root.args = { + variant: 'outlined', + label: 'Tag', + iconDirection: 'left', + disabled: false, +} diff --git a/packages/lsd-react/src/components/Tag/Tag.styles.ts b/packages/lsd-react/src/components/Tag/Tag.styles.ts new file mode 100644 index 0000000..9683b60 --- /dev/null +++ b/packages/lsd-react/src/components/Tag/Tag.styles.ts @@ -0,0 +1,42 @@ +import { css } from '@emotion/react' +import { tagClasses } from './Tag.classes' + +export const TagStyles = css` + .${tagClasses.root} { + width: fit-content; + height: 28px; + padding: 4px 12px; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 12px; + + border: 1px solid rgb(var(--lsd-icon-primary)); + + &:hover, + &:focus { + text-decoration: underline; + cursor: pointer; + } + } + + .${tagClasses.filled} { + background-color: rgb(var(--lsd-icon-primary)); + color: rgb(var(--lsd-text-secondary)); + svg { + --lsd-icon-primary: var(--lsd-icon-secondary); + } + } + + .${tagClasses.outlined} { + color: rgb(var(--lsd-text-primary)); + } + + .${tagClasses.disabled} { + opacity: 0.3; + cursor: initial; + pointer-events: none; + } +` diff --git a/packages/lsd-react/src/components/Tag/Tag.tsx b/packages/lsd-react/src/components/Tag/Tag.tsx new file mode 100644 index 0000000..cb38e43 --- /dev/null +++ b/packages/lsd-react/src/components/Tag/Tag.tsx @@ -0,0 +1,49 @@ +import clsx from 'clsx' +import React from 'react' +import { Typography } from '../Typography' +import { tagClasses } from './Tag.classes' + +export type TagProps = React.HTMLAttributes & { + variant?: 'outlined' | 'filled' + label: string + icon?: React.ReactNode + iconDirection?: 'left' | 'right' + disabled?: boolean +} + +export const Tag: React.FC & { + classes: typeof tagClasses +} = ({ + label, + variant = 'outlined', + disabled = 'false', + icon, + iconDirection = 'left', + children, + ...props +}) => { + const renderItems = () => ( + <> + {iconDirection === 'left' && icon} + {label} + {iconDirection === 'right' && icon} + + ) + + return ( +
+ {renderItems()} +
+ ) +} + +Tag.classes = tagClasses diff --git a/packages/lsd-react/src/components/Tag/index.ts b/packages/lsd-react/src/components/Tag/index.ts new file mode 100644 index 0000000..fd1a1e7 --- /dev/null +++ b/packages/lsd-react/src/components/Tag/index.ts @@ -0,0 +1 @@ +export * from './Tag' 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..86e4657 --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.classes.ts @@ -0,0 +1,15 @@ +export const textFieldClasses = { + root: `lsd-textField`, + + input: `lsd-textField__input`, + icon: `lsd-textField__icon`, + + supportingText: 'lsd-textField__supporting-text', + + 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..ca50dd0 --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.stories.tsx @@ -0,0 +1,30 @@ +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', + defaultValue: 'default value', + onChange: undefined, +} 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..7cf9003 --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.styles.ts @@ -0,0 +1,68 @@ +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; + 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: 100%; + } + + .${textFieldClasses.input}:hover { + outline: none; + } + + .${textFieldClasses.input}::placeholder { + color: rgb(var(--lsd-text-primary)); + opacity: 0.3; + } + + .${textFieldClasses.error} { + text-decoration: line-through; + } + + .${textFieldClasses.supportingText} { + width: fit-content; + margin-top: 20px; + } + + .${textFieldClasses.large} { + width: 208px; + height: 40px; + padding: 10px 14px; + } + + .${textFieldClasses.medium} { + width: 188px; + height: 32px; + padding: 6px 12px; + } + + .${textFieldClasses.withIcon} { + } + + .${textFieldClasses.icon} { + cursor: pointer; + display: flex; + align-items: center; + } +` 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..095744d --- /dev/null +++ b/packages/lsd-react/src/components/TextField/TextField.tsx @@ -0,0 +1,96 @@ +import clsx from 'clsx' +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' + +export type TextFieldProps = Omit< + React.HTMLAttributes, + 'onChange' | 'value' +> & + Pick, 'onChange'> & { + size?: 'large' | 'medium' + withIcon?: boolean + error?: boolean + disabled?: boolean + supportingText?: string + value?: string + defaultValue?: string + placeholder?: string + inputProps?: React.InputHTMLAttributes + } + +export const TextField: React.FC & { + classes: typeof textFieldClasses +} = ({ + size = 'large', + withIcon = false, + supportingText, + error = false, + children, + value, + placeholder, + defaultValue, + onChange, + inputProps = {}, + ...props +}) => { + const ref = useRef(null) + const input = useInput({ defaultValue, value, onChange, ref }) + + const onCancel = () => input.setValue('') + + return ( +
+
+ + {withIcon && error ? ( + + + + ) : withIcon && !input.filled ? ( + + + + ) : withIcon && input.filled ? ( + + + + ) : 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' diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts index fae6404..94a2dc2 100644 --- a/packages/lsd-react/src/index.ts +++ b/packages/lsd-react/src/index.ts @@ -1,14 +1,19 @@ -export * from './components/Button' -export * from './components/Dropdown' -export * from './components/DropdownItem' -export * from './components/Icons' -export * from './components/IconTag' -export * from './components/ListBox' -export * from './components/TabItem' -export * from './components/Tabs' -export * from './components/Theme' +export * from './components/Autocomplete' export * from './components/Breadcrumb' export * from './components/BreadcrumbItem' +export * from './components/Button' export * from './components/Card' -export * from './components/CardHeader' export * from './components/CardBody' +export * from './components/CardHeader' +export * from './components/Collapse' +export * from './components/CollapseHeader' +export * from './components/Dropdown' +export * from './components/DropdownItem' +export * from './components/IconButton' +export * from './components/Icons' +export * from './components/ListBox' +export * from './components/Quote' +export * from './components/TabItem' +export * from './components/Tabs' +export * from './components/Tag' +export * from './components/Theme' 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, + } +}