-
-
+
Badge - A small piece of information that can be displayed on a
page.
-
-
+
Headings - Section headings for standard content.
-
-
+
Hero - A large, prominent section of a page.
-
- Text - Standard text for a page.
+
+ Text - Standard text for a page.
+
-
- Table - A table of data.
+
+ Table - A table of data.
+
-
-
+
Accordion - Stackable / Expandible sections.
-
-
+
Card - Put a box around some content.
diff --git a/src/app-pages/documentation/display/modal.jsx b/src/app-pages/documentation/display/modal.jsx
index 9dac4fb..cd4d2b1 100644
--- a/src/app-pages/documentation/display/modal.jsx
+++ b/src/app-pages/documentation/display/modal.jsx
@@ -4,14 +4,16 @@ import CodeExample from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Modal",
- href: "/#/docs/modal",
+ href: `${BASE_URL}#/docs/modal`,
},
];
@@ -58,6 +60,42 @@ const componentProps = [
default: "2xl",
desc: "Size of the modal dialog. Options include: 'sx', 'sm', 'md', 'lg', 'xl', '2xl', '4xl', 'full'.",
},
+ {
+ name: "isStatic",
+ type:"boolean",
+ default:"false",
+ desc:"Whether the element should ignore the internally managed open/closed state."
+ },
+ {
+ name:"autoFocus",
+ type:"boolean",
+ default:"false",
+ desc:"Whether or not the dialog should receive focus when first rendered."
+ },
+ {
+ name:"dialogTransition",
+ type:"boolean",
+ default:"false",
+ desc:"Whether the element should render transition attributes like data-closed, data-enter and data-leave."
+ },
+ {
+ name:"unmount",
+ type:"boolean",
+ default:"true",
+ desc:"Whether the element should be unmounted or hidden based on the open/closed state."
+ },
+ {
+ name:"role",
+ type:"string",
+ default:"dialog",
+ desc:"The role to apply to the dialog root element. Options include: 'dialog' , 'alertdialog'"
+ },
+ {
+ name:"dialogPanelTransition",
+ type:"boolean",
+ default:"false",
+ desc:"Whether the element should render transition attributes like data-closed, data-enter and data-leave."
+ },
{
name: "className",
type: "string",
diff --git a/src/app-pages/documentation/display/progress-bar.jsx b/src/app-pages/documentation/display/progress-bar.jsx
index b1085f5..2bdb5c8 100644
--- a/src/app-pages/documentation/display/progress-bar.jsx
+++ b/src/app-pages/documentation/display/progress-bar.jsx
@@ -4,18 +4,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Display",
- href: "/#/docs/display",
+ href: `${BASE_URL}#/docs/display`,
},
{
text: "Progress Bar",
- href: "/#/docs/display/progress-bar",
+ href: `${BASE_URL}#/docs/display/progress-bar`,
},
];
diff --git a/src/app-pages/documentation/display/skeleton.jsx b/src/app-pages/documentation/display/skeleton.jsx
index dec63ad..8e4bd6f 100644
--- a/src/app-pages/documentation/display/skeleton.jsx
+++ b/src/app-pages/documentation/display/skeleton.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Layout",
- href: "/#/docs/layout",
+ href: `${BASE_URL}#/docs/layout`,
},
{
text: "Skeleton",
- href: "/#/docs/display/skeleton",
+ href: `${BASE_URL}#/docs/display/skeleton`,
},
];
diff --git a/src/app-pages/documentation/display/table.jsx b/src/app-pages/documentation/display/table.jsx
index d4e53c9..4165263 100644
--- a/src/app-pages/documentation/display/table.jsx
+++ b/src/app-pages/documentation/display/table.jsx
@@ -13,18 +13,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Display",
- href: "/#/docs/display",
+ href: `${BASE_URL}#/docs/display`,
},
{
text: "Table",
- href: "/#/docs/display/table",
+ href: `${BASE_URL}#/docs/display/table`,
},
];
diff --git a/src/app-pages/documentation/display/text.jsx b/src/app-pages/documentation/display/text.jsx
index 30d6548..a1e0fd5 100644
--- a/src/app-pages/documentation/display/text.jsx
+++ b/src/app-pages/documentation/display/text.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Display",
- href: "/#/docs/display",
+ href: `${BASE_URL}#/docs/display`,
},
{
text: "Text",
- href: "/#/docs/display/Text",
+ href: `${BASE_URL}#/docs/display/Text`,
},
];
diff --git a/src/app-pages/documentation/forms/checkboxes.jsx b/src/app-pages/documentation/forms/checkboxes.jsx
index cd66724..99a83c5 100644
--- a/src/app-pages/documentation/forms/checkboxes.jsx
+++ b/src/app-pages/documentation/forms/checkboxes.jsx
@@ -5,10 +5,12 @@ import DocsPage from "../_docs-page";
import { Checkboxes } from "../../../../lib/components/form/checkboxes";
import { useState, useMemo } from "react";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
- { text: "Documentation", href: "/#/docs" },
- { text: "Forms", href: "/#/docs/forms" },
- { text: "Checkboxes", href: "/#/docs/forms/checkboxes" },
+ { text: "Documentation", href: `${BASE_URL}#/docs` },
+ { text: "Forms", href: `${BASE_URL}#/docs/forms` },
+ { text: "Checkboxes", href: `${BASE_URL}#/docs/forms/checkboxes` },
];
const checkboxItemProps = [
diff --git a/src/app-pages/documentation/forms/color-input.jsx b/src/app-pages/documentation/forms/color-input.jsx
index 8c02166..20de896 100644
--- a/src/app-pages/documentation/forms/color-input.jsx
+++ b/src/app-pages/documentation/forms/color-input.jsx
@@ -4,18 +4,20 @@ import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
import { useState } from "react";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Color Input",
- href: "/#/docs/forms/color-input",
+ href: `${BASE_URL}#/docs/forms/color-input`,
},
];
diff --git a/src/app-pages/documentation/forms/date-time-inputs.jsx b/src/app-pages/documentation/forms/date-time-inputs.jsx
index 6f5d3de..b7abd7b 100644
--- a/src/app-pages/documentation/forms/date-time-inputs.jsx
+++ b/src/app-pages/documentation/forms/date-time-inputs.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Date/Time Input",
- href: "/#/docs/forms/date-time-inputs",
+ href: `${BASE_URL}#/docs/forms/date-time-inputs`,
},
];
diff --git a/src/app-pages/documentation/forms/dropdown.jsx b/src/app-pages/documentation/forms/dropdown.jsx
index a1cca9a..1f55d76 100644
--- a/src/app-pages/documentation/forms/dropdown.jsx
+++ b/src/app-pages/documentation/forms/dropdown.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Dropdown",
- href: "/#/docs/forms/dropdown",
+ href: `${BASE_URL}#/docs/forms/dropdown`,
},
];
diff --git a/src/app-pages/documentation/forms/fieldset.jsx b/src/app-pages/documentation/forms/fieldset.jsx
index 3434454..345a3fe 100644
--- a/src/app-pages/documentation/forms/fieldset.jsx
+++ b/src/app-pages/documentation/forms/fieldset.jsx
@@ -14,18 +14,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Fieldset",
- href: "/#/docs/forms/fieldset",
+ href: `${BASE_URL}#/docs/forms/fieldset`,
},
];
diff --git a/src/app-pages/documentation/forms/file-input.jsx b/src/app-pages/documentation/forms/file-input.jsx
index c40e46f..9e73a3a 100644
--- a/src/app-pages/documentation/forms/file-input.jsx
+++ b/src/app-pages/documentation/forms/file-input.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "File Input",
- href: "/#/docs/forms/file-input",
+ href: `${BASE_URL}#/docs/forms/file-input`,
},
];
diff --git a/src/app-pages/documentation/forms/index.jsx b/src/app-pages/documentation/forms/index.jsx
index 074851a..aae9092 100644
--- a/src/app-pages/documentation/forms/index.jsx
+++ b/src/app-pages/documentation/forms/index.jsx
@@ -1,14 +1,16 @@
import { UsaceBox, H4, Text } from "../../../../lib";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
];
@@ -23,31 +25,46 @@ function Forms() {
Components
diff --git a/src/app-pages/documentation/forms/input.jsx b/src/app-pages/documentation/forms/input.jsx
index aa16a2f..192c2ba 100644
--- a/src/app-pages/documentation/forms/input.jsx
+++ b/src/app-pages/documentation/forms/input.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Input",
- href: "/#/docs/forms/input",
+ href: `${BASE_URL}#/docs/forms/input`,
},
];
diff --git a/src/app-pages/documentation/forms/numeric-inputs.jsx b/src/app-pages/documentation/forms/numeric-inputs.jsx
index db6f5f0..d157eb7 100644
--- a/src/app-pages/documentation/forms/numeric-inputs.jsx
+++ b/src/app-pages/documentation/forms/numeric-inputs.jsx
@@ -4,18 +4,20 @@ import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
import { useState } from "react";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Numeric Inputs",
- href: "/#/docs/forms/numeric-input",
+ href: `${BASE_URL}#/docs/forms/numeric-input`,
},
];
diff --git a/src/app-pages/documentation/forms/radio-group.jsx b/src/app-pages/documentation/forms/radio-group.jsx
index 453acf7..4878a2e 100644
--- a/src/app-pages/documentation/forms/radio-group.jsx
+++ b/src/app-pages/documentation/forms/radio-group.jsx
@@ -4,18 +4,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Radio Group",
- href: "/#/docs/forms/RadioGroup",
+ href: `${BASE_URL}#/docs/forms/RadioGroup`,
},
];
diff --git a/src/app-pages/documentation/forms/text-input.jsx b/src/app-pages/documentation/forms/text-input.jsx
index edb73b0..1eac117 100644
--- a/src/app-pages/documentation/forms/text-input.jsx
+++ b/src/app-pages/documentation/forms/text-input.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Text Inputs",
- href: "/#/docs/forms/text-inputs",
+ href: `${BASE_URL}#/docs/forms/text-inputs`,
},
];
diff --git a/src/app-pages/documentation/forms/textarea.jsx b/src/app-pages/documentation/forms/textarea.jsx
index 8ef06be..d82c0f0 100644
--- a/src/app-pages/documentation/forms/textarea.jsx
+++ b/src/app-pages/documentation/forms/textarea.jsx
@@ -3,18 +3,20 @@ import { CodeExample } from "../../../app-components/code-example";
import PropsTable from "../../../app-components/props-table";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Forms",
- href: "/#/docs/forms",
+ href: `${BASE_URL}#/docs/forms`,
},
{
text: "Text Area",
- href: "/#/docs/forms/textarea",
+ href: `${BASE_URL}#/docs/forms/textarea`,
},
];
diff --git a/src/app-pages/documentation/getting-started/adding-tailwind.jsx b/src/app-pages/documentation/getting-started/adding-tailwind.jsx
index 0ab0e5a..14a885f 100644
--- a/src/app-pages/documentation/getting-started/adding-tailwind.jsx
+++ b/src/app-pages/documentation/getting-started/adding-tailwind.jsx
@@ -4,18 +4,20 @@ import { CodeExample } from "../../../app-components/code-example";
import DocsPage from "../_docs-page";
import { TbPlayerTrackNext } from "react-icons/tb";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Getting Started",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs/getting-started`,
},
{
text: "Adding Tailwind CSS",
- href: "/#/docs/adding-tailwind",
+ href: `${BASE_URL}#/docs/adding-tailwind`,
},
];
@@ -146,7 +148,10 @@ export default App;`}
reading to learn more.
-
+
Keep Reading
diff --git a/src/app-pages/documentation/getting-started/client-side-routing.jsx b/src/app-pages/documentation/getting-started/client-side-routing.jsx
index 490f956..2d29f9f 100644
--- a/src/app-pages/documentation/getting-started/client-side-routing.jsx
+++ b/src/app-pages/documentation/getting-started/client-side-routing.jsx
@@ -2,18 +2,20 @@ import { UsaceBox, Code, Text, H3, Badge } from "../../../../lib";
import { CodeExample } from "../../../app-components/code-example";
import DocsPage from "../_docs-page";
+const BASE_URL = import.meta.env.BASE_URL;
+
const pageBreadcrumbs = [
{
text: "Documentation",
- href: "/#/docs",
+ href: `${BASE_URL}#/docs`,
},
{
text: "Getting Started",
- href: "/#/docs",
+ href: `/${BASE_URL}#/docs/getting-started`,
},
{
text: "Client-Side Routing",
- href: "/#/docs/client-side-routing",
+ href: `${BASE_URL}#/docs/client-side-routing`,
},
];
@@ -122,11 +124,14 @@ function ClientSideRouting() {
rest of the guide will assume you have followed these steps. These
steps also assume that you have walked through a project set up
using the{" "}
-
+
quick start guide
{" "}
and{" "}
-
+
adding Tailwind CSS
{" "}
tutorials.
@@ -238,6 +243,8 @@ export default function Home() {
code={`import { UsaceBox } from "@usace/groundwork";
import { useConnect } from "redux-bundler-hook";
+const BASE_URL = import.meta.env.BASE_URL;
+
export default function Location() {
const { routeParams } = useConnect("selectRouteParams");
const location = routeParams?.location?.toUpperCase();
@@ -246,7 +253,7 @@ export default function Location() {
@@ -285,11 +292,16 @@ export default function Location() {
import Home from "../app-pages/home";
import Location from "../app-pages/location";
+const BASE_URL = import.meta.env.BASE_URL;
+
export default createRouteBundle({
- "/": Home,
- "/location/:location": Location,
- "*": Home,
-});`}
+ [\`${BASE_URL}\`]: Home,
+ [\`${BASE_URL}/\`]: Home,
+ [\`${BASE_URL}/location/:location\`]: Location,
+ "*": Home, // Replace with your NotFound.jsx component!
+ {
+ routeInfoSelector: "selectPathname",
+ });`}
>
{" "}
@@ -498,12 +510,12 @@ export default App;`}
code={`import { defineConfig } from 'vite';
export default defineConfig({
- base: '/your-base-path/', // Replace 'your-base-path' with the actual base path i.e. '/myapp/' or '/hec/'
+ base: '/your-base-path', // Replace 'your-base-path' with the actual base path i.e. '/myapp' or '/hec'
plugins: [react()],
});`}
/>
- Replace '/your-base-path/' with the actual base path
+ Replace '/your-base-path' with the actual base path
where your application will be deployed. This ensures that all URLs
in your application are correctly prefixed with the base path.
@@ -513,15 +525,16 @@ export default defineConfig({
to update these paths to include the base path.
- In addition the doUpdateUrlWithBase function can be
- used to update the URL with the base path dynamically.
+ In addition the doUpdateUrl function can be used to
+ update the URL. Just take care to also prepend the{" "}
+ BASE_URL constant to any paths you provide.
For situations where you require setting the base path such as in
img tags or anchor tags, you can use the:{" "}
- const base = import.meta.env.BASE_URL{" "}
+ const BASE_URL = import.meta.env.BASE_URL{" "}
Environment variable to get the base URL of your application. This
@@ -530,38 +543,37 @@ export default defineConfig({
