@usace/groundwork 1.0.2 → 1.0.4

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 };

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

@@ -1,76 +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: "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

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

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

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

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

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

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

package/src/main.jsx

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

@@ -1,31 +0,0 @@
-/** @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

@@ -1,46 +0,0 @@
-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",
-      },
-    };
-  }
-});