Some work on the example website, acting as documentation

example/app.tsx

@@ -1,60 +1,92 @@
 import 'react-app-polyfill/ie11';
 import '@patternfly/react-core/dist/styles/base.css';
+import { Brand } from '@patternfly/react-core';
 import * as React from 'react';
 import { Redirect, useHistory } from 'react-router-dom';
 import { LastLocationProvider } from 'react-router-last-location';
 import { AppLayout, LazyRoute, SwitchWith404 } from 'use-patternfly';
 import './app.css';
+import logo from './use-patternfly.png';
 
 export const App = () => {
   const history = useHistory();
-
   return (
-
     <AppLayout
-      logo={'Patternfly Seed'}
+      logo={<Brand src={logo} alt={'use-patternfly logo'} />}
       logoProps={{
         onClick: () => history.push('/')
       }}
       navVariant={'vertical'}
       navItems={[
         {
-          title: 'Dashboard',
-          to: '/dashboard',
+          title: 'Overview',
+          to: '/',
+          exact: true
+        },
+        {
+          title: 'Getting Started',
+          to: '/getting-started',
           items: [
-            { to: '/dashboard/simple', title: 'Simple' },
-            {},
-            { to: '/dashboard/params', title: 'Params: empty', exact: true },
-            { to: '/dashboard/params/hello', title: 'Params: hello', exact: true },
+            { to: '/getting-started/installation', title: 'Installation' },
+            { to: '/getting-started/usage', title: 'Usage' },
+          ]
+        },
+        {
+          title: 'API',
+          to: '/api',
+          items: [
+            { to: '/api/AppLayout', title: 'AppLayout' },
+            { to: '/api/AppNavExpandable', title: 'AppNavExpandable' },
+            { to: '/api/AppNavGroup', title: 'AppNavGroup' },
+            { to: '/api/AppNavItem', title: 'AppNavItem' },
+            { to: '/api/LazyRoute', title: 'LazyRoute' },
+            { to: '/api/Loading', title: 'Loading' },
+            { to: '/api/NotFound', title: 'NotFound' },
+            { to: '/api/SwitchWith404', title: 'SwitchWith404' },
+            { to: '/api/useA11yRoute', title: 'useA11yRoute' },
+            { to: '/api/useBreadcrumb', title: 'useBreadcrumb' },
+            { to: '/api/useDocumentTitle', title: 'useDocumentTitle' },
+          ],
+        }, {
+          title: 'Examples',
+          to: '/examples',
+          items: [
+            { to: '/examples/async-data-list', title: 'Async Data List' },
           ],
         },
-        { to: '/support', title: 'Support' },
-        {},
-        { to: '/broken', title: 'Broken link' },
       ]}
       navGroupsStyle={'expandable'}
     >
       <LastLocationProvider>
         <SwitchWith404>
-          <Redirect from={'/'} to={'/dashboard'} exact={true} />
           <LazyRoute
-            path='/dashboard'
-            getComponent={() => import(/* webpackChunkName: 'dashboard-page' */ './pages/DashboardPage')}
-          >
-            {({ component: DashboardPage }) =>
-              <DashboardPage />
-            }
-          </LazyRoute>
+            path='/'
+            exact={true}
+            getComponent={() => import('./pages/OverviewPage')}
+          />
+          <Redirect
+            path={'/getting-started'}
+            to={'/getting-started/installation'}
+            exact={true}
+          />
+          <LazyRoute
+            path='/getting-started/installation'
+            getComponent={() => import('./pages/InstallationPage')}
+          />
+          <LazyRoute
+            path='/getting-started/usage'
+            getComponent={() => import('./pages/UsagePage')}
+          />
+          <Redirect
+            path='/api'
+            to={'/api/AppLayout'}
+            exact={true}
+          />
           <LazyRoute
-            path='/support'
-            getComponent={() => import(/* webpackChunkName: 'support-page' */ './pages/SupportPage')}
-          >
-            {({ component: SupportPage }) =>
-              <SupportPage />
-            }
-          </LazyRoute>
+            path='/examples/async-data-list/:page?'
+            getComponent={() => import('./pages/AsyncDataList')}
+          />
         </SwitchWith404>
-      </LastLocationProvider>
     </AppLayout>
   );
 };

example/components/ExampleLink.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface IExampleLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
+  filename: string;
+}
+
+export const ExampleLink: React.FunctionComponent<IExampleLinkProps> = ({ filename, ...props }) =>
+  <a href={`https://github.com/riccardo-forina/use-patternfly/tree/master/example/pages/${filename}`} {...props} />

example/components/Support.tsx → example/components/GettingStarted.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PageSection, Title, EmptyState, EmptyStateVariant, EmptyStateIcon, EmptyStateBody, Button, EmptyStateSecondaryActions } from '@patternfly/react-core';
 import { CubesIcon } from '@patternfly/react-icons';
 
-export const Support: React.FunctionComponent<any> = ({ children, ...props }) => {
+export const GettingStarted: React.FunctionComponent<any> = ({ children, ...props }) => {
   return (
     <PageSection {...props}>
       <EmptyState variant={EmptyStateVariant.full}>

example/components/Installation.tsx

@@ -0,0 +1,55 @@
+import {
+  PageSection,
+  TextContent,
+  Title,
+  Text,
+  FlexItem,
+  Flex,
+  Button,
+  TextList,
+  TextListItem,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Keyword } from './Keyword';
+
+
+export const Installation: React.FunctionComponent<any> = ({ children, ...props }) => {
+  return (
+    <PageSection {...props}>
+      <TextContent>
+        <Title size={'3xl'}>Installation</Title>
+        <Text>You can install <Keyword>use-patternfly</Keyword> from npm:</Text>
+          <Text component={'blockquote'}>
+          npm install use-patternfly --save
+        </Text>
+        <Text>Or if you're using Yarn:</Text>
+        <Text component={'blockquote'}>
+          yarn add use-patternfly
+        </Text>
+        <Text>
+          This package requires the following packages as peer dependencies:
+        </Text>
+        <TextList>
+          <TextListItem><Keyword>@patternfly/react-core</Keyword></TextListItem>
+          <TextListItem><Keyword>@patternfly/react-styles</Keyword></TextListItem>
+          <TextListItem><Keyword>@patternfly/react-icons</Keyword></TextListItem>
+          <TextListItem><Keyword>react-router</Keyword></TextListItem>
+          <TextListItem><Keyword>react-router-dom</Keyword></TextListItem>
+        </TextList>
+        <Text>
+          Please make sure to install them as well. You'll need <Keyword>react@16.8.0</Keyword>
+          or later since the package uses hooks.
+        </Text>
+        <Text>
+          Some of the provided components and hooks could require additional dependencies.
+        </Text>
+      </TextContent>
+      <Flex>
+        <FlexItem breakpointMods={[{modifier: 'align-right', breakpoint: 'sm'}]}>
+          <Link to={'/getting-started/usage'}><Button component={'div'}>Usage</Button></Link>
+        </FlexItem>
+      </Flex>
+    </PageSection>
+  );
+}

example/components/Keyword.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { css, StyleSheet } from '@patternfly/react-styles';
+
+const styles = StyleSheet.create({
+  keyword: {
+    display: 'inline-block',
+    backgroundColor: `var(--pf-global--BackgroundColor--light-200)`,
+    fontFamily: 'monospace',
+    padding: '3px',
+    borderRadius: '3px'
+  }
+});
+
+export const Keyword: React.FunctionComponent = props =>
+  <span
+    {...props}
+    className={css(styles.keyword)}
+  />;

example/components/Overview.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { PageSection, TextContent, Title, Text, FlexItem, Flex, Button } from '@patternfly/react-core';
+import { Link } from 'react-router-dom';
+import logo from '../use-patternfly.png';
+import { Keyword } from './Keyword';
+
+export const Overview: React.FunctionComponent<any> = ({ children, ...props }) => {
+  return (
+    <>
+        <PageSection variant={'dark'} style={{ textAlign: 'center' }}>
+          <div>
+            <img src={logo} alt={'use-patternfly logo'} />
+          </div>
+
+          <a href={'https://circleci.com/gh/riccardo-forina/use-patternfly'}>
+            <img alt={'Build status'} src={'https://img.shields.io/circleci/build/github/riccardo-forina/use-patternfly'} />
+          </a>&nbsp;
+          <a href='https://coveralls.io/github/riccardo-forina/use-patternfly?branch=master'>
+            <img alt={'Coverage Status'} src={'https://coveralls.io/repos/github/riccardo-forina/use-patternfly/badge.svg?branch=master'} />
+          </a>
+        </PageSection>
+        <PageSection {...props}>
+          <TextContent>
+            <Title size={'3xl'}>Overview</Title>
+            <Text>
+              <Keyword>use-patternfly</Keyword> is an opinionated set of hooks and components useful when building a React app with <a href={'https://patternfly.org'}>PatternFly</a>.
+            </Text>
+            <Text>
+              This project aims to encourage code reuse between all projects using PatternFly and to showcase how to implement features like fetching from an API and showing the data in a DataList or Table component.
+            </Text>
+
+            <Title size={'xl'} headingLevel={'h2'}>Motivation</Title>
+            <Text>
+              Since I (<a href={'https://twitter.com/riccardoforina'}>@riccardoforina</a>) started
+              building apps using PatternFly, I found myself writing solutions to the same problem
+              many times. But how many ways can there be to <Link to={'/api/useDocumentTitle'}>set the document title</Link> or <Link to={'/api/AppLayout'}>wrap an app in a PatternFly chrome</Link>? I felt the need
+              to finalize these solutions in something reusable and well-tested, to finally
+              be able to focus on the app needs instead of re-learning how to wire PatternFly's
+              components once again.
+            </Text>
+
+            <Title size={'xl'} headingLevel={'h2'}>Dependencies</Title>
+            <Text>The only real dependency-other than PatternFly itself-is <a href={'https://github.com/ReactTraining/react-router'}>react-router</a>,
+              although it's listed as a peer dependency to avoid clashing with whatever
+              version you are running on your project. Other utilities might have extra
+              dependencies, but if you don't plan on using that specific utility you
+              don't need to install them.
+            </Text>
+          </TextContent>
+
+          <Flex>
+            <FlexItem breakpointMods={[{modifier: 'align-right', breakpoint: 'sm'}]}>
+              <Link to={'/getting-started/installation'}><Button as={'div'}>Installation</Button></Link>
+            </FlexItem>
+          </Flex>
+        </PageSection>
+      </>
+  );
+}