init base

ShMcK · ShMcK · commit deefd647b318 · 2019-12-24T09:58:38.000-08:00
diff --git a/.storybook/addons.js b/.storybook/addons.js
@@ -0,0 +1,2 @@
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -0,0 +1,7 @@
+import { configure } from "@storybook/react";
+
+// import default styles
+import "../src/styles";
+
+// automatically import all files ending in *.stories.js
+configure(require.context("../src/stories", true, /\.stories\.js$/), module);
diff --git a/package.json b/package.json
@@ -5,7 +5,9 @@
   "scripts": {
     "build": "react-app-rewired build",
     "start": "react-app-rewired start",
-    "test": "react-app-rewired test --watchAll=false"
+    "test": "react-app-rewired test --watchAll=false",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "browserslist": {
     "production": [
@@ -23,15 +25,26 @@
     "extends": "react-app"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
-    "@testing-library/user-event": "^8.0.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
+    "bootstrap": "^4.4.1",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-scripts": "^3.3.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.2.8",
+    "@storybook/addon-links": "^5.2.8",
+    "@storybook/addons": "^5.2.8",
+    "@storybook/react": "^5.2.8",
+    "@testing-library/dom": "^6.11.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.4.0",
+    "@testing-library/react-hooks": "^3.2.1",
     "jest-tap-reporter": "^1.9.0",
-    "react-app-rewired": "^2.1.5"
+    "react-app-rewired": "^2.1.5",
+    "react-test-renderer": "^16.12.0"
   }
 }
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,17 @@
 import React from "react";
+import Card from "react-bootstrap/Card";
+import { MessageForm } from "./components/MessageForm";
+import { USER } from "./config";
 
-const App = () => {
-  return <div>Welcome to CodeRoad</div>;
-};
+const App = () => (
+  <div className="App">
+    <Card className="Home">
+      <Card.Header className="Home_Title">Home</Card.Header>
+      <Card.Body className="Home_Body">
+        <MessageForm user={USER} />
+      </Card.Body>
+    </Card>
+  </div>
+);
 
 export default App;
diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import BootstrapImage from "react-bootstrap/Image";
+
+export const Avatar = ({ image }) => (
+  <BootstrapImage src={image} roundedCircle style={{ height: 49, width: 49 }} />
+);
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+import BootstrapCard from "react-bootstrap/Card";
+import { Avatar } from "../Avatar";
+import "./styles.css";
+
+export const Card = ({ children, profile_image, className, ...rest }) => {
+  return (
+    <BootstrapCard className={`Card ${className || ""}`} {...rest}>
+      <div className="Card_LeftColumn">
+        <Avatar image={profile_image} />
+      </div>
+      <div className="Card_RightColumn">{children}</div>
+    </BootstrapCard>
+  );
+};
diff --git a/src/components/Card/styles.css b/src/components/Card/styles.css
@@ -0,0 +1,17 @@
+.Card {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+  width: 100%;
+}
+
+.Card_LeftColumn {
+  display: flex;
+  width: 50px;
+  justify-content: center;
+}
+
+.Card_RightColumn {
+  padding-left: 1rem;
+  width: 100%;
+}
diff --git a/src/components/Icon/Button.js b/src/components/Icon/Button.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+export const IconButton = ({ children, className, ...rest }) => (
+  <button className={`Icon_Button ${className}`} {...rest}>
+    {children}
+  </button>
+);
diff --git a/src/components/Icon/CountWrapper.js b/src/components/Icon/CountWrapper.js
@@ -0,0 +1,8 @@
+import React from "react";
+
+export const IconCountWrapper = ({ children, count, ...rest }) => (
+  <div className="Icon_Countable" {...rest}>
+    {children}
+    {count > 0 && <span className="Icon_Count">{count}</span>}
+  </div>
+);
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+import * as SvgIcon from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./styles.css";
+
+const icons = {
+  comment: SvgIcon.faComment,
+  retweet: SvgIcon.faRetweet,
+  favorite: SvgIcon.faHeart,
+  share: SvgIcon.faShare,
+  loading: SvgIcon.faSpinner
+};
+
+export const Icon = ({ icon, active, highlight, ...rest }) => (
+  <FontAwesomeIcon
+    icon={icons[icon]}
+    color={active ? highlight : "lightgrey"}
+    {...rest}
+  />
+);
+
+export { IconButton } from "./Button";
+export { IconCountWrapper } from "./CountWrapper";
diff --git a/src/components/Icon/styles.css b/src/components/Icon/styles.css
@@ -0,0 +1,34 @@
+.Icon_Button {
+  border: none;
+  background-color: inherit;
+  padding: 0;
+}
+
+.Icon_Button:hover {
+  /* input styles */
+}
+
+.Icon_Button:focus {
+  outline: none !important;
+}
+
+.Icon_Countable {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 40px;
+  height: 30px;
+  color: lightgrey;
+}
+
+.Icon_Count {
+  font-size: 12px;
+  color: darkgrey;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed */
+}
diff --git a/src/components/MessageForm/index.js b/src/components/MessageForm/index.js
@@ -0,0 +1,49 @@
+import React from "react";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+
+import { Card } from "../Card";
+import { MAX_MESSAGE_TEXT_LENGTH } from "../../config";
+import "./styles.css";
+
+export const MessageForm = ({ user }) => {
+  let text = "";
+
+  const handleChange = event => {
+    event.preventDefault();
+    const updatedText = event.target.value;
+    text = updatedText; // TODO: update text on change
+  };
+
+  return (
+    <Card className="MessageForm" profile_image={user.profile_image}>
+      <Form>
+        <Form.Group>
+          <Form.Control
+            className="MessageForm_TextArea"
+            aria-label="message-form"
+            as="textarea"
+            rows="3"
+            placeholder="What's happening?"
+            value={text}
+            onChange={handleChange}
+          />
+        </Form.Group>
+        <div className="MessageForm_Options">
+          <span className="MessageForm_TextCount" title="text-count">
+            0 / {MAX_MESSAGE_TEXT_LENGTH} {/* TODO: update text letter count */}
+          </span>
+          <Button
+            className="MessageForm_TweetButton"
+            variant="primary"
+            type="submit"
+            role="tweet"
+            /* TODO: disable button if no text */
+          >
+            Tweet
+          </Button>
+        </div>
+      </Form>
+    </Card>
+  );
+};
diff --git a/src/components/MessageForm/styles.css b/src/components/MessageForm/styles.css
@@ -0,0 +1,39 @@
+.MessageForm {
+  border-bottom: 4px solid lightgrey;
+}
+
+.MessageForm_Form {
+  font-size: 15px;
+}
+
+.MessageForm_TextArea {
+  border: none;
+  padding-left: 15px;
+  padding-right: 15px;
+  resize: none;
+}
+
+.MessageForm_TextArea:focus {
+  border: none;
+  box-shadow: none;
+}
+
+.MessageForm_Options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 0px 2px;
+}
+
+.MessageForm_TextCount {
+  margin-right: 15px;
+}
+
+.MessageForm_TweetButton {
+  line-height: 1;
+  font-weight: bold;
+  text-align: center;
+  height: 39px;
+  min-width: 63px;
+  border-radius: 9999px;
+}
diff --git a/src/config.js b/src/config.js
@@ -0,0 +1,12 @@
+// Current User
+// TODO: implement user management
+export const USER = {
+  id_str: "1",
+  name: "Shawn McKay",
+  screen_name: "Sh_McK",
+  profile_image:
+    "https://pbs.twimg.com/profile_images/674551835319922689/ahFe0UPL_reasonably_small.png"
+};
+
+// Variables
+export const MAX_MESSAGE_TEXT_LENGTH = 280;
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./styles/index.css";
+
+// load library styles before app styles
+import "./styles";
+
 import App from "./App";
 
 ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/src/stories/0-Welcome.stories.js b/src/stories/0-Welcome.stories.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { linkTo } from "@storybook/addon-links";
+import { Welcome } from "@storybook/react/demo";
+
+export default {
+  title: "Welcome"
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo("Button")} />;
+
+toStorybook.story = {
+  name: "to Storybook"
+};
diff --git a/src/stories/1-MessageForm.stories.js b/src/stories/1-MessageForm.stories.js
@@ -0,0 +1,9 @@
+import React from "react";
+import { MessageForm } from "../components/MessageForm";
+import { USER } from "../config";
+
+export default {
+  title: "MessageForm"
+};
+
+export const messageForm = () => <MessageForm user={USER} />;
diff --git a/src/styles/App.css b/src/styles/App.css
@@ -0,0 +1,28 @@
+.App {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background-color: rgb(235, 235, 235);
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  min-height: 100vh;
+}
+
+.Home {
+  padding: 0;
+  width: 600px;
+  background-color: white;
+  border-left: 1px solid lightgrey;
+  border-right: 1px solid lightgrey;
+}
+
+.Home_Title {
+  font-weight: bold;
+}
+
+.Home_Body {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
diff --git a/src/styles/base.css b/src/styles/base.css
diff --git a/src/styles/index.js b/src/styles/index.js
diff --git a/src/tests/App.test.js b/src/tests/App.test.js
diff --git a/src/tests/setupTests.js b/src/tests/setupTests.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import "@storybook/addon-actions/register";`
	`2`	`+import "@storybook/addon-links/register";`