@usace/groundwork 1.0.1

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

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

package/src/app-pages/documentation/layout/usace-box.jsx

@@ -0,0 +1,76 @@
+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: "USACE Box",
+    href: "/docs/layout/usace-box",
+  },
+];
+
+const componentProps = [
+  {
+    name: "title",
+    type: "string",
+    default: "''",
+    desc: "The title to display at the top of the box.",
+  },
+  {
+    name: "customTitle",
+    type: "component",
+    default: "undefined",
+    desc: "Custom component to use as the title portion of the box.",
+  },
+];
+
+function UsaceBoxDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="USACE Box">
+        {/* Description of the component and what problem it solves */}
+        <div className="pb-6">
+          <p>
+            Simple wrapper that adds the theme header with the gray box and red
+            highlight.
+          </p>
+        </div>
+        {/* Example usage */}
+        <div className="rounded-md border border-dashed px-6 py-3 mb-3">
+          <UsaceBox title="Example">Some sample content here</UsaceBox>
+        </div>
+        <CodeExample
+          code={`import { UsaceBox } from "@usace/groundwork";
+
+function Component() {
+  return (
+    <UsaceBox title="Example">
+      Some sample content here
+    </UsaceBox>
+  )
+}
+
+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 UsaceBoxDocs;
+export { UsaceBoxDocs };

package/src/app-pages/documentation/navigation/breadcrumbs.jsx

@@ -0,0 +1,119 @@
+import {
+  Breadcrumbs as BC,
+  BreadcrumbItem,
+  UsaceBox,
+  Table,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableHeader,
+  TableCell,
+  Code,
+} from "../../../../lib";
+import CopyButton from "../../../app-components/copy-button";
+import { CodeExample } from "../../../app-components/code-example";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const breadcrumbsPropsData = [
+  {
+    name: "className",
+    type: "string",
+    default: "''",
+    desc: "Additional css classes to add to the breadcrumbs.",
+  },
+];
+
+const breadcrumbItemPropsData = [
+  {
+    name: "className",
+    type: "string",
+    default: "''",
+    desc: "Additional css classes to add to the breadcrumb item.",
+  },
+  {
+    name: "href",
+    type: "string",
+    default: "''",
+    desc: "The URL of the breadcrumb item.",
+  },
+  {
+    name: "text",
+    type: "string",
+    default: "''",
+    desc: "The text of the breadcrumb item.",
+  },
+];
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Navigation",
+    href: "/docs/navigation",
+  },
+  {
+    text: "Breadcrumbs",
+    href: "/docs/navigation/breadcrumbs",
+  },
+];
+
+function Breadcrumbs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Breadcrumbs">
+        <div className="pb-6">
+          Use breadcrumbs to indicate the current page’s location within a
+          hierarchy. Breadcrumbs are typically placed at the top of a page. They
+          are links and should be used to help users navigate through the site.
+          Breadcrumbs are not a replacement for the browser’s back button. They
+          are a supplemental navigation aid.
+        </div>
+
+        <div className="flex justify-start content-center gap-4">
+          <Code className="p-1 px-2">{`import { Breadcrumbs, BreadcrumbItem } from @usace/groundwork;`}</Code>
+          <CopyButton
+            text={`import { Breadcrumbs, BreadcrumbItem } from @usace/groundwork;`}
+          />
+        </div>
+
+        <div className="font-bold text-lg pt-6 pb-3">Basic Usage</div>
+        <div className="rounded-md border border-dashed px-6 py-3 mb-3">
+          <BC>
+            <BreadcrumbItem href="/docs" text="Documentation" />
+            <BreadcrumbItem href="/docs/navigation" text="Navigation" />
+            <BreadcrumbItem
+              href="/docs/navigation/breadcrumbs"
+              text="Breadcrumbs"
+            />
+          </BC>
+        </div>
+        <div>
+          <CodeExample
+            code={`<Breadcrumbs>
+  <BreadcrumbItem href="/docs" text="Documentation" />
+  <BreadcrumbItem href="/docs/navigation" text="Navigation" />
+  <BreadcrumbItem href="/docs/navigation/breadcrumbs" text="Breadcrumbs" />
+</Breadcrumbs>
+`}
+          />
+        </div>
+
+        <div className="font-bold text-lg pt-6">
+          Component API - <Code className="p-2">{`<Breadcrumbs />`}</Code>
+        </div>
+        <PropsTable propsList={breadcrumbsPropsData} />
+
+        <div className="font-bold text-lg pt-6">
+          Component API - <Code className="p-2">{`<BreadcrumbItem />`}</Code>
+        </div>
+        <PropsTable propsList={breadcrumbItemPropsData} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default Breadcrumbs;
+export { Breadcrumbs };

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

@@ -0,0 +1,31 @@
+import { UsaceBox } from "../../../../lib";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Navigation",
+    href: "/docs/navigation",
+  },
+];
+
+function Navigation() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Navigation">
+        <div>
+          <p>
+            These are docs docs go to{" "}
+            <a href="/docs/navigation/breadcrumbs">Breadcrumbs</a>
+          </p>
+        </div>
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default Navigation;
+export { Navigation };

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

@@ -0,0 +1,31 @@
+import { UsaceBox } from "../../../../lib";
+import DocsPage from "../_docs-page";
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Types",
+    href: "/docs/types",
+  },
+];
+
+function Types() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Types (sort of)">
+        <div>
+          While Groundwork is not a typescript library, we define some types to
+          help with development, mainly to help with consistency throughout the
+          library. Types defined here describe object types that are commonly
+          used throughout the library.
+        </div>
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default Types;
+export { Types };

package/src/app-pages/documentation/types/link.jsx

@@ -0,0 +1,72 @@
+import {
+  Breadcrumbs as BC,
+  BreadcrumbItem,
+  UsaceBox,
+  Table,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableHeader,
+  TableCell,
+  Code,
+} from "../../../../lib";
+import PropsTable from "../../../app-components/props-table";
+import DocsPage from "../_docs-page";
+
+const linkProps = [
+  {
+    name: "id",
+    type: "string",
+    default: "''",
+    desc: "Used as the key attribute when rendering a list of links, so needs to be unique within the list.",
+  },
+  {
+    name: "href",
+    type: "string",
+    default: "''",
+    desc: "The URL of the link.",
+  },
+  {
+    name: "text",
+    type: "string",
+    default: "''",
+    desc: "The text of the link.",
+  },
+];
+
+const pageBreadcrumbs = [
+  {
+    text: "Documentation",
+    href: "/docs",
+  },
+  {
+    text: "Types",
+    href: "/docs/types",
+  },
+  {
+    text: "Link",
+    href: "/docs/types/link",
+  },
+];
+
+function LinkDocs() {
+  return (
+    <DocsPage breadcrumbs={pageBreadcrumbs}>
+      <UsaceBox title="Link">
+        <div className="pb-6">
+          The Link type is used to create a link to another page or resource. We
+          use it to provide a consistent way of representing links, useful where
+          links are configurable or dynamic.
+        </div>
+
+        <div className="font-bold text-lg pt-6">
+          Object - <Code className="p-2">{`link`}</Code>
+        </div>
+        <PropsTable propsList={linkProps} />
+      </UsaceBox>
+    </DocsPage>
+  );
+}
+
+export default LinkDocs;
+export { LinkDocs };

package/src/app-pages/home.jsx

@@ -0,0 +1,71 @@
+import { Container, Text, Code, UsaceBox, TextLink, Hero } from "../../lib";
+import CopyButton from "../app-components/copy-button";
+
+const base = import.meta.env.BASE_URL;
+
+function Home() {
+  return (
+    <>
+      <Hero
+        image={`${base}nww-lucky-peak-dam.jpg`}
+        title="Groundwork"
+        subtitle="React Component Library"
+      />
+
+      <Container>
+        <div className="mt-6">
+          <UsaceBox title="Welcome">
+            <Text>
+              Welcome to the homepage for the Groundwork React Components,
+              building blocks for webpages using the USACE enterprise theme.
+              These components are designed to be used by USACE Developers
+              building internal and externally facing web pages and web apps. We
+              are continuously adding better accessability, and contributions
+              are welcome to extend the library, contribution guidelines are
+              available in the GitHub Repo.
+            </Text>
+          </UsaceBox>
+          <div className="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-2">
+            <UsaceBox title="Getting Started">
+              <div className="flex flex-row justify-start space-between items-center gap-2 mb-3">
+                <Code className="block w-full p-1 px-2">
+                  npm install @usace/groundwork
+                </Code>
+                <CopyButton text="npm install @usace/groundwork" />
+              </div>
+
+              <Text>
+                Then, import the components you need, and start building your
+                application
+              </Text>
+              <div className="mt-3">
+                <TextLink href="/docs" className="text-lg font-bold">
+                  Check out the docs
+                </TextLink>
+              </div>
+            </UsaceBox>
+            <UsaceBox
+              customTitle={() => {
+                return (
+                  <span>
+                    <span className="inline-block">Contributing</span>
+                  </span>
+                );
+              }}
+            >
+              <Text>
+                Contributions are welcome! Please see the{" "}
+                <TextLink href="https://github.com/USACE/groundwork">
+                  GitHub Repository
+                </TextLink>{" "}
+                for more information.
+              </Text>
+            </UsaceBox>
+          </div>
+        </div>
+      </Container>
+    </>
+  );
+}
+
+export default Home;

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/main.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ReduxBundlerProvider } from "redux-bundler-hook";
+import getStore from "./app-bundles";
+import App from "./App.jsx";
+import "./index.css";
+
+const store = getStore();
+
+if (process.env.NODE_ENV === "development") window.store = store;
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <ReduxBundlerProvider store={store}>
+      <App />
+    </ReduxBundlerProvider>
+  </React.StrictMode>
+);

package/tailwind.config.js

@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./lib/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      gridTemplateRows: {
+        "1fr-auto": "1fr auto",
+      },
+      fontFamily: {
+        usace: ["Roboto", "Arial", "Helvetica", "sans-serif"],
+      },
+      colors: {
+        "nav-light-gray": "#d0d0d0",
+        "nav-gray": "hsla(0, 0%, 80%, 0.9)",
+        "nav-translucent-gray": "hsla(0, 0%, 100%, 0.2)",
+        "nav-dark-gray": "rgba(85, 85, 85, 0.98)",
+        "nav-black": "#18181b",
+        "usace-box-light-gray": "#ededed",
+        "usace-box-red": "#de1e2e",
+        "footer-black": "#1b1b1b",
+        "footer-gray": "#333",
+        "footer-light-gray": "#ccc",
+      },
+    },
+  },
+  plugins: [],
+};

package/vite.config.js

@@ -0,0 +1,46 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// // https://vitejs.dev/config/
+// export default defineConfig({
+//   plugins: [react()],
+// })
+
+export default defineConfig(({ mode }) => {
+  if (mode === "lib") {
+    console.log("Building library");
+    return {
+      plugins: [react()],
+      publicDir: false,
+      build: {
+        lib: {
+          name: "Groundwork",
+          fileName: (format) => `groundwork.${format}.js`,
+          entry: "lib/index.jsx",
+        },
+        rollupOptions: {
+          external: ["react", "react-dom"],
+          output: {
+            globals: {
+              react: "React",
+              "react-dom": "ReactDOM",
+            },
+          },
+        },
+      },
+    };
+  } else {
+    console.log("Building preview app", mode);
+    const base =
+      mode === "production"
+        ? "https://usace.github.io/groundwork/"
+        : "http://localhost:5173/";
+    return {
+      plugins: [react()],
+      base: base,
+      build: {
+        outDir: "docs",
+      },
+    };
+  }
+});