Feature/cms 45548 npm

.github/workflows/npm-publish.yaml

@@ -0,0 +1,38 @@
+name: Publish package to GitHub Packages
+on:
+  push:
+    branches:
+      - release/*
+  release:
+    types: [released]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup .npmrc file
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Install (all) dependencies)
+        run: pnpm install
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Run tests
+        run: pnpm -r --if-present test
+
+      - name: Publish packages
+        run: pnpm publish:all
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

DEVELOPMENT.md

@@ -50,7 +50,7 @@ You can also pass the `--help` flag to any command to see the flags and argument
 3. Push the release branch (`git push`)
 4. Go to GitHub and create one Draft release **for every released package**.
 
-   - Tag: `<<package name>>@<<version>>`. E.g. `@episerver/[email protected]`
+   - Tag: `<<package name>>@<<version>>`. E.g. `@optimizely/[email protected]`
    - Release name (same as tag)
    - Branch: choose the branch you have just created
 

README.md

@@ -5,18 +5,18 @@
 
 JavaScript library and CLI app for Optimizely CMS
 
+<!--
 ## Getting started
 
 ### From sample site
 
 (TODO)
 
-<!--
 
 The easiest way to get started is using the sample site based on Next.js, which showcases both the SDK and CLI
 -->
 
-### From scratch
+## Getting started from scratch
 
 If you want to start from scratch, you can follow this guide:
 

__test__/cli-runtime-test/components/component-alias-import.ts

@@ -1,4 +1,4 @@
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 import { getString } from '@/subdir/something.js';
 
 export const ct1 = contentType({

__test__/cli-runtime-test/components/component-relative-import.ts

@@ -1,4 +1,4 @@
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 import { getString } from './subdir/something';
 
 export const ct2 = contentType({

__test__/cli-runtime-test/components/component-with-react.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 import { getString } from './subdir/something.js';
 
 export const ct3 = contentType({

__test__/cli-runtime-test/package.json

@@ -8,8 +8,8 @@
     "test:manual": "pnpm exec optimizely-cms-cli config push cli-runtime.optimizely.config.mjs --dryRun"
   },
   "dependencies": {
-    "@episerver/cms-cli": "workspace:*",
-    "@episerver/cms-sdk": "workspace:*",
+    "@optimizely/cms-cli": "workspace:*",
+    "@optimizely/cms-sdk": "workspace:*",
     "react": "^19.0.0"
   },
   "keywords": [],

__test__/cli-test/content-types/with-regex.ts

@@ -1,4 +1,4 @@
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 
 export const contentTypeWithRegexProperty = contentType({
   key: 'CT_with_regex_property',

__test__/cli-test/package.json

@@ -8,8 +8,8 @@
     "test:manual": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@episerver/cms-sdk": "workspace:*",
-    "@episerver/cms-cli": "workspace:*"
+    "@optimizely/cms-sdk": "workspace:*",
+    "@optimizely/cms-cli": "workspace:*"
   },
   "keywords": [],
   "author": "",

__test__/test-website/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@episerver/cms-cli": "workspace:*",
-    "@episerver/cms-sdk": "workspace:*",
+    "@optimizely/cms-cli": "workspace:*",
+    "@optimizely/cms-sdk": "workspace:*",
     "next": "15.4.5"
   },
   "devDependencies": {

__test__/test-website/src/app/all/[...slug]/layout.tsx

@@ -17,8 +17,8 @@ import {
 import {
   initContentTypeRegistry,
   initDisplayTemplateRegistry,
-} from '@episerver/cms-sdk';
-import { initReactComponentRegistry } from '@episerver/cms-sdk/react/server';
+} from '@optimizely/cms-sdk';
+import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
 
 initContentTypeRegistry([ct1, ct2, ct3]);
 initDisplayTemplateRegistry([dt1, dt2, dt3]);

__test__/test-website/src/app/all/[...slug]/page.tsx

@@ -1,5 +1,5 @@
-import { GraphClient } from '@episerver/cms-sdk';
-import { OptimizelyComponent } from '@episerver/cms-sdk/react/server';
+import { GraphClient } from '@optimizely/cms-sdk';
+import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
 import React from 'react';
 
 type Props = {

__test__/test-website/src/app/en/[...slug]/page.tsx

@@ -1,5 +1,5 @@
-import { GraphClient, GraphErrors } from '@episerver/cms-sdk';
-import { OptimizelyComponent } from '@episerver/cms-sdk/react/server';
+import { GraphClient, GraphErrors } from '@optimizely/cms-sdk';
+import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
 import React from 'react';
 
 type Props = {

__test__/test-website/src/app/en/layout.tsx

@@ -17,8 +17,8 @@ import {
 import {
   initContentTypeRegistry,
   initDisplayTemplateRegistry,
-} from '@episerver/cms-sdk';
-import { initReactComponentRegistry } from '@episerver/cms-sdk/react/server';
+} from '@optimizely/cms-sdk';
+import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
 
 initContentTypeRegistry([ct1, ct2, ct3]);
 initDisplayTemplateRegistry([dt1, dt2, dt3]);

__test__/test-website/src/app/missing-content-types/page.tsx

@@ -3,7 +3,7 @@ import {
   ct5,
   notSynced,
 } from '@/components/missing-content-types/not-synced';
-import { GraphClient, initContentTypeRegistry } from '@episerver/cms-sdk';
+import { GraphClient, initContentTypeRegistry } from '@optimizely/cms-sdk';
 import React from 'react';
 
 initContentTypeRegistry([ct4, ct5, notSynced]);

__test__/test-website/src/app/preview/page.tsx

@@ -1,6 +1,6 @@
-import { GraphClient, type PreviewParams } from '@episerver/cms-sdk';
-import { OptimizelyComponent } from '@episerver/cms-sdk/react/server';
-import { PreviewComponent } from '@episerver/cms-sdk/react/client';
+import { GraphClient, type PreviewParams } from '@optimizely/cms-sdk';
+import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
+import { PreviewComponent } from '@optimizely/cms-sdk/react/client';
 import Script from 'next/script';
 
 type Props = {

__test__/test-website/src/components/missing-content-types/not-included-in-registry.tsx

@@ -1,4 +1,4 @@
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 
 // This content type IS synced to the CMS but is not included in the Registry (via initContentType)
 export const notInRegistry = contentType({

__test__/test-website/src/components/missing-content-types/not-synced.tsx

@@ -1,5 +1,5 @@
 // The content types in this file ARE NOT synced to the CMS
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 import { notInRegistry } from './not-included-in-registry';
 
 export const notSynced = contentType({

__test__/test-website/src/components/missing-content-types/referencing.tsx

@@ -1,4 +1,4 @@
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 
 // This content type IS synced to the CMS.
 export const ct4 = contentType({

__test__/test-website/src/components/with-display-templates.tsx

@@ -3,12 +3,12 @@ import {
   contentType,
   displayTemplate,
   Infer,
-} from '@episerver/cms-sdk';
+} from '@optimizely/cms-sdk';
 import {
   OptimizelyExperience,
   OptimizelyGridSection,
   StructureContainerProps,
-} from '@episerver/cms-sdk/react/server';
+} from '@optimizely/cms-sdk/react/server';
 
 export const ct1 = contentType({
   key: 'test_c1',

docs/1-installation.md

@@ -5,29 +5,10 @@ This page explains how to install the Optimizely SDK and CLI into your project.
 - The SDK is a library with tools to model your content, fetch it and render it
 - The CLI is a terminal app to upload your models to the CMS via the CMS REST API
 
-## Step 1. Setup access to the GitHub package registry
-
-> [!NOTE]
-> The packages are at this moment published only in GitHub package registry.
-
-1. [Create a personal access token (classic)](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic) with at least `read:packages` scope
-
-   > [!NOTE]
-   > If you are a Optimizely employee, once you create the personal access token, you must [authorize it to access to Optimizely via SSO](https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on): click "Configure SSO" and choose Optimizely to give access
-
-2. In your `$HOME` directory (`~/` in Mac/Linux, `C:\Users\<username>` in Windows) create a file called `.npmrc` with the following content (replace `<YOUR TOKEN>` with your actual personal access token):
-
-   ```
-   @episerver:registry=https://npm.pkg.github.com
-   //npm.pkg.github.com/:_authToken=<YOUR TOKEN>
-   ```
-
-## Step 2. Test that you have access to the CLI
-
 You can use the CLI directly by running
 
 ```sh
-npx @episerver/cms-cli@latest
+npx @optimizely/cms-cli@latest
 ```
 
 You should see a command list
@@ -37,7 +18,7 @@ You should see a command list
 ### Install globally
 
 ```sh
-npm install @episerver/cms-cli -g
+npm install @optimizely/cms-cli -g
 ```
 
 You can test that it worked by running:
@@ -49,7 +30,7 @@ optimizely-cms-cli
 ### Install in a project
 
 ```sh
-npm install @episerver/cms-cli -D
+npm install @optimizely/cms-cli -D
 ```
 
 Then use it from the project:
@@ -60,7 +41,7 @@ npx optimizely-cms-cli
 
 </details>
 
-## Step 3. Initialize a npm project
+## Step 1. Initialize a npm project
 
 We recommend to initialize a Next.js project. Run:
 
@@ -74,10 +55,10 @@ And select the following prompts:
 - Would you like your code inside a `src/` directory? Yes
 - Would you like to use App Router? (recommended) Yes
 
-## Step 4. Install the SDK
+## Step 2. Install the SDK
 
 ```sh
-npm install @episerver/cms-sdk
+npm install @optimizely/cms-sdk
 ```
 
 ## Next steps

docs/2-setup.md

@@ -33,7 +33,7 @@ OPTIMIZELY_CMS_CLIENT_SECRET=<the client secret>
 Use the command to check that the connection is correct:
 
 ```
-npx @episerver/cms-cli@latest login
+npx @optimizely/cms-cli@latest login
 ```
 
 ## Next steps

docs/3-modelling.md

@@ -25,7 +25,7 @@ Your project structure will look like this:
 Fill `Article.tsx` with the following content:
 
 ```ts
-import { contentType } from '@episerver/cms-sdk';
+import { contentType } from '@optimizely/cms-sdk';
 
 export const ArticleContentType = contentType({
   key: 'Article',
@@ -44,7 +44,7 @@ export const ArticleContentType = contentType({
 Fill `optimizely.config.mjs` with the following content
 
 ```js
-import { buildConfig } from '@episerver/cms-sdk';
+import { buildConfig } from '@optimizely/cms-sdk';
 
 export default buildConfig({
   components: ['./src/components/**/*.tsx'],
@@ -56,7 +56,7 @@ export default buildConfig({
 Run the following command:
 
 ```sh
-npx @episerver/cms-cli@latest config push optimizely.config.mjs
+npx @optimizely/cms-cli@latest config push optimizely.config.mjs
 ```
 
 ## Next steps

docs/5-fetching.md

@@ -18,7 +18,7 @@ Locate the file `src/app/layout.tsx` or create it if it doesn't exist. Put the f
 
 ```tsx
 import { ArticleContentType } from '@/components/Article';
-import { initContentTypeRegistry } from '@episerver/cms-sdk';
+import { initContentTypeRegistry } from '@optimizely/cms-sdk';
 
 initContentTypeRegistry([ArticleContentType]);
 
@@ -57,7 +57,7 @@ Create a file `src/app/[...slug]/page.tsx`. Your file structure should look like
 Put the following content in `page.tsx`
 
 ```tsx
-import { GraphClient } from '@episerver/cms-sdk';
+import { GraphClient } from '@optimizely/cms-sdk';
 import React from 'react';
 
 type Props = {

docs/6-rendering-react.md

@@ -27,7 +27,7 @@ export default function Article({ opti }: Props) {
 The entire file should look like this:
 
 ```tsx
-import { contentType, Infer } from '@episerver/cms-sdk';
+import { contentType, Infer } from '@optimizely/cms-sdk';
 
 export const ArticleContentType = contentType({
   key: 'Article',
@@ -72,8 +72,8 @@ The entire `layout.tsx` should look like this:
 
 ```tsx
 import Article, { ArticleContentType } from '@/components/Article';
-import { initContentTypeRegistry } from '@episerver/cms-sdk';
-import { initReactComponentRegistry } from '@episerver/cms-sdk/react/server';
+import { initContentTypeRegistry } from '@optimizely/cms-sdk';
+import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
 
 initContentTypeRegistry([ArticleContentType]);
 initReactComponentRegistry({
@@ -107,8 +107,8 @@ Open `src/app/[...slug]/page.tsx` file and replace the last line inside the `Pag
 Your entire file should look like this:
 
 ```tsx
-import { GraphClient } from '@episerver/cms-sdk';
-import { OptimizelyComponent } from '@episerver/cms-sdk/react/server';
+import { GraphClient } from '@optimizely/cms-sdk';
+import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
 import React from 'react';
 
 type Props = {

package.json

@@ -11,7 +11,7 @@
     "build": "pnpm --filter \"./packages/**\" build",
     "clean:all": "pnpm -r clean",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "publish:all": "pnpm publish -r --no-git-checks"
+    "publish:all": "pnpm --filter \"./packages/**\" publish --access public --no-git-checks"
   },
   "packageManager": "[email protected]+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6",
   "devDependencies": {