Working on docs

GavinF17 · Jun 29, 2020 · cf4fc88 · cf4fc88
1 parent 66bb8ef
commit cf4fc88
Show file tree

Hide file tree

Showing 13 changed files with 616 additions and 214 deletions.
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -1,84 +1,113 @@
-import React, {useState} from 'react';
-import {VForm, VFormFeedback, VInput, VInputGroup} from 'reactstrap-form-validator';
+import React, {useEffect, useState} from 'react';
 import "./assets/reactivestrap.scss"
-import {Button, Container, FormGroup, Label, Row} from "reactstrap";
+import {Routes} from "./routes/Routes";
+import {BrowserRouter} from "react-router-dom";
+import {ThemeProvider} from "styled-components";
+import {darkTheme, GlobalStyles, lightTheme} from "./theme";
+import {Header} from "./components/Header";
 
-function App() {
-  const [externalErrors, setExternalErrors] = useState({});
-  const [forename, setForename] = useState("bb");
+const App = () => {
+  const [dark, setDark] = useState(localStorage.getItem('darkTheme') == 'true');
 
-  const onValidSubmit = (values) => {
-    if (externalErrors.email) {
-      setExternalErrors({
-        forename: ['something forename'],
-        surname: ['something surname']
-      });
-    } else {
-      setExternalErrors({
-        email: ["Incorrect email format"],
-        forename: ['something forename'],
-        surname: ['something surname']
-      });
-    }
+  useEffect(() => {
+    console.log(localStorage.getItem('darkTheme'))
+  });
 
-    setForename("gavin")
+  const toggleTheme = () => {
+    const newVal = !dark;
+    setDark(newVal);
+    localStorage.setItem('darkTheme', String(newVal));
   };
 
-  const onInvalidSubmit = (values, errors) => console.log("onInvalidSubmit", values, errors);
-
   return (
-    <div className="mt-5">
-      <Container>
-        <VForm
-          onValidSubmit={onValidSubmit}
-          onInvalidSubmit={onInvalidSubmit}
-          externalErrors={externalErrors}
-        >
-          <Row>
-            {/*<VFormGroup>*/}
-            {/*  <VInput name="forename" validators={{minLength: {value: 2, message: "Too damn short"}}}/>*/}
-            {/*</VFormGroup>*/}
-          </Row>
-          <Row>
-            <FormGroup>
-              <Label for="forename">Name</Label>
-              <VInputGroup>
-                <VInput value={forename} name="forename"
-                        validators={{minLength: {value: 2, message: "Forename, Too damn short"}, pattern: {value: "^[a-z]*$"}}}/>
-                <VInput value="" name="surname"
-                        validators={{minLength: {value: 2, message: "Surname Too damn short"}, required: true}}/>
-              </VInputGroup>
-              <VFormFeedback for={["forename", "surname"]}/>
-            </FormGroup>
-          </Row>
-          {/*<Row>*/}
-          {/*  <FormGroup>*/}
-          {/*    <InputGroup>*/}
-          {/*      <VInput value="aa" name="forename"*/}
-          {/*              validators={{minLength: {value: 2, message: "Forename, Too damn short"}}}/>*/}
-          {/*      <VInput value="aa" name="surname"*/}
-          {/*              validators={{minLength: {value: 2, message: "Surname Too damn short"}}}/>*/}
-          {/*    </InputGroup>*/}
-          {/*    <VFormFeedback for={["forename", "surname"]}/>*/}
-          {/*  </FormGroup>*/}
-          {/*</Row>*/}
-          <Row>
-            <FormGroup>
-              <Label className="is-invalid" for="email">Email</Label>
-              <VInput value="a" name="email"
-                // validators={{minLength: {value: 2, message: "Too damn short"}}}
-              />
-              <VFormFeedback for="email"/>
-            </FormGroup>
-          </Row>
-          <FormGroup>
-            <Button>Submit</Button>
-          </FormGroup>
-        </VForm>
-        {JSON.stringify(externalErrors)}
-      </Container>
-    </div>
-  );
-}
+    <>
+      <Header dark={dark} toggleTheme={toggleTheme}/>
+      <ThemeProvider theme={dark ? darkTheme : lightTheme}>
+        <GlobalStyles/>
+        <BrowserRouter>
+          <Routes/>
+        </BrowserRouter>
+      </ThemeProvider>
+    </>
+  )
+};
 
 export default App;
+
+// function App() {
+//   const [externalErrors, setExternalErrors] = useState({});
+//   const [forename, setForename] = useState("bb");
+//
+//   const onValidSubmit = (values) => {
+//     if (externalErrors.email) {
+//       setExternalErrors({
+//         forename: ['something forename'],
+//         surname: ['something surname']
+//       });
+//     } else {
+//       setExternalErrors({
+//         email: ["Incorrect email format"],
+//         forename: ['something forename'],
+//         surname: ['something surname']
+//       });
+//     }
+//
+//     setForename("gavin")
+//   };
+//
+//   const onInvalidSubmit = (values, errors) => console.log("onInvalidSubmit", values, errors);
+//
+//   return (
+//     <div className="mt-5">
+//       <Container>
+//         <VForm
+//           onValidSubmit={onValidSubmit}
+//           onInvalidSubmit={onInvalidSubmit}
+//           externalErrors={externalErrors}
+//         >
+//           <Row>
+//             {/*<VFormGroup>*/}
+//             {/*  <VInput name="forename" validators={{minLength: {value: 2, message: "Too damn short"}}}/>*/}
+//             {/*</VFormGroup>*/}
+//           </Row>
+//           <Row>
+//             <FormGroup>
+//               <Label for="forename">Name</Label>
+//               <VInputGroup>
+//                 <VInput value={forename} name="forename"
+//                         validators={{minLength: {value: 2, message: "Forename, Too damn short"}, pattern: {value: "^[a-z]*$"}}}/>
+//                 <VInput value="" name="surname"
+//                         validators={{minLength: {value: 2, message: "Surname Too damn short"}, required: true}}/>
+//               </VInputGroup>
+//               <VFormFeedback for={["forename", "surname"]}/>
+//             </FormGroup>
+//           </Row>
+//           {/*<Row>*/}
+//           {/*  <FormGroup>*/}
+//           {/*    <InputGroup>*/}
+//           {/*      <VInput value="aa" name="forename"*/}
+//           {/*              validators={{minLength: {value: 2, message: "Forename, Too damn short"}}}/>*/}
+//           {/*      <VInput value="aa" name="surname"*/}
+//           {/*              validators={{minLength: {value: 2, message: "Surname Too damn short"}}}/>*/}
+//           {/*    </InputGroup>*/}
+//           {/*    <VFormFeedback for={["forename", "surname"]}/>*/}
+//           {/*  </FormGroup>*/}
+//           {/*</Row>*/}
+//           <Row>
+//             <FormGroup>
+//               <Label className="is-invalid" for="email">Email</Label>
+//               <VInput value="a" name="email"
+//                 // validators={{minLength: {value: 2, message: "Too damn short"}}}
+//               />
+//               <VFormFeedback for="email"/>
+//             </FormGroup>
+//           </Row>
+//           <FormGroup>
+//             <Button>Submit</Button>
+//           </FormGroup>
+//         </VForm>
+//         {JSON.stringify(externalErrors)}
+//       </Container>
+//     </div>
+//   );
+// }
diff --git a/docs/src/assets/reactivestrap.scss b/docs/src/assets/reactivestrap.scss
@@ -1 +1,61 @@
 @import "node_modules/bootstrap/scss/bootstrap";
+@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
+@import "node_modules/@fortawesome/fontawesome-free/scss/regular";
+@import "node_modules/@fortawesome/fontawesome-free/scss/solid";
+
+
+$header-height: 75px;
+
+$green: #40b10c;
+$grey: #1C1C1C;
+$white: #FFFFFF;
+$black: #000000;
+$red: #DA353C;
+
+.header {
+  height: $header-height;
+}
+
+body {
+  padding-top: $header-height;
+}
+
+.general-content {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1000px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $green;
+}
+
+.fit-content {
+  width: fit-content;
+}
+
+a {
+  text-decoration: none;
+}
+
+.card {
+  border: none;
+  box-shadow: 1px 2px 2px 2px transparentize($grey, 0.6);
+  color: $grey;
+  height: 100%;
+
+  background: none;
+
+  .card-header {
+    border: none;
+    font-weight: bold;
+    background: none;
+  }
+}
+
+#docs-nav {
+  box-shadow: 1px 2px 2px 2px $grey;
+  width: 200px;
+  //min-height: calc(100vh - $header-height);
+  min-height: calc(100vh - 75px);
+}
diff --git a/docs/src/components/DocsNavigation.js b/docs/src/components/DocsNavigation.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const DocsNavigation = () => {
+
+  return (
+    <div id="docs-nav">
+
+    </div>
+  )
+};
diff --git a/docs/src/components/Header.js b/docs/src/components/Header.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import {Container} from "reactstrap";
+
+export const Header = ({dark, toggleTheme}) => (
+  <Container fluid id="header" className="header fixed-top">
+    <div className="general-content">
+      <h1 className="float-left">Reactstrap Form Validation</h1>
+      <h3 className={`float-right ${dark ? 'far' : 'fas'} fa-lightbulb mt-2`} onClick={toggleTheme}/>
+    </div>
+  </Container>
+);
diff --git a/docs/src/layouts/DocsLayout.js b/docs/src/layouts/DocsLayout.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import {DocsNavigation} from "../components/DocsNavigation";
+
+export const DocsLayout = ({children}) => (
+  <>
+    <DocsNavigation/>
+    {children}
+  </>
+);
diff --git a/docs/src/layouts/GeneralLayout.js b/docs/src/layouts/GeneralLayout.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const GeneralLayout = ({children}) => {
+  return (
+    <div className="general-content">
+      {children}
+    </div>
+  )
+};
diff --git a/docs/src/pages/Docs/index.js b/docs/src/pages/Docs/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Docs = () => (
+  <>Docs</>
+);
+
+export default Docs;
diff --git a/docs/src/pages/Homepage/index.js b/docs/src/pages/Homepage/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import Row from "reactstrap/es/Row";
+import Container from "reactstrap/es/Container";
+import Card from "reactstrap/es/Card";
+import CardHeader from "reactstrap/es/CardHeader";
+import CardBody from "reactstrap/es/CardBody";
+import {Col} from "reactstrap";
+import {Link} from "react-router-dom";
+
+const DocCard = ({icon, header, description, link}) => (
+  <Col className="mb-5">
+    <Link to={link || '#'}>
+      <Card>
+        <CardHeader>
+          <i className={"mr-2 " + icon}/>
+          {header}
+        </CardHeader>
+        <CardBody>{description}</CardBody>
+      </Card>
+    </Link>
+  </Col>
+);
+
+const HomePage = () => (
+  <Container fluid>
+    <Row className="text-center mt-5 mb-5">
+      <h2 className="ml-auto mr-auto">
+        Simple wrapper components for form validation with
+        <a href="https://github.com/reactstrap/reactstrap"> reactstrap</a>
+      </h2>
+    </Row>
+
+    <Row>
+      <DocCard
+        header="Getting Started"
+        icon="fas fa-fast-forward"
+        description="Learn how to quickly get started, including installation and quick start guide"
+        link="/docs/getting-started"
+      />
+
+      <DocCard
+        header="Components"
+        icon="fas fa-laptop-code"
+        description="See what wrapper components are available and how to use them"
+        link="/docs/components"
+      />
+
+      <DocCard
+        header="Validators"
+        icon="far fa-check-circle"
+        description="Learn the provided validators and learn how to extend them with custom functions"
+        link="/docs/validators"
+      />
+    </Row>
+  </Container>
+);
+
+export default HomePage;
diff --git a/docs/src/routes/Routes.js b/docs/src/routes/Routes.js
@@ -0,0 +1,33 @@
+import React, {Suspense} from "react";
+import {useLocation} from "react-router-dom";
+import {DocsLayout} from "../layouts/DocsLayout";
+import {GeneralLayout} from "../layouts/GeneralLayout";
+import {flattenedRoutes as routes} from './index';
+import {Route, Switch} from "react-router";
+
+const docsRegex = new RegExp("/?docs");
+
+export const Routes = (props) => {
+  const location = useLocation();
+
+  const Layout = docsRegex.test(location.pathname) ? DocsLayout : GeneralLayout;
+
+  return (
+    <Suspense fallback={<div/>}>
+      <Layout {...props}>
+        <Switch>
+          {routes.map(({children, path, exact, component: Component}, index) => (
+              !children && (
+                <Route key={index}
+                       path={path}
+                       exact={exact}
+                       render={props => <Component {...props}/>}
+                />
+              )
+            )
+          )}
+        </Switch>
+      </Layout>
+    </Suspense>
+  );
+};