Skip to content

Commit

Permalink
Merge pull request #1345 from dpc-sdp/feat/sd-217-example-layers
Browse files Browse the repository at this point in the history
[SD-217] Move examples to separate layers
  • Loading branch information
dylankelly authored Oct 7, 2024
2 parents 7d410fa + 1be0b29 commit 898d5dc
Show file tree
Hide file tree
Showing 29 changed files with 16,173 additions and 26 deletions.
50 changes: 37 additions & 13 deletions examples/nuxt-app/README.md
Original file line number Diff line number Diff line change
@@ -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)<br> Examples of custom components (used in cypress tests)

2. [layers/fixture-api](layers/fixture-api)<br> Use json fixtures instead of back end API calls

3. [layers/map-features](layers/map-features)<br> Map features including popup, side panel and shape layer (used in cypress tests)

4. [layers/ripple-ui-forms-ext](layers/ripple-ui-forms-ext)<br> Extend `ripple-ui-forms` with a custom control
96 changes: 96 additions & 0 deletions examples/nuxt-app/layers/example-components/README.md
Original file line number Diff line number Diff line change
@@ -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)<br> 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)<br> 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)<br> 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)<br> Testing the `belowFilter` component slot used in `searchConfig`, e.g.
```json
"layoutConfig": {
"belowFilter": {
"component": "TideSearchBelowFilter"
}
},
...
```

5. [components/global/TideSearchEmpty.vue](components/global/TideSearchEmpty.vue)<br> 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)<br> Skeleton to demonstrate a specific search result composition
3 changes: 3 additions & 0 deletions examples/nuxt-app/layers/example-components/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({})
11 changes: 11 additions & 0 deletions examples/nuxt-app/layers/fixture-api/README.md
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions examples/nuxt-app/layers/fixture-api/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({})
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,6 @@
</template>

<script setup lang="ts">
import page from '../test/fixtures/case/landing-page-webform.json'
import { useTideSite } from '#imports'
const site = await useTideSite()
import site from '../../test/fixtures/site/vic.json'
import page from '../../test/fixtures/page/landing-page-webform.json'
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
</template>

<script setup lang="ts">
import page from '../test/fixtures/case/accordions-inpage-nav.json'
import { useTideSite } from '#imports'
const site = await useTideSite()
import site from '../../test/fixtures/site/vic.json'
import page from '../../test/fixtures/page/accordions-inpage-nav.json'
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</template>

<script setup lang="ts">
import page from '../test/fixtures/case/accordions-inpage-nav.json'
import page from '../../test/fixtures/page/accordions-inpage-nav.json'
import { useTideSite } from '#imports'
const site = await useTideSite()
Expand Down
Loading

0 comments on commit 898d5dc

Please sign in to comment.