@usace/groundwork 1.0.1

package/src/app-pages/documentation/_docs-sidebar.jsx

@@ -0,0 +1,111 @@
+import { useConnect } from "redux-bundler-hook";
+import { UsaceBox } from "../../../lib";
+import { VscChevronRight } from "react-icons/vsc";
+
+const sidebarLinks = [
+  {
+    title: "Getting Started",
+    href: "/docs",
+  },
+  {
+    title: "Application Shell",
+    href: "/docs/app-shell",
+    children: [
+      {
+        title: "Site Wrapper",
+        href: "/docs/app-shell/site-wrapper",
+      },
+    ],
+  },
+  {
+    title: "Layout",
+    href: "/docs/layout",
+    children: [
+      {
+        title: "Container",
+        href: "/docs/layout/container",
+      },
+      {
+        title: "UsaceBox",
+        href: "/docs/layout/usace-box",
+      },
+    ],
+  },
+  {
+    title: "Navigation",
+    href: "/docs/navigation",
+    children: [
+      {
+        title: "Breadcrumbs",
+        href: "/docs/navigation/breadcrumbs",
+      },
+    ],
+  },
+  {
+    title: "Buttons",
+    href: "/docs/buttons",
+    children: [],
+  },
+  {
+    title: "Types",
+    href: "/docs/types",
+    children: [
+      {
+        title: "Link",
+        href: "/docs/types/link",
+      },
+    ],
+  },
+];
+
+function DocsSidebar() {
+  const { hash } = useConnect("selectHash");
+  return (
+    <UsaceBox title="Contents">
+      {sidebarLinks.map((link) => {
+        return (
+          <div key={link.href}>
+            <a href={link.href}>
+              <div
+                className={`text-lg font-bold pl-1 py-1 flex justify-between items-center cursor-pointer hover:bg-gray-100 ${
+                  hash === link.href ? "bg-gray-50 rounded" : ""
+                }`}
+              >
+                {link.title}
+                <VscChevronRight
+                  size={18}
+                  aria-hidden="true"
+                  color="rgb(156 163 175)"
+                />
+              </div>
+            </a>
+            <ul>
+              {link.children &&
+                link.children.map((child) => {
+                  return (
+                    <a href={child.href} key={child.href}>
+                      <li
+                        className={`pl-3 py-1 flex justify-between items-center cursor-pointer hover:bg-gray-100 ${
+                          hash === child.href ? "bg-gray-50 rounded" : ""
+                        }`}
+                      >
+                        {child.title}
+                        <VscChevronRight
+                          size={18}
+                          aria-hidden="true"
+                          color="rgb(156 163 175)"
+                        />
+                      </li>
+                    </a>
+                  );
+                })}
+            </ul>
+          </div>
+        );
+      })}
+    </UsaceBox>
+  );
+}
+
+export default DocsSidebar;
+export { DocsSidebar };

package/src/app-pages/documentation/_template.jsx

@@ -0,0 +1,55 @@
+import { UsaceBox, Code } from "../../../../lib";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+];
+
+const componentProps = [
+  {
+    name: "headerLinks",
+    type: "array[Link]",
+    default: "[]",
+    desc: "An array of objects to be used as links in the header. Each object should have an id, text, and href property. If you would like a drop-down of links include a children property which is an array of link objects to the top level link.",
+  },
+];
+
+function Docs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Site Wrapper">
+        {/* Description of the component and what problem it solves */}
+        <div className="pb-6">
+          <p>Description of component</p>
+          <p className="pt-3">Description continued</p>
+        </div>
+        {/* Example usage - remove if not needed */}
+        <div className="rounded-md border border-dashed px-6 py-3 mb-3"></div>
+        {/* Example code */}
+        <CodeExample
+          code={`import {  } from "@usace/groundwork";
+
+function Component() {
+  return ()
+}
+
+export default Component;
+`}
+        />
+        {/* Component props documentation */}
+        <div className="font-bold text-lg pt-6">
+          Component API - <Code className="p-2">{`<SiteWrapper />`}</Code>
+        </div>
+        <PropsTable propsList={componentProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default Docs;
+export { Docs };

package/src/app-pages/documentation/app-shell/index.jsx

@@ -0,0 +1,39 @@
+import { UsaceBox, H4 } from "../../../../lib";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Application Shell",
+    href: "/docs/app-shell",
+  },
+];
+
+function AppShell() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Application Shell">
+        <div className="pb-6">
+          The application shell consists of components that are shared across
+          many pages, this way we can re-use components for the header, footer,
+          etc... and don't have to worry about getting them all to match. The
+          easiest way to start your app is to use the SiteWrapper component to
+          wrap your custom page, then you only have to concentrate on your
+          specific content.
+        </div>
+        <H4>Components</H4>
+        <ul>
+          <li>
+            <a href="/docs/app-shell/site-wrapper">Site Wrapper</a>
+          </li>
+        </ul>
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default AppShell;
+export { AppShell };

package/src/app-pages/documentation/app-shell/site-wrapper.jsx

@@ -0,0 +1,190 @@
+import { UsaceBox, Code } from "../../../../lib";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Application Shell",
+    href: "/docs/app-shell",
+  },
+  {
+    text: "Site Wrapper",
+    href: "/docs/app-shell/site-wrapper",
+  },
+];
+
+const siteWrapperProps = [
+  {
+    name: "headerLinks",
+    type: "array[Link]",
+    default: "[]",
+    desc: "An array of objects to be used as links in the header. Each object should have an id, text, and href property. If you would like a drop-down of links include a children property which is an array of link objects to the top level link.",
+  },
+  {
+    name: "usaBanner",
+    type: "boolean",
+    default: "true",
+    desc: "If true, the government website banner will be displayed at the top of the page.",
+  },
+  {
+    name: "msgBanner",
+    type: "component",
+    default: "null",
+    desc: "A custom component that will render between the government website banner and the header. This is useful for displaying a message banner that is specific to the site or page.",
+  },
+  {
+    name: "title",
+    type: "string",
+    default: "US Army Corps of Engineers",
+    desc: "The title to display in the header.",
+  },
+  {
+    name: "subtitle",
+    type: "string",
+    default: "''",
+    desc: "A subtitle to display in the header.",
+  },
+  {
+    name: "missionText",
+    type: "string",
+    default: "''",
+    desc: "The mission text to display in the footer.",
+  },
+  {
+    name: "aboutText",
+    type: "string",
+    default: "''",
+    desc: "The about text to display in the footer.",
+  },
+  {
+    name: "facebookUrl",
+    type: "string",
+    default: "''",
+    desc: "The URL to a Facebook page.",
+  },
+  {
+    name: "twitterUrl",
+    type: "string",
+    default: "''",
+    desc: "The URL to a Twitter page.",
+  },
+  {
+    name: "youtubeUrl",
+    type: "string",
+    default: "''",
+    desc: "The URL to a YouTube page.",
+  },
+  {
+    name: "flickrUrl",
+    type: "string",
+    default: "''",
+    desc: "The URL to a Flickr page.",
+  },
+  {
+    name: "usaceLinks",
+    type: "array[Link]",
+    default: "[]",
+    desc: "An array of objects to be used as links in the footer. These links should point to USACE websites. Each object should have an id, text, and href property.",
+  },
+  {
+    name: "externalLinks",
+    type: "array[Link]",
+    default: "[]",
+    desc: "An array of objects to be used as external links in the footer. Use these links to point to external non-USACE websites. Each object should have an id, text, and href property.",
+  },
+  {
+    name: "armyLogo",
+    type: "boolean",
+    default: "true",
+    desc: "If true, the Army logo will be displayed in the footer.",
+  },
+  {
+    name: "usaceLogo",
+    type: "boolean",
+    default: "true",
+    desc: "If true, the USACE logo will be displayed in the footer.",
+  },
+  {
+    name: "rsgisLogo",
+    type: "boolean",
+    default: "false",
+    desc: "If true, the RSGIS logo will be displayed in the footer.",
+  },
+  {
+    name: "cwbiLogo",
+    type: "boolean",
+    default: "false",
+    desc: "If true, the CWBI logo will be displayed in the footer.",
+  },
+];
+
+function SiteWrapperDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Site Wrapper">
+        <div className="pb-6">
+          <p>
+            Use the Site Wrapper to add the header and footer to your page. The
+            best way to do this is add SiteWrapper to the top level of your
+            application and render any changing content as children of the
+            SiteWrapper component.
+          </p>
+          <p className="pt-3">
+            For example, in a Vite project you typically have a src/App.jsx file
+            which is the top level component for the application. You would
+            import the SiteWrapper component there and use it to wrap the rest
+            of your application.
+          </p>
+          <p className="pt-3">
+            Note that in the example below, the useConnect hook is used to get
+            the current content that should be rendered based on the url. This
+            uses a separate state management framework called{" "}
+            <a
+              className="underline"
+              href="https://reduxbundler.com"
+              target="_blank"
+              referrer="noreferrer"
+            >
+              ReduxBundler
+            </a>
+            , which we highly recommend for React state management.
+          </p>{" "}
+        </div>
+        <CodeExample
+          code={`import { SiteWrapper } from "@usace/groundwork";
+import { useConnect } from "redux-bundler-hook";
+
+const links = [{ id: "docs", label: "Documentation", link: "/docs" }];
+
+function App() {
+  const {
+    route: Route,
+  } = useConnect("selectRoute");
+
+  return (
+      <SiteWrapper links={links}>
+        <Route />
+      </SiteWrapper>
+  );
+}
+
+export default App;
+`}
+        />
+
+        <div className="font-bold text-lg pt-6">
+          Component API - <Code className="p-2">{`<SiteWrapper />`}</Code>
+        </div>
+        <PropsTable propsList={siteWrapperProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default SiteWrapperDocs;
+export { SiteWrapperDocs };

package/src/app-pages/documentation/buttons/index.jsx

@@ -0,0 +1,170 @@
+import { UsaceBox, Code, Button } from "../../../../lib";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Buttons",
+    href: "/docs/buttons",
+  },
+];
+
+const componentProps = [
+  {
+    name: "type",
+    type: "string",
+    default: "'button'",
+    desc: "The html button type to use.",
+  },
+  {
+    name: "color",
+    type: "string",
+    default: "'dark/zinc'",
+    desc: "The solid color variant to use.",
+  },
+  {
+    name: "outline",
+    type: "boolean",
+    default: "false",
+    desc: "Render a button with an outline but no background.",
+  },
+  {
+    name: "plain",
+    type: "boolean",
+    default: "false",
+    desc: "Render a plain button with no background or outline.",
+  },
+  {
+    name: "disabled",
+    type: "boolean",
+    default: "false",
+    desc: "Disable the button.",
+  },
+  {
+    name: "onClick",
+    type: "function",
+    default: "undefined",
+    desc: "Handler that will fire on the click event, all other basic React event handlers are available as well.",
+  },
+];
+
+function ButtonsDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Buttons">
+        {/* Description of the component and what problem it solves */}
+        <div className="pb-6">
+          <p>
+            The Button component can be used to render a basic button with
+            pre-defined styles. For more advanced configurations it's
+            recommended that you implement your own button using the{" "}
+            <Code>{"<button>"}</Code> primitive component.
+          </p>
+        </div>
+        {/* Example usage - remove if not needed */}
+        <div className="mt-4 mb-2 text-sm font-bold">Basic Usage</div>
+        <div className="rounded-md border border-dashed px-6 py-3 mb-3">
+          <div className="flex flex-row flex-wrap gap-3">
+            <Button>Default</Button>
+            <Button outline>Outlined</Button>
+            <Button plain>Plain</Button>
+            <Button disabled>Disabled</Button>
+            <Button href="/docs/buttons">As a Link</Button>
+          </div>
+        </div>
+        {/* Example code */}
+        <CodeExample
+          code={`import { Button } from "@usace/groundwork";
+
+function Component() {
+  return (
+    <div className="flex flex-row flex-wrap gap-3">
+      <Button>Default</Button>
+      <Button outline>Outlined</Button>
+      <Button plain>Plain</Button>
+      <Button disabled>Disabled</Button>
+      <Button href="/docs/buttons">As a Link</Button>
+    </div>
+  )
+}
+
+export default Component;
+`}
+        />
+        {/* Example usage - remove if not needed */}
+        <div className="mt-4 mb-2 text-sm font-bold">
+          Built-in Color Options
+        </div>
+        <div className="rounded-md border border-dashed px-6 py-3 mb-3">
+          <div className="flex flex-row flex-wrap gap-3">
+            {[
+              "dark/zinc",
+              "light",
+              "dark/white",
+              "dark",
+              "white",
+              "zinc",
+              "indigo",
+              "cyan",
+              "red",
+              "orange",
+              "amber",
+              "yellow",
+              "lime",
+              "green",
+              "emerald",
+              "teal",
+              "sky",
+              "blue",
+              "violet",
+              "purple",
+              "fuchsia",
+              "pink",
+              "rose",
+            ].map((clr) => {
+              return (
+                <Button key={clr} color={clr}>
+                  {clr}
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+        {/* Example code */}
+        <CodeExample
+          code={`import { Button } from "@usace/groundwork";
+
+function Component() {
+  return (
+    <div className="flex flex-row flex-wrap gap-3">
+      {colors.map((clr) => {
+        return (
+          <Button key={clr} color={clr}>
+            {clr}
+          </Button>
+        );
+      })}
+    </div>
+  )
+}
+
+export default Component;
+`}
+        />
+        {/* Component props documentation */}
+        <div className="font-bold text-lg pt-6">
+          Component API - <Code className="p-2">{`<SiteWrapper />`}</Code>
+        </div>
+        <PropsTable propsList={componentProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default ButtonsDocs;
+export { ButtonsDocs };

package/src/app-pages/documentation/index.jsx

@@ -0,0 +1,57 @@
+import { UsaceBox, Code, H4 } from "../../../lib";
+import CopyButton from "../../app-components/copy-button";
+import DocsPage from "./_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+];
+
+function Docs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Getting Started">
+        <H4>Project Setup</H4>
+        <div className="mt-3 mb-3">
+          <p>
+            Groundwork is a set of React components that are designed to be used
+            by USACE Developers building internal and externally facing web
+            pages and web apps. The library should be compatible with any React
+            project using a build step. We test the framework and only support
+            using the Vite build tool. See the{" "}
+            <a
+              className="underline"
+              href="https://vitejs.dev/guide/"
+              target="_blank"
+              referrer="no-referrer"
+            >
+              Vite documentation
+            </a>{" "}
+            for more details on getting started.{" "}
+          </p>
+          <p className="mt-3">
+            Set up a new project with Vite using the following command:
+            <div className="flex flex-row justify-start space-between items-center gap-2 mt-3 mb-3">
+              <Code className="block p-1 px-2">
+                npm create vite@latest {`<app-name>`} --template react
+              </Code>
+              <CopyButton text="npm create vite@latest <app-name> --template react" />
+            </div>
+          </p>
+        </div>
+
+        <H4>Installation</H4>
+        <div className="flex flex-row justify-start space-between items-center gap-2 mt-3 mb-3">
+          <Code className="block p-1 px-2">npm install @usace/groundwork</Code>
+          <CopyButton text="npm install @usace/groundwork" />
+        </div>
+        <div>Then go build stuff with the components</div>
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default Docs;
+export { Docs };

package/src/app-pages/documentation/layout/container.jsx

@@ -0,0 +1,68 @@
+import { UsaceBox, Code } from "../../../../lib";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Layout",
+    href: "/docs/layout",
+  },
+  {
+    text: "Container",
+    href: "/docs/layout/container",
+  },
+];
+
+const componentProps = [
+  {
+    name: "fluid",
+    type: "boolean",
+    default: "false",
+    desc: "If true, the container will be full width. If false, the container will have a max width of 1140px.",
+  },
+];
+
+function ContainerDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Container">
+        {/* Description of the component and what problem it solves */}
+        <div className="pb-6">
+          <p>
+            Use Container to add a section to your page with padding and a max
+            with that keeps content within a readable width on users screens, or
+            if you want full width all the time, you can set fluid == true.
+          </p>
+        </div>
+        {/* Example usage */}
+        <CodeExample
+          code={`import { Container } from "@usace/groundwork";
+
+function MyComponent() {
+  return (
+    <Container>
+      <div>{content}</div>
+    </Container>
+  )
+}
+
+export default MyComponent;
+`}
+        />
+        {/* Component props documentation */}
+        <div className="font-bold text-lg pt-6">
+          Component API - <Code className="p-2">{`<SiteWrapper />`}</Code>
+        </div>
+        <PropsTable propsList={componentProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default ContainerDocs;
+export { ContainerDocs };