Merge pull request #104 from connect-foundation/cocode

Cocode 1차 배포
connect-foundation · Nov 20, 2019 · f15c277 · f15c277
2 parents d220d8e + 76cd047
commit f15c277
Show file tree

Hide file tree

Showing 58 changed files with 7,782 additions and 183 deletions.
diff --git a/cocode/.storybook/addons.js b/cocode/.storybook/addons.js
@@ -0,0 +1,4 @@
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+
diff --git a/cocode/.storybook/config.js b/cocode/.storybook/config.js
@@ -0,0 +1,7 @@
+import { addDecorator, configure } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { ThemeDecorator } from 'stories/decorators/ThemeDecorator';
+
+addDecorator(withKnobs);
+addDecorator(ThemeDecorator);
+configure(require.context('../src', true, /\.stories\.js$/), module);
diff --git a/cocode/.storybook/webpack.config.js b/cocode/.storybook/webpack.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = async ({ config }) => {
+
+	config.resolve.modules = [
+		...(config.resolve.modules || []),
+		path.resolve(path.join(__dirname), '../src'),
+	];
+	return config;
+};
diff --git a/cocode/dev.env b/cocode/dev.env
diff --git a/cocode/package-lock.json b/cocode/package-lock.json
diff --git a/cocode/package.json b/cocode/package.json
@@ -10,7 +10,9 @@
 		"build": "webpack --mode production",
 		"build:dev": "webpack --mode development",
 		"test:dev": "react-scripts test",
-		"test": "jest"
+		"test": "jest",
+		"storybook": "start-storybook -p 9009 -s public",
+		"build-storybook": "build-storybook -s public"
 	},
 	"husky": {
 		"hooks": {
@@ -39,6 +41,7 @@
 		"@material-ui/core": "^4.6.0",
 		"axios": "^0.19.0",
 		"dotenv": "^8.2.0",
+		"file-loader": "^4.2.0",
 		"monaco-editor": "^0.18.1",
 		"react": "^16.11.0",
 		"react-dates": "^21.3.2",
@@ -55,6 +58,11 @@
 		"@babel/preset-react": "^7.7.0",
 		"@commitlint/cli": "^8.2.0",
 		"@commitlint/config-conventional": "^8.2.0",
+		"@storybook/addon-actions": "^5.2.6",
+		"@storybook/addon-knobs": "^5.2.6",
+		"@storybook/addon-links": "^5.2.6",
+		"@storybook/addons": "^5.2.6",
+		"@storybook/react": "^5.2.6",
 		"@testing-library/jest-dom": "^4.2.3",
 		"@testing-library/react": "^9.3.2",
 		"babel": "^6.23.0",
@@ -73,5 +81,14 @@
 		"style-loader": "^1.0.0",
 		"webpack-cli": "^3.3.10",
 		"webpack-dev-server": "^3.9.0"
+	},
+	"jest": {
+		"moduleDirectories": [
+			"node_modules",
+			"src"
+		],
+		"moduleNameMapper": {
+			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test_setup/__mocks__/fileMock.js"
+		}
 	}
 }
diff --git a/cocode/public/index.html b/cocode/public/index.html
@@ -10,6 +10,7 @@
 	</head>
 	<body>
 		<div id="root"></div>
+		<div id="modal"></div>
 		<script src="./bundle.js"></script>
 	</body>
 </html>
diff --git a/cocode/src/App.js b/cocode/src/App.js
@@ -1,21 +1,23 @@
 import React from 'react';
 import GlobalStyle from './components/GlobalStyle';
-import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
 
 import { Home, DashBoard, Project } from './pages';
 
+import { DEFAULT_THEME } from './constants/theme';
+
 function App() {
 	return (
 		<Router>
-			<GlobalStyle />
-			<Link to="/">홈</Link>
-			<Link to="/dashboard">대시보드</Link>
-			<Link to="/project">project</Link>
-			<Switch>
-				<Route exact path="/" component={Home} />
-				<Route path="/dashboard" component={DashBoard} />
-				<Route path="/project" component={Project} />
-			</Switch>
+			<ThemeProvider theme={DEFAULT_THEME}>
+				<GlobalStyle />
+				<Switch>
+					<Route exact path="/" component={Home} />
+					<Route path="/dashboard" component={DashBoard} />
+					<Route path="/project" component={Project} />
+				</Switch>
+			</ThemeProvider>
 		</Router>
 	);
 }

diff --git a/cocode/src/components/Browser/BackwardButton/backward.svg b/cocode/src/components/Browser/BackwardButton/backward.svg
diff --git a/cocode/src/components/Browser/BackwardButton/index.js b/cocode/src/components/Browser/BackwardButton/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import backward from './backward.svg';
+
+const IMAGE_ALT = 'go backward';
+
+function BackwardButton({ className, onClick }) {
+	return (
+		<button className={className} onClick={onClick}>
+			<img src={backward} alt={IMAGE_ALT} />
+		</button>
+	);
+}
+
+export default BackwardButton;
diff --git a/cocode/src/components/Browser/ForwardButton/forward.svg b/cocode/src/components/Browser/ForwardButton/forward.svg
diff --git a/cocode/src/components/Browser/ForwardButton/index.js b/cocode/src/components/Browser/ForwardButton/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import forward from './forward.svg';
+
+const IMAGE_ALT = 'go forward';
+
+function ForwardButton({ className, onClick }) {
+	return (
+		<button className={className} onClick={onClick}>
+			<img src={forward} alt={IMAGE_ALT} />
+		</button>
+	);
+}
+
+export default ForwardButton;
diff --git a/cocode/src/components/Browser/ReloadButton/index.js b/cocode/src/components/Browser/ReloadButton/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import reload from './reload.svg';
+
+const IMAGE_ALT = 'reload page';
+
+function ReloadButton({ className, onClick }) {
+	return (
+		<button className={className} onClick={onClick}>
+			<img src={reload} alt={IMAGE_ALT} />
+		</button>
+	);
+}
+
+export default ReloadButton;
diff --git a/cocode/src/components/Browser/ReloadButton/reload.svg b/cocode/src/components/Browser/ReloadButton/reload.svg
diff --git a/cocode/src/components/Browser/index.js b/cocode/src/components/Browser/index.js
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import * as Styled from './style';
+
+import BackwardButton from './BackwardButton';
+import ForwardButton from './ForwardButton';
+import ReloadButton from './ReloadButton';
+
+import { KEY_CODE_ENTER } from 'constants/keyCode';
+
+const DEFAULT_URL = 'http://localhost:3000/';
+
+function BrowserHeader({
+	onGoBackward,
+	onGoForward,
+	onReload,
+	addressInputURL,
+	handleAddressInputKeyDown,
+	theme
+}) {
+	return (
+		<Styled.BrowserHeader browserHeaderBGColor={theme.browserHeaderBGColor}>
+			<BackwardButton
+				className="BrowserHeader-item"
+				onClick={onGoBackward}
+			/>
+			<ForwardButton
+				className="BrowserHeader-item"
+				onClick={onGoForward}
+			/>
+			<ReloadButton className="BrowserHeader-item" onClick={onReload} />
+			<Styled.AddressInput
+				className="BrowserHeader-item"
+				type="url"
+				aria-label="browserAddress"
+				defaultValue={addressInputURL}
+				onKeyUp={handleAddressInputKeyDown}
+				adressInputBGColor={theme.adressInputBGColor}
+				adressInputFontColor={theme.adressInputTextColor}
+			/>
+		</Styled.BrowserHeader>
+	);
+}
+
+function Browser({ onGoBackward, onGoForward, onReload, url, theme }) {
+	const [addressInputURL, setAddressInput] = useState(
+		url ? url : DEFAULT_URL
+	);
+	const [currentURL, setCurrentURL] = useState(url ? url : DEFAULT_URL);
+
+	const handleAddressInputKeyDown = ({ keyCode, target: { value } }) => {
+		setAddressInput(value);
+		if (keyCode === KEY_CODE_ENTER) setCurrentURL(value);
+	};
+
+	return (
+		<Styled.Browser height={theme.browserHeignt}>
+			<BrowserHeader
+				onGoBackward={onGoBackward}
+				onGoForward={onGoForward}
+				onReload={onReload}
+				addressInputURL={addressInputURL}
+				handleAddressInputKeyDown={handleAddressInputKeyDown}
+				theme={theme}
+			/>
+			<Styled.Iframe src={currentURL} />
+		</Styled.Browser>
+	);
+}
+
+export default Browser;
diff --git a/cocode/src/components/Browser/index.stories.js b/cocode/src/components/Browser/index.stories.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+
+import Browser from '.';
+
+export default {
+	title: 'Browser'
+};
+
+function BrowserDefault() {
+	return <Browser url={text('url', 'http://localhost:3000/')} />;
+}
+
+export { BrowserDefault };
diff --git a/cocode/src/components/Browser/style.js b/cocode/src/components/Browser/style.js
@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+const Browser = styled.section`
+	& {
+		display: flex;
+		flex-direction: column;
+		justify-content: stretch;
+
+		height: ${({ height }) => height};
+	}
+`;
+
+const BrowserHeader = styled.header`
+	& {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		padding: 0.4rem 0.6rem;
+
+		background-color: ${({ browserHeaderBGColor }) => browserHeaderBGColor};
+	}
+
+	.BrowserHeader-item {
+		margin: 0 0.5rem;
+	}
+`;
+
+const AddressInput = styled.input`
+	& {
+		flex-grow: 2;
+
+		padding: 0.5rem 1rem;
+
+		background: ${({ adressInputBGColor }) => adressInputBGColor};
+		color: ${({ adressInputTextColor }) => adressInputTextColor};
+		font-size: 1rem;
+	}
+`;
+
+const Iframe = styled.iframe`
+	& {
+		flex-grow: 2;
+		background-color: white;
+	}
+`;
+
+export { Browser, BrowserHeader, AddressInput, Iframe };
diff --git a/cocode/src/components/CloseButton/close.svg b/cocode/src/components/CloseButton/close.svg
diff --git a/cocode/src/components/CloseButton/index.js b/cocode/src/components/CloseButton/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import close from './close.svg';
+
+function CloseButton({ onClick }) {
+	return (
+		<button onClick={onClick}>
+			<img src={close} />
+		</button>
+	);
+}
+
+export default CloseButton;
diff --git a/cocode/src/components/ExampleButton/index.js b/cocode/src/components/ExampleButton/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { LinkButton, AButton, Button } from './style';
+
+function ExampleButton({ style = {}, to = null, href = null, ...props }) {
+	if (to) return <LinkButton style={style} {...props} />;
+
+	if (href) return <AButton style={style} {...props} />;
+
+	return <Button style={style} {...props} />;
+}
+
+export { ExampleButton as Button };
diff --git a/cocode/src/components/ExampleButton/index.stories.js b/cocode/src/components/ExampleButton/index.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
+import { Button } from '.';
+
+export default {
+	title: 'Button'
+};
+
+function basicButton() {
+	return <Button onClick={action('onClick')}>{text('Value', 'Text')}</Button>;
+}
+
+function hrefButton() {
+	return (
+		<Button href={text('href', 'https://www.naver.com')}>
+			{text('Value', 'Text')}
+		</Button>
+	);
+}
+
+function redButton() {
+	return <Button red={boolean('red', true)}>{text('Value', 'Text')}</Button>;
+}
+
+export { basicButton, hrefButton, redButton };