├── .DS_Store ├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── README.md ├── docs ├── demo.gif └── examples │ ├── buymetesla.png │ └── nike-calendar.png ├── package.json ├── src ├── MobileSizedView.styles.ts ├── MobileSizedView.tsx ├── MobileSizedView.types.ts ├── hooks │ ├── index.ts │ ├── useScreenSize.ts │ └── useWindowSize.ts └── index.ts ├── tsconfig.json └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhoyeo/react-mobile-sized-view/a4d59917f70254e1230451b2194d800aab7252d8/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | lerna-debug.log* 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | *.lcov 26 | 27 | # nyc test coverage 28 | .nyc_output 29 | 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 31 | .grunt 32 | 33 | # Bower dependency directory (https://bower.io/) 34 | bower_components 35 | 36 | # node-waf configuration 37 | .lock-wscript 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | build/Release 41 | 42 | # Dependency directories 43 | node_modules/ 44 | jspm_packages/ 45 | 46 | # TypeScript v1 declaration files 47 | typings/ 48 | 49 | # TypeScript cache 50 | *.tsbuildinfo 51 | 52 | # Optional npm cache directory 53 | .npm 54 | 55 | # Optional eslint cache 56 | .eslintcache 57 | 58 | # Microbundle cache 59 | .rpt2_cache/ 60 | .rts2_cache_cjs/ 61 | .rts2_cache_es/ 62 | .rts2_cache_umd/ 63 | 64 | # Optional REPL history 65 | .node_repl_history 66 | 67 | # Output of 'npm pack' 68 | *.tgz 69 | 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # dotenv environment variables file 74 | .env 75 | .env.test 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | 80 | # Next.js build output 81 | .next 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | README.md 2 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: true, 3 | jsxBracketSameLine: false, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-mobile-sized-view 2 | React Mobile Sized View - 🍑 Responsive Mobile-sized Wrapper for React | Product Hunt 3 | 4 | - Featured on [reactjsexample.com](https://reactjsexample.com/a-neumorphism-style-mobile-sized-view-component-for-react/)(thx editor 🙇) 5 | 6 | ![demo image](https://github.com/junhoyeo/react-mobile-sized-view/raw/main/docs/demo.gif) 7 | 8 | > 🍑 Responsive Mobile-sized Wrapper for React 9 | 10 | ## 🚀 Examples 11 | 12 | 13 | > ⚠️ Warning: **The following examples can be using the outdated version of this package, and can not be the best usage here**(this package was very ugly before I tidy up lol). Please use issues and PRs in this repository for sharing more ideas and suggestions, including proper exploits 14 | 15 | - [junhoyeo/buymetesla](https://github.com/junhoyeo/buymetesla) 16 | - [junhoyeo/NIKE-THE-DRAW-Calendar](https://github.com/junhoyeo/NIKE-THE-DRAW-Calendar) 17 | - [stevejkang/vue-mobile-sized-view](https://github.com/stevejkang/vue-mobile-sized-view) 18 | 19 | > **[🚀 Add your apps here too!](https://github.com/junhoyeo/react-mobile-sized-view/issues/new)** 20 | 21 | ## 📦 Usage 22 | 23 | ```bash 24 | yarn add styled-components && yarn add -D @types/styled-components 25 | yarn add react-mobile-sized-view 26 | ``` 27 | 28 | ```tsx 29 | import React from 'react'; 30 | import MobileSizedView from 'react-mobile-sized-view'; 31 | 32 | const App: React.FC = () => ( 33 | 41 |

Title in Screen

42 | 43 | ); 44 | 45 | export default App; 46 | ``` 47 | 48 | ## ⚓️ Hooks 49 | 50 | ```tsx 51 | import { useScreenSize } from 'react-mobile-sized-view'; 52 | 53 | const SomeComponent: React.FC = () => { 54 | const { width: screenWidth } = useScreenSize(); 55 | // Comes with SSR support 56 | 57 | return ( 58 |
65 | ); 66 | }; 67 | ``` 68 | 69 | - [useScreenSize](https://github.com/junhoyeo/react-mobile-sized-view/blob/main/src/hooks/useScreenSize.ts): Use this to get the size of the `MobileSizedView` 70 | - [useWindowSize](https://github.com/junhoyeo/react-mobile-sized-view/blob/main/src/hooks/useWindowSize.ts) 71 | -------------------------------------------------------------------------------- /docs/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhoyeo/react-mobile-sized-view/a4d59917f70254e1230451b2194d800aab7252d8/docs/demo.gif -------------------------------------------------------------------------------- /docs/examples/buymetesla.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhoyeo/react-mobile-sized-view/a4d59917f70254e1230451b2194d800aab7252d8/docs/examples/buymetesla.png -------------------------------------------------------------------------------- /docs/examples/nike-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junhoyeo/react-mobile-sized-view/a4d59917f70254e1230451b2194d800aab7252d8/docs/examples/nike-calendar.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-mobile-sized-view", 3 | "version": "2.0.0", 4 | "description": "Mobile sized view component for React", 5 | "main": "lib/index.js", 6 | "types": "lib/index.d.ts", 7 | "typings": "lib/index.d.ts", 8 | "repository": "https://github.com/junhoyeo/react-mobile-sized-view", 9 | "author": { 10 | "name": "JunhoYeo", 11 | "email": "hanaro0704@naver.com" 12 | }, 13 | "license": "MIT", 14 | "scripts": { 15 | "build": "tsc", 16 | "install-peers": "install-peers -f" 17 | }, 18 | "files": [ 19 | "lib", 20 | "README.md", 21 | "LICENSE" 22 | ], 23 | "peerDependencies": { 24 | "react": "^16.13.1" 25 | }, 26 | "devDependencies": { 27 | "@types/react": "^16.9.34", 28 | "@types/styled-components": "^5.1.0", 29 | "install-peers-cli": "^2.2.0", 30 | "typescript": "^3.8.3" 31 | }, 32 | "dependencies": { 33 | "styled-components": "^5.1.1", 34 | "tslib": "^2.0.3" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/MobileSizedView.styles.ts: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | 3 | import { 4 | ILayout, 5 | IScreen, 6 | } from './MobileSizedView.types'; 7 | 8 | export const Layout = styled.main` 9 | height: 100%; 10 | min-height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | `; 14 | 15 | export const ScreenWrapper = styled.div` 16 | width: 90%; 17 | display: flex; 18 | align-items: flex-end; 19 | justify-content: center; 20 | position: relative; 21 | 22 | @media screen and (max-width: 1100px) { 23 | width: 100%; 24 | } 25 | `; 26 | 27 | export const Screen = styled.div` 28 | width: 100%; 29 | max-width: 500px; 30 | height: 100vh; 31 | display: flex; 32 | flex-direction: column; 33 | position: relative; 34 | 35 | @media screen and (max-width: 1100px) { 36 | margin-right: 25px; 37 | } 38 | 39 | @media screen and (max-width: 900px) { 40 | margin-right: 0; 41 | } 42 | 43 | @media screen and (max-width: 600px) { 44 | margin-right: 0; 45 | max-width: 100%; 46 | height: 100vh; 47 | border-top-left-radius: 0; 48 | border-top-right-radius: 0; 49 | } 50 | 51 | ${({ isRounded = false }) => isRounded && css` 52 | height: calc(100vh - 45px); 53 | border-top-left-radius: 25px; 54 | border-top-right-radius: 25px; 55 | `}; 56 | `; 57 | -------------------------------------------------------------------------------- /src/MobileSizedView.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | Layout, 5 | ScreenWrapper, 6 | Screen, 7 | } from './MobileSizedView.styles'; 8 | import IMobileSizedView from './MobileSizedView.types'; 9 | 10 | const MobileSizedView: React.FC = ({ 11 | children, 12 | isRounded = false, 13 | absoluteChildren = null, 14 | screenStyle = {}, 15 | screenWrapperStyle = {}, 16 | ...props 17 | }) => { 18 | return ( 19 | 20 | 21 | 22 | {children} 23 | 24 | {absoluteChildren} 25 | 26 | 27 | ); 28 | }; 29 | 30 | export default MobileSizedView; 31 | -------------------------------------------------------------------------------- /src/MobileSizedView.types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface ILayout extends React.HTMLAttributes { 4 | screenStyle?: React.CSSProperties; 5 | screenWrapperStyle?: React.CSSProperties; 6 | } 7 | 8 | export interface IScreen { 9 | isRounded?: boolean; 10 | } 11 | 12 | export default interface IMobileSizedView extends ILayout, IScreen { 13 | absoluteChildren?: React.ReactNode; 14 | } 15 | -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export { default as useScreenSize } from './useScreenSize'; 2 | export { default as useWindowSize } from './useWindowSize'; 3 | -------------------------------------------------------------------------------- /src/hooks/useScreenSize.ts: -------------------------------------------------------------------------------- 1 | import useWindowSize from './useWindowSize'; 2 | 3 | export default function useScreenSize() { 4 | const { 5 | width: screenWidth = 1980, 6 | height = 1080, 7 | } = useWindowSize(); 8 | const isMobile = screenWidth <= 600; 9 | 10 | return { 11 | width: isMobile ? screenWidth : 500, 12 | height, 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /src/hooks/useWindowSize.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState, useEffect } from 'react'; 2 | 3 | export default function useWindowSize(): { 4 | width: number | undefined, 5 | height: number | undefined, 6 | } { 7 | const isClient = typeof window === 'object'; 8 | 9 | const getSize = useCallback( 10 | () => ({ 11 | width: isClient ? window.innerWidth : undefined, 12 | height: isClient ? window.innerHeight : undefined, 13 | }), 14 | [isClient], 15 | ); 16 | 17 | const [windowSize, setWindowSize] = useState(getSize); 18 | 19 | useEffect( 20 | () => { 21 | if (!isClient) { 22 | return; 23 | } 24 | 25 | function handleResize() { 26 | setWindowSize(getSize()); 27 | } 28 | 29 | window.addEventListener('resize', handleResize); 30 | return () => window.removeEventListener('resize', handleResize); 31 | }, 32 | [isClient, getSize], 33 | ); 34 | 35 | return windowSize; 36 | } 37 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './MobileSizedView'; 2 | export { useScreenSize, useWindowSize } from './hooks'; 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "baseUrl": ".", 5 | "declaration": true, 6 | "esModuleInterop": true, 7 | "importHelpers": true, 8 | "jsx": "react", 9 | "module": "commonjs", 10 | "moduleResolution": "node", 11 | "paths": { 12 | "@/*": [ 13 | "src/*" 14 | ] 15 | }, 16 | "rootDir": "src", 17 | "skipLibCheck": true, 18 | "sourceMap": true, 19 | "strict": true, 20 | "target": "esnext", 21 | "outDir": "lib" 22 | }, 23 | "exclude": [ 24 | "node_modules", 25 | "lib", 26 | "esm", 27 | "**/__tests__", 28 | "**/__test__", 29 | "example", 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@babel/code-frame@^7.10.3": 6 | version "7.10.3" 7 | resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.3.tgz#324bcfd8d35cd3d47dae18cde63d752086435e9a" 8 | integrity sha512-fDx9eNW0qz0WkUeqL6tXEXzVlPh6Y5aCDEZesl0xBGA8ndRukX91Uk44ZqnkECp01NAZUdCAl+aiQNGi0k88Eg== 9 | dependencies: 10 | "@babel/highlight" "^7.10.3" 11 | 12 | "@babel/generator@^7.10.3": 13 | version "7.10.3" 14 | resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.3.tgz#32b9a0d963a71d7a54f5f6c15659c3dbc2a523a5" 15 | integrity sha512-drt8MUHbEqRzNR0xnF8nMehbY11b1SDkRw03PSNH/3Rb2Z35oxkddVSi3rcaak0YJQ86PCuE7Qx1jSFhbLNBMA== 16 | dependencies: 17 | "@babel/types" "^7.10.3" 18 | jsesc "^2.5.1" 19 | lodash "^4.17.13" 20 | source-map "^0.5.0" 21 | 22 | "@babel/helper-annotate-as-pure@^7.0.0": 23 | version "7.10.1" 24 | resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz#f6d08acc6f70bbd59b436262553fb2e259a1a268" 25 | integrity sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw== 26 | dependencies: 27 | "@babel/types" "^7.10.1" 28 | 29 | "@babel/helper-function-name@^7.10.3": 30 | version "7.10.3" 31 | resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.3.tgz#79316cd75a9fa25ba9787ff54544307ed444f197" 32 | integrity sha512-FvSj2aiOd8zbeqijjgqdMDSyxsGHaMt5Tr0XjQsGKHD3/1FP3wksjnLAWzxw7lvXiej8W1Jt47SKTZ6upQNiRw== 33 | dependencies: 34 | "@babel/helper-get-function-arity" "^7.10.3" 35 | "@babel/template" "^7.10.3" 36 | "@babel/types" "^7.10.3" 37 | 38 | "@babel/helper-get-function-arity@^7.10.3": 39 | version "7.10.3" 40 | resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.3.tgz#3a28f7b28ccc7719eacd9223b659fdf162e4c45e" 41 | integrity sha512-iUD/gFsR+M6uiy69JA6fzM5seno8oE85IYZdbVVEuQaZlEzMO2MXblh+KSPJgsZAUx0EEbWXU0yJaW7C9CdAVg== 42 | dependencies: 43 | "@babel/types" "^7.10.3" 44 | 45 | "@babel/helper-module-imports@^7.0.0": 46 | version "7.10.3" 47 | resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.3.tgz#766fa1d57608e53e5676f23ae498ec7a95e1b11a" 48 | integrity sha512-Jtqw5M9pahLSUWA+76nhK9OG8nwYXzhQzVIGFoNaHnXF/r4l7kz4Fl0UAW7B6mqC5myoJiBP5/YQlXQTMfHI9w== 49 | dependencies: 50 | "@babel/types" "^7.10.3" 51 | 52 | "@babel/helper-split-export-declaration@^7.10.1": 53 | version "7.10.1" 54 | resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz#c6f4be1cbc15e3a868e4c64a17d5d31d754da35f" 55 | integrity sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g== 56 | dependencies: 57 | "@babel/types" "^7.10.1" 58 | 59 | "@babel/helper-validator-identifier@^7.10.3": 60 | version "7.10.3" 61 | resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.3.tgz#60d9847f98c4cea1b279e005fdb7c28be5412d15" 62 | integrity sha512-bU8JvtlYpJSBPuj1VUmKpFGaDZuLxASky3LhaKj3bmpSTY6VWooSM8msk+Z0CZoErFye2tlABF6yDkT3FOPAXw== 63 | 64 | "@babel/highlight@^7.10.3": 65 | version "7.10.3" 66 | resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.3.tgz#c633bb34adf07c5c13156692f5922c81ec53f28d" 67 | integrity sha512-Ih9B/u7AtgEnySE2L2F0Xm0GaM729XqqLfHkalTsbjXGyqmf/6M0Cu0WpvqueUlW+xk88BHw9Nkpj49naU+vWw== 68 | dependencies: 69 | "@babel/helper-validator-identifier" "^7.10.3" 70 | chalk "^2.0.0" 71 | js-tokens "^4.0.0" 72 | 73 | "@babel/parser@^7.10.3": 74 | version "7.10.3" 75 | resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.3.tgz#7e71d892b0d6e7d04a1af4c3c79d72c1f10f5315" 76 | integrity sha512-oJtNJCMFdIMwXGmx+KxuaD7i3b8uS7TTFYW/FNG2BT8m+fmGHoiPYoH0Pe3gya07WuFmM5FCDIr1x0irkD/hyA== 77 | 78 | "@babel/template@^7.10.3": 79 | version "7.10.3" 80 | resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.3.tgz#4d13bc8e30bf95b0ce9d175d30306f42a2c9a7b8" 81 | integrity sha512-5BjI4gdtD+9fHZUsaxPHPNpwa+xRkDO7c7JbhYn2afvrkDu5SfAAbi9AIMXw2xEhO/BR35TqiW97IqNvCo/GqA== 82 | dependencies: 83 | "@babel/code-frame" "^7.10.3" 84 | "@babel/parser" "^7.10.3" 85 | "@babel/types" "^7.10.3" 86 | 87 | "@babel/traverse@^7.4.5": 88 | version "7.10.3" 89 | resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.3.tgz#0b01731794aa7b77b214bcd96661f18281155d7e" 90 | integrity sha512-qO6623eBFhuPm0TmmrUFMT1FulCmsSeJuVGhiLodk2raUDFhhTECLd9E9jC4LBIWziqt4wgF6KuXE4d+Jz9yug== 91 | dependencies: 92 | "@babel/code-frame" "^7.10.3" 93 | "@babel/generator" "^7.10.3" 94 | "@babel/helper-function-name" "^7.10.3" 95 | "@babel/helper-split-export-declaration" "^7.10.1" 96 | "@babel/parser" "^7.10.3" 97 | "@babel/types" "^7.10.3" 98 | debug "^4.1.0" 99 | globals "^11.1.0" 100 | lodash "^4.17.13" 101 | 102 | "@babel/types@^7.10.1", "@babel/types@^7.10.3": 103 | version "7.10.3" 104 | resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.3.tgz#6535e3b79fea86a6b09e012ea8528f935099de8e" 105 | integrity sha512-nZxaJhBXBQ8HVoIcGsf9qWep3Oh3jCENK54V4mRF7qaJabVsAYdbTtmSD8WmAp1R6ytPiu5apMwSXyxB1WlaBA== 106 | dependencies: 107 | "@babel/helper-validator-identifier" "^7.10.3" 108 | lodash "^4.17.13" 109 | to-fast-properties "^2.0.0" 110 | 111 | "@emotion/is-prop-valid@^0.8.8": 112 | version "0.8.8" 113 | resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" 114 | integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== 115 | dependencies: 116 | "@emotion/memoize" "0.7.4" 117 | 118 | "@emotion/memoize@0.7.4": 119 | version "0.7.4" 120 | resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" 121 | integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== 122 | 123 | "@emotion/stylis@^0.8.4": 124 | version "0.8.5" 125 | resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" 126 | integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== 127 | 128 | "@emotion/unitless@^0.7.4": 129 | version "0.7.5" 130 | resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" 131 | integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== 132 | 133 | "@types/hoist-non-react-statics@*": 134 | version "3.3.1" 135 | resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" 136 | integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== 137 | dependencies: 138 | "@types/react" "*" 139 | hoist-non-react-statics "^3.3.0" 140 | 141 | "@types/prop-types@*": 142 | version "15.7.3" 143 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" 144 | integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== 145 | 146 | "@types/react-native@*": 147 | version "0.62.13" 148 | resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.13.tgz#c688c5ae03e426f927f7e1fa1a59cd067f35d1c2" 149 | integrity sha512-hs4/tSABhcJx+J8pZhVoXHrOQD89WFmbs8QiDLNSA9zNrD46pityAuBWuwk1aMjPk9I3vC5ewkJroVRHgRIfdg== 150 | dependencies: 151 | "@types/react" "*" 152 | 153 | "@types/react-native@^0.62.4": 154 | version "0.62.10" 155 | resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.10.tgz#82c481df21db4e7460755dc3fc7091e333a1d2bd" 156 | integrity sha512-QR4PGrzZ3IvRIHlScyIPuv2GV8tD/BMICZz514KGvn3KHbh0mLphHHemtHZC1o8u4xM5LxwVpMpMYHQ+ncSfag== 157 | dependencies: 158 | "@types/react" "*" 159 | 160 | "@types/react@*", "@types/react@^16.9.34": 161 | version "16.9.35" 162 | resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.35.tgz#a0830d172e8aadd9bd41709ba2281a3124bbd368" 163 | integrity sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ== 164 | dependencies: 165 | "@types/prop-types" "*" 166 | csstype "^2.2.0" 167 | 168 | "@types/styled-components@^5.1.0": 169 | version "5.1.0" 170 | resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6" 171 | integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ== 172 | dependencies: 173 | "@types/hoist-non-react-statics" "*" 174 | "@types/react" "*" 175 | "@types/react-native" "*" 176 | csstype "^2.2.0" 177 | 178 | ansi-styles@^3.2.1: 179 | version "3.2.1" 180 | resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" 181 | integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== 182 | dependencies: 183 | color-convert "^1.9.0" 184 | 185 | "babel-plugin-styled-components@>= 1": 186 | version "1.10.7" 187 | resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c" 188 | integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg== 189 | dependencies: 190 | "@babel/helper-annotate-as-pure" "^7.0.0" 191 | "@babel/helper-module-imports" "^7.0.0" 192 | babel-plugin-syntax-jsx "^6.18.0" 193 | lodash "^4.17.11" 194 | 195 | babel-plugin-syntax-jsx@^6.18.0: 196 | version "6.18.0" 197 | resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" 198 | integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY= 199 | 200 | camelize@^1.0.0: 201 | version "1.0.0" 202 | resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" 203 | integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= 204 | 205 | chalk@^2.0.0: 206 | version "2.4.2" 207 | resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" 208 | integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== 209 | dependencies: 210 | ansi-styles "^3.2.1" 211 | escape-string-regexp "^1.0.5" 212 | supports-color "^5.3.0" 213 | 214 | color-convert@^1.9.0: 215 | version "1.9.3" 216 | resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" 217 | integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== 218 | dependencies: 219 | color-name "1.1.3" 220 | 221 | color-name@1.1.3: 222 | version "1.1.3" 223 | resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" 224 | integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= 225 | 226 | commander@^2.20.0: 227 | version "2.20.3" 228 | resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" 229 | integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== 230 | 231 | css-color-keywords@^1.0.0: 232 | version "1.0.0" 233 | resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" 234 | integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= 235 | 236 | css-to-react-native@^3.0.0: 237 | version "3.0.0" 238 | resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" 239 | integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== 240 | dependencies: 241 | camelize "^1.0.0" 242 | css-color-keywords "^1.0.0" 243 | postcss-value-parser "^4.0.2" 244 | 245 | csstype@^2.2.0: 246 | version "2.6.10" 247 | resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" 248 | integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w== 249 | 250 | debug@^4.1.0: 251 | version "4.1.1" 252 | resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791" 253 | integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw== 254 | dependencies: 255 | ms "^2.1.1" 256 | 257 | escape-string-regexp@^1.0.5: 258 | version "1.0.5" 259 | resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" 260 | integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= 261 | 262 | executioner@^2.0.1: 263 | version "2.0.1" 264 | resolved "https://registry.yarnpkg.com/executioner/-/executioner-2.0.1.tgz#add328e03bc45dd598f358fbb529fc0be0ec6fcd" 265 | integrity sha1-rdMo4DvEXdWY81j7tSn8C+Dsb80= 266 | dependencies: 267 | mixly "^1.0.0" 268 | 269 | fulcon@^1.0.1: 270 | version "1.0.2" 271 | resolved "https://registry.yarnpkg.com/fulcon/-/fulcon-1.0.2.tgz#8a4dfda4c73fcd9cc62a79d5045c392b45547320" 272 | integrity sha1-ik39pMc/zZzGKnnVBFw5K0VUcyA= 273 | 274 | globals@^11.1.0: 275 | version "11.12.0" 276 | resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" 277 | integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== 278 | 279 | has-flag@^3.0.0: 280 | version "3.0.0" 281 | resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" 282 | integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= 283 | 284 | hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: 285 | version "3.3.2" 286 | resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" 287 | integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== 288 | dependencies: 289 | react-is "^16.7.0" 290 | 291 | install-peers-cli@^2.2.0: 292 | version "2.2.0" 293 | resolved "https://registry.yarnpkg.com/install-peers-cli/-/install-peers-cli-2.2.0.tgz#f76f1ec8ac9fa7f920c05743e011554edad85f8d" 294 | integrity sha512-scSNvF49HDOLNm2xLFwST23g/OvfsceiA087bcGBgZP/ZNCrvpSaCn5IrWNZ2XYmFFykXF/6J1Zgm+D/JgRgtA== 295 | dependencies: 296 | commander "^2.20.0" 297 | executioner "^2.0.1" 298 | 299 | js-tokens@^4.0.0: 300 | version "4.0.0" 301 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 302 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 303 | 304 | jsesc@^2.5.1: 305 | version "2.5.2" 306 | resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" 307 | integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== 308 | 309 | lodash@^4.17.11, lodash@^4.17.13: 310 | version "4.17.21" 311 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" 312 | integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== 313 | 314 | mixly@^1.0.0: 315 | version "1.0.0" 316 | resolved "https://registry.yarnpkg.com/mixly/-/mixly-1.0.0.tgz#9b5a2e1f63e6dfba0d30e6797ffae62ab1dc24ef" 317 | integrity sha1-m1ouH2Pm37oNMOZ5f/rmKrHcJO8= 318 | dependencies: 319 | fulcon "^1.0.1" 320 | 321 | ms@^2.1.1: 322 | version "2.1.2" 323 | resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" 324 | integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== 325 | 326 | postcss-value-parser@^4.0.2: 327 | version "4.1.0" 328 | resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" 329 | integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== 330 | 331 | react-is@^16.7.0: 332 | version "16.13.1" 333 | resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" 334 | integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== 335 | 336 | shallowequal@^1.1.0: 337 | version "1.1.0" 338 | resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" 339 | integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== 340 | 341 | source-map@^0.5.0: 342 | version "0.5.7" 343 | resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" 344 | integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= 345 | 346 | styled-components@^5.1.1: 347 | version "5.1.1" 348 | resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d" 349 | integrity sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg== 350 | dependencies: 351 | "@babel/helper-module-imports" "^7.0.0" 352 | "@babel/traverse" "^7.4.5" 353 | "@emotion/is-prop-valid" "^0.8.8" 354 | "@emotion/stylis" "^0.8.4" 355 | "@emotion/unitless" "^0.7.4" 356 | babel-plugin-styled-components ">= 1" 357 | css-to-react-native "^3.0.0" 358 | hoist-non-react-statics "^3.0.0" 359 | shallowequal "^1.1.0" 360 | supports-color "^5.5.0" 361 | 362 | supports-color@^5.3.0, supports-color@^5.5.0: 363 | version "5.5.0" 364 | resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" 365 | integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== 366 | dependencies: 367 | has-flag "^3.0.0" 368 | 369 | to-fast-properties@^2.0.0: 370 | version "2.0.0" 371 | resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" 372 | integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= 373 | 374 | tslib@^2.0.3: 375 | version "2.0.3" 376 | resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c" 377 | integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ== 378 | 379 | typescript@^3.8.3: 380 | version "3.9.3" 381 | resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.3.tgz#d3ac8883a97c26139e42df5e93eeece33d610b8a" 382 | integrity sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ== 383 | --------------------------------------------------------------------------------