diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..079119e --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,110 @@ +Hello and welcome to the contributing guide for Generative AI Experiences. Thanks for considering participating in our project 🙇 + +## Reporting an issue + +Opening an issue is very effective way to contribute because many users might also be impacted. We'll make sure to fix it quickly if it's technically feasible and doesn't have important side effects for other users. + +Before reporting an issue, first check that there is not an already open issue for the same topic using the [issues page](https://github.com/algolia/generative-experiences/issues). Don't hesitate to thumb up an issue that corresponds to the problem you have. + +## The code contribution process + +Generative AI Experiences is developed in TypeScript. + +For any code contribution, you need to: + +- Fork and clone the project +- Create a new branch for what you want to solve (fix/_name-of-fix_, feat/_name-of-the-feature_) +- Make your changes +- Open a pull request + +Then: + +- Peer review of the pull request (by at least one of the core contributors) +- Automatic checks (tests, commits, linters) +- When everything is green, your contribution is merged 🚀 + +## Commit conventions + +This project follows the [conventional changelog](https://conventionalcommits.org/) approach. This means that all commit messages should be formatted using the following scheme: + +``` +type(scope): description +``` + +In most cases, we use the following types: + +- `fix`: for any resolution of an issue (identified or not) +- `feat`: for any new feature +- `refactor`: for any code change that neither adds a feature nor fixes an issue +- `docs`: for any documentation change or addition +- `chore`: for anything that is not related to the library itself (doc, tooling) + +Even though the scope is optional, we try to fill it in as it helps us better understand the impact of a change. We either use the name of the package/component impacted or we use impact topic (e.g. `docs`, `tooling`, `deps`, `ci`). + +Finally, if your work is based on an issue on GitHub, please add in the body of the commit message "fix #1234" if it solves the issue #1234 (read "[Closing issues using keywords](https://help.github.com/en/articles/closing-issues-using-keywords)"). + +Some examples of valid commit messages (used as first lines): + +> - fix(client): update getHeadlines parameters +> - chore(deps): update dependency bundlesize to v0.18.4 +> - chore: reword contributions guides + +## Requirements + +To run this project, you will need: + +- Node.js ≥ 20.17 (current stable version) – [nvm](https://github.com/creationix/nvm#install-script) is recommended +- [Yarn](https://yarnpkg.com) + +## Launch the dev environment + +First, build the libraries: + +```sh +yarn build +``` + +Go in the relevant example package an add `.env` file, following the `.env.example`. +Add the information of the Algolia app you want to test the libraries on. + +Then start the server of the relevant example: + +```sh +yarn --cwd examples/playground yarn dev +``` + +Finally, go to the URL displayed on the terminal (generally http://localhost:5173) to view the example in a browser. + +## Folders of the project + +Here are the main files and folders of the project. + +``` +▸ examples/ << Examples, grouped per flavor + ▸ playground/ << React basic example + ▸ playground-js/ << JS basic example +▸ packages/ << Packages of the project + ▸ generative-experiences-api-client/ << Generative AI Experiences JS API client library + ▸ generative-experiences-js/ << The Generative AI Experiences JS library + ▸ generative-experiences-react/ << The Generative AI Experiences React library + ▸ generative-experiences-vdom/ << The primitives for building flavors of the Generative AI Experiences widgets +▸ test/ << The test utilites + ▸ utils/ << Global utilities for the tests +▸ scripts/ << The scripts for maintaining the project + CHANGELOG.md << The autogenerated changelog (based on commits) + CONTRIBUTING.md << this file + package.json << The definition of the project + README.md << The introduction of the project +``` + +## Release + +### Main version + +To release a stable version, go on `master` (`git checkout master`) and use: + +```sh +yarn run release +``` + +It will create a pull request for the next release. When it's reviewed, approved and merged, then CircleCI will automatically publish it to npm. \ No newline at end of file diff --git a/bundlesize.config.json b/bundlesize.config.json index ff76a5d..a0e84d6 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -2,35 +2,35 @@ "files": [ { "path": "packages/generative-experiences-api-client/dist/index.js", - "maxSize": "27.59 kB" + "maxSize": "27.9 kB" }, { "path": "packages/generative-experiences-api-client/dist/index.umd.js", - "maxSize": "11.55 kB" + "maxSize": "11.73 kB" }, { "path": "packages/generative-experiences-vdom/dist/index.js", - "maxSize": "18.3 kB" + "maxSize": "4 kB" }, { "path": "packages/generative-experiences-vdom/dist/index.umd.js", - "maxSize": "14.9 kB" + "maxSize": "3.3 kB" }, { "path": "packages/generative-experiences-react/dist/index.js", - "maxSize": "19.6 kB" + "maxSize": "4.62 kB" }, { "path": "packages/generative-experiences-react/dist/index.umd.js", - "maxSize": "15.9 kB" + "maxSize": "3.76 kB" }, { "path": "packages/generative-experiences-js/dist/index.js", - "maxSize": "19.6 kB" + "maxSize": "11.3 kB" }, { "path": "packages/generative-experiences-js/dist/index.umd.js", - "maxSize": "15.9 kB" + "maxSize": "9.57 kB" } ] } diff --git a/examples/playground-js/index.css b/examples/playground-js/index.css new file mode 100644 index 0000000..d56dfa0 --- /dev/null +++ b/examples/playground-js/index.css @@ -0,0 +1,131 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +.ais-NoWrap { + @apply whitespace-nowrap; +} + +.ais-ScreenReaderOnly { + @apply sr-only; +} + +/* display headlines */ +.ais-GuideHeadlinesContent-wrapper { + @apply rounded p-4 border border-gray-100 shadow gap-2; +} + +.ais-GuideHeadlinesContent-container { + @apply flex flex-col items-end; +} + +.ais-GuideHeadlinesContent-itemsContainer { + @apply flex items-center gap-6; +} + +.ais-GuideHeadlinesContent-readMore { + @apply flex text-white py-2 mt-8 border-2 bg-blue-700 rounded-md items-center w-full justify-center; +} + +.ais-GuideHeadlinesContent-item { + @apply bg-neutral-100 rounded p-4 space-y-3 flex justify-between min-h-[420px]; +} + +.ais-GuideHeadlinesContent-itemContent { + @apply mt-5; +} + +.ais-GuideHeadlinesContent-itemTitle { + @apply text-blue-800 font-semibold line-clamp-2 h-12; +} + +.ais-GuideHeadlinesContent-itemDescription { + @apply line-clamp-4 text-base mt-2; +} + +.ais-GuideHeadlinesContent-itemImage { + @apply relative min-h-[120px] max-h-[120px] w-auto overflow-hidden mx-auto mt-4 aspect-square; +} + +/* display content */ +.ais-GuideContent-contentSection { + @apply prose max-w-prose mx-auto px-4; +} + +.ais-GuideContent { + @apply mb-10 w-full; +} + +.ais-GuideContent-heroImage { + @apply mx-auto min-h-[200px] max-h-[250px] my-12; +} + +.ais-GuideContent .ais-Feedback { + @apply flex items-end justify-end mx-auto; +} + +.ais-GuideContent-factorsList { + @apply flex flex-wrap list-disc gap-x-2 justify-between w-full; +} + +.ais-GuideContent-factorItem { + @apply w-[45%]; +} + +.ais-GuideContent-relatedItemsSection { + @apply prose max-w-none mx-auto px-4; +} + +.ais-GuideContent-relatedItemsTitle { + @apply max-w-prose mx-auto px-4; +} + +.ais-GuideContent-relatedItemsListContainer { + @apply max-w-prose mx-auto px-4; +} + +.ais-GuideContent-relatedItemsList { + @apply p-2 flex justify-between flex-wrap list-none; +} + +/* display feedback */ +.ais-Feedback { + @apply text-gray-500 text-base max-w-prose mt-10; +} + +.ais-feedbackContainer { + @apply flex items-center gap-4; +} + +.ais-Feedback-thanksWrapper { + @apply flex items-center; +} + +.ais-Feedback-labelWrapper { + @apply flex space-x-2 items-center; +} + +.ais-Feedback-labelIcon { + @apply h-6 w-6 flex-shrink-0; +} + +.ais-Feedback-button { + @apply inline-block rounded font-semibold text-center shadow-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 bg-white hover:bg-white border-2 border-gray-400 hover:border-gray-500 focus-visible:outline-gray-500 text-gray-400 hover:text-gray-500 px-2.5 py-1.5; +} + +.ais-Feedback-buttonsWrapper { + @apply flex space-x-3 items-center; +} + +.ais-Feedback-buttonIcon { + @apply h-4 w-4 stroke-2 flex-shrink-0; +} + +/* error loading guide */ +.ais-GuideContentError { + @apply flex flex-col items-center text-center gap-y-4 max-w-prose mx-auto my-6; +} + +.ais-GuideContentErrorTitle { + @apply text-lg font-semibold; +} diff --git a/examples/playground-js/index.html b/examples/playground-js/index.html index 27f85cf..4992fad 100644 --- a/examples/playground-js/index.html +++ b/examples/playground-js/index.html @@ -4,19 +4,14 @@ - - + Algolia JavaScript GSE
-

Algolia GSE

+

Algolia Generative Experiences Guides

diff --git a/examples/playground-js/package.json b/examples/playground-js/package.json index 1088e8c..ae6d0ea 100644 --- a/examples/playground-js/package.json +++ b/examples/playground-js/package.json @@ -22,7 +22,11 @@ "dependencies": { "@algolia/generative-experiences-api-client": "1.6.0", "@algolia/generative-experiences-js": "1.6.0", - "@algolia/generative-experiences-vdom": "1.6.0" + "@algolia/generative-experiences-vdom": "1.6.0", + "@tailwindcss/typography": "^0.5.9", + "autoprefixer": "10.4.20", + "postcss": "8.4.49", + "tailwindcss": "3.3.2" }, "devDependencies": { "preact": "^10.25.1" diff --git a/examples/playground-js/src/index.tsx b/examples/playground-js/src/index.tsx index fc1b7a3..83d23ad 100644 --- a/examples/playground-js/src/index.tsx +++ b/examples/playground-js/src/index.tsx @@ -19,13 +19,15 @@ const options = { }; const client = createClient(options); +/* Test JS widgets, replace 'objectID', 'category' and 'userToken' parameters */ guidesHeadlines({ container: '#headlines', client, userToken: 'test-user', showImmediate: true, - // showFeedback: true, + onlyPublished: false, + showFeedback: true, category: 'category', }); @@ -41,8 +43,10 @@ guideContent({ client, onlyPublished: false, itemComponent({ hit }) { + /* Add custom itemComponent to reflect your use case */ return
{hit.title}
; }, + showFeedback: true, objectID: '123', userToken: 'test-user', }); diff --git a/examples/playground-js/tailwind.config.js b/examples/playground-js/tailwind.config.js new file mode 100644 index 0000000..517b5e1 --- /dev/null +++ b/examples/playground-js/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ + +module.exports = { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [require('@tailwindcss/typography')], +}; diff --git a/examples/playground-js/vite.config.ts b/examples/playground-js/vite.config.ts index e5b1fbc..c53aee0 100644 --- a/examples/playground-js/vite.config.ts +++ b/examples/playground-js/vite.config.ts @@ -1,6 +1,7 @@ import * as path from 'path'; import preact from '@preact/preset-vite'; +import tailwindcss from '@vituum/vite-plugin-tailwindcss'; import { defineConfig } from 'vite'; import dts from 'vite-plugin-dts'; @@ -11,6 +12,7 @@ export default defineConfig({ rollupTypes: true, }), preact(), + tailwindcss(), ], optimizeDeps: { esbuildOptions: { jsx: 'automatic' } }, build: { diff --git a/examples/playground/index.css b/examples/playground/index.css index 35fccc3..63519a2 100644 --- a/examples/playground/index.css +++ b/examples/playground/index.css @@ -12,31 +12,39 @@ /* display headlines */ .ais-GuideHeadlinesContent-wrapper { - @apply flex flex-col items-end rounded p-4 border border-gray-200 shadow gap-2; + @apply rounded p-4 border border-gray-100 shadow gap-2; } .ais-GuideHeadlinesContent-container { - @apply grid grid-cols-2 lg:grid-cols-4 gap-4; + @apply flex flex-col items-end; +} + +.ais-GuideHeadlinesContent-itemsContainer { + @apply flex items-center gap-6; } .ais-GuideHeadlinesContent-readMore { - @apply text-orange-500 font-semibold; + @apply flex text-white py-2 mt-8 border-2 bg-blue-700 rounded-md items-center w-full justify-center; } .ais-GuideHeadlinesContent-item { - @apply bg-gray-100 rounded p-4 space-y-3 flex flex-col justify-between; + @apply bg-neutral-100 rounded p-4 space-y-3 flex justify-between min-h-[420px]; } .ais-GuideHeadlinesContent-itemContent { - @apply space-y-3; + @apply mt-5; } .ais-GuideHeadlinesContent-itemTitle { - @apply text-orange-500 font-semibold; + @apply text-blue-800 font-semibold line-clamp-2 h-12; +} + +.ais-GuideHeadlinesContent-itemDescription { + @apply line-clamp-4 text-base mt-2; } .ais-GuideHeadlinesContent-itemImage { - @apply relative aspect-video overflow-hidden; + @apply relative min-h-[120px] max-h-[120px] w-auto overflow-hidden mx-auto mt-4 aspect-square; } /* display content */ @@ -44,16 +52,28 @@ @apply prose max-w-prose mx-auto px-4; } -.ais-GuideContent-feedbackContainer { - @apply flex flex-col; +.ais-GuideContent { + @apply mb-10 w-full; +} + +.ais-GuideContent-heroImage { + @apply mx-auto min-h-[200px] max-h-[250px] my-12; } .ais-GuideContent .ais-Feedback { - @apply self-end; + @apply flex items-end justify-end mx-auto; +} + +.ais-GuideContent-factorsList { + @apply flex flex-wrap list-disc gap-x-2 justify-between w-full; +} + +.ais-GuideContent-factorItem { + @apply w-[45%]; } .ais-GuideContent-relatedItemsSection { - @apply prose max-w-none; + @apply prose max-w-none mx-auto px-4; } .ais-GuideContent-relatedItemsTitle { @@ -61,20 +81,24 @@ } .ais-GuideContent-relatedItemsListContainer { - @apply max-w-none px-4; + @apply max-w-prose mx-auto px-4; } .ais-GuideContent-relatedItemsList { - @apply p-0 grid gap-6 grid-cols-2 md:grid-cols-2 lg:grid-cols-4; + @apply p-2 flex justify-between flex-wrap list-none; } /* display feedback */ .ais-Feedback { - @apply text-gray-500 text-sm flex items-center space-x-4; + @apply text-gray-500 text-base max-w-prose mt-10; +} + +.ais-feedbackContainer { + @apply flex items-center gap-4; } .ais-Feedback-thanksWrapper { - @apply flex space-x-2 items-center; + @apply flex items-center; } .ais-Feedback-labelWrapper { @@ -94,5 +118,14 @@ } .ais-Feedback-buttonIcon { - @apply h-5 w-5 stroke-2 flex-shrink-0; + @apply h-4 w-4 stroke-2 flex-shrink-0; +} + +/* error loading guide */ +.ais-GuideContentError { + @apply flex flex-col items-center text-center gap-y-4 max-w-prose mx-auto my-6; +} + +.ais-GuideContentErrorTitle { + @apply text-lg font-semibold; } diff --git a/examples/playground/src/index.tsx b/examples/playground/src/index.tsx index 07e55a5..f8e6157 100644 --- a/examples/playground/src/index.tsx +++ b/examples/playground/src/index.tsx @@ -5,8 +5,6 @@ import { createClient } from '@algolia/generative-experiences-api-client'; import { GuidesHeadlines, GuideContent, - useGuideContent, - useGuidesHeadlines, GuidesFeedback, } from '@algolia/generative-experiences-react'; import React, { createElement } from 'react'; @@ -22,6 +20,8 @@ const options = { const client = createClient(options); +/* Test methods from api client, replace 'objectID' and 'category' parameters */ + // test getHeadlines method // commerceClient // .getHeadlines({ @@ -38,67 +38,36 @@ const client = createClient(options); // // eslint-disable-next-line no-console // .then((response) => console.log(response)); -// test generate headlines -// client.generateHeadlines({ -// category: 'category', -// tone: 'natural', -// language_code: 'english', -// }); - -// test generate content for a headline -// commerceClient.generateContent({ -// objectID: '123', -// }); - -const HitComponent = ({ hit }: { hit: any }) => { - return
{hit.title}
; +/* Add custom itemComponent to reflect your use case */ +const ItemComponent = ({ hit }: { hit: any }) => { + return
{hit.name.english}
; }; -function ComponentTest() { - const { headlines, status } = useGuidesHeadlines({ - client, - showImmediate: true, - category: 'category', - }); - - const { content, status: contentStatus } = useGuideContent({ - client, - objectID: '1234', - showImmediate: true, - onlyPublished: false, - }); +function PlaygroundApp() { + /* Test hooks, replace 'objectID' and 'category' parameters */ - // const { - // headlines: generatedHeadlines, - // status: generatedHStatus, - // } = useGuidesHeadlines({ - // client: commerceClient, + // const { headlines, status } = useGuidesHeadlines({ + // client, // showImmediate: true, // category: 'category', // }); - // const { - // content: generatedContent, - // status: generatedStatus, - // } = useGuideContent({ - // client: commerceClient, - // objectID: '123', - // onlyPublished: false, + // + // const { content, status: contentStatus } = useGuideContent({ + // client, + // objectID: 'category', // showImmediate: true, + // onlyPublished: false, // }); - // eslint-disable-next-line no-console - console.log('>>>>>>>>>>> content', content, contentStatus); - // eslint-disable-next-line no-console - console.log('>>>>>>>>>>> headlines', headlines, status); - // console.log('>>>>>>>>>>> generated', generatedHeadlines, generatedHStatus); - + /* Test React widgets, replace 'objectID', 'category' and 'userToken' parameters */ return ( <> @@ -108,7 +77,7 @@ function ComponentTest() { userToken="aabc" objectID="123" onlyPublished={false} - itemComponent={({ hit }) => } + itemComponent={({ hit }) => } /> ); @@ -118,6 +87,6 @@ const container = document.getElementById('root'); const root = createRoot(container!); // createRoot(container!) if you use TypeScript root.render( - + ); diff --git a/packages/generative-experiences-api-client/src/client.ts b/packages/generative-experiences-api-client/src/client.ts index 532d057..65dd362 100644 --- a/packages/generative-experiences-api-client/src/client.ts +++ b/packages/generative-experiences-api-client/src/client.ts @@ -273,7 +273,49 @@ export function createClient(opts: CreateClientOptions) { }, }); - return res?.hits ?? []; + const headlines: GuideHeadline[] = res?.hits ?? []; + + if (res?.hits) { + /** + * For backward compatibility, we need to ensure that the objectIDs array is filled. + * This can be dropped at the next major release. + */ + + headlines?.map((hit) => { + if (Boolean(hit.objects?.length) && !hit.objectIDs?.length) { + hit.objectIDs = getObjectIDs(hit.objects); + } + }); + + /** + * Fetch records from objectIDs, this used to be done on the API side. But the records could get too large, so this logic is now done on the client side. + */ + const objectIDs = Array.from( + new Set(res?.hits?.flatMap((hit) => hit.objectIDs) ?? []) + ).filter(Boolean); + + const objects = await getObjects( + objectIDs, + this.options.indexName, + searchClient + ); + + headlines?.map((hit) => { + if (Boolean(hit.objectIDs?.length) && !hit.objects?.length) { + hit.objectIDs.forEach((objectID) => { + const object = objects.find( + (object) => object.objectID === objectID + ); + if (!hit.objects) { + hit.objects = []; + } + hit.objects.push(object); + }); + } + }); + } + + return headlines; }, async getContent( diff --git a/packages/generative-experiences-api-client/src/types/guide.ts b/packages/generative-experiences-api-client/src/types/guide.ts index 9bb0068..89f489c 100644 --- a/packages/generative-experiences-api-client/src/types/guide.ts +++ b/packages/generative-experiences-api-client/src/types/guide.ts @@ -1,5 +1,34 @@ import { Hit } from '@algolia/client-search'; +export type ContentBlock = { + type?: 'conclusion' | 'factor' | 'introduction' | 'feature'; + title?: string; + content: string; +}; + +export type FactorsContentBlock = { + type: 'factors'; + title: string; + content: Array<{ name: string; description: string }>; +}; + +export type ProductDescriptionContent = { + type: 'description'; + content: string; +}; + +export type ProductFactorsContent = { + type: 'product_factors'; + content: Array<{ name: string; description: string }>; +}; + +export type ProductContentBlock = { + type: 'product'; + title: string; + objectID: string; + content: Array | string; +}; + export type BaseGuide = { objectID: string; status: 'draft' | 'generating' | 'headline' | 'published'; @@ -8,27 +37,13 @@ export type BaseGuide = { generated_at: number; }; -export type CategoryGuide = BaseGuide & { - type: 'category'; - description: string; - category: string; - objects: Hit[]; - objectIDs: string[]; - content: Array<{ - type: 'conclusion' | 'factor' | 'introduction'; - title: string; - content: string; - }>; - score_headline: number; -}; - -export type ShoppingGuideType = BaseGuide & { - type: 'shopping_guide'; +export type GuideType = BaseGuide & { + type: 'shopping_guide' | 'category'; description: string; category: string; objects: Hit[]; objectIDs: string[]; - content: Array<{ title: string; content: string }>; + content: Array; score_headline: number; }; @@ -36,13 +51,8 @@ export type ComparisonGuide = BaseGuide & { type: 'comparison'; objects: Hit[]; objectIDs: string[]; - content: Array<{ - title: string; - type: 'conclusion' | 'introduction' | 'product'; - objectID?: string; - content: string; - }>; + content: Array; comparedObjectIDs: string[]; }; -export type Guide = CategoryGuide | ShoppingGuideType | ComparisonGuide; +export type Guide = GuideType | ComparisonGuide; diff --git a/packages/generative-experiences-api-client/src/types/guides-headlines.ts b/packages/generative-experiences-api-client/src/types/guides-headlines.ts index 796d423..56b3829 100644 --- a/packages/generative-experiences-api-client/src/types/guides-headlines.ts +++ b/packages/generative-experiences-api-client/src/types/guides-headlines.ts @@ -9,6 +9,7 @@ export type GuideHeadline = { title: string; description: string; objects: any[]; + objectIDs: string[]; category: string; status: 'draft' | 'generating' | 'headline' | 'published'; score_headline: number; diff --git a/packages/generative-experiences-js/README.md b/packages/generative-experiences-js/README.md index 1eddbda..b09e07c 100644 --- a/packages/generative-experiences-js/README.md +++ b/packages/generative-experiences-js/README.md @@ -145,6 +145,8 @@ shoppingGuideContent({ | `client` | - | N/A | The Algolia Generative Experiences client. | `required` | | `objectID` | `string` | N/A | The objectID for the guide to be retrieved/generated. | `required` | | `itemComponent` | `ReactNode` | N/A | Component to display items (from an algolia index) listed throughout the guide. | `required` | +| `featuredItemsTitle` | `string` | Items featured in this article | The title of the realted items carousel found at the end of a guide. | - | +| `maxFeaturedItems` | `number` | 4 | The number of featured items displayed at the end of a guide. | - | | `onlyPublished` | `boolean` | `true` | Only display published guides. | - | | `showImmediate` | `boolean` | `true` | Whether to generate/display the content on load. | - | | `showFeedback` | `boolean` | `false` | Whether to show the feedback buttons. | - | @@ -240,7 +242,139 @@ guidesHeadlines({ ## Styling -// TBD +### Using Tailwind CSS + +To integrate the widgets with Tailwind, include the `@tailwindcss/typography` plugin in your `tailwind.config.js` and add the following CSS to your project: + +```css +.ais-NoWrap { + @apply whitespace-nowrap; +} + +.ais-ScreenReaderOnly { + @apply sr-only; +} + +/* display headlines */ +.ais-GuideHeadlinesContent-wrapper { + @apply rounded p-4 border border-gray-100 shadow gap-2; +} + +.ais-GuideHeadlinesContent-container { + @apply flex flex-col items-end; +} + +.ais-GuideHeadlinesContent-itemsContainer { + @apply flex items-center gap-6; +} + +.ais-GuideHeadlinesContent-readMore { + @apply flex text-white py-2 mt-8 border-2 bg-blue-700 rounded-md items-center w-full justify-center; +} + +.ais-GuideHeadlinesContent-item { + @apply bg-neutral-100 rounded p-4 space-y-3 flex justify-between min-h-[420px]; +} + +.ais-GuideHeadlinesContent-itemContent { + @apply mt-5; +} + +.ais-GuideHeadlinesContent-itemTitle { + @apply text-blue-800 font-semibold line-clamp-2 h-12; +} + +.ais-GuideHeadlinesContent-itemDescription { + @apply line-clamp-4 text-base mt-2; +} + +.ais-GuideHeadlinesContent-itemImage { + @apply relative min-h-[120px] max-h-[120px] w-auto overflow-hidden mx-auto mt-4 aspect-square; +} + +/* display content */ +.ais-GuideContent-contentSection { + @apply prose max-w-prose mx-auto px-4; +} + +.ais-GuideContent { + @apply mb-10 w-full; +} + +.ais-GuideContent-heroImage { + @apply mx-auto min-h-[200px] max-h-[250px] my-12; +} + +.ais-GuideContent .ais-Feedback { + @apply flex items-end justify-end mx-auto; +} + +.ais-GuideContent-factorsList { + @apply flex flex-wrap list-disc gap-x-2 justify-between w-full; +} + +.ais-GuideContent-factorItem { + @apply w-[45%]; +} + +.ais-GuideContent-relatedItemsSection { + @apply prose max-w-none mx-auto px-4; +} + +.ais-GuideContent-relatedItemsTitle { + @apply max-w-prose mx-auto px-4; +} + +.ais-GuideContent-relatedItemsListContainer { + @apply max-w-prose mx-auto px-4; +} + +.ais-GuideContent-relatedItemsList { + @apply p-2 flex justify-between flex-wrap list-none; +} + +/* display feedback */ +.ais-Feedback { + @apply text-gray-500 text-base max-w-prose mt-10; +} + +.ais-feedbackContainer { + @apply flex items-center gap-4; +} + +.ais-Feedback-thanksWrapper { + @apply flex items-center; +} + +.ais-Feedback-labelWrapper { + @apply flex space-x-2 items-center; +} + +.ais-Feedback-labelIcon { + @apply h-6 w-6 flex-shrink-0; +} + +.ais-Feedback-button { + @apply inline-block rounded font-semibold text-center shadow-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 bg-white hover:bg-white border-2 border-gray-400 hover:border-gray-500 focus-visible:outline-gray-500 text-gray-400 hover:text-gray-500 px-2.5 py-1.5; +} + +.ais-Feedback-buttonsWrapper { + @apply flex space-x-3 items-center; +} + +.ais-Feedback-buttonIcon { + @apply h-4 w-4 stroke-2 flex-shrink-0; +} + +/* error loading guide */ +.ais-GuideContentError { + @apply flex flex-col items-center text-center gap-y-4 max-w-prose mx-auto my-6; +} + +.ais-GuideContentErrorTitle { + @apply text-lg font-semibold; +} +``` ## ❓ Troubleshooting diff --git a/packages/generative-experiences-js/src/hooks/useGuideContent.ts b/packages/generative-experiences-js/src/hooks/useGuideContent.ts index 9ec19b0..436b0ab 100644 --- a/packages/generative-experiences-js/src/hooks/useGuideContent.ts +++ b/packages/generative-experiences-js/src/hooks/useGuideContent.ts @@ -1,14 +1,14 @@ import { Guide, GuideContentOptions, - ShoppingGuideType, + GuideType, } from '@algolia/generative-experiences-api-client'; import { useEffect, useRef, useState } from 'preact/hooks'; import { version } from '../version'; -const defaultState: ShoppingGuideType = { - objectID: '', +const defaultState: GuideType = { + objectID: 'default', status: 'draft', title: '', score_content: 0, @@ -20,6 +20,7 @@ const defaultState: ShoppingGuideType = { objectIDs: [], content: [ { + type: 'introduction', title: '', content: '', }, diff --git a/packages/generative-experiences-react/README.md b/packages/generative-experiences-react/README.md index 2d2bec7..c088033 100644 --- a/packages/generative-experiences-react/README.md +++ b/packages/generative-experiences-react/README.md @@ -128,19 +128,21 @@ function App({ currentObjectID, userToken }) { } ``` -| Prop name | Type | Default | Description | Notes | -| --- | --- | --- | --- | --- | -| `client` | - | N/A | The Algolia Generative Experiences client. | `required` | -| `objectID` | `string` | N/A | The objectID for the guide to be retrieved/generated. | `required` | -| `itemComponent` | `ReactNode` | N/A | Component to display items (from an algolia index) listed throughout the guide. | `required` | -| `onlyPublished` | `boolean` | `true` | Only display published guides. | - | -| `showImmediate` | `boolean` | `true` | Whether to generate/display the content on load. | - | -| `showFeedback` | `boolean` | `false` | Whether to show the feedback buttons. | - | -| `userToken` | `string` | N/A | The user token needed for computing feedback. | `required` if `showFeedback` is `true` | -| `getters` | `CommersGetters` | - | The custom gathers that help you fetch images and add links. | - | -| `children` | `ReactNode` | - | The children to render. | - | -| `view` | `ViewProps` | - | The view component into which your guide content will be rendered. | - | -| `classNames` | `ContentClassNames` | - | The class names for the component. | - | +| Prop name | Type | Default | Description | Notes | +| --- |---------------------|--------------------------------|---------------------------------------------------------------------------------|----------------------------------------| +| `client` | - | N/A | The Algolia Generative Experiences client. | `required` | +| `objectID` | `string` | N/A | The objectID for the guide to be retrieved/generated. | `required` | +| `itemComponent` | `ReactNode` | N/A | Component to display items (from an algolia index) listed throughout the guide. | `required` | +| `featuredItemsTitle` | `string` | Items featured in this article | The title of the realted items carousel found at the end of a guide. | - | +| `maxFeaturedItems` | `number` | 4 | The number of featured items displayed at the end of a guide. | - | +| `onlyPublished` | `boolean` | `true` | Only display published guides. | - | +| `showImmediate` | `boolean` | `true` | Whether to generate/display the content on load. | - | +| `showFeedback` | `boolean` | `false` | Whether to show the feedback buttons. | - | +| `userToken` | `string` | N/A | The user token needed for computing feedback. | `required` if `showFeedback` is `true` | +| `getters` | `CommersGetters` | - | The custom gathers that help you fetch images and add links. | - | +| `children` | `ReactNode` | - | The children to render. | - | +| `view` | `ViewProps` | - | The view component into which your guide content will be rendered. | - | +| `classNames` | `ContentClassNames` | - | The class names for the component. | - | ### Guides Feedback @@ -252,98 +254,131 @@ To integrate the widgets with Tailwind, include the `@tailwindcss/typography` pl ```css .ais-NoWrap { - @apply whitespace-nowrap; + @apply whitespace-nowrap; } .ais-ScreenReaderOnly { - @apply sr-only; + @apply sr-only; } /* display headlines */ .ais-GuideHeadlinesContent-wrapper { - @apply flex flex-col items-end rounded p-4 border border-gray-200 shadow gap-2; + @apply rounded p-4 border border-gray-100 shadow gap-2; } .ais-GuideHeadlinesContent-container { - @apply grid grid-cols-2 lg:grid-cols-4 gap-4; + @apply flex flex-col items-end; +} + +.ais-GuideHeadlinesContent-itemsContainer { + @apply flex items-center gap-6; } .ais-GuideHeadlinesContent-readMore { - @apply text-orange-500 font-semibold; + @apply flex text-white py-2 mt-8 border-2 bg-blue-700 rounded-md items-center w-full justify-center; } .ais-GuideHeadlinesContent-item { - @apply bg-gray-100 rounded p-4 space-y-3 flex flex-col justify-between; + @apply bg-neutral-100 rounded p-4 space-y-3 flex justify-between min-h-[420px]; } .ais-GuideHeadlinesContent-itemContent { - @apply space-y-3; + @apply mt-5; } .ais-GuideHeadlinesContent-itemTitle { - @apply text-orange-500 font-semibold; + @apply text-blue-800 font-semibold line-clamp-2 h-12; +} + +.ais-GuideHeadlinesContent-itemDescription { + @apply line-clamp-4 text-base mt-2; } .ais-GuideHeadlinesContent-itemImage { - @apply relative aspect-video overflow-hidden; + @apply relative min-h-[120px] max-h-[120px] w-auto overflow-hidden mx-auto mt-4 aspect-square; } /* display content */ .ais-GuideContent-contentSection { - @apply prose max-w-prose mx-auto px-4; + @apply prose max-w-prose mx-auto px-4; } -.ais-GuideContent-feedbackContainer { - @apply flex flex-col; +.ais-GuideContent { + @apply mb-10 w-full; +} + +.ais-GuideContent-heroImage { + @apply mx-auto min-h-[200px] max-h-[250px] my-12; } .ais-GuideContent .ais-Feedback { - @apply self-end; + @apply flex items-end justify-end mx-auto; +} + +.ais-GuideContent-factorsList { + @apply flex flex-wrap list-disc gap-x-2 justify-between w-full; +} + +.ais-GuideContent-factorItem { + @apply w-[45%]; } .ais-GuideContent-relatedItemsSection { - @apply prose max-w-none; + @apply prose max-w-none mx-auto px-4; } .ais-GuideContent-relatedItemsTitle { - @apply max-w-prose mx-auto px-4; + @apply max-w-prose mx-auto px-4; } .ais-GuideContent-relatedItemsListContainer { - @apply max-w-none px-4; + @apply max-w-prose mx-auto px-4; } .ais-GuideContent-relatedItemsList { - @apply p-0 grid gap-6 grid-cols-2 md:grid-cols-2 lg:grid-cols-4; + @apply p-2 flex justify-between flex-wrap list-none; } /* display feedback */ .ais-Feedback { - @apply text-gray-500 text-sm flex items-center space-x-4; + @apply text-gray-500 text-base max-w-prose mt-10; +} + +.ais-feedbackContainer { + @apply flex items-center gap-4; } .ais-Feedback-thanksWrapper { - @apply flex space-x-2 items-center; + @apply flex items-center; } .ais-Feedback-labelWrapper { - @apply flex space-x-2 items-center; + @apply flex space-x-2 items-center; } .ais-Feedback-labelIcon { - @apply h-6 w-6 flex-shrink-0; + @apply h-6 w-6 flex-shrink-0; } .ais-Feedback-button { - @apply inline-block rounded font-semibold text-center shadow-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 bg-white hover:bg-white border-2 border-gray-400 hover:border-gray-500 focus-visible:outline-gray-500 text-gray-400 hover:text-gray-500 px-2.5 py-1.5; + @apply inline-block rounded font-semibold text-center shadow-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 bg-white hover:bg-white border-2 border-gray-400 hover:border-gray-500 focus-visible:outline-gray-500 text-gray-400 hover:text-gray-500 px-2.5 py-1.5; } .ais-Feedback-buttonsWrapper { - @apply flex space-x-3 items-center; + @apply flex space-x-3 items-center; } .ais-Feedback-buttonIcon { - @apply h-5 w-5 stroke-2 flex-shrink-0; + @apply h-4 w-4 stroke-2 flex-shrink-0; +} + +/* error loading guide */ +.ais-GuideContentError { + @apply flex flex-col items-center text-center gap-y-4 max-w-prose mx-auto my-6; +} + +.ais-GuideContentErrorTitle { + @apply text-lg font-semibold; } ``` diff --git a/packages/generative-experiences-react/src/GuideContent.tsx b/packages/generative-experiences-react/src/GuideContent.tsx index d74fcd4..a67cc38 100644 --- a/packages/generative-experiences-react/src/GuideContent.tsx +++ b/packages/generative-experiences-react/src/GuideContent.tsx @@ -30,13 +30,15 @@ const UncontrolledGuideContent = createGuideContentComponent({ }); export function GuideContent(props: GuideContentProps) { - const { content, status } = useGuideContent(props); + const { content, status, error } = useGuideContent(props); + const { castFeedback, alreadyCast } = useGuidesFeedback(props); return ( ) { - if (props.item.type === 'comparison') { - const { objectID, title, content, objects } = props.item; + if (props.item.objectID === 'default' || props.error) { return ( -
-
-

{title}

- {content.map((section, i) => { - const hit = objects.find((o) => o.objectID === section.objectID); - const displayItem = - section.type === 'product' && section.objectID; - return ( -
-

{section.title}

- {hit && displayItem ? ( - - ) : null} -

{section.content}

- {section.type === 'product' && section.objectID ? ( - - View this product - - ) : null} -
- ); - })} -
- {props.showFeedback && ( - +
+

-
-

Mentioned products

-
-
-
    - {objects.map((hit) => ( -
  • - -
    • - ))} -
-
- -

+ We Hit a Snag! + +

+ Our system encountered an unexpected error. Don't worry, + it's not your fault. Please try again later. +

+
); } - if (props.item.type === 'shopping_guide') { - const { objectID, title, description, content, objects } = props.item; + if (props.item.type === 'comparison') { + const { objectID, title, content, objects } = props.item; const image = props.getters.images(objects[0])[0]; return (

{title}

-

{description}

{image && ( {image.alt} )} - {content.map((section, i) => ( -
-

{section.title}

-

{section.content}

-
- ))} + {content.map((section, i) => { + return ( +
+ {section.type === 'introduction' && ( +
+

{section.content}

+
+ )} + {section.type === 'factors' && ( +
+

{section.title}

+
    + {section.content.map((factor, index) => ( +
  • +

    {factor.name}

    +

    {factor.description}

    +
    • + ))} +
+
+ )} + {section.type === 'product' && ( +
+

{section.title}

+ o.objectID === section.objectID + )} + Fragment={Fragment} + createElement={createElement} + /> + {typeof section.content === 'string' && ( + // provide backwards compatibility with the comparison guides that are not generated with the new structure +

{section.content}

+ )} +

+ {typeof section.content !== 'string' + ? section.content?.find( + (item) => item.type === 'description' + )?.content ?? '' + : ''} +

+
    + {typeof section.content !== 'string' + ? section.content + ?.find((item) => item.type === 'product_factors') + ?.content?.map((factor, index) => ( +
  • +

    {factor.name}

    +

    {factor.description}

    +
    • + )) ?? '' + : ''} +
+
+ )} + {(section.type === 'conclusion' || + section.type === 'feature') && ( +
+

{section.title}

+

{section.content}

+
+ )} +
+ ); + })}
{props.showFeedback && ( )} -
-
-

Related products

-
-
-
    - {objects.map((hit) => ( -
  • - -
    • - ))} -
-
-
); } - if (props.item.type === 'category') { - const { objectID, title, description, content, objects } = props.item; + if ( + props.item.type === 'category' || + props.item.type === 'shopping_guide' + ) { + const { objectID, title, content, objects } = props.item; const image = props.getters.images(objects[0])[0]; return (

{title}

-

{description}

{image && ( )} {content.map((section, i) => ( -
+ {section.type === 'introduction' && ( +
+

{section.content}

+
)} - > - {section.type === 'factor' && ( -
-

✓

+ {section.type === 'factors' && ( +
+

{section.title}

+
    + {section.content.map((factor, index) => ( +
  • +

    {factor.name}

    +

    {factor.description}

    +
    • + ))} +
)} -
-

{section.title}

-

{section.content}

-
-
+ {!section.type && ( + // provide backwards compatibility with the shopping guides that are not generated with the new structure +
+

{section.title}

+

{section.content}

+
+ )} + {(section.type === 'factor' || + section.type === 'conclusion') && ( +
+

{section.title}

+

{section.content}

+
+ )} + ))}
{props.showFeedback && ( @@ -264,7 +295,7 @@ export function createArticleViewComponent({ props.classNames?.relatedItemsTitle )} > -

Related products

+

{props.featuredItemsTitle}

- {objects.map((hit) => ( + {objects?.slice(0, props.maxFeaturedItems)?.map((hit) => (
    • ) : ( -
    +
    - +

    Give us feedback - +

    + {image && ( +
    + {image.alt} +
    + )}
    {props.item.title} -

    {props.item.description}

    - - Read more - -
    - {image && ( -
    +
    - )} + Read more + +
    ); }; diff --git a/packages/generative-experiences-vdom/src/DefaultListView.tsx b/packages/generative-experiences-vdom/src/DefaultListView.tsx index 0b16a0d..810d13c 100644 --- a/packages/generative-experiences-vdom/src/DefaultListView.tsx +++ b/packages/generative-experiences-vdom/src/DefaultListView.tsx @@ -24,23 +24,30 @@ export function createListViewComponent({ createElement, Fragment }: Renderer) { props.classNames?.container )} > - {props.items.map((item) => ( -
    - -
    - ))} +
    + {props.items.map((item) => ( +
    + +
    + ))} +
    {props.showFeedback && ( ({ const getters = props.getters ?? defaultGetters; + const featuredItemsTitle = + props.featuredItemsTitle ?? 'Items featured in this article'; + + const maxFeaturedItems = props.maxFeaturedItems ?? 4; + const View = (viewProps: any) => ( ; + content: Array; score_headline: number; } | { type: 'comparison'; objects: Hit[]; - content: Array<{ - title: string; - type: 'conclusion' | 'introduction' | 'product'; - objectID?: string; - content: string; - }>; + content: Array; comparedObjectIDs: string[]; } - | { - type: 'shopping_guide'; - description: string; - category: string; - objects: Hit[]; - content: Array<{ title: string; content: string }>; - score_headline: number; - } ); export type GSEContentComponentProps = { @@ -91,8 +88,11 @@ export type ContentChildrenProps = GSEContentComponentProps & { export type ContentViewProps> = { classNames: TClassNames; item: GSEContentRecord; + featuredItemsTitle?: string; + maxFeaturedItems?: number; + error?: Error | undefined; itemComponent = {}>( - props: { hit: Hit } & Renderer & TComponentProps + props: { hit: Hit | undefined } & Renderer & TComponentProps ): JSX.Element; feedbackComponent = {}>( props: { @@ -126,7 +126,10 @@ export type ContentComponentProps< TComponentProps extends Record = {} > = { itemComponent(props: ContentItemComponentProps): JSX.Element; + featuredItemsTitle?: string; + maxFeaturedItems?: number; item: GSEContentRecord; + error?: Error | undefined; classNames?: ContentClassNames; children?(props: ContentChildrenProps & TComponentProps): JSX.Element; castFeedback: ( diff --git a/packages/generative-experiences-vdom/src/types/GuidesFeedbackProps.ts b/packages/generative-experiences-vdom/src/types/GuidesFeedbackProps.ts index 3f9b52d..4da2d97 100644 --- a/packages/generative-experiences-vdom/src/types/GuidesFeedbackProps.ts +++ b/packages/generative-experiences-vdom/src/types/GuidesFeedbackProps.ts @@ -3,6 +3,7 @@ import { Renderer } from './Renderer'; export type FeedbackClassNames = Partial<{ wrapper?: string; container?: string; + feedbackContainer?: string; button?: string; buttonIcon?: string; buttonsWrapper?: string; diff --git a/packages/generative-experiences-vdom/src/types/GuidesHeadlinesProps.ts b/packages/generative-experiences-vdom/src/types/GuidesHeadlinesProps.ts index af4f947..71b18df 100644 --- a/packages/generative-experiences-vdom/src/types/GuidesHeadlinesProps.ts +++ b/packages/generative-experiences-vdom/src/types/GuidesHeadlinesProps.ts @@ -4,9 +4,11 @@ import { Renderer } from './Renderer'; export type HeadlinesButtonClassNames = Partial<{ wrapper?: string; container?: string; + itemsContainer?: string; item?: string; itemContent?: string; itemTitle?: string; + itemDescription?: string; itemImage?: string; list?: string; readMore?: string; diff --git a/yarn.lock b/yarn.lock index 683ecd4..ad7a8ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2553,7 +2553,7 @@ asynckit@^0.4.0: resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== -autoprefixer@^10.4, autoprefixer@^10.4.20: +autoprefixer@10.4.20, autoprefixer@^10.4, autoprefixer@^10.4.20: version "10.4.20" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b" integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g== @@ -7006,7 +7006,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.4, postcss@^8.4.23, postcss@^8.4.47, postcss@^8.4.49: +postcss@8.4.49, postcss@^8.4, postcss@^8.4.23, postcss@^8.4.47, postcss@^8.4.49: version "8.4.49" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19" integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA== @@ -7942,7 +7942,7 @@ string-argv@~0.3.1: resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6" integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q== -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -7960,6 +7960,15 @@ string-width@^1.0.1: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961" @@ -8038,7 +8047,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -8059,6 +8068,13 @@ strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -8921,7 +8937,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -8939,6 +8955,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"