From 4672a74ef64f8bcee8d195c6930443f43545713d Mon Sep 17 00:00:00 2001 From: personal Date: Wed, 20 Nov 2024 17:19:20 +0000 Subject: [PATCH 1/2] feat(pie-docs): DSW-000 mention pie-webc more and remove next13 example code --- .../components/assistive-text/code/code.md | 10 --------- .../src/components/button/code/code.md | 7 ------ .../pie-docs/src/components/card/code/code.md | 9 -------- .../components/checkbox-group/code/code.md | 12 ---------- .../src/components/checkbox/code/code.md | 7 ------ .../pie-docs/src/components/chip/code/code.md | 7 ------ .../src/components/divider/code/code.md | 7 ------ .../src/components/icon-button/code/code.md | 10 --------- .../pie-docs/src/components/link/code/code.md | 7 ------ .../src/components/modal/code/code.md | 7 ------ .../src/components/notification/code/code.md | 7 ------ .../src/components/switch/code/code.md | 7 ------ apps/pie-docs/src/components/tag/code/code.md | 7 ------ .../src/components/text-input/code/code.md | 19 ---------------- .../src/components/textarea/code/code.md | 14 ------------ .../src/components/toast/code/code.md | 7 ------ .../engineers/getting-started/structure.md | 11 +++++----- .../src/engineers/web-components/overview.md | 22 ++++++++++++------- .../src/patterns/cookie-banner/code/code.md | 2 +- yarn.lock | 18 +++++++-------- 20 files changed, 30 insertions(+), 167 deletions(-) diff --git a/apps/pie-docs/src/components/assistive-text/code/code.md b/apps/pie-docs/src/components/assistive-text/code/code.md index 8914393255..177e45a84f 100644 --- a/apps/pie-docs/src/components/assistive-text/code/code.md +++ b/apps/pie-docs/src/components/assistive-text/code/code.md @@ -104,16 +104,6 @@ import { PieAssistiveText } from '@justeattakeaway/pie-webc/react/assistive-text ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react'; - - - Your request has been submitted. - -``` - ## Changelog {% notification { diff --git a/apps/pie-docs/src/components/button/code/code.md b/apps/pie-docs/src/components/button/code/code.md index f24eb4acdb..9cb7d8b451 100644 --- a/apps/pie-docs/src/components/button/code/code.md +++ b/apps/pie-docs/src/components/button/code/code.md @@ -144,13 +144,6 @@ import { PieButton } from '@justeattakeaway/pie-webc/react/button.js'; increment ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; - -increment -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/card/code/code.md b/apps/pie-docs/src/components/card/code/code.md index 21ba960e42..eeb0780ffd 100644 --- a/apps/pie-docs/src/components/card/code/code.md +++ b/apps/pie-docs/src/components/card/code/code.md @@ -98,15 +98,6 @@ import { PieCard } from '@justeattakeaway/pie-webc/react/card.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieCard } from '@justeattakeaway/pie-card/dist/react'; - - - Take me to example.com! - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/checkbox-group/code/code.md b/apps/pie-docs/src/components/checkbox-group/code/code.md index e578cda925..569d34fef4 100644 --- a/apps/pie-docs/src/components/checkbox-group/code/code.md +++ b/apps/pie-docs/src/components/checkbox-group/code/code.md @@ -115,18 +115,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react'; -import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react'; - - - Checkbox Label 1 - Checkbox Label 2 - Checkbox Label 3 - -``` - ## Forms Usage Please use the [form label](/components/form-label/) component for adding a label to the Checkbox Group component. diff --git a/apps/pie-docs/src/components/checkbox/code/code.md b/apps/pie-docs/src/components/checkbox/code/code.md index 501bd7d5a1..effeaae802 100644 --- a/apps/pie-docs/src/components/checkbox/code/code.md +++ b/apps/pie-docs/src/components/checkbox/code/code.md @@ -105,13 +105,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js'; Label ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react'; - -Label -``` - Examples with and without a label: ```jsx diff --git a/apps/pie-docs/src/components/chip/code/code.md b/apps/pie-docs/src/components/chip/code/code.md index 91de1a4ceb..561ec48291 100644 --- a/apps/pie-docs/src/components/chip/code/code.md +++ b/apps/pie-docs/src/components/chip/code/code.md @@ -119,13 +119,6 @@ import { PieChip } from '@justeattakeaway/pie-webc/react/chip.js'; String ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieChip } from '@justeattakeaway/pie-chip/dist/react'; - -String -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/divider/code/code.md b/apps/pie-docs/src/components/divider/code/code.md index 69374e62e9..0598576eb5 100644 --- a/apps/pie-docs/src/components/divider/code/code.md +++ b/apps/pie-docs/src/components/divider/code/code.md @@ -86,13 +86,6 @@ import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieDivider } from '@justeattakeaway/pie-divider/dist/react'; - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/icon-button/code/code.md b/apps/pie-docs/src/components/icon-button/code/code.md index 9c80f16aa3..e2473b42b4 100644 --- a/apps/pie-docs/src/components/icon-button/code/code.md +++ b/apps/pie-docs/src/components/icon-button/code/code.md @@ -126,16 +126,6 @@ import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose. ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react'; -import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose'; - - - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/link/code/code.md b/apps/pie-docs/src/components/link/code/code.md index 1266bde321..d7c13970f5 100644 --- a/apps/pie-docs/src/components/link/code/code.md +++ b/apps/pie-docs/src/components/link/code/code.md @@ -112,13 +112,6 @@ import { PieLink } from '@justeattakeaway/pie-webc/react/link.js'; pie.design ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieLink } from '@justeattakeaway/pie-link/dist/react'; - -pie.design -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/modal/code/code.md b/apps/pie-docs/src/components/modal/code/code.md index 44b5df6ed7..0ad91c235e 100644 --- a/apps/pie-docs/src/components/modal/code/code.md +++ b/apps/pie-docs/src/components/modal/code/code.md @@ -106,13 +106,6 @@ import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js'; Click me! ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieModal } from '@justeattakeaway/pie-modal/dist/react'; - -Click me! -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/notification/code/code.md b/apps/pie-docs/src/components/notification/code/code.md index faa698ccf7..67c163a2e2 100644 --- a/apps/pie-docs/src/components/notification/code/code.md +++ b/apps/pie-docs/src/components/notification/code/code.md @@ -121,13 +121,6 @@ import { PieNotification } from '@justeattakeaway/pie-webc/react/notification.js Content ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieNotification } from '@justeattakeaway/pie-notification/dist/react'; - -Content -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/switch/code/code.md b/apps/pie-docs/src/components/switch/code/code.md index e665c62879..9c7488ddd3 100644 --- a/apps/pie-docs/src/components/switch/code/code.md +++ b/apps/pie-docs/src/components/switch/code/code.md @@ -123,13 +123,6 @@ import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react'; - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/tag/code/code.md b/apps/pie-docs/src/components/tag/code/code.md index 1755dae809..9219b25cce 100644 --- a/apps/pie-docs/src/components/tag/code/code.md +++ b/apps/pie-docs/src/components/tag/code/code.md @@ -114,13 +114,6 @@ import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js'; Label ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieTag } from '@justeattakeaway/pie-tag/dist/react'; - -Label -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/text-input/code/code.md b/apps/pie-docs/src/components/text-input/code/code.md index b65342c0be..a28b0c722e 100644 --- a/apps/pie-docs/src/components/text-input/code/code.md +++ b/apps/pie-docs/src/components/text-input/code/code.md @@ -117,25 +117,6 @@ import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/react'; - - - -``` - ## Types The text input accepts various values for the `type` property, allowing control over input behaviour. These are mostly standard HTML input types. For most use cases, the default type of `text` will suffice. It is important to note that setting the type to `number` does not guarantee the prevention of non-numeric characters being entered. This behaviour, which is consistent with native HTML inputs, allows some non-numeric characters such as `e`,`+`, `-`, and `.`. diff --git a/apps/pie-docs/src/components/textarea/code/code.md b/apps/pie-docs/src/components/textarea/code/code.md index a1fef99ba1..1ca9f23435 100644 --- a/apps/pie-docs/src/components/textarea/code/code.md +++ b/apps/pie-docs/src/components/textarea/code/code.md @@ -95,20 +95,6 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react'; - - - -``` - ## Forms usage {% notification { type: "information", diff --git a/apps/pie-docs/src/components/toast/code/code.md b/apps/pie-docs/src/components/toast/code/code.md index e3b6bc9f42..55dd04d35b 100644 --- a/apps/pie-docs/src/components/toast/code/code.md +++ b/apps/pie-docs/src/components/toast/code/code.md @@ -102,13 +102,6 @@ import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieToast } from '@justeattakeaway/pie-toast/dist/react'; - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/engineers/getting-started/structure.md b/apps/pie-docs/src/engineers/getting-started/structure.md index f140a8d9bb..7d7ae3ba11 100644 --- a/apps/pie-docs/src/engineers/getting-started/structure.md +++ b/apps/pie-docs/src/engineers/getting-started/structure.md @@ -11,11 +11,12 @@ shouldShowContents: true Currently, JET has several officially supported component systems that implement PIE. -- [Fozzie](https://vue.pie.design/) – a set of **Vue components** created by the legacy Just Eat web team +- [PIE Web Components](https://webc.pie.design/) – Our flagship **web component library**, designed to work seamlessly with any tech stack. - [Snacks](https://snacks.takeaway.com/) – a set of **React components** created by the legacy Takeaway design system team +- [Fozzie](https://vue.pie.design/) – a set of **Vue components** created by the legacy Just Eat web team - [Skip PIE Project](https://react.pie.design/) – a set of **React components** created by the Skip web team -We are also currently building the [PIE Web Component System](https://webc.pie.design/). The long-term aim will be to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components. +The long-term aim is to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components. For more details on Fozzie, Snacks and Skip PIE, please check out the **documentation portals** linked above. @@ -80,7 +81,7 @@ For more details on Fozzie, Snacks and Skip PIE, please check out the **document If you are working with latest stack both in React and Vue ecosystems, we recommend to go straight away with [PIE Web Components](/engineers/web-components/). -### Next 13 and earlier versions +### Next 13 and earlier versions {% contentLayout %} {% tag { @@ -92,8 +93,8 @@ If you are working with latest stack both in React and Vue ecosystems, we recomm variant: "blue" } %} {% endcontentLayout %} - -You can use [PIE Web Components](/engineers/web-components/) for Next 13 or earlier versions if you don't need SSR. + +You can use [PIE Web Components](/engineers/web-components/) for Next 13 or earlier versions if you don't need SSR. If you need to render components on the server (SSR), [Snacks](https://snacks.takeaway.com/portal/) is the best library for you. We recommend updating to Next 14 if you would like to use SSR with our new Web Components. diff --git a/apps/pie-docs/src/engineers/web-components/overview.md b/apps/pie-docs/src/engineers/web-components/overview.md index d8e9bb0c1a..079cb1c618 100644 --- a/apps/pie-docs/src/engineers/web-components/overview.md +++ b/apps/pie-docs/src/engineers/web-components/overview.md @@ -12,15 +12,12 @@ permalink: engineers/web-components/ Currently, this technology is supported by all browsers, making it possible to have one central library that will work with most frontend frameworks. -The long-term aim will be to migrate JET teams over to this Web Component System, so we have one single source of truth for our global PIE components. +The long-term aim will be to migrate JET teams over to this Web Component system, so we have one single source of truth for our global PIE components. ---- - -## Component status - -You can find the documentation for all of our components on this site in the **Components** section. - -For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/). +{% notification { + type: "information", + message: "Our web components can be used via the [@justeattakeaway/pie-webc](https://npmjs.com/package/@justeattakeaway/pie-webc) library. Individual component packages are also available, but we advise sticking to the single entry point." +} %} ___ @@ -44,8 +41,17 @@ More guides coming soon! 🚀 ___ +## Component status + +You can find the documentation for all of our components on this site in the **Components** section. + +For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/). + +--- + ## Usage The following guides are meant to support you while using our web components. +### Forms For information about form elements and how to handle form data and validation, check out our [Form Usage Guide](https://github.com/justeattakeaway/pie/wiki/Form-Controls#pie-forms-usage). diff --git a/apps/pie-docs/src/patterns/cookie-banner/code/code.md b/apps/pie-docs/src/patterns/cookie-banner/code/code.md index dd36d0a73e..18236b8216 100644 --- a/apps/pie-docs/src/patterns/cookie-banner/code/code.md +++ b/apps/pie-docs/src/patterns/cookie-banner/code/code.md @@ -145,7 +145,7 @@ Use of locales in Vue: Default preferences can be configured and passed to the component: ```jsx -// React templates (using Next 13) +// React templates import { PieCookieBanner } from "@justeattakeaway/pie-cookie-banner/dist/react"; const defaultPreferences= {functional: true, personalized: true, analytical: true} diff --git a/yarn.lock b/yarn.lock index 822b22071f..7c774cad48 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4853,7 +4853,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-cookie-banner@1.1.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": +"@justeattakeaway/pie-cookie-banner@1.2.0, @justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-cookie-banner@workspace:packages/components/pie-cookie-banner" dependencies: @@ -5218,7 +5218,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc@0.5.53, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": +"@justeattakeaway/pie-webc@0.5.54, @justeattakeaway/pie-webc@workspace:packages/components/pie-webc": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc@workspace:packages/components/pie-webc" dependencies: @@ -5229,7 +5229,7 @@ __metadata: "@justeattakeaway/pie-checkbox-group": 0.7.6 "@justeattakeaway/pie-chip": 0.9.3 "@justeattakeaway/pie-components-config": 0.18.0 - "@justeattakeaway/pie-cookie-banner": 1.1.0 + "@justeattakeaway/pie-cookie-banner": 1.2.0 "@justeattakeaway/pie-divider": 1.0.0 "@justeattakeaway/pie-form-label": 0.14.4 "@justeattakeaway/pie-icon-button": 1.0.0 @@ -23126,7 +23126,7 @@ __metadata: "@justeattakeaway/pie-checkbox": 0.13.6 "@justeattakeaway/pie-checkbox-group": 0.7.6 "@justeattakeaway/pie-chip": 0.9.3 - "@justeattakeaway/pie-cookie-banner": 1.1.0 + "@justeattakeaway/pie-cookie-banner": 1.2.0 "@justeattakeaway/pie-css": 0.13.1 "@justeattakeaway/pie-divider": 1.0.0 "@justeattakeaway/pie-form-label": 0.14.4 @@ -30057,7 +30057,7 @@ __metadata: "@angular/platform-browser-dynamic": 15.2.0 "@angular/router": 15.2.0 "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.53 + "@justeattakeaway/pie-webc": 0.5.54 rxjs: 7.8.0 tslib: 2.3.0 typescript: 4.9.4 @@ -30071,7 +30071,7 @@ __metadata: dependencies: "@babel/preset-env": 7.24.5 "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.53 + "@justeattakeaway/pie-webc": 0.5.54 babel-loader: 8 core-js: 3.30.0 nuxt: 2.17.0 @@ -30086,7 +30086,7 @@ __metadata: resolution: "wc-react17@workspace:apps/examples/wc-react17" dependencies: "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.53 + "@justeattakeaway/pie-webc": 0.5.54 "@lit/react": 1.0.5 "@types/react": ^17.0.2 "@types/react-dom": ^17.0.2 @@ -30106,7 +30106,7 @@ __metadata: resolution: "wc-react18@workspace:apps/examples/wc-react18" dependencies: "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.53 + "@justeattakeaway/pie-webc": 0.5.54 "@lit/react": 1.0.5 "@types/react": 18.3.3 "@types/react-dom": 18.3.0 @@ -30126,7 +30126,7 @@ __metadata: resolution: "wc-vue3@workspace:apps/examples/wc-vue3" dependencies: "@justeattakeaway/pie-css": 0.13.1 - "@justeattakeaway/pie-webc": 0.5.53 + "@justeattakeaway/pie-webc": 0.5.54 "@types/node": 18.15.11 "@vitejs/plugin-vue": 4.0.0 "@vue/tsconfig": 0.1.3 From 1ef481919947fc4fcff4fdd7c3bff5dad2f1093d Mon Sep 17 00:00:00 2001 From: Jamie Maguire Date: Tue, 26 Nov 2024 08:46:49 +0000 Subject: [PATCH 2/2] Update apps/pie-docs/src/engineers/web-components/overview.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fernando de França <448801+fernandofranca@users.noreply.github.com> --- apps/pie-docs/src/engineers/web-components/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-docs/src/engineers/web-components/overview.md b/apps/pie-docs/src/engineers/web-components/overview.md index 079cb1c618..f99ecbce64 100644 --- a/apps/pie-docs/src/engineers/web-components/overview.md +++ b/apps/pie-docs/src/engineers/web-components/overview.md @@ -12,7 +12,7 @@ permalink: engineers/web-components/ Currently, this technology is supported by all browsers, making it possible to have one central library that will work with most frontend frameworks. -The long-term aim will be to migrate JET teams over to this Web Component system, so we have one single source of truth for our global PIE components. +The long-term aim is to migrate JET teams over to this Web Component system, so we have one single source of truth for our global PIE components. {% notification { type: "information",