Style Guide for HTML and CSS added; JS and React stubbed

chamhayden · Sep 11, 2023 · 002da23 · 002da23
1 parent 40e74a9
commit 002da23
Show file tree

Hide file tree

Showing 8 changed files with 14,100 additions and 9,549 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,14 +16,17 @@
     "date-fns-tz": "^2.0.0",
     "random-gradient": "0.0.2",
     "react": "^17.0.2",
+    "react-code-blocks": "^0.1.4",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-hotjar": "^4.0.0",
+    "react-markdown": "^8.0.7",
     "react-router-dom": "^6.2.1",
     "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.0",
+    "react-syntax-highlighter": "^15.5.0",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

diff --git a/frontend/src/component/StyleComponents.jsx b/frontend/src/component/StyleComponents.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+export const Body = (props) => {
+  return (
+    <Typography {...props} variant="body1" style={{ padding: '10px 0'}}>
+      {props.children}
+    </Typography>
+  )
+}
+
+export const H3 = (props) => {
+  return (
+    <Typography id={props.id} {...props} variant="h4" component="div" gutterBottom>
+      {props.children}
+    </Typography>
+  );
+}
+
+export const H5 = (props) => {
+  return (
+    <Typography id={props.id} {...props} variant="h5" component="div" gutterBottom>
+      {props.children}
+    </Typography>
+  );
+}
+
+export const HR = () => {
+  return <Divider sx={{ mb: 3, mt: 3, }} />
+}
+
+export const Code = (props) => {
+  {/*<div style={{ maxWidth: props.large ? '100%' : props.medium ? '800px' : '500px' }}>*/}
+  return (
+    <div style={{ maxWidth: '800px' }}>
+      <SyntaxHighlighter
+        style={a11yDark}
+        language={props.lang}
+      >
+        {props.children}
+      </SyntaxHighlighter>
+    </div>
+  )
+}
+
+export const Example = (props) => {
+  const [expand, setExpand] = React.useState(true);
+  return (
+    <>
+      <Body onClick={() => setExpand(!expand)}>
+        <span style={{ cursor: 'pointer' }}>
+          {expand ? '⬇️' : '⬆️'} 💡 <b>Example: </b>
+        </span>
+      </Body>
+      {expand ? (
+        <div style={{ marginLeft: '20px', marginBottom: '20px'}}>
+          {props.bads && props.bads.map((bad, idx) => {
+            return (
+              <>
+                <Body tyle={{paddingTop: '20px'}} key={idx}><b>🔴 Bad</b></Body>
+                <Code lang={props.lang} large={props.large} medium={props.medium}>{bad}</Code>
+              </>
+            )
+          })}
+          {props.goods && props.goods.map((good, idx) => {
+            return (
+              <>
+                <Body style={{paddingTop: '20px'}} key={idx}><b> 🟢 Good</b></Body>
+                <Code lang={props.lang} large={props.large} medium={props.medium}>{good}</Code>
+              </>
+            )
+          })}
+        </div>
+      ) : (
+        <div style={{ marginLeft: '20px' }}>...</div>
+      )}
+    </>
+  )
+}