Merge pull request #335 from EnCiv/civil-updates-1

Civil updates 1

Author: ddfridley

.gitignore

@@ -84,3 +84,19 @@ app/svgr
 # Cypress screenshots and recordings
 cypress/videos
 cypress/screenshots
+
+# Ignore because it's autogenerated
+app/web-components/index.js
+app/data-components/index.js
+
+#less history
+.lesshst
+
+#temp directory
+tmp
+
+#directories that might contain secrets
+.ssh/
+
+#this is used by Jest-mongodb for testing only -
+globalConfig.json

.storybook/main.js

@@ -0,0 +1,56 @@
+const webpack = require('webpack')
+
+module.exports = {
+    stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+    framework: '@storybook/react',
+    core: {
+        builder: 'webpack5',
+    },
+    webpackFinal: async config => {
+        // config may or may not have these properties so we have to make sure they are there and then modify them to ensure we don't delete anything
+        if (!config.resolve) config.resolve = {}
+        if (!config.resolve.fallback) config.resolve.fallback = {}
+        Object.assign(config.resolve.fallback, {
+            fs: false,
+            buffer: require.resolve('buffer'),
+            path: require.resolve('path-browserify'),
+            stream: require.resolve('stream-browserify'),
+            os: require.resolve('os-browserify/browser'),
+            zlib: require.resolve('browserify-zlib'),
+            constants: require.resolve('constants-browserify'),
+            util: require.resolve('util'),
+        })
+        if (!config.plugins) config.plugins = []
+        config.plugins.push(new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }))
+        config.plugins.push(new webpack.ProvidePlugin({ process: 'process/browser' })) // fix "process is not defined" error: // (do "npm install process" before running the build)
+        for (const plugin of config.plugins) {
+            if (plugin.definitions) {
+                if (plugin.definitions['process.env']) {
+                    console.info(
+                        '.storybook/main.js: deleting process.env from',
+                        { plugin },
+                        'see comments in that file'
+                    )
+                    delete plugin.definitions['process.env']
+                    /* 
+        webpack will try to string replace process.env with what is assigned in the definition. 
+          // But if there is code in the browser side that does something like "if(process.env)" it will get replaced and cause syntax error and break the existing code
+
+        definitions{
+          ...
+          "process.env": "{\"NODE_ENV\":\"development\",\"NODE_PATH\":[],\"STORYBOOK\":\"true\",\"PUBLIC_URL\":\".\"}",
+          ...
+        }
+        
+        causes this: 
+        if (!process.env.NODE_ENV) process.env.NODE_ENV = 'development'
+        to become
+        if (!{"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."}) {"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."} = {};
+*/
+                }
+            }
+        }
+        return config
+    },
+}

.storybook/preview.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ThemeProvider } from 'react-jss'
+import theme from '../app/theme'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}
+
+export const decorators = [
+  Story => {
+    if (typeof window.logger === 'undefined') window.logger = console
+    if (typeof socket === 'undefined') window.socket = {}
+    window.socket.NoSocket = true
+    return (
+      <ThemeProvider theme={theme}>
+        <div style={{ backgroundColor: theme.backgroundColorApp }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    )
+  },
+]

README.md

@@ -40,101 +40,6 @@ This project is now using prettier. This makes some spacing and the user of quot
 
 If you are not using VSC prettier will also be run before you commit, but see if prettier is available for your editor and post instuctions here
 
-## How to add a new web page to the server
-
-Here is the flow. When a user visits the server with a url, `getIota()` in [server](./app/server/server.js) will look up the path in the database. If it finds a match, it will look for a webComponent and render that on the server through [app/server/routes/serverReactRender](./app/server/routes/server-react-render.jsx). All the properties of this webComponent will be passed as props to the corresponding React component.Then the page will be sent to the browser, and then rehydrated there, meaning the webComponent will run again on the browser, starting at [app/client/main.js](./app/client/main.js) and react will connect all the DOM elements.
-
-### 1) Add a React Component to [./app/components/web-components](./app/components/web-components)\*\*
-
-here is simple one, [./app/components/web-components/undebate-iframes.jsx](./app/components/web-components/undebate-iframes.jsx):
-
-```
-'use strict'
-
-import React from 'react'
-import injectSheet from 'react-jss'
-
-
-const styles = {
-  title: {
-    color: 'black',
-    fontSize: '2rem',
-    textAlign: 'center',
-  },
-  frame: { marginTop: '1em', marginBottom: '1em', width: '100vw' },
-}
-
-class UndebateIframes extends React.Component {
-  render() {
-    const { classes } = this.props
-    const width = typeof window !== 'undefined' ? window.innerWidth : 1920
-    const height = typeof window !== 'undefined' ? window.innerHeight : 1080
-
-    return (
-      <div>
-        <div>
-          <span className={classes['title']}>These are the Undebates</span>
-        </div>
-        <iframe
-          className={classes.frame}
-          height={height * 0.9}
-          width={width}
-          name="race1"
-          src="https://cc.enciv.org/san-francisco-district-attorney"
-        />
-        <iframe
-          className={classes.frame}
-          height={height * 0.9}
-          width={width}
-          name="race2"
-          src="https://cc.enciv.org/country:us/state:wi/office:city-of-onalaska-mayor/2020-4-7"
-        />
-      </div>
-    )
-  }
-}
-export default injectSheet(styles)(UndebateIframes)
-```
-
-### 2) Add that component to the [index.js](./components/web-components/index.js)
-
-```
-  ...
-  const WebComponents = {
-    TestJoin: require('./test-join'),
-    ...
-    UndebateIframes: require('./undebate-iframes'),
-  }
-  ...
-```
-
-Wish List: I wish that this file could be automatically generated based on the files in the directory. For now, we do it manually.
-
-### 3) Create a new document in the iotas collection of the database
-
-The example is the minimum information required. Any additional properties you add to webComponent will be passed as props to the associated React component.
-
-```
-{
-    "path": "/iframe-demo",
-    "subject": "Iframe demo",
-    "description": "a quick prototype of a page showing multiple undebates in separate iframes",
-    "webComponent": {
-        "webComponent": "UndebateIframes"
-    },
-}
-```
-
-Note that the \_id property is not shown here. When you add this document to the database, it will automatically assign the \_id.
-
-### 4) Add new document to iota.js
-
-If the new document that you are creating should be included in every new installation, then you should add the document, with the \_id assigned, to [iota.json](./iota.json)
-
-### 5) Advanced: Component
-
-If your page should pull data out of the database, or calculate something to pass to the web component, then you can add a component to [app/components/components](./app/components/data-components), add it to the [app/components/data-components/index.js](./app/components/data-components/index.js) and then add a component: {component: YourComponentNane, ...} to the document above.
-
 ## Database
 
 There is a tool that lets you view and edit the database in a browser window. This has been really useful in development. To get there:

app/api/send-contact-us.js

@@ -0,0 +1,18 @@
+'use strict'
+
+// clustering is a node thing, dummy it out on the client side
+
+export function isMaster() {
+  return true
+}
+
+export function onlyOnMaster(f1, f2) {
+  return f1()
+}
+
+export function onMessage() {
+  return
+}
+export function send() {
+  return
+}

app/api/socketlogger.js

@@ -0,0 +1,8 @@
+'use strict'
+
+import { clientMain } from 'civil-client'
+import App from '../components/app'
+
+// this is the entry point for the client App running on the browser
+// App will be run on both the server side, and the client side, but the stuff in clientMain will only be run to set things up on the browser
+clientMain(App)