fixing selected variants image + making the media service deps optional

.cursorindexingignore

@@ -0,0 +1,3 @@
+
+# Don't index SpecStory auto-save files, but allow explicit context inclusion via @ references
+.specstory/**

.github/workflows/publish-package.yml

@@ -0,0 +1,37 @@
+name: Publish Package
+
+on:
+  workflow_dispatch:
+    inputs:
+      package_name:
+        description: "Package name to publish (e.g., stores)"
+        required: true
+        type: string
+        default: "stores"
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build headless components
+        run: yarn build:headless-components
+
+      - name: Publish to npm
+        run: |
+          cd packages/headless-components/${{ inputs.package_name }}
+          npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/sanity-check.yml

@@ -0,0 +1,26 @@
+name: Sanity Check
+
+on:
+  pull_request:
+    branches: ["**"]
+  push:
+    branches: ["main"]
+
+jobs:
+  sanity-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build headless components
+        run: yarn build:headless-components

.gitignore

@@ -29,3 +29,6 @@ yarn-error.log*
 out
 
 .turbo
+
+
+.specstory

.lintstagedrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  'yarn.lock': () => ['syncpack list-mismatches', 'yarn dedupe --check'],
+  "yarn.lock": () => ["yarn dedupe --check"],
 };

.nvmrc

@@ -0,0 +1 @@
+22.13.1

.syncpackrc.json

@@ -4,8 +4,7 @@
     {
       "label": "Use workspace protocol when developing local packages",
       "dependencies": ["$LOCAL"],
-      "dependencyTypes": ["dev", "prod"],
-      "pinVersion": "workspace:*"
+      "dependencyTypes": ["dev", "prod"]
     }
   ]
 }

CONTRIBUTING.md

@@ -0,0 +1,50 @@
+# Contributing to Headless Integrations
+
+Thank you for considering contributing to this project! Here are some guidelines and instructions to help you get started.
+
+## Getting Started
+
+- Fork the repository and clone it locally.
+- Install dependencies using `yarn install`.
+- Make your changes in a new branch.
+- Ensure all tests pass before submitting a pull request.
+
+## Publishing Packages
+
+This repository uses a GitHub Actions workflow to publish packages in `packages/headless-components` to npm. Only maintainers should publish new versions.
+
+### Steps to Publish a Package
+
+1. **Update the Version:**
+
+   - Bump the `version` field in the `package.json` of the package you want to publish (e.g., `stores`, `ecom`, or `bookings`).
+
+2. **Push Your Changes:**
+
+   - Commit and push the updated `package.json` to the `main` branch (or open a PR and merge it).
+
+3. **Trigger the Publish Workflow:**
+
+   - Go to the **Actions** tab in the GitHub repository.
+   - Select the **Publish Package** workflow from the list.
+   - Click **Run workflow**.
+   - Enter the package name you want to publish (e.g., `stores`, `ecom`, or `bookings`).
+   - Click **Run workflow** to start the publishing process.
+
+4. **NPM Token:**
+   - Ensure the repository has an `NPM_TOKEN` secret set up with publish permissions. This is required for the workflow to publish to npm.
+
+### Notes
+
+- Only packages without `"private": true` in their `package.json` can be published.
+- The workflow will build and publish the specified package to npm.
+- Make sure your changes are merged and the version is updated before publishing.
+
+## Code Style & Testing
+
+- Follow the existing code style.
+- Run tests with `yarn test` or the appropriate command for the package.
+
+## Need Help?
+
+If you have any questions, feel free to open an issue or ask in the discussions section.

examples/astro-components-demo/.gitignore

@@ -0,0 +1,30 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
+
+test-results
+playwright-report
+
+.wix
+

examples/astro-components-demo/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

examples/astro-components-demo/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

examples/astro-components-demo/README.md

@@ -0,0 +1,48 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

examples/astro-components-demo/astro.config.mjs

@@ -0,0 +1,23 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import wix from "@wix/astro";
+import cloudflare from "@astrojs/cloudflare";
+import tailwindcss from "@tailwindcss/vite";
+
+import react from "@astrojs/react";
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+
+  adapter: cloudflare(),
+
+  vite: {
+    plugins: [tailwindcss()]
+  },
+
+  integrations: [
+    react(),
+    wix(),
+  ]
+});

examples/astro-components-demo/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@wix/astro-components-demo",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "test": "playwright install && playwright test",
+    "deploy:preview": "wix edge deploy",
+    "deploy:prod": "wix edge deploy --prod --no-prod-confirm"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.3.0",
+    "@playwright/test": "^1.51.1",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@wix/astro": "^1.0.22",
+    "@wix/dashboard": "^1.3.39",
+    "@wix/headless-bookings": "^0.0.1",
+    "@wix/headless-ecom": "^0.0.8",
+    "@wix/headless-stores": "^0.0.20",
+    "@wix/services-manager-react": "^0.1.26",
+    "@wix/stores": "^1.0.498",
+    "astro": "^5.9.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@astrojs/cloudflare": "^12.5.4",
+    "@tailwindcss/vite": "^4.0.13",
+    "@wix/cli": "^1.1.95",
+    "@wix/cli-edge": "^1.1.74",
+    "tailwindcss": "^4.1.7"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

examples/astro-components-demo/playwright.config.js

@@ -0,0 +1,26 @@
+// @ts-check
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "list",
+
+  use: {
+    baseURL: "https://astro-react-demo-56olqgbv-org-headless7.wix-sites.dev/",
+    trace: "on-first-retry",
+    timeout: 30 * 1000,
+    expect: { timeout: 5000 },
+    navigationTimeout: 15 * 1000,
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});

examples/astro-components-demo/src/actions/index.ts

@@ -0,0 +1,9 @@
+import { customCheckoutActionFactory } from "@wix/headless-stores/astro/actions";
+
+export const server = {
+  buyTestProduct: customCheckoutActionFactory({
+    price: "321",
+    productName: "test",
+    priceDescription: "Very special price",
+  }),
+};

examples/astro-components-demo/src/components/App.css

@@ -0,0 +1,23 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}