Merge branch 'release/0.2.0'

microsoft-search · Jan 11, 2024 · cc79ad9 · cc79ad9
2 parents 87b799b + c7ce851
commit cc79ad9
Show file tree

Hide file tree

Showing 44 changed files with 2,954 additions and 2,832 deletions.
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
@@ -101,7 +101,7 @@ jobs:
               gulp set-version --semver $VERSION
         
           - name: Build Storybook
-            run: npx lerna run docs:build --scope=pnp-modern-search-core
+            run: npx lerna run docs:build --scope=@pnp/modern-search-core
 
           - name: Run PowerShell deployment
             shell: pwsh

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -39,7 +39,6 @@ jobs:
         run: |
           echo "majorMinorPatch=$GITVERSION_MAJORMINORPATCH" >> "$GITHUB_OUTPUT"
           echo "semver=$GITVERSION_SEMVER" >> "$GITHUB_OUTPUT"
-
   tests:
     runs-on: ubuntu-latest
     defaults:
@@ -119,7 +118,7 @@ jobs:
 
       - name: Build
         run: |
-          npx lerna run build --scope pnp-modern-search-core
+          npx lerna run build --scope @pnp/modern-search-core
 
       - name: Build + bundle SPFx
         working-directory: ./packages/spfx
@@ -131,7 +130,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-artifact@v3
         with:
-          name: pnp-modern-search-core-spfx-$SEMVER
+          name: pnp-modern-search-core-spfx
           path: ${{ github.workspace }}/**/*.sppkg
 
   release_spfx:
@@ -150,7 +149,7 @@ jobs:
 
       - uses: actions/download-artifact@v3
         with:
-          name: pnp-modern-search-core-spfx-$SEMVER
+          name: pnp-modern-search-core-spfx
 
       - name: Create GitHub release
         uses: ncipollo/release-action@v1
@@ -220,14 +219,19 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           name: build_dist
-          path: ${{ github.workspace }}/packages/components/dist
+          path: |
+            ${{ github.workspace }}/packages/components
+            !${{ github.workspace }}/**/node_modules
+            !${{ github.workspace }}/**/src
+            !${{ github.workspace }}/**/dev
+            !${{ github.workspace }}/**/assets
+            !${{ github.workspace }}/**/.pnpm-store
+            !${{ github.workspace }}/**/.vscode
+            !${{ github.workspace }}/**/.storybook
 
   publish_components:
     runs-on: ubuntu-latest
     needs: [version,build_components]
-    defaults:
-      run:
-        working-directory: ./packages/components
     env:
       VERSION: ${{ needs.version.outputs.semver }}
     steps:
@@ -236,24 +240,34 @@ jobs:
           node-version: '16'
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
       - name: get-npm-version
         id: package-version
-        run: echo "currentVersion=$(npm view pnp-modern-search-core dist-tags.latest)" >> "$GITHUB_OUTPUT"
+        run: echo "currentVersion=$(npm view @pnp/modern-search-core dist-tags.latest)" >> "$GITHUB_OUTPUT"
 
       - uses: actions/download-artifact@v3
         with:
           name: build_dist
+          path: dist
 
       - name: Publish
+        working-directory: ./dist
         env:
           CURRENT_VERSION: ${{ steps.package-version.outputs.currentVersion }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
         if: $CURRENT_VERSION != ${{ needs.version.outputs.semver }}
-        run: npm publish 
+        run: |
+          if [ "$GITHUB_REF" == "refs/heads/develop" ]
+          then
+            npm publish --access=public --tag alpha
+          else
+            if [[ "$GITHUB_REF" == *"refs/heads/release"* ]]
+            then
+              npm publish --access=public --tag beta
+            else
+              npm publish --access=public
+            fi
+          fi
+
+          
 
          
diff --git a/docs/development/concepts/deployment.md b/docs/development/concepts/deployment.md
@@ -19,7 +19,7 @@ All script parameters are managed trhough a PowerShell script with the following
 
 To deploy from your local machine:
 
-1. From the solution root folder, run `npx lerna run bundle:prod --scope=pnp-modern-search-core`. This will bundle the components in production mode.
+1. From the solution root folder, run `npx lerna run bundle:prod --scope=@pnp/modern-search-core`. This will bundle the components in production mode.
 1. From the `/deploy` folder run the `deploy.ps1` script:
 
     `.\deploy.ps1 -Manual -Environement LOCAL -Version 0.0.0`
@@ -47,7 +47,7 @@ To deploy the Storybook documentation, follow these steps:
 
 1. From the solution root folder, run:
 
-    `npx lerna run docs:build --scope=pnp-modern-search-core`
+    `npx lerna run docs:build --scope=@pnp/modern-search-core`
 
 1. From the `/deploy` folder run the `deploy.ps1` script:
 

diff --git a/docs/development/concepts/solution.md b/docs/development/concepts/solution.md
@@ -5,8 +5,8 @@ The solution uses the following technologies
 | **Components code and logic** | [Web Component](https://developer.mozilla.org/en-US/docs/web/web_components) -> [Lit Element](https://lit.dev/docs/) -> [Microsoft Graph Toolkit](https://learn.microsoft.com/en-us/graph/toolkit/overview) -> Custom components. | All components basically extend the `MgtTemplatedComponent` base class from `@microsoft/mgt-element` library.
 | **Components internal styling** | [TailwindCSS](https://tailwindcss.com/) | Allow to quickly style components without having to maintain dedicated stylesheets. A must have!
 | **Components build** | [Webpack 5](https://webpack.js.org/) | Allow to precisely define the output we want to be able to distribute the components. Also comes with a dev server allowing local debug and tests (ex: `index.html`).
-| **Test framework** | [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/#web-test-runner) with [Playwright](https://playwright.dev/) | Configuration use ESBuild, Mocha, Chai and Sinon for tests.
 | **Components demo and live documentation** | [Storybook](https://storybook.js.org/docs/web-components/get-started/install/)  | Components attributes/proeprties documentation is generated automatically from the code comments through []`custom-elements.json`](https://storybook.js.org/docs/web-components/api/argtypes#automatic-argtype-inference) file. Storybook is configured to run with Webpack 5.
+| **Test framework** | [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/#web-test-runner) with [Pupeeter](https://pptr.dev/) | Configuration use ESBuild, Mocha, Chai and Sinon for tests.
 | **Static documentation** | [MKdocs](https://www.mkdocs.org/) and Horizon platform | Technical static documentation is only accessible internally (unlike components documentation).
 
 ### Why using Microsoft Graph Toolkit instead of regular web components?

diff --git a/docs/development/getting_started.md b/docs/development/getting_started.md
@@ -32,7 +32,7 @@
 1. Open the project root folder in Visual Studio Code.
 1. From the _'Terminal'_ window, run the following command:
 
-    `npx lerna run serve --scope=pnp-modern-search-core`
+    `npx lerna run serve --scope=@pnp/modern-search-core`
 
     This will bundle the solution and serve it from a local server on adresss [http://localhost:8080/index.html](http://localhost:8080/index.html):
 
@@ -57,7 +57,7 @@
     !["Test selection"](../assets/test_selection.png)
 
     !!! notice
-        To run all tests (ex: before a commit), run `npx lerna run test --scope=pnp-modern-search-core`:
+        To run all tests (ex: before a commit), run `npx lerna run test --scope=@pnp/modern-search-core`:
         !["Run all tests"](../assets/run_all_tests.png)
 
 1. Launch the **"Debug tests Edge"** VSCode configuration and choose the test you want to debug:
@@ -76,7 +76,7 @@ We use Storybook to demo components in different scenarios:
 
 To run Storybook locally run the following command:
 
-`npx lerna run docs:watch --scope=pnp-modern-search-core`   
+`npx lerna run docs:watch --scope=@pnp/modern-search-core`   
 
 !!! notice
     All stories are read from the `packages/components/src/stories` folder.
@@ -88,7 +88,7 @@ To run Storybook locally run the following command:
 1. Open the project root folder in Visual Studio Code.
 1. From the 'Terminal', run the following command:
 
-    `npx lerna run serve --scope=pnp-modern-search-core-spfx`
+    `npx lerna run serve --scope=@pnp/modern-search-core-spfx`
 
 1. You can also go directly to ``packages/spfx` and run `npm run serve`.
 1. Open the **Hosted workbench** debug configuration and add WebParts from Local category:

diff --git a/docs/index.md b/docs/index.md
@@ -28,7 +28,7 @@ The following components are included in the bundle:
 
 ##  How I get started?
 
-To get started, simply follow the [guide](./development//getting_started.md)!
+To get started, simply follow the [guide](./development/getting_started.md)!
 
 Thank you to all [Ubisoft members who participate to this project](./thanks.md)!
 

diff --git a/docs/thanks.md b/docs/thanks.md
@@ -1,12 +1,12 @@
 A big thank you to all Ubisoft people that make this solution happen (by alphabetical order):
 
-[Léo Bousquet](https://www.linkedin.com/in/leo-bousquet-gaby/[]), Content Strategist KM - Knowledge Management
-[Iulian Colesnicenco](https://www.linkedin.com/in/iulian-colesnicenco-09866a97), QA Engineer - Quality Control
-[Franck Cornu](https://www.linkedin.com/in/franckcornu/), Microsoft 365 developer
-[Stéphanie Daigle](https://www.linkedin.com/in/stephaniedaigle), IT Manager Microsoft 365
-[Laura-Simona Dobresenciuc](https://www.linkedin.com/in/dobresenciuc-laura-simona-b5a165b8), Technical Lead - IT Development
-[Jessica Fernandes](https://www.linkedin.com/in/jessica-fernandes-3068551/), IT Associate Director - Communication & Collaboration
-[Rishi Nanda](https://www.linkedin.com/in/rishi-nanda/), IT Manager - Connect & Explore Product Team
-[Manuela Neaga-Budoiu](https://www.linkedin.com/in/manuela-neaga-ionescu-361734b), Manager Software Engineering - Collab & Comm
-[Mihaela Nita](https://www.linkedin.com/in/mihaela-nita-6373aa12a/), Product Owner
-[Cosmin-Alexandru Serban](https://www.linkedin.com/in/cosmin-serban-92b08b94/), FullStack Software Developer
+- [Léo Bousquet](https://www.linkedin.com/in/leo-bousquet-gaby/[]), Content Strategist KM - Knowledge Management
+- [Iulian Colesnicenco](https://www.linkedin.com/in/iulian-colesnicenco-09866a97), QA Engineer - Quality Control
+- [Franck Cornu](https://www.linkedin.com/in/franckcornu/), Microsoft 365 developer
+- [Stéphanie Daigle](https://www.linkedin.com/in/stephaniedaigle), IT Manager Microsoft 365
+- [Laura-Simona Dobresenciuc](https://www.linkedin.com/in/dobresenciuc-laura-simona-b5a165b8), Technical Lead - IT Development
+- [Jessica Fernandes](https://www.linkedin.com/in/jessica-fernandes-3068551/), IT Associate Director  Communication & Collaboration
+- [Rishi Nanda](https://www.linkedin.com/in/rishi-nanda/), IT Manager - Connect & Explore Product Team
+- [Manuela Neaga-Budoiu](https://www.linkedin.com/in/manuela-neaga-ionescu-361734b), Manager Software Engineering - Collab & Comm
+-[Mihaela Nita](https://www.linkedin.com/in/mihaela-nita-6373aa12a/), Product Owner
+-[Cosmin-Alexandru Serban](https://www.linkedin.com/in/cosmin-serban-92b08b94/), FullStack Software Developer
diff --git a/packages/components/README.md b/packages/components/README.md
@@ -0,0 +1,43 @@
+# PnP Modern Search - Core Components
+
+> These components have been initially made by [Ubisoft](https://www.ubisoft.com/) as part of their Microsoft Search implementation. They've been adapted are given to the community for free. A big thanks to them! Sharing is caring.
+
+<p align="center">
+   <img alt="PnP Logo"src="https://github.com/microsoft-search/pnp-modern-search-core-components/raw/main/docs/assets/pnp.png"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/microsoft-search/pnp-modern-search-core-components/main/docs/assets/ubisoft_stacked_logo_white.png"><source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/microsoft-search/pnp-modern-search-core-components/main/docs/assets/ubisoft_stacked_logo_black.png"><img alt="Ubisoft Logo" src="https://raw.githubusercontent.com/microsoft-search/pnp-modern-search-core-components/main/docs/assets/ubisoft_stacked_logo_black.png"/></picture>
+</p>
+
+The goal is to provide reusable components based on Microsoft Search and Microsoft Graph in general that can be used transversally in an organization.
+
+> Despite we provide a SharePoint WebParts implementation over these components, this **is not a new version, nor a replacement** of the [PnP Modern Search WebParts](https://github.com/microsoft-search/pnp-modern-search). The main difference is they can be used outside SharePoint to leverage Microsoft Graph and Microsoft Search.
+
+## What are they and why should I use them?
+
+These components are regular [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) built on top of [Microsoft Graph Toolkit](https://learn.microsoft.com/en-us/graph/toolkit/overview) and [Lit elements](https://lit.dev/docs/).
+
+They allow to consume Microsoft Search results in any web application, outside of SharePoint, for instance, to build custom search experiences.
+
+<p align="center">
+   <img src="https://github.com/microsoft-search/pnp-modern-search-core-components/raw/main/docs/assets/components.png"/>
+</p>
+
+## What components are included?
+
+The following components are included in the bundle:
+
+| Component | HTML tag | Purpose |
+| --------- | -------- | ------- |
+| [Search results](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-results--usage-query) | `<pnp-search-results>` | Display results from Microsoft Search index according to configured parameters. |
+| [Search filters](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-filters--usage) | `<pnp-search-filters>` | Display filters from a connected search results components |
+| [Search box](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-box--usage) | `<pnp-search-input>` | Allow users to enter free text search keywords.
+| [Search verticals](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-search-search-verticals--usage) | `<pnp-search-verticals>`  | Displays tabs to search by verticals |
+| [Video player](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/components-misc-video-player--usage) | `<pnp-video-player>`  | Play video from SharePoint (outside of SharePoint domain) |
+
+##  How I get started?
+
+To get started, simply follow the [guide](https://microsoft-search.github.io/pnp-modern-search-core-components/development/getting_started/)!
+
+## Playground
+
+You can also get an overview of components using the [playground](https://azpnpmodernsearchcoresto.z9.web.core.windows.net/latest/index.html?path=/docs/introduction-getting-started--docs)
+
+Thank you to all [Ubisoft members who participate to this project](https://microsoft-search.github.io/pnp-modern-search-core-components/thanks/)!