- Added new examples.

- updated examples to be more informative - Design change on examples
brahmosjs · Aug 24, 2020 · ab01348 · ab01348
1 parent b81f49e
commit ab01348
Show file tree

Hide file tree

Showing 27 changed files with 1,697 additions and 210 deletions.
diff --git a/example/App.js b/example/App.js
@@ -1,11 +1,17 @@
-import Brahmos, { render, Component, useState } from '../src';
-import TodoList from './todo-list/TodoList';
-import SierpinskiTriangleDemo from './sierpinski-triangle';
+import Brahmos, { useState, useEffect } from 'brahmos';
+
+import BrahmosLogo from './BrahmosLogo';
+import TodoList from './todo-list';
 import ConcurrentModeDemo from './concurrent-mode';
 import SuspenseListDemo from './suspense-list';
 import UseDeferredValueDemo from './use-deferred-value';
 import UseDeferredValueSuspenseDemo from './use-deferred-value-suspense';
+import LazyComponentDemo from './lazy-component';
+import PortalDemo from './portals';
+import ErrorBoundariesDemo from './error-boundaries';
 import SVGDemo from './svg-chart';
+import HooksDemo from './hooks';
+import ContextDemo from './context-api';
 
 import './App.scss';
 
@@ -16,9 +22,29 @@ const examples = [
     Component: TodoList,
   },
   {
-    title: 'Sierpinski Triangle Demo',
-    id: 'sierpinski-triangle',
-    Component: SierpinskiTriangleDemo,
+    title: 'Context API',
+    id: 'context-api',
+    Component: ContextDemo,
+  },
+  {
+    title: 'Hooks Demo',
+    id: 'hooks',
+    Component: HooksDemo,
+  },
+  {
+    title: 'Error Boundaries Demo',
+    id: 'error-boundaries',
+    Component: ErrorBoundariesDemo,
+  },
+  {
+    title: 'SVG Support Demo',
+    id: 'svg-support',
+    Component: SVGDemo,
+  },
+  {
+    title: 'Portal Demo',
+    id: 'portals',
+    Component: PortalDemo,
   },
   {
     title: 'Concurrent Mode Demo',
@@ -31,54 +57,75 @@ const examples = [
     Component: SuspenseListDemo,
   },
   {
-    title: 'useDeferredValue Demo',
-    id: 'use-deferred-value',
-    Component: UseDeferredValueDemo,
-  },
-  {
-    title: 'useDeferredValue with Suspense Demo',
+    title: 'Suspense with useDeferredValue',
     id: 'use-deferred-value-suspense',
     Component: UseDeferredValueSuspenseDemo,
   },
   {
-    title: 'SVG Chart',
-    id: 'svg-chart',
-    Component: SVGDemo,
+    title: 'Time slicing with useDeferredValue',
+    id: 'use-deferred-value',
+    Component: UseDeferredValueDemo,
+  },
+  {
+    title: 'Lazy Component Demo',
+    id: 'lazy-component',
+    Component: LazyComponentDemo,
   },
 ];
 
-function getCurrentComponent() {
+function getCurrentExample() {
   const currentHash = document.location.hash.replace(/^#/, '');
   const routeIndex = Math.max(
     examples.findIndex((route) => route.id === currentHash),
     0,
   );
-  return examples[routeIndex].Component;
+  return examples[routeIndex];
 }
 
 export default function App() {
-  const [CurrentComponent, setCurrentComponent] = useState(getCurrentComponent);
+  const [currentExample, setCurrentExample] = useState(getCurrentExample);
+  const { Component: CurrentComponent, title } = currentExample;
 
   return (
     <div className="app-container">
-      <header className="header">
-        <h1>Brahmos Examples</h1>
+      <header class="hero is-primary">
+        <div class="hero-body">
+          <div className="logo">
+            <BrahmosLogo width="100" />
+          </div>
+          <div>
+            <h1 class="title">Brahmos Demo</h1>
+            <h2 class="subtitle">
+              Brahmos is a Super charged UI library with exact same declarative APIs of React. But
+              unlike the React's Virtual DOM, Brahmos uses templates internally to separate Static
+              and Dynamic parts of an application, and only traverse dynamic parts on updates.
+            </h2>
+          </div>
+        </div>
       </header>
-      <div className="body">
-        <nav className="nav-list">
-          <ul className="nav-list-container">
-            {examples.map(({ title, id, Component }) => {
-              return (
-                <li class="nav-list-item">
-                  <a href={`#${id}`} onClick={() => setCurrentComponent(() => Component)}>
-                    {title}
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
-        <div className="component-container">
+      <div className="body row">
+        <aside className="menu has-background-light column is-one-quarter">
+          <nav className="menu-list">
+            <ul>
+              {examples.map((example) => {
+                const { title, id } = example;
+                return (
+                  <li className="menu-list-item">
+                    <a
+                      href={`#${id}`}
+                      className={example === currentExample ? 'is-active' : ''}
+                      onClick={() => setCurrentExample(example)}
+                    >
+                      {title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
+        </aside>
+        <div className="example-container content column">
+          <h2>{title}</h2>
           <CurrentComponent />
         </div>
       </div>

diff --git a/example/App.scss b/example/App.scss
@@ -1,24 +1,64 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+
+/** Colors **/
+$primary: #323330;
+// $primary-invert: #efdc4f;
+$primary-light: white;
+$text: #323330;
+$link: #2060c3;
+$menu-item-active-background-color: #efdc4f;
+$menu-item-active-color: #323330;
+$family-sans-serif: 'Nunito', sans-serif;
+// $background: #02030e;
+
+@import '../node_modules/bulma/bulma.sass';
+
 .app-container {
-  .header {
-    text-align: center;
-    padding: 20px;
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+
+  .hero-body {
+    display: flex;
+    align-items: center;
+    padding: 1.5rem;
+  }
+
+  .logo {
+    margin-right: 1rem;
   }
 
   .body {
     display: flex;
+    flex: 1;
   }
 
-  .nav-list {
-    width: 200px;
+  .menu-list a:not(.is-active) {
+    border-bottom: 1px solid $border;
+  }
+
+  .small-width {
+    width: 300px;
+  }
 
-    &-container {
-      margin: 0;
-      padding: 0;
-    }
+  .control-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .example-container {
+    padding-bottom: 100px;
+    position: relative;
+  }
 
-    &-item {
-      list-style: none;
-      padding: 10px;
-    }
+  .react-credit {
+    background: white;
+    position: fixed;
+    padding: 1rem 0.75rem;
+    border-top: 1px solid $border;
+    bottom: 0;
+    left: 25%;
+    width: 75%;
   }
 }
diff --git a/example/BrahmosLogo.js b/example/BrahmosLogo.js
@@ -0,0 +1,32 @@
+import Brahmos from 'brahmos';
+
+export default function BrahmosLogo(props) {
+  return (
+    <svg viewBox="0 0 640 640" {...props}>
+      <defs>
+        <path
+          d="M622.35 318.15c0 165.58-134.42 300-300 300-165.57 0-300-134.42-300-300 0-165.57 134.43-300 300-300 165.58 0 300 134.43 300 300z"
+          id="prefix__a"
+        />
+        <path d="M286.24 574.54v-79.68" id="prefix__b" />
+        <path
+          d="M384.88 166.01L322.4 61.77l-62.57 104.24V339.4l-62.48 77.11v125.26l62.48-62.63h125.05l62.47 62.63V416.51l-62.47-77.11V166.01z"
+          id="prefix__c"
+        />
+        <path d="M358.46 574.54v-79.68" id="prefix__d" />
+        <path d="M322.35 562.82v-70.34" id="prefix__e" />
+      </defs>
+      <use xlinkHref="#prefix__a" fill="#f0da51" />
+      <use xlinkHref="#prefix__b" fill="#323330" />
+      <use xlinkHref="#prefix__b" fillOpacity={0} stroke="#323330" strokeWidth={6} />
+      <use xlinkHref="#prefix__c" fill="#323330" />
+      <use xlinkHref="#prefix__c" fillOpacity={0} stroke="#323330" />
+      <use xlinkHref="#prefix__d" fill="#323330" />
+      <use xlinkHref="#prefix__d" fillOpacity={0} stroke="#323330" strokeWidth={6} />
+      <g>
+        <use xlinkHref="#prefix__e" fill="#323330" />
+        <use xlinkHref="#prefix__e" fillOpacity={0} stroke="#323330" strokeWidth={6} />
+      </g>
+    </svg>
+  );
+}
diff --git a/example/common/ReactCredit.js b/example/common/ReactCredit.js
@@ -1,8 +1,8 @@
-import Brahmos from '../../src';
+import Brahmos from 'brahmos';
 
 export default function ReactCredit({ name, link }) {
   return (
-    <p className="attribute">
+    <p className="react-credit">
       This demo is forked from {name} demo of React:
       <br />
       <strong>Source: </strong>

diff --git a/example/concurrent-mode/fakeApi.js b/example/concurrent-mode/fakeApi.js
@@ -67,7 +67,7 @@ export function fetchUser(userId) {
         default:
           throw Error('Unknown user.');
       }
-    }, 2000 * Math.random());
+    }, 1000 * Math.random());
   });
 }