diff --git a/.eslintrc b/.eslintrc index ba2e2041..a3ce36ee 100644 --- a/.eslintrc +++ b/.eslintrc @@ -84,6 +84,7 @@ "indent": "off", "no-unused-vars": "off", "react/jsx-one-expression-per-line": "off", + "react/jsx-fragments": "off", "semi": "off" } } diff --git a/package.json b/package.json index 54a5925e..a1076adc 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "lodash": "^4.17.15", "react": "^16.13.1", "react-dom": "^16.13.1", - "react-scripts": "3.4.1" + "react-scripts": "3.4.1", + "styled-components": "^5.1.1" }, "devDependencies": { "@commitlint/cli": "^8.3.5", @@ -36,6 +37,7 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "@types/styled-components": "^5.1.0", "commitizen": "^4.1.2", "eslint": "6.8.0", "eslint-config-airbnb": "18.1.0", diff --git a/public/index.html b/public/index.html index 4fb02265..e91d53dd 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,7 @@ + Instat TV diff --git a/src/features/Button/index.tsx b/src/features/Button/index.tsx deleted file mode 100644 index 3a2a000d..00000000 --- a/src/features/Button/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { ReactNode } from 'react' - -type ButtonProps = { - children: ReactNode, - - /** - * Simple click handler - */ - onClick?: () => void, -} - -/** - * The world's most _basic_ button - */ -export const Button = ({ children, onClick }: ButtonProps) => ( - -) diff --git a/src/features/Button/stories.tsx b/src/features/Button/stories.tsx deleted file mode 100644 index bce6188c..00000000 --- a/src/features/Button/stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' - -import { action } from '@storybook/addon-actions' - -import { Button } from 'features/Button' - -export default { - component: Button, - title: 'Button', -} - -export const Text = () => - -export const Emoji = () => ( - -) diff --git a/src/features/Components/Button/index.tsx b/src/features/Components/Button/index.tsx new file mode 100644 index 00000000..9bc65a52 --- /dev/null +++ b/src/features/Components/Button/index.tsx @@ -0,0 +1 @@ +export * from './styled' diff --git a/src/features/Components/Button/stories.tsx b/src/features/Components/Button/stories.tsx new file mode 100644 index 00000000..aa3c756a --- /dev/null +++ b/src/features/Components/Button/stories.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +import { action } from '@storybook/addon-actions' + +import { ButtonOutline, ButtonSolid } from 'features/Components' + +export default { + title: 'Button', +} + +export const Solid = () => ( + + Solid + +) + +export const Outline = () => ( + + Outline + +) diff --git a/src/features/Components/Button/styled.tsx b/src/features/Components/Button/styled.tsx new file mode 100644 index 00000000..04a2c45a --- /dev/null +++ b/src/features/Components/Button/styled.tsx @@ -0,0 +1,44 @@ +import styled, { css } from 'styled-components/macro' + +const baseButtonStyles = css` + width: 272px; + height: 48px; + border-width: 0.7px; + border-style: solid; + border-radius: 2px; + padding: 0 12px; + + font-style: normal; + font-size: 20px; + outline-color: white; +` + +export const outlineButtonStyles = css` + ${baseButtonStyles} + + padding-top: 8.6px; + padding-bottom: 10.6px; + color: ${({ theme: { colors } }) => colors.secondary}; + font-weight: normal; + border-color: ${({ theme: { colors } }) => colors.secondary}; + background: transparent; +` + +export const solidButtonStyles = css` + ${baseButtonStyles} + + padding-top: 18.5px; + padding-bottom: 13px; + color: #FFFFFF; + font-weight: bold; + border-color: transparent; + background: ${({ theme: { colors } }) => colors.primary}; +` + +export const ButtonSolid = styled.button` + ${solidButtonStyles} +` + +export const ButtonOutline = styled.button` + ${outlineButtonStyles} +` diff --git a/src/features/Components/Input/index.tsx b/src/features/Components/Input/index.tsx new file mode 100644 index 00000000..32c294ca --- /dev/null +++ b/src/features/Components/Input/index.tsx @@ -0,0 +1,58 @@ +import React from 'react' + +import { + TInputWrapper, + InputWrapper, + InputStyled, + Label, +} from './styled' + +type TInput = { + defaultValue?: string, + id: string, + inputWidth?: number, + label: string, + labelWidth?: number, + maxLength?: number, + onChange?: () => void, + required?: boolean, + type?: string, + value?: string, +} & TInputWrapper + +export const Input = ({ + defaultValue, + id, + inputWidth, + label, + labelWidth, + maxLength, + onChange, + px, + required, + type, + value, + wrapperWidth, +}: TInput) => ( + + + + +) diff --git a/src/features/Components/Input/stories.tsx b/src/features/Components/Input/stories.tsx new file mode 100644 index 00000000..37fc23f6 --- /dev/null +++ b/src/features/Components/Input/stories.tsx @@ -0,0 +1,35 @@ +import React, { Fragment } from 'react' + +import { Input } from 'features/Components' + +export default { + component: Input, + title: 'Input', +} + +export const Empty = () => ( + +) + +export const EmailPassword = () => ( + + + + +) diff --git a/src/features/Components/Input/styled.tsx b/src/features/Components/Input/styled.tsx new file mode 100644 index 00000000..5269fc46 --- /dev/null +++ b/src/features/Components/Input/styled.tsx @@ -0,0 +1,70 @@ +import styled from 'styled-components/macro' + +export type TInputWrapper = { + px?: number, + wrapperWidth?: number, +} + +export const InputWrapper = styled.div` + width: ${({ wrapperWidth }) => (wrapperWidth ? `${wrapperWidth}px` : '100%')}; + height: 48px; + margin: 20px 0; + padding-left: ${({ px = 24 }) => (px ? `${px}px` : '')}; + padding-right: ${({ px = 24 }) => (px ? `${px}px` : '')}; + padding-top: 13px; + padding-bottom: 11px; + display: flex; + align-items: center; + background-color: #3F3F3F; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); + border-radius: 2px; +` + +type TLabel = { + labelWidth?: number, +} + +export const Label = styled.label` + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + padding-top: 2px; + color: ${({ theme: { colors } }) => colors.secondary}; + width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; +` + +type TInputStyled = { + inputWidth?: number, +} + +export const InputStyled = styled.input` + flex-grow: 1; + font-weight: bold; + font-size: 20px; + line-height: 24px; + width: ${({ inputWidth }) => (inputWidth ? `${inputWidth}px` : '')}; + background-color: transparent; + border: transparent; + margin-left: 24px; + color: ${({ theme: { colors } }) => colors.text}; + + &[type='password'] { + letter-spacing: 6px; + } + + :focus { + border-color: transparent; + outline: none; + } + + :-webkit-autofill, + :-webkit-autofill:hover, + :-webkit-autofill:focus, + :-webkit-autofill:active { + box-shadow: 0 0 0 30px #3F3F3F inset; + caret-color: ${({ theme: { colors } }) => colors.text}; + -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text}; + } +` diff --git a/src/features/Components/index.tsx b/src/features/Components/index.tsx new file mode 100644 index 00000000..492b3b01 --- /dev/null +++ b/src/features/Components/index.tsx @@ -0,0 +1,2 @@ +export * from './Input' +export * from './Button' diff --git a/src/features/GlobalStyles/index.tsx b/src/features/GlobalStyles/index.tsx new file mode 100644 index 00000000..b281bcdf --- /dev/null +++ b/src/features/GlobalStyles/index.tsx @@ -0,0 +1,46 @@ +import { createGlobalStyle } from 'styled-components/macro' + +export const GlobalStyles = createGlobalStyle` + *, *:before, *:after { + box-sizing: border-box; + } + + body { + min-height: 100vh; + margin: 0; + padding: 0; + font-family: Montserrat, Tahoma, sans-serif; + font-size: 12px; + line-height: 12px; + color: #000; + } + + h1, h2, h3, h4, h5, h6, p, ul, li { + margin: 0; + padding: 0; + font-size: 12px; + line-height: 12px; + } + + ul, li { + list-style: none; + } + + a { + text-decoration: none; + color: #000; + } + + fieldset { + margin: 0; + min-width: 0; + padding: 0; + border: 0; + } + + button, input, select, textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; + } +`