diff --git a/examples/nuxt-app/README.md b/examples/nuxt-app/README.md index 8edfed49ae..90c2d22cca 100644 --- a/examples/nuxt-app/README.md +++ b/examples/nuxt-app/README.md @@ -1,31 +1,55 @@ -# Nuxt 3 Minimal Starter +# Nuxt-app -We recommend to look at the [documentation](https://v3.nuxtjs.org). +A Nuxt 3 app with all Ripple and SDP core inclusions. -## Setup +Separate [example layers](#example-layers) are included under [/layers](/layers) to demonstrate specific features and use cases. These can be disabled in [nuxt.config.ts](nuxt.config.ts) if needed. -Make sure to install the dependencies +## Dev mode + +Copy [.example.env](.example.env) to `.env` if using non-reference back end / site ID. + +Install monorepo deps ```bash -yarn install +pnpm i ``` -## Development +Start the server in dev mode -- Copy `.example.env` to `.env` +```bash +pnpm -F nuxt-app dev +``` -Start the development server on http://localhost:3000 +Now serving on [http://localhost:3000](http://localhost:3000) + +## Build mode (production-like) + +Build the app to `.output` ```bash -yarn dev +pnpm -F nuxt-app build ``` -## Production +Start the server on `.output` in build mode + +```bash +pnpm -F nuxt-app start +``` -Build the application for production: +Same as above, but using `.env` for runtime environment ```bash -yarn build +pnpm -F nuxt-app preview ``` -Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment). +Now serving on [http://localhost:3000](http://localhost:3000) + +## Example layers + +1. [layers/example-components](layers/example-components)
Examples of custom components (used in cypress tests) + +2. [layers/fixture-api](layers/fixture-api)
Use json fixtures instead of back end API calls + +3. [layers/map-features](layers/map-features)
Map features including popup, side panel and shape layer (used in cypress tests) + +4. [layers/ripple-ui-forms-ext](layers/ripple-ui-forms-ext)
Extend `ripple-ui-forms` with a custom control diff --git a/examples/nuxt-app/layers/example-components/README.md b/examples/nuxt-app/layers/example-components/README.md new file mode 100644 index 0000000000..cc498dd173 --- /dev/null +++ b/examples/nuxt-app/layers/example-components/README.md @@ -0,0 +1,96 @@ +## About this layer + +A collection of custom components for specific use cases. + +1. [components/global/TableExtraContentComponentExample.vue](components/global/TableExtraContentComponentExample.vue)
Use custom mappings for extra content in a non-standard column e.g. + + ```json + "props": { + "offset": 0, + "showExtraContent": true, + "caption": "My Table", + "footer": "Some notes about the table", + "headingType": { "horizontal": true, "vertical": true }, + "columns": [ + { + "label": "Recommendation", + "objectKey": "field_fv_recommendation_number" + }, + { "label": "Title", "component": "TideSearchListingTableLink" }, + { + "label": "Category", + "objectKey": "field_fv_recommendation_category_name" + }, + { "label": "Status", "objectKey": "fv_recommendation_status" } + ], + "extraContent": { + "component": "TableExtraContentComponentExample", + "props": { + "label": "Details" + } + } + ... + ``` + +2. [components/global/TableExtraContentItemComponentExample.vue](components/global/TableExtraContentItemComponentExample.vue)
Call `getSearchResultValue` and map to component. e.g. + ```json + "extraContent": { + "items": [ + { + "objectKey": "Organisation" + }, + { + "label": "Funded for", + "objectKey": "Funded For" + }, + { + "label": "Email", + "objectKey": "Email", + "component": "TideSearchListingTableEmail" + }, + { + "label": "Website", + "objectKey": "Website/Links", + "objectTextKey": "Organisation", + "component": "TideSearchListingTableUrl" + }, + { + "objectKey": "Statewide Service", + "component": "TableExtraContentItemComponentExample", + "props": { + "variant": "dark" + } + } + ] + } + ``` + +3. [components/global/TideSearchBarComponentExample.vue](components/global/TideSearchBarComponentExample.vue)
Add a custom control to search bar, backed with a custom function: + ```json + "customQueryConfig": { + "component": "TideSearchBarComponentExample", + "function": "exampleQueryFunction" + }, + ... + ``` + +4. [components/global/TideSearchBelowFilter.vue](components/global/TideSearchBelowFilter.vue)
Testing the `belowFilter` component slot used in `searchConfig`, e.g. + ```json + "layoutConfig": { + "belowFilter": { + "component": "TideSearchBelowFilter" + } + }, + ... + ``` + +5. [components/global/TideSearchEmpty.vue](components/global/TideSearchEmpty.vue)
Testing the `empty` component slot used in `searchConfig` used to override the default message for no results, e.g. + ```json + "results": { + "empty": { + "component": "TideSearchEmpty" + }, + ... + ``` + +6. [components/global/TideSearchResultExampleSkeleton.vue](components/global/TideSearchResultExampleSkeleton.vue)
Skeleton to demonstrate a specific search result composition diff --git a/examples/nuxt-app/components/global/TableExtraContentComponentExample.vue b/examples/nuxt-app/layers/example-components/components/global/TableExtraContentComponentExample.vue similarity index 100% rename from examples/nuxt-app/components/global/TableExtraContentComponentExample.vue rename to examples/nuxt-app/layers/example-components/components/global/TableExtraContentComponentExample.vue diff --git a/examples/nuxt-app/components/global/TableExtraContentItemComponentExample.vue b/examples/nuxt-app/layers/example-components/components/global/TableExtraContentItemComponentExample.vue similarity index 100% rename from examples/nuxt-app/components/global/TableExtraContentItemComponentExample.vue rename to examples/nuxt-app/layers/example-components/components/global/TableExtraContentItemComponentExample.vue diff --git a/examples/nuxt-app/components/global/TideSearchBarComponentExample.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchBarComponentExample.vue similarity index 100% rename from examples/nuxt-app/components/global/TideSearchBarComponentExample.vue rename to examples/nuxt-app/layers/example-components/components/global/TideSearchBarComponentExample.vue diff --git a/examples/nuxt-app/components/global/TideSearchBelowFilter.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchBelowFilter.vue similarity index 100% rename from examples/nuxt-app/components/global/TideSearchBelowFilter.vue rename to examples/nuxt-app/layers/example-components/components/global/TideSearchBelowFilter.vue diff --git a/examples/nuxt-app/components/global/TideSearchEmpty.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchEmpty.vue similarity index 100% rename from examples/nuxt-app/components/global/TideSearchEmpty.vue rename to examples/nuxt-app/layers/example-components/components/global/TideSearchEmpty.vue diff --git a/examples/nuxt-app/components/global/TideSearchResultExampleSkeleton.vue b/examples/nuxt-app/layers/example-components/components/global/TideSearchResultExampleSkeleton.vue similarity index 100% rename from examples/nuxt-app/components/global/TideSearchResultExampleSkeleton.vue rename to examples/nuxt-app/layers/example-components/components/global/TideSearchResultExampleSkeleton.vue diff --git a/examples/nuxt-app/layers/example-components/nuxt.config.ts b/examples/nuxt-app/layers/example-components/nuxt.config.ts new file mode 100644 index 0000000000..f716d9f9da --- /dev/null +++ b/examples/nuxt-app/layers/example-components/nuxt.config.ts @@ -0,0 +1,3 @@ +import { defineNuxtConfig } from 'nuxt/config' + +export default defineNuxtConfig({}) diff --git a/examples/nuxt-app/layers/fixture-api/README.md b/examples/nuxt-app/layers/fixture-api/README.md new file mode 100644 index 0000000000..fcc835c60e --- /dev/null +++ b/examples/nuxt-app/layers/fixture-api/README.md @@ -0,0 +1,11 @@ +## About this layer + +This layer holds a couple of complete page layouts that can be used to test specific use cases. + +No backend is needed, the API is stubbed with flat file json fixtures (also used for cypress). + +1. [_fixture/page](http://localhost:3000/_fixture/page) Fixtures both page and site content, leaves sidebar slot open for debug + +2. [_fixture/tide-site](http://localhost:3000/_fixture/tide-site) Fixtures page content, but uses back end for site content + +3. [_fixture/page-exposed](http://localhost:3000/_fixture/page-exposed) Fixtures both page and site content, expose all layout slots diff --git a/examples/nuxt-app/layers/fixture-api/nuxt.config.ts b/examples/nuxt-app/layers/fixture-api/nuxt.config.ts new file mode 100644 index 0000000000..f716d9f9da --- /dev/null +++ b/examples/nuxt-app/layers/fixture-api/nuxt.config.ts @@ -0,0 +1,3 @@ +import { defineNuxtConfig } from 'nuxt/config' + +export default defineNuxtConfig({}) diff --git a/examples/nuxt-app/pages/_form.vue b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page-exposed.vue similarity index 94% rename from examples/nuxt-app/pages/_form.vue rename to examples/nuxt-app/layers/fixture-api/pages/_fixture/page-exposed.vue index bef3f4cb97..692b2fa804 100644 --- a/examples/nuxt-app/pages/_form.vue +++ b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page-exposed.vue @@ -80,8 +80,6 @@ diff --git a/examples/nuxt-app/pages/_layout.vue b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page.vue similarity index 62% rename from examples/nuxt-app/pages/_layout.vue rename to examples/nuxt-app/layers/fixture-api/pages/_fixture/page.vue index 9b470f170b..93c5c014ab 100644 --- a/examples/nuxt-app/pages/_layout.vue +++ b/examples/nuxt-app/layers/fixture-api/pages/_fixture/page.vue @@ -7,8 +7,6 @@ diff --git a/examples/nuxt-app/pages/_fixture.vue b/examples/nuxt-app/layers/fixture-api/pages/_fixture/tide-site.vue similarity index 73% rename from examples/nuxt-app/pages/_fixture.vue rename to examples/nuxt-app/layers/fixture-api/pages/_fixture/tide-site.vue index 3cc0a3976f..7cdaedd601 100644 --- a/examples/nuxt-app/pages/_fixture.vue +++ b/examples/nuxt-app/layers/fixture-api/pages/_fixture/tide-site.vue @@ -3,7 +3,7 @@ diff --git a/examples/nuxt-app/nuxt.config.ts b/examples/nuxt-app/nuxt.config.ts index 1e31a21e82..b306f8f431 100644 --- a/examples/nuxt-app/nuxt.config.ts +++ b/examples/nuxt-app/nuxt.config.ts @@ -1,4 +1,5 @@ import { defineNuxtConfig } from 'nuxt/config' + export default defineNuxtConfig({ runtimeConfig: { public: { @@ -20,11 +21,15 @@ export default defineNuxtConfig({ '@dpc-sdp/nuxt-ripple-analytics', '@dpc-sdp/nuxt-ripple-preview', '@dpc-sdp/ripple-sdp-core', + // Local layers + './layers/example-components', + './layers/fixture-api', + './layers/map-features', './layers/ripple-ui-forms-ext' ], // Nuxt devtools sourcemap: true, devtools: { - enabled: true + enabled: false } })