From 1745624864ac39524ef40fc1733cc685b06b440f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= Date: Mon, 27 Nov 2023 17:07:15 +0100 Subject: [PATCH 1/9] pkp/pkp-lib#9527 page example --- .storybook/main.js | 1 + .storybook/preview-head.html | 6 + .storybook/preview.js | 1 + src/components/Button/Button.mdx | 21 + src/components/Button/Button.stories.js | 87 +- src/components/Button/Button.vue | 12 + src/composables/useFetchPaginated.js | 10 +- .../Button/previews/PreviewButton.vue | 2 +- src/pages/example/ExamplePage.mdx | 19 + src/pages/example/ExamplePage.stories.js | 32 + src/pages/example/ExamplePage.vue | 31 + src/pages/example/examplePageStore.js | 30 + src/pages/example/mocks/submissions25.js | 3521 +++++++++++++++++ src/pages/example/submissions25.js | 3521 +++++++++++++++++ src/stores/dialogStore.js | 9 +- 15 files changed, 7293 insertions(+), 10 deletions(-) create mode 100644 .storybook/preview-head.html create mode 100644 src/components/Button/Button.mdx create mode 100644 src/pages/example/ExamplePage.mdx create mode 100644 src/pages/example/ExamplePage.stories.js create mode 100644 src/pages/example/ExamplePage.vue create mode 100644 src/pages/example/examplePageStore.js create mode 100644 src/pages/example/mocks/submissions25.js create mode 100644 src/pages/example/submissions25.js diff --git a/.storybook/main.js b/.storybook/main.js index ec52f752c..efa78ea60 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -6,6 +6,7 @@ const config = { '@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-addon-rtl', + 'storybook-addon-mock', ], framework: { name: '@storybook/vue3-vite', diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..7976512ba --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,6 @@ + diff --git a/.storybook/preview.js b/.storybook/preview.js index 06bd7ccd5..292436747 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -253,6 +253,7 @@ const preview = { parameters: { actions: {argTypesRegex: '^on[A-Z].*'}, controls: { + expanded: true, matchers: { color: /(background|color)$/i, date: /Date$/i, diff --git a/src/components/Button/Button.mdx b/src/components/Button/Button.mdx new file mode 100644 index 000000000..f132dc5b8 --- /dev/null +++ b/src/components/Button/Button.mdx @@ -0,0 +1,21 @@ +import {Primary, Controls, Stories, Meta, Description} from '@storybook/blocks'; + +import * as ButtonStories from './Button.stories.js'; + + + +# Button + +## Usage + +Use this component to display a button for an action. + +## Links vs Buttons + +The link element, ``, should only be used for actions which navigate away from the current page. When opening modals or performing actions on the same page, use the `', + }), + args: {}, +}; + export const Primary = { render: (args) => ({ components: {Button}, @@ -23,9 +37,80 @@ export const Warnable = { setup() { return {args}; }, - template: '', + template: '', }), args: { isWarnable: true, }, }; + +export const WithIcon = { + render: (args) => ({ + components: {Button, Icon}, + setup() { + return {args}; + }, + template: ` + `, + }), +}; + +export const ExpandDetails = { + render: (args) => ({ + components: {Button}, + setup() { + const isActive = ref(false); + return {args, isActive}; + }, + template: ` + `, + }), +}; + +export const ButtonLikeLink = { + render: (args) => ({ + components: {Button}, + setup() { + const isActive = ref(false); + return {args, isActive}; + }, + template: ` + `, + }), + args: {element: 'a', href: 'https://example.org'}, +}; + +export const LinkLikeButton = { + render: (args) => ({ + components: {Button}, + setup() { + return {args}; + }, + template: ` + `, + }), + args: {isLink: true}, +}; + +export const LinkLikeButton2 = { + render: (args) => ({ + components: {Button}, + setup() { + return {args}; + }, + template: ` + `, + }), + args: {isLink: true}, +}; diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue index 5d07fc3bb..c09eaeebf 100644 --- a/src/components/Button/Button.vue +++ b/src/components/Button/Button.vue @@ -17,17 +17,29 @@ export default { name: 'PkpButton', props: { + /** Whether to use a `button` or `a` HTML tag. */ element: { type: String, default: 'button', }, + /** URL when using a link element. `element` must be set to `a` */ href: String, + /** Use when this button represents the default or expected action in a group of actions. A single group of actions should never have more than one primary button. */ isPrimary: Boolean, + /** Use when this button represents an action such as delete, go back, revert or cancel. */ isWarnable: Boolean, + /** Use when the button controls another element, and that element is active. Think of it like an [On Air](https://www.google.co.uk/search?q=on+air+sign&tbm=isch) button. */ isActive: Boolean, + /** Use when you want the button to look more like a traditional link than a button. */ isLink: Boolean, isDisabled: Boolean, }, + emits: [ + /** When the button receives focus. */ + 'focus', + /** When focus moves away from the button. */ + 'blur', + ], computed: { classes() { let classes = []; diff --git a/src/composables/useFetchPaginated.js b/src/composables/useFetchPaginated.js index 50a2a41ae..f86c9e7dd 100644 --- a/src/composables/useFetchPaginated.js +++ b/src/composables/useFetchPaginated.js @@ -1,4 +1,4 @@ -import {ref, computed} from 'vue'; +import {ref, computed, unref} from 'vue'; import {ofetch} from 'ofetch'; import {useDialogStore} from '@/stores/dialogStore'; @@ -12,7 +12,7 @@ export function useFetchPaginated(url, options) { ...fetchOpts } = options; - const query = ref(_query); + const query = ref(_query || {}); const page = ref(_page); const pageSize = ref(_pageSize); @@ -49,10 +49,14 @@ export function useFetchPaginated(url, options) { isLoading.value = true; try { - const result = await ofetch(url.value, opts); + console.log(url); + const result = await ofetch(unref(url), opts); + console.log('result:', JSON.stringify(result, null, 2)); items.value = result.items; itemCount.value = result.itemsMax; } catch (e) { + console.log('uh oh'); + console.log(e); items.value = []; itemCount.value = 0; diff --git a/src/docs/components/Button/previews/PreviewButton.vue b/src/docs/components/Button/previews/PreviewButton.vue index af4b963f6..4b126123c 100644 --- a/src/docs/components/Button/previews/PreviewButton.vue +++ b/src/docs/components/Button/previews/PreviewButton.vue @@ -1,6 +1,6 @@