@usace/groundwork 1.0.1 → 1.0.3

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

@@ -1,55 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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

@@ -1,170 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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 };

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

@@ -1,52 +0,0 @@
-import { UsaceBox } from "../../../../lib";
-import DocsPage from "../_docs-page";
-
-const pageBreadcrumbs = [
-  {
-    text: "Documentation",
-    href: "/docs",
-  },
-  {
-    text: "Layout",
-    href: "/docs/layout",
-  },
-];
-
-function Layout() {
-  return (
-    <DocsPage breadcrumbs={pageBreadcrumbs}>
-      <UsaceBox title="Layout">
-        <div>
-          <p>
-            Layout components are used to structure your content on the page.
-            They include simple wrappers for using{" "}
-            <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">
-              Flexbox layouts
-            </a>{" "}
-            and styled containers for displaying content using the standard
-            flourish (see the top of this section.)
-          </p>
-          <p className="mt-3">
-            <ul>
-              <a className="hover:underline" href="/docs/layout/container">
-                <li>Container - a simple wrapper to manage margins.</li>
-              </a>
-              <a className="hover:underline" href="/docs/layout/flex">
-                <li>Flex - easy to use flexbox layouts</li>
-              </a>
-              <a className="hover:underline" href="/docs/layout/usace-box">
-                <li>
-                  USACE Box - A container with a header and the red and gray
-                  flourish on top.
-                </li>
-              </a>
-            </ul>
-          </p>
-        </div>
-      </UsaceBox>
-    </DocsPage>
-  );
-}
-
-export default Layout;
-export { Layout };