From 057c41fc2a2104262db4a03bc6c754834f67543b Mon Sep 17 00:00:00 2001 From: Bonaventura Galang <77723914+bonaventuragal@users.noreply.github.com> Date: Tue, 3 Jan 2023 15:00:35 +0700 Subject: [PATCH 01/18] add text input --- src/Input/TextInput/TextInput.stories.tsx | 22 +++++++ src/Input/TextInput/TextInput.style.tsx | 50 ++++++++++++++ src/Input/TextInput/index.tsx | 80 +++++++++++++++++++++++ src/Input/TextInput/interface.ts | 12 ++++ 4 files changed, 164 insertions(+) create mode 100644 src/Input/TextInput/TextInput.stories.tsx create mode 100644 src/Input/TextInput/TextInput.style.tsx create mode 100644 src/Input/TextInput/index.tsx create mode 100644 src/Input/TextInput/interface.ts diff --git a/src/Input/TextInput/TextInput.stories.tsx b/src/Input/TextInput/TextInput.stories.tsx new file mode 100644 index 0000000..485e792 --- /dev/null +++ b/src/Input/TextInput/TextInput.stories.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Meta } from '@storybook/react/types-6-0' +import { Story } from '@storybook/react' +import { TextInputProps } from './interface' +import TextInput from '.' + +export default { + id: 'input', + title: 'Input', + component: TextInput, +} as Meta + +const TypedInputTemplate: Story = (args) => ( + +) + +export const _TextInput = TypedInputTemplate.bind({}) +_TextInput.args = { + label: 'Label', + helper: 'Helper text', + error: 'Error message', +} diff --git a/src/Input/TextInput/TextInput.style.tsx b/src/Input/TextInput/TextInput.style.tsx new file mode 100644 index 0000000..161c921 --- /dev/null +++ b/src/Input/TextInput/TextInput.style.tsx @@ -0,0 +1,50 @@ +import styled from 'styled-components' +import { StyledTextInputProps } from './interface' + +export const StyledTextInput = styled.input` + display: flex; + border-radius: 12px; + background-color: transparent; + color: white; + border: 2px solid + ${(props) => + props.isError ? 'rgba(255, 115, 135, 1)' : 'rgba(255, 255, 255, 0.3)'}; + padding: 8px 12px 8px 12px; + font-size: 16px; + + &:focus { + outline: none; + } + + @media only screen and (max-width: 768px) { + font-size: 12px; + } +` + +export const TextInputContainer = styled.div` + display: flex; + flex-direction: column; + gap: 4px; + font-size: 16px; + + @media only screen and (max-width: 768px) { + font-size: 12px; + } +` + +export const LabelDiv = styled.div` + font-family: 'R-Flex', sans-serif; + color: white; +` + +export const BottomTextDiv = styled.div<{ + error?: boolean +}>` + font-family: 'R-Flex', sans-serif; + color: rgba(255, 255, 255, 0.8); + color: ${(props) => + props.error ? 'rgba(255, 115, 135, 1)' : 'rgba(255, 255, 255, 0.8)'}; + display: flex; + align-items: center; + gap: 4px; +` diff --git a/src/Input/TextInput/index.tsx b/src/Input/TextInput/index.tsx new file mode 100644 index 0000000..433c20c --- /dev/null +++ b/src/Input/TextInput/index.tsx @@ -0,0 +1,80 @@ +import React from 'react' +import { TextInputProps } from './interface' +import { + StyledTextInput, + TextInputContainer, + LabelDiv, + BottomTextDiv, +} from './TextInput.style' + +const TextInput: React.FC = ({ + label, + helper, + error, + placeholder = 'Placeholder', + isError = false, + ...props +}) => { + return ( + <> + + {label} + + + + {!isError && helper && ( + + + {helper} + + )} + + {isError && error && ( + + + {error} + + )} + + + ) +} + +const HelperIcon = () => ( + + + +) + +const ErrorIcon = () => ( + + + +) + +export default TextInput diff --git a/src/Input/TextInput/interface.ts b/src/Input/TextInput/interface.ts new file mode 100644 index 0000000..714154d --- /dev/null +++ b/src/Input/TextInput/interface.ts @@ -0,0 +1,12 @@ +import React from 'react' + +export interface StyledTextInputProps + extends React.ComponentPropsWithoutRef<'input'> { + isError?: boolean +} + +export interface TextInputProps extends StyledTextInputProps { + label?: string + helper?: string + error?: string +} From 5991d7d4bd730912a1205ddd9859dc298ed7669b Mon Sep 17 00:00:00 2001 From: Bonaventura Galang <77723914+bonaventuragal@users.noreply.github.com> Date: Thu, 5 Jan 2023 11:48:47 +0700 Subject: [PATCH 02/18] add search input --- src/Input/Search/Search.stories.tsx | 32 ++++++++ src/Input/Search/Search.style.tsx | 92 +++++++++++++++++++++++ src/Input/Search/index.tsx | 40 ++++++++++ src/Input/Search/interface.ts | 7 ++ src/Input/TextInput/TextInput.stories.tsx | 4 +- 5 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 src/Input/Search/Search.stories.tsx create mode 100644 src/Input/Search/Search.style.tsx create mode 100644 src/Input/Search/index.tsx create mode 100644 src/Input/Search/interface.ts diff --git a/src/Input/Search/Search.stories.tsx b/src/Input/Search/Search.stories.tsx new file mode 100644 index 0000000..26ad6c1 --- /dev/null +++ b/src/Input/Search/Search.stories.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { Meta } from '@storybook/react/types-6-0' +import { Story } from '@storybook/react' +import { SearchInputProps } from './interface' +import SearchInput from '.' + +export default { + id: 'input', + title: 'Input', + component: SearchInput, + argTypes: { + align: { + options: ['left', 'center'], + control: { type: 'radio' }, + defaultValue: 'left', + }, + icon: { + options: ['none', 'left', 'right'], + control: { type: 'radio' }, + defaultValue: 'none', + } + } +} as Meta + +const Template: Story = (args) => ( + +) + +export const _SearchInput = Template.bind({}) +_SearchInput.args = { + +} diff --git a/src/Input/Search/Search.style.tsx b/src/Input/Search/Search.style.tsx new file mode 100644 index 0000000..adb403a --- /dev/null +++ b/src/Input/Search/Search.style.tsx @@ -0,0 +1,92 @@ +import styled from "styled-components"; +import { SearchInputProps } from "./interface"; + +export const StyledSearchInput = styled.input` + background-color: transparent; + color: rgba(255, 255, 255, 0.3); + outline: none; + border: none; + caret-color: white; + color: white; + font-size: 16px; + text-align: ${props => props.align === 'left' ? 'left' : 'center'}; + + :focus { + ::placeholder { + opacity: 0; + } + + /* other browsers */ + ::-webkit-input-placeholder { + opacity: 0; + } + :-moz-placeholder { /* Firefox 18- */ + opacity: 0; + } + ::-moz-placeholder { /* Firefox 19+ */ + opacity: 0; + } + :-ms-input-placeholder { + opacity: 0; + } + } + + @media only screen and (max-width: 768px) { + font-size: 12px; + } +` + +export const SearchIconDiv = styled.div<{hidden: boolean}>` + display: flex; + flex-direction: column; + justify-items: center; + visibility: ${(props) => props.hidden ? 'hidden' : 'visible'}; + opacity: 0.3; + + @media only screen and (max-width: 768px) { + width: 18px; + height: 18px; + } +` + +export const SearchDiv = styled.div` + display: flex; + gap: 8px; + padding: 8px 16px 8px 16px; + + :hover { + background: rgba(255, 255, 255, 0.1); + + & > * { + opacity: 1; + } + + & > ${StyledSearchInput}::placeholder { + color: white; + } + + /* other browsers */ + & > ${StyledSearchInput}::-webkit-input-placeholder { + color: white; + } + & > ${StyledSearchInput}:-moz-placeholder { /* Firefox 18- */ + color: white; + } + & > ${StyledSearchInput}::-moz-placeholder { /* Firefox 19+ */ + color: white; + } + & > ${StyledSearchInput}:-ms-input-placeholder { + color: white; + } + + @media only screen and (max-width: 768px) { + padding: 8px 12px 8px 12px; + } + } + + :focus-within { + & > ${SearchIconDiv} { + opacity: 1; + } + } +` \ No newline at end of file diff --git a/src/Input/Search/index.tsx b/src/Input/Search/index.tsx new file mode 100644 index 0000000..0cbded5 --- /dev/null +++ b/src/Input/Search/index.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import { SearchInputProps } from './interface' +import { SearchDiv, SearchIconDiv, StyledSearchInput } from './Search.style' + +const SearchInput: React.FC = ({ + align='left', + icon='none', + placeholder='Placeholder', + ...props +}) => { + return (<> + + {icon === 'left' && } + {icon === 'right' && align === 'center' && + + ) +} + +const SearchIcon = ({ + hidden=false +}: { + hidden?: boolean +}) => ( + +) + +export default SearchInput \ No newline at end of file diff --git a/src/Input/Search/interface.ts b/src/Input/Search/interface.ts new file mode 100644 index 0000000..30ff4ee --- /dev/null +++ b/src/Input/Search/interface.ts @@ -0,0 +1,7 @@ +import React from 'react' + +export interface SearchInputProps + extends React.ComponentPropsWithoutRef<'input'> { + align?: 'left' | 'center' + icon?: 'none' | 'left' | 'right' +} \ No newline at end of file diff --git a/src/Input/TextInput/TextInput.stories.tsx b/src/Input/TextInput/TextInput.stories.tsx index 485e792..15c6896 100644 --- a/src/Input/TextInput/TextInput.stories.tsx +++ b/src/Input/TextInput/TextInput.stories.tsx @@ -10,11 +10,11 @@ export default { component: TextInput, } as Meta -const TypedInputTemplate: Story = (args) => ( +const Template: Story = (args) => ( ) -export const _TextInput = TypedInputTemplate.bind({}) +export const _TextInput = Template.bind({}) _TextInput.args = { label: 'Label', helper: 'Helper text', From 9f45c0df0faf736e6c3bfc2d46e3cbeaa3fc6ac1 Mon Sep 17 00:00:00 2001 From: Bonaventura Galang <77723914+bonaventuragal@users.noreply.github.com> Date: Thu, 5 Jan 2023 11:50:49 +0700 Subject: [PATCH 03/18] add search icon interface --- src/Input/Search/index.tsx | 6 ++---- src/Input/Search/interface.ts | 4 ++++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Input/Search/index.tsx b/src/Input/Search/index.tsx index 0cbded5..8ee5e3d 100644 --- a/src/Input/Search/index.tsx +++ b/src/Input/Search/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { SearchInputProps } from './interface' +import { SearchIconProps, SearchInputProps } from './interface' import { SearchDiv, SearchIconDiv, StyledSearchInput } from './Search.style' const SearchInput: React.FC = ({ @@ -25,10 +25,8 @@ const SearchInput: React.FC = ({ ) } -const SearchIcon = ({ +const SearchIcon: React.FC = ({ hidden=false -}: { - hidden?: boolean }) => (