feat(documentation, organisms): add organisms package to repo and documentation

Author: yeehaa123

packages/documentation/package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@offcourse/atoms": "^1.1.0",
-    "@offcourse/molecules": "^1.0.0",
+    "@offcourse/atoms": "^0.0.0-semantically-released",
+    "@offcourse/molecules": "^0.0.0-semantically-released",
+    "@offcourse/organisms": "^0.0.0-semantically-released",
     "catalog": "^3.5.3",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",

packages/documentation/public/organisms/AppShell.md

@@ -0,0 +1,18 @@
+```react|dark
+state: { isOpen: false }
+---
+const toggle = () => setState({isOpen: !state.isOpen });
+const links = [
+  { onClick: toggle, title: "Create Course", level: 1 },
+  { href: "/bla", title: "Admin", level: 3 },
+  { href: "/bla", title: "Profile", level: 2 },
+  { onClick: toggle, title: "Sign Out", level: 2 }
+];
+
+
+<div style={{height: "200px"}}>
+<AppShell position="absolute" onLogoClick={toggle} toggleSidebar={toggle} isSidebarOpen={state.isOpen} links={links}>
+  <h1 style={{color: "white", paddingLeft: "1rem"}}>This is the area where the content is rendered...</h1>
+</AppShell>
+</div>
+```

packages/documentation/public/organisms/Auth.md

@@ -0,0 +1,5 @@
+```react
+const handler = message => alert(JSON.stringify(message, null, 2));
+
+<Auth signIn={handler} initialUserName="yeehaa" signUp={handler} resetPassword={handler} />
+```

packages/documentation/public/organisms/CourseCard.md

@@ -0,0 +1,65 @@
+CourseCard Component.
+
+```react|span-6
+const course = {
+  courseId: "abc",
+  goal: "Learn This",
+  curator: "Offcourse",
+  courseUrl: "/yeehaa",
+  profileUrl: `/curator/yeehaa`,
+  checkpoints: [
+    {
+      checkpointId: "a",
+      task: `Gentrify adipisicing fanny pack pabst, health goth excepteur ut sunt swag quo`,
+      resourceUrl: "/"
+    },
+    {
+      checkpointId: "b",
+      task: "Do That",
+      completed: true,
+      resourceUrl: "/"
+    },
+    {
+      checkpointId: "c",
+      task: "Do More",
+      resourceUrl: "/"
+    }
+  ],
+  tags: ["tic", "tac", "toe"],
+  description: `Gentrify adipisicing fanny pack pabst, health goth excepteur ut sunt swag qui plaid tumeric letterpress. Wolf gentrify live-edge 8-bit. Af ut thundercats locavore williamsburg, blue bottle man braid viral`
+};
+  <CourseCard course={course} />
+```
+
+Pass an onCheckpointToggle callback to make it trackable
+
+```react|span-6
+const course = {
+  courseId: "abc",
+  goal: "Learn This",
+  curator: "Offcourse",
+  courseUrl: "/yeehaa",
+  profileUrl: `/curator/yeehaa`,
+  checkpoints: [
+    {
+      checkpointId: "a",
+      task: `Gentrify adipisicing fanny pack pabst, health goth excepteur ut sunt swag quo`,
+      resourceUrl: "/"
+    },
+    {
+      checkpointId: "b",
+      task: "Do That",
+      completed: true,
+      resourceUrl: "/"
+    },
+    {
+      checkpointId: "c",
+      task: "Do More",
+      resourceUrl: "/"
+    }
+  ],
+  tags: ["tic", "tac", "toe"],
+  description: `Gentrify adipisicing fanny pack pabst, health goth excepteur ut sunt swag qui plaid tumeric letterpress. Wolf gentrify live-edge 8-bit. Af ut thundercats locavore williamsburg, blue bottle man braid viral`
+};
+  <CourseCard onCheckpointToggle={console.log} course={course} />
+```

packages/documentation/public/organisms/CourseForm.md

@@ -0,0 +1,71 @@
+```react|span-4
+state: { errors: { general: "you seem to have misspelled something..."} }
+---
+const submitHandler = (values, actions) => {
+  setState(
+    {
+      errors: {
+        general: "you seem to have misspelled something..."
+      }
+    },
+    actions.setSubmitting(false)
+  );
+};
+
+const handler = () => alert("Everyting is Erased!!!!");
+
+<CourseForm
+  errors={state.errors}
+  onSubmit={submitHandler}
+  onCancel={handler}
+/>
+```
+
+```react|span-4
+state: { errors: {} }
+---
+const submitHandler = (values, actions) => {
+  setState(
+    {
+      errors: {
+        general: "you seem to have misspelled something..."
+      }
+    },
+    actions.setSubmitting(false)
+  );
+};
+
+const course = {
+  courseId: "abc",
+  goal: "Learn This",
+  checkpoints: [
+    {
+      checkpointId: "a",
+      task: "Do This",
+      resourceUrl: "https://github.com/jaredpalmer/formik"
+    },
+    {
+      checkpointId: "b",
+      task: "Do That",
+      resourceUrl: "https://github.com/jquense/yup"
+    },
+    {
+      checkpointId: "c",
+      completed: true,
+      task: "Do More",
+      resourceUrl: "https://semantic-ui.com/collections/form.html"
+    }
+  ],
+  description: `Gentrify adipisicing fanny pack pabst, health goth excepteur ut sunt swag qui plaid tumeric letterpress. Wolf gentrify live-edge 8-bit. Af ut thundercats locavore williamsburg, blue bottle man braid viral`
+};
+
+const handler = () => alert("Everyting is Erased!!!!");
+
+<CourseForm
+  mode="edit"
+  course={course}
+  errors={state.errors}
+  onSubmit={submitHandler}
+  onCancel={handler}
+/>
+```

packages/documentation/public/organisms/Form.md

@@ -0,0 +1,115 @@
+Basic Form
+
+```react|span-4
+const onSubmit = (values, actions) => {
+  alert(JSON.stringify(values, null, 2));
+  actions.setSubmitting(false)
+};
+
+const onCancel = () => alert("Everyting is Erased!!!!");
+
+const yup = Form.yup;
+
+class Model {
+  static schemata = {
+    normal: yup.object().shape({
+      testField: yup.string().min(5).max(8).required()
+    })
+  };
+
+
+  constructor({ testField = ""}){
+    this.testField = testField;
+  }
+}
+
+const values = { testField: "abc"}
+
+const Field = Form.Field;
+<Form
+  values={values}
+  Model={Model}
+  title="Test Form"
+  onSubmit={onSubmit}
+  onCancel={onCancel}
+>
+  <Field title="Test Field" name="testField" placeholder="Test" />
+</Form>
+```
+
+Pimped Out Form
+
+```react|span-4
+state: { errors: {}}
+---
+
+const errors = {general: "you seem to have misspelled something..."};
+const testItems1 = [{task: "aaaa", resourceUrl: "bbb"}, {task: "", resourceUrl: ""}];
+const testItems2 = ["aaaaa", "bbbb"];
+
+const onSubmit = (values, actions) => {
+  alert(JSON.stringify(values, null, 2));
+  setState({errors}),
+  actions.setSubmitting(true)
+};
+
+
+const onCancel = () => alert("Everyting is Erased!!!!");
+const values = {
+  testField: "ab",
+  testItems: testItems2
+};
+
+const buttons = {
+  warning: {
+    title: "Maybe...",
+    variant: "warning",
+    onClick: () => confirm("are you sure"),
+    size: "small"
+  },
+  cancel: {
+    title: "HELL NO",
+    size: "medium"
+  },
+  submit: {
+    title: "Okay",
+    size: "small"
+  }
+};
+
+const linkData = [
+  { onClick: onCancel, title: "Go Somewhere Else" },
+  { onClick: onCancel, title: "Go Someplace Other" }
+];
+
+const yup = Form.yup;
+class Model {
+  static schemata = {
+    normal: yup.object().shape({
+      testField: yup.string().min(5).max(8).required(),
+      testItems: yup.array().of(yup.string().min(3)).min(2).max(3).required()
+    })
+  };
+
+  constructor({ testField = "", testItems = [""]}){
+    this.testField = testField;
+    this.testItems = testItems;
+  }
+}
+
+const Field = Form.Field;
+const FieldList = Form.FieldList;
+<Form
+  values={values}
+  Model={Model}
+  errors={state.errors}
+  title="Test Form"
+  links={linkData}
+  buttons={buttons}
+  onSubmit={onSubmit}
+  onCancel={onCancel}
+>
+  <Field title="Test Field" name="testField" placeholder="Test" />
+  <FieldList title="Test Items" name="testItems"/>
+</Form>
+```

packages/documentation/public/organisms/PasswordRetrievalForm.md

@@ -0,0 +1,29 @@
+```react|span-4
+const errors = {};
+const userName = "";
+const handler = () => alert("Done!");
+
+<PasswordRetrievalForm
+  errors={errors}
+  userName={userName}
+  onSubmit={handler}
+  onCancel={handler}
+  onRequestSignIn={handler}
+/>
+```
+
+```react|span-4
+const confirmMode = true;
+const errors = {};
+const userName = "";
+const handler = () => alert("Done!");
+
+<PasswordRetrievalForm
+  mode="confirm"
+  errors={errors}
+  userName={userName}
+  onSubmit={handler}
+  onCancel={handler}
+  onRequestSignIn={handler}
+/>
+```

packages/documentation/public/organisms/SignInForm.md

@@ -0,0 +1,11 @@
+```react|span-4
+const handler = () => alert("Done!");
+const errors = {};
+
+<SignInForm
+    errors={errors}
+    onCancel={handler}
+    onSubmit={handler}
+    onRequestSignIn={handler}
+/>
+```

packages/documentation/public/organisms/SignUpForm.md

@@ -0,0 +1,26 @@
+```react|span-4
+const errors = {};
+const userName = "";
+const handler = () => alert("Done!");
+
+<SignUpForm
+  errors={errors}
+  userName={userName}
+  onSubmit={handler}
+  onRequestSignIn={handler}
+/>
+```
+
+```react|span-4
+const errors = {};
+const userName = "";
+const handler = () => alert("Done!");
+
+<SignUpForm
+  mode="confirm"
+  errors={errors}
+  userName={userName}
+  onSubmit={handler}
+  onRequestSignIn={handler}
+/>
+```

packages/documentation/src/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import * as atoms from "@offcourse/atoms";
 import * as molecules from "@offcourse/molecules";
+import * as organisms from "@offcourse/organisms";
 import { Catalog, pageLoader } from "catalog";
 import { offcourse } from "./themes";
 
@@ -68,6 +69,13 @@ class App extends Component {
               name: "molecules",
               blocks: molecules
             })
+          },
+          {
+            title: "Organisms",
+            pages: createPages({
+              name: "organisms",
+              blocks: organisms
+            })
           }
         ]}
       />

packages/organisms/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false
+    }],
+    "stage-0",
+    "react"
+  ],
+  "plugins": [
+    "external-helpers"
+  ]
+}