Merge pull request #98 from boostcamp-2020/eb/components

Eb/자주쓰이는 atom component 구현 및 molecule component 일부 구현

client/src/components/atoms/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,15 @@
+import React, { ChangeEvent, useState } from 'react';
+import { text } from '@storybook/addon-knobs';
+import DatePicker from './DatePicker';
+
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+};
+
+export const Default = () => {
+  const value = text('date', '2020-11-04');
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {};
+
+  return <DatePicker value={value} onChange={onChange} />;
+};

client/src/components/atoms/DatePicker/DatePicker.tsx

@@ -0,0 +1,28 @@
+import React, { FunctionComponent, ChangeEvent } from 'react';
+import styled from '@themes/styled';
+
+const StyledDatePicker = styled.input`
+  background-color: ${({ theme }) => theme.palette.BG_COLOR01};
+  font-size: 0.8rem;
+  color: ${({ theme }) => theme.palette.PRIMARY};
+  border-radius: 0.5rem;
+  padding: 5px 12px;
+  width: 440px;
+  border: 1px solid ${({ theme }) => theme.palette.BG_COLOR02};
+  &:focus {
+    background-color: ${({ theme }) => theme.palette.LIGHT};
+    border-color: ${({ theme }) => theme.palette.LINK_BLUE};
+    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
+  }
+`;
+
+interface Props {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const DatePicker: FunctionComponent<Props> = ({ value, onChange }) => (
+  <StyledDatePicker type="date" value={value} onChange={onChange} />
+);
+
+export default DatePicker;

client/src/components/atoms/DatePicker/index.ts

@@ -0,0 +1 @@
+export { default } from './DatePicker';

client/src/components/atoms/FilterButton/FilterButton.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import FilterButton from './FilterButton';
+
+export default {
+  title: 'Components/FilterButton',
+  component: FilterButton,
+};
+
+export const Default = () => {
+  const onClick = () => {};
+  const value = text('button text', 'Author');
+
+  return <FilterButton onClick={onClick} text={value} />;
+};

client/src/components/atoms/FilterButton/FilterButton.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledFilterButton = styled.button`
+  all: unset;
+  color: ${({ theme }) => theme.palette.SECONDARY};
+  font-size: 0.8rem;
+  &:hover {
+    color: ${({ theme }) => theme.palette.PRIMARY};
+    cursor: pointer;
+  }
+`;
+
+interface Props {
+  onClick: () => void;
+  text: string;
+}
+
+const FilterButton: FunctionComponent<Props> = ({ onClick, text }) => (
+  <StyledFilterButton onClick={onClick}>{text} ▾</StyledFilterButton>
+);
+
+export default FilterButton;

client/src/components/atoms/FilterButton/index.ts

@@ -0,0 +1 @@
+export { default } from './FilterButton';

client/src/components/atoms/InputLabel/InputLabel.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import InputLabel from './InputLabel';
+
+export default {
+  title: 'Components/InputLabel',
+  component: InputLabel,
+};
+
+export const Default = () => {
+  const value = text('label', 'Due date (optional)');
+  return <InputLabel text={value} />;
+};

client/src/components/atoms/InputLabel/InputLabel.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledInputLabel = styled.span`
+  font-size: 1rem;
+  font-weight: 600;
+`;
+
+interface Props {
+  text: string;
+}
+
+const InputLabel: FunctionComponent<Props> = ({ text }) => (
+  <StyledInputLabel>{text}</StyledInputLabel>
+);
+
+export default InputLabel;

client/src/components/atoms/InputLabel/index.ts

@@ -0,0 +1 @@
+export { default } from './InputLabel';

client/src/components/atoms/LabelTag/LabelTag.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import LabelTag from './LabelTag';
+
+export default {
+  title: 'Components/LabelTag',
+  component: LabelTag,
+};
+
+export const Default = () => {
+  const value = text('tag text', 'Bug');
+  const bgColor = text('background color', '#a30a0a');
+
+  return <LabelTag text={value} bgColor={bgColor} />;
+};

client/src/components/atoms/LabelTag/LabelTag.tsx

@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledLabelTag = styled.span`
+  display: inline-block;
+  padding: 0 7px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 1rem;
+  color: #000;
+  line-height: 18px;
+`;
+
+interface Props {
+  text: string;
+  bgColor: string;
+}
+
+const LabelTag: FunctionComponent<Props> = ({ text, bgColor }) => (
+  <StyledLabelTag style={{ backgroundColor: bgColor }}>{text}</StyledLabelTag>
+);
+
+export default LabelTag;

client/src/components/atoms/LabelTag/index.ts

@@ -0,0 +1 @@
+export { default } from './LabelTag';

client/src/components/atoms/TextArea/TextArea.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import Textarea from './TextArea';
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+};
+
+export const Default = () => {
+  const placeholder = text('placeholder', 'Leave a comment');
+  return <Textarea placeHolder={placeholder} />;
+};

client/src/components/atoms/TextArea/TextArea.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledTextarea = styled.textarea`
+  ${({ theme }) => theme.commonStyle.input}
+`;
+
+interface Props {
+  placeHolder?: string;
+}
+
+const Textarea: FunctionComponent<Props> = ({ placeHolder }) => (
+  <StyledTextarea placeholder={placeHolder} />
+);
+
+export default Textarea;

client/src/components/atoms/TextArea/index.ts

@@ -0,0 +1 @@
+export { default } from './TextArea';

client/src/components/atoms/filterItem/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+interface Props {
+  bgColor: string;
+}
+
+const StyledColorSwatch = styled.div<Props>`
+  border-radius: 2rem;
+  width: 1rem;
+  height: 1rem;
+  background-color: ${({ bgColor }) => bgColor};
+`;
+
+const ColorSwatch: FunctionComponent<Props> = ({ bgColor }) => (
+  <StyledColorSwatch bgColor={bgColor} />
+);
+
+export default ColorSwatch;

client/src/components/atoms/filterItem/ColorSwatch/index.ts

@@ -0,0 +1 @@
+export { default } from './ColorSwatch';

client/src/components/atoms/filterItem/Description/Description.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledDescription = styled.div`
+  font-size: 0.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${({ theme }) => theme.palette.SECONDARY};
+`;
+
+interface Props {
+  text: string;
+}
+
+const Description: FunctionComponent<Props> = ({ text }) => (
+  <StyledDescription>{text}</StyledDescription>
+);
+
+export default Description;

client/src/components/atoms/filterItem/Description/index.ts

@@ -0,0 +1 @@
+export { default } from './Description';

client/src/components/atoms/filterItem/Title/Title.tsx

@@ -0,0 +1,16 @@
+import React, { FunctionComponent } from 'react';
+import styled from '@themes/styled';
+
+const StyledTitle = styled.strong`
+  font-size: 0.5rem;
+`;
+
+interface Props {
+  text: string;
+}
+
+const Title: FunctionComponent<Props> = ({ text }) => (
+  <StyledTitle>{text}</StyledTitle>
+);
+
+export default Title;

client/src/components/atoms/filterItem/Title/index.ts

@@ -0,0 +1 @@
+export { default } from './Title';

client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import FilterItemLabel from './FilterItemLabel';
+
+export default {
+  title: 'Molecules/FilterItemLabel',
+  component: FilterItemLabel,
+};
+
+export const Default = () => {
+  const swatchColor = text('swatch color', '#eee');
+  const title = text('title', 'bug');
+  const description = text('description', "Something isn't working");
+
+  return (
+    <FilterItemLabel
+      swatchColor={swatchColor}
+      title={title}
+      description={description}
+    />
+  );
+};

client/src/components/molecules/filterItem/FilterItemLabel/FilterItemLabel.tsx

@@ -0,0 +1,26 @@
+import React, { FunctionComponent } from 'react';
+import ColorSwatch from '@components/atoms/filterItem/ColorSwatch';
+import Description from '@components/atoms/filterItem/Description';
+import Title from '@components/atoms/filterItem/Title';
+
+interface Props {
+  swatchColor: string;
+  title: string;
+  description?: string;
+}
+
+const FilterItemLabel: FunctionComponent<Props> = ({
+  swatchColor,
+  title,
+  description,
+}) => (
+  <>
+    <ColorSwatch bgColor={swatchColor} />
+    <div>
+      <Title text={title} />
+      <Description text={description} />
+    </div>
+  </>
+);
+
+export default FilterItemLabel;

client/src/components/molecules/filterItem/FilterItemLabel/index.ts

@@ -0,0 +1 @@
+export { default } from './FilterItemLabel';

client/src/themes/index.ts

@@ -14,6 +14,18 @@ const theme = {
     LIGHT_BLUE01: '#f1f8ff',
     LIGHT_BLUE02: 'rgba(3,102,214,0.2)',
   },
+  commonStyle: {
+    input: `
+    background-color: #fafbfc;
+    border-radius: .5rem;
+    border: 1px solid #f6f8fa;
+    &:focus{
+      background-color: #ffffff;
+      border-color: #0366d6;
+      box-shawdow: 0 0 0 3px rgba(3, 102, 214, 0.3);
+    }
+    `,
+  },
 };
 
 export default theme;