Write the doc

example/app.tsx

@@ -1,58 +1,86 @@
 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: '/getting-started/installation', title: 'Installation' },
+            { to: '/getting-started/usage', title: 'Usage' },
+          ]
+        },
+        {
+          title: 'API',
+          to: '/api',
           items: [
-            { to: '/dashboard/simple', title: 'Simple' },
-            {},
-            { to: '/dashboard/params', title: 'Params: empty', exact: true },
-            { to: '/dashboard/params/hello', title: 'Params: hello', exact: true },
+            { 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/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='/support'
-            getComponent={() => import(/* webpackChunkName: 'support-page' */ './pages/SupportPage')}
-          >
-            {({ component: SupportPage }) =>
-              <SupportPage />
-            }
-          </LazyRoute>
+            path='/getting-started/usage'
+            getComponent={() => import('./pages/UsagePage')}
+          />
+          <Redirect
+            path='/api'
+            to={'/api/AppLayout'}
+            exact={true}
+          />
         </SwitchWith404>
       </LastLocationProvider>
     </AppLayout>

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,50 @@
+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' }}>
+          <img src={logo} alt={'use-patternfly logo'} />
+        </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>
+      </>
+  );
+}

example/components/Usage.tsx

@@ -0,0 +1,41 @@
+import {
+  PageSection,
+  TextContent,
+  Title,
+  Text,
+  FlexItem,
+  Flex,
+  Button,
+} from '@patternfly/react-core';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+export const Usage: React.FunctionComponent<any> = ({ children, ...props }) => {
+  return (
+    <PageSection {...props}>
+      <TextContent>
+        <Title size={'3xl'}>Usage</Title>
+        <Text>Import the component or hook that you need using the object destructuring syntax:</Text>
+      </TextContent>
+
+      <iframe style={{height: 565, width: "100%", margin: '20px 0'}} scrolling={'no'} title="use-patternfly-usage-example"
+              src="https://codepen.io/riccardo-forina/embed/oNNjjqv?height=265&theme-id=0&default-tab=js"
+              frameBorder="no" allowFullScreen={true}>
+        See the Pen <a href='https://codepen.io/riccardo-forina/pen/oNNjjqv'>use-patternfly-usage-example</a> by
+        Riccardo Forina
+        (<a href='https://codepen.io/riccardo-forina'>@riccardo-forina</a>) on <a
+        href='https://codepen.io'>CodePen</a>.
+      </iframe>
+
+      <TextContent>
+        <Text>Another source of usage examples is <a href={'https://github.com/riccardo-forina/use-patternfly/tree/master/example'}>the code behind this website</a>.</Text>
+      </TextContent>
+
+      <Flex>
+        <FlexItem breakpointMods={[{modifier: 'align-right', breakpoint: 'sm'}]}>
+          <Link to={'/api'}><Button component={'div'}>API</Button></Link>
+        </FlexItem>
+      </Flex>
+    </PageSection>
+  );
+}

example/components/index.ts

@@ -1,4 +1,8 @@
-export * from './Support';
 export * from './DashboardLayout';
 export * from './DashboardParams';
 export * from './DashboardSimple';
+export * from './GettingStarted';
+export * from './Installation';
+export * from './Overview';
+export * from './Usage';
+export * from './Keyword';

example/index.html

@@ -10,5 +10,6 @@
   <body>
     <div id="root"></div>
     <script src="./index.tsx"></script>
+    <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
   </body>
 </html>

example/pages/DashboardPage.tsx → example/pages/ApiPage.tsx

@@ -5,7 +5,7 @@ import { DashboardLayout } from '../components';
 import DashboardSimplePage from './DashboardSimplePage';
 import DashboardParamsPage from './DashboardParamsPage';
 
-export default function DashboardPage() {
+export default function ApiPage() {
   const { path } = useRouteMatch()!;
   const a11yContainerProps = useA11yRouteContainer();
   useDocumentTitle('Dashboard');

example/pages/InstallationPage.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { useA11yRouteContainer, useDocumentTitle } from 'use-patternfly';
+import { Installation } from '../components';
+
+export default function InstallationPage() {
+  const a11yContainerProps = useA11yRouteContainer();
+  useDocumentTitle('Installation');
+  return (
+    <Installation {...a11yContainerProps} />
+  );
+}

example/pages/OverviewPage.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { useA11yRouteContainer, useDocumentTitle } from 'use-patternfly';
+import { Overview } from '../components';
+
+export default function OverviewPage() {
+  const a11yContainerProps = useA11yRouteContainer();
+  useDocumentTitle('Overview');
+  return (
+    <Overview {...a11yContainerProps} />
+  );
+}

example/pages/SupportPage.tsx → example/pages/UsagePage.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useA11yRouteContainer, useDocumentTitle } from 'use-patternfly';
-import { Support } from '../components';
+import { Usage } from '../components';
 
-export default function SupportPage() {
+export default function UsagePage() {
   const a11yContainerProps = useA11yRouteContainer();
-  useDocumentTitle('Support');
+  useDocumentTitle('Usage');
   return (
-    <Support {...a11yContainerProps} />
+    <Usage {...a11yContainerProps} />
   );
 }

src/LazyRoute.tsx

@@ -8,22 +8,22 @@ import {
 } from '@patternfly/react-core';
 import { Spinner } from '@patternfly/react-core/dist/js/experimental';
 
-export interface IDynamicImportChildrenProps<T> {
-  component: React.ComponentType<T>;
+export interface IDynamicImportChildrenProps {
+  component: React.ComponentType;
 }
 
-export interface IDynamicImportProps<T> extends RouteProps {
-  getComponent: () => Promise<{ default: React.ComponentType<T> }>;
-  children: (props: IDynamicImportChildrenProps<T>) => React.ReactElement;
+export interface IDynamicImportProps extends RouteProps {
+  getComponent: () => Promise<{ default: React.ComponentType }>;
+  children?: (props: IDynamicImportChildrenProps) => React.ReactElement;
 }
 
-export function LazyRoute<T>({
+export function LazyRoute({
   getComponent,
-  children,
+  children = ({ component: Component }) => <Component />,
   ...props
-}: IDynamicImportProps<T>) {
+}: IDynamicImportProps) {
   const [module, setModule] = React.useState<{
-    default: React.ComponentType<T>;
+    default: React.ComponentType;
   } | null>(null);
   const isStale = React.useRef(false);
   React.useEffect(() => {