Merge pull request #9 from lumastic/extractCss

SparkInfo, MinifiedCss, and Comment Form

package.json

@@ -13,10 +13,11 @@
     "new:icon": "cd scripts && ./createIcon.sh",
     "index": "cd scripts && ./index.sh",
     "build": "webpack && yarn cp:package",
+    "build:prod": "webpack --env prod && yarn cp:package",
     "test": "jest --watch",
     "cp:package": "cp -rf package.json dist",
-    "yalc": "yarn build && cd dist && yalc push",
-    "dist": "yarn build && cd dist && yarn publish"
+    "yalc": "yarn build:prod && cd dist && yalc push",
+    "dist": "yarn build:prod && cd dist && yarn publish"
   },
   "keywords": [],
   "author": "Headfake Digital, LLC",

src/components/Search/Search.scss

@@ -32,7 +32,7 @@
     width: 100%;
     font-family: $bodyFont;
     font-style: normal;
-    line-height: 0;
+    // line-height: 0;
     font-size: 1em;
     border: none;
     &::placeholder {

src/forms/CommentForm/CommentForm.js

@@ -1,17 +1,54 @@
 import React from "react";
 import PropTypes from "prop-types";
+import {
+  Form,
+  Avatar,
+  PressInput,
+  TextInput,
+  IconButton
+} from "../../components";
+import { useUser } from "../../hooks";
+import useModal from "../../hooks/useModal";
+import { PaperAirplane } from "../../icons";
 import style from "./CommentForm.scss";
 import classNames from "../../helpers/classNames";
 
-const CommentForm = ({ children, className, ...rest }) => (
-  <div className={classNames(className, style.commentform)} data-testid={"commentform"} {...rest}>
-    {children}
-  </div>
-);
+const CommentForm = ({ className, onSubmit, defaultValues }) => {
+  const { avatarURL } = useUser();
+  const [reset, toggle] = useModal();
+  const handleSubmit = (data, e, rest) => {
+    if (onSubmit) {
+      onSubmit(data, e, rest);
+    } else {
+      alert(JSON.stringify(data));
+    }
+    toggle();
+  };
+  return (
+    <Form
+      className={classNames(className, style.newcomment)}
+      onSubmit={handleSubmit}
+      defaultValues={defaultValues}
+    >
+      <Avatar src={avatarURL} size="small" className={style.avatar} />
+      <PressInput
+        reset={reset}
+        className={style.input}
+        name="content"
+        placeholder="Reply..."
+      />
+      <TextInput name="progressUpdateId" hidden />
+      <IconButton size="big" type="submit" className={style.button}>
+        <PaperAirplane />
+      </IconButton>
+    </Form>
+  );
+};
 
 CommentForm.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  onSubmit: PropTypes.func,
+  defaultValues: PropTypes.object
 };
 
 export { CommentForm };

src/forms/CommentForm/CommentForm.scss

@@ -1,2 +1,17 @@
-.commentform {
+.newcomment {
+  display: grid;
+  align-items: flex-start;
+  padding-bottom: 0.25rem;
+  grid-template-columns: min-content auto min-content;
+  column-gap: 0.75rem;
+  .input {
+    flex-grow: 1;
+  }
+  .avatar {
+    // margin-right: 0.5rem;
+    margin-top: 0.45rem;
+  }
+  .button {
+    margin-top: 0.4rem;
+  }
 }

src/templates/SearchSelect/SearchSelect.scss

@@ -28,7 +28,7 @@
         font-family: $bodyFont;
         background-color: inherit;
         font-style: normal;
-        line-height: 0;
+        // line-height: 0;
         font-size: 1em;
         border: none;
         width: 100%;

src/views/ProgressPost/ProgressPost.js

@@ -4,16 +4,16 @@ import { PressRenderer } from "pressdk";
 import { Card, Divider, Type, Point } from "../../components";
 import {
   Comment,
-  NewComment,
   Reaction,
   AddEmoji,
   SparkCrumbs
 } from "../../templates";
 import recommendReactions from "./helpers/recommendReactions.json";
 import formatTime from "../../helpers/formatTime";
-import style from "./ProgressPost.scss";
 import { parseContent } from "../../helpers";
 import { pressComponents } from "../../PressHelpers";
+import { CommentForm } from "../../forms";
+import style from "./ProgressPost.scss";
 
 const ProgressPost = ({
   spark = {},
@@ -70,7 +70,10 @@ const ProgressPost = ({
             />
           ))}
           {canComment && (
-            <NewComment post={post} onSubmit={newCommentHandler} />
+            <CommentForm
+              defaultValues={{ progressUpdateId: post?.id }}
+              onSubmit={newCommentHandler}
+            />
           )}
         </div>
       )}

src/views/SparkInfo/SparkInfo.js

@@ -1,11 +1,14 @@
 import PropTypes from "prop-types";
 import React from "react";
+import { PressRenderer } from "pressdk";
 import { Card, IconButton, Label, Link, List, Type } from "../../components";
 import classNames from "../../helpers/classNames";
 import { Pencil } from "../../icons";
 import { editSparkRoute } from "../../routes";
 import { Tag } from "../../templates";
 import style from "./SparkInfo.scss";
+import { pressComponents } from "../../PressHelpers";
+import { parseContent } from "../../helpers";
 
 const SparkInfo = ({ spark = {}, className, canEdit = false }) => (
   <Card className={classNames(className, style.sparkinfo)}>
@@ -31,7 +34,12 @@ const SparkInfo = ({ spark = {}, className, canEdit = false }) => (
       </div>
       <div>
         <Label>Description</Label>
-        <Type>{spark.description}</Type>
+        <Type tag="div">
+          <PressRenderer
+            components={pressComponents}
+            value={parseContent(spark?.description)}
+          />
+        </Type>
       </div>
       <div>
         <Label>Tags</Label>

styleguide.config.js

@@ -1,10 +1,12 @@
 const path = require("path");
 const fs = require("fs");
+const webpack = require("./webpack.dev.js");
 
 module.exports = {
   styleguideComponents: {
     Wrapper: path.join(__dirname, "src/helpers/styleguide/Wrapper")
   },
+  webpackConfig: webpack,
   sections: [
     {
       name: "Components",

webpack.config.js

@@ -1,62 +1,5 @@
+/* eslint-disable import/no-dynamic-require */
+/* eslint-disable global-require */
 const path = require("path");
 
-module.exports = {
-  entry: {
-    index: "./src/index.js",
-    "icons/index": "./src/icons",
-    "routes/index": "./src/routes",
-    "helpers/index": "./src/helpers"
-  },
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: "[name].js",
-    libraryTarget: "commonjs2"
-  },
-  externals: {
-    react: "react",
-    "react-dom": "react-dom",
-    "react-router-dom": "react-router-dom"
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, "src"),
-        exclude: /(node_modules|bower_components|dist)/,
-        use: {
-          loader: "babel-loader"
-        }
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          {
-            loader: "style-loader",
-            options: {
-              injectType: "singletonStyleTag"
-            }
-          },
-          {
-            loader: "css-loader",
-            options: {
-              importLoaders: 1,
-              modules: {
-                localIdentName: "[name]__[local]"
-              }
-            }
-          },
-          {
-            loader: "postcss-loader"
-          },
-          {
-            loader: "sass-loader"
-          }
-        ]
-      },
-      {
-        test: /\.svg$/,
-        loader: "svg-sprite-loader"
-      }
-    ]
-  }
-};
+module.exports = (env = "dev") => require(`./webpack.${env}.js`);