@prakash.gurung/commerce-newsletter 1.0.0

package/.changeset/README.md

@@ -0,0 +1,21 @@
+# Changesets
+
+This folder stores release intent files for `dropin-template`.
+
+## Create a changeset
+
+```bash
+npm run changeset
+```
+
+## Check pending release status
+
+```bash
+npm run changeset:status
+```
+
+## Apply version/changelog updates locally
+
+```bash
+npm run changeset:version
+```

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.1.3/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.elsie.js

@@ -0,0 +1,33 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+module.exports = {
+  name: 'Newsletter',
+  api: {
+    root: './src/api',
+    importAliasRoot: '@/newsletter/api',
+  },
+  components: [
+    {
+      id: 'Components',
+      root: './src/components',
+      importAliasRoot: '@/newsletter/components',
+      cssPrefix: 'newsletter',
+      default: true,
+    },
+  ],
+  containers: {
+    root: './src/containers',
+    importAliasRoot: '@/newsletter/containers',
+  },
+  schema: {
+    endpoint: process.env.ENDPOINT,
+    headers: {}
+  }
+};

package/.env

@@ -0,0 +1 @@
+ENDPOINT="https://na1-sandbox.api.commerce.adobe.com/4XR4RKXgJjQXaxUCMC6TN3/graphql"

package/.eslintrc.js

@@ -0,0 +1,3 @@
+const baseConfig = require('@adobe-commerce/elsie/config/eslint');
+
+module.exports = { ...baseConfig };

package/.github/.metadata.json

@@ -0,0 +1,8 @@
+{
+  "templateVersion": "0.1",
+  "product": {
+    "name": "Drop-in Template",
+    "description": "Starter template for building Adobe Commerce DropIns (composable components)."
+  },
+  "productionCodeBranches": ["main"]
+}

package/.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# All changes require approval from a guardians team member before merging.
+* @adobe-commerce/guardians

package/.github/workflows/pr-build-windows.yaml

@@ -0,0 +1,26 @@
+name: 'Run Build Windows'
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  run-build-windows:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Generate config
+        run: npx elsie generate config --name TestDropin
+
+      - name: Run build
+        run: npm run build

package/.github/workflows/pr-build.yaml

@@ -0,0 +1,26 @@
+name: 'Run Build'
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  run-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Generate config
+        run: npx elsie generate config --name TestDropin
+
+      - name: Run build
+        run: npm run build

package/.github/workflows/pr-check-changeset.yaml

@@ -0,0 +1,26 @@
+name: Check Changeset
+
+on:
+  pull_request:
+    types: [opened, ready_for_review, reopened, synchronize, labeled, unlabeled]
+
+jobs:
+  check-changeset:
+    runs-on: ubuntu-latest
+    if: |
+      !github.event.pull_request.draft &&
+      !contains(github.event.pull_request.labels.*.name, 'skip-changeset')
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Check for changeset
+        run: npx changeset status --since=origin/main

package/.github/workflows/pr-graphql-validation.yaml

@@ -0,0 +1,72 @@
+name: 'GraphQL Validation'
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  validate-graphql:
+    runs-on: ubuntu-latest
+
+    env:
+      DEFAULT_ENDPOINTS: >-
+        https://mcstaging.aemshop.net/graphql,
+        https://na1-sandbox.api.commerce.adobe.com/LwndYQs37CvkUQk9WEmNkz/graphql
+      SOURCE_PATHS: ./src
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Extract GraphQL endpoints from PR description
+        id: endpoints
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const pr = await github.rest.pulls.get({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: context.payload.pull_request.number,
+            });
+            const body = pr.data.body || '';
+            const matches = [...body.matchAll(/GraphQL Endpoint:\s*(https?:\/\/[^ ]+\/graphql)/gi)];
+            const endpoints = matches.map(m => m[1]).join(',');
+            if (endpoints) {
+              core.info(`Found endpoints in PR: ${endpoints}`);
+              core.setOutput('endpoints', endpoints);
+            } else {
+              core.info('No endpoints found in PR – will use default or env.');
+              core.setOutput('endpoints', '');
+            }
+      - name: Determine final endpoints list
+        id: final-endpoints
+        run: |
+          ENDPOINTS_INPUT="${{ steps.endpoints.outputs.endpoints }}"
+          if [ -n "$ENDPOINTS_INPUT" ]; then
+            echo "Using endpoints from PR description."
+            echo "endpoints=$ENDPOINTS_INPUT" >> "$GITHUB_OUTPUT"
+          elif [ -n "$GRAPHQL_ENDPOINTS" ]; then
+            echo "Using endpoints from GRAPHQL_ENDPOINTS env."
+            echo "endpoints=$GRAPHQL_ENDPOINTS" >> "$GITHUB_OUTPUT"
+          else
+            echo "Using default endpoints."
+            echo "endpoints=${DEFAULT_ENDPOINTS}" >> "$GITHUB_OUTPUT"
+          fi
+      - name: Run GraphQL validation
+        run: |
+          IFS=',' read -ra ENDPOINT_ARRAY <<< "${{ steps.final-endpoints.outputs.endpoints }}"
+          ENDPOINT_FLAGS=""
+          for url in "${ENDPOINT_ARRAY[@]}"; do
+            CLEANED_URL=$(echo "$url" | xargs)
+            ENDPOINT_FLAGS="$ENDPOINT_FLAGS -e=$CLEANED_URL"
+          done
+          echo "Running: npx elsie gql validate -s=${{ env.SOURCE_PATHS }} $ENDPOINT_FLAGS"
+          npx elsie gql validate -s=${{ env.SOURCE_PATHS }} $ENDPOINT_FLAGS

package/.github/workflows/release.yaml

@@ -0,0 +1,80 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Configure git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Check for changesets
+        id: check
+        run: |
+          count=$(find .changeset -name "*.md" ! -name "README.md" | wc -l)
+          if [ "$count" -gt 0 ]; then
+            echo "has_changes=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "has_changes=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Run version command
+        if: steps.check.outputs.has_changes == 'true'
+        run: npx changeset version
+
+      - name: Update lockfile
+        if: steps.check.outputs.has_changes == 'true'
+        run: npm install --package-lock-only
+
+      - name: Create or update release PR
+        if: steps.check.outputs.has_changes == 'true'
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          BRANCH="changeset-release/main"
+          git checkout -b "$BRANCH"
+          git add -A
+          git commit -m "chore: bump version"
+          git push origin "$BRANCH" --force
+          gh pr create \
+            --title "chore: bump version" \
+            --body "Version bump from pending changesets." \
+            --base main \
+            --head "$BRANCH" \
+            --label "skip-changeset" \
+          || gh pr edit "$BRANCH" --title "chore: bump version" --add-label "skip-changeset"
+
+      - name: Tag release
+        if: steps.check.outputs.has_changes == 'false'
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          if git tag | grep -q "^v$VERSION$"; then
+            echo "Tag v$VERSION already exists, skipping."
+          else
+            NOTES=$(awk "/^## $VERSION/{found=1; next} found && /^## /{exit} found{print}" CHANGELOG.md)
+            git tag -a "v$VERSION" -m "$NOTES"
+            git push --tags
+          fi

package/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+coverage
+/dist
+/*.log
+.DS_Store
+.env
+.idea

package/.storybook/main.js

@@ -0,0 +1,21 @@
+import { name } from '../.elsie';
+
+export const stories = [
+  {
+    directory: '../src',
+    titlePrefix: name,
+  },
+];
+
+export const framework = '@storybook/preact-webpack5';
+
+export const addons = [
+  '@storybook/addon-essentials',
+  '@storybook/addon-a11y',
+  '@storybook/addon-interactions',
+  '@storybook/addon-coverage',
+  '@adobe-commerce/elsie/config/storybook/addon',
+  '@adobe-commerce/elsie/storybook-stories', // core stories
+];
+
+export const staticDirs = ['./public'];

package/.storybook/preview.js

@@ -0,0 +1,81 @@
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
+import { initializers } from '@adobe-commerce/elsie/lib';
+import { events } from '@adobe-commerce/event-bus';
+import { Provider } from '../src/render/Provider';
+import { initialize as pkg, setEndpoint } from '../src/api';
+
+// Initialize GraphQl Client
+setEndpoint(process.env.ENDPOINT);
+
+// Enable events logger
+events.enableLogger(true);
+
+// Initialize
+initializers.register(pkg);
+
+window.addEventListener('load', initializers.mount);
+
+export const decorators = [
+  (Story) => {
+    return (
+      <Provider>
+        <Story />
+      </Provider>
+    );
+  },
+];
+
+export const parameters = {
+  docs: {
+    container: (props) => {
+      return (
+        <Provider>
+          <DocsContainer {...props} />
+        </Provider>
+      );
+    },
+    page: DocsPage,
+  },
+  options: {
+    storySort: {
+      order: [
+        '*',
+        ['Getting Started', 'API', 'Containers', 'Components', '*'],
+        'Base',
+        [
+          'Welcome',
+          'Quick start',
+          'CLI usage',
+          'Foundations',
+          [
+            'Design tokens',
+            [
+              'Overview',
+              'Colors',
+              'Typography',
+              'Spacing',
+              'Shape styles',
+              '*',
+            ],
+            '*',
+          ],
+          'Components',
+          ['Overview', '*'],
+          'API',
+          ['Initializer', 'Render', 'Event Bus', '*'],
+          'Host examples',
+          ['Html host', 'React host', 'Vue host', '*'],
+          'Utilities',
+          [
+            'classList',
+            'debounce',
+            'deepmerge',
+            'getFormValues',
+            'getFormErrors',
+            '*',
+          ],
+        ],
+      ],
+    },
+  },
+};

package/.storybook/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 432" width="488" height="432">
+	<title>Adobe_Corporate_logo-svg</title>
+	<style>
+		tspan { white-space:pre }
+		.shp0 { fill: #fa0c00 } 
+	</style>
+	<g id="Layer">
+		<path id="Layer" class="shp0" d="M180.43 0L0 0L0 431.15L180.43 0Z" />
+		<path id="Layer" class="shp0" d="M307.37 0L487.57 0L487.57 431.15L307.37 0Z" />
+		<path id="Layer" class="shp0" d="M243.9 158.91L358.74 431.15L283.4 431.15L249.07 344.47L165.03 344.47L243.9 158.91Z" />
+	</g>
+	<g id="Layer">
+	</g>
+</svg>

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# dropin-template
+
+## 1.0.1
+
+### Patch Changes
+
+- 5a636b1: Fixes the Provider to merge user-provided langDefinitions with the drop-in's default definitions, enabling label/placeholder overrides via the initializer API.
+
+## 1.0.0
+
+### Major Changes
+
+- 26a336c: ## Initial stable release (1.0.0)
+
+  This release marks the first stable version of the dropin template, incorporating all foundational work since the initial scaffold.
+
+  ### Features
+
+  - **Environment variable support**: `elsie.js` and Storybook's `preview.js` now dynamically pick up environment variables at runtime
+  - **Codebase cleanup**: Removed unnecessary sandbox code to keep the template lean and focused
+  - **GraphQL schema validation**: Added a CI workflow that validates GraphQL operations on every pull request, including improved parsing of HTML fragments in PR descriptions and more specific PR description endpoint link format detection
+
+  ### Improvements
+
+  - Updated Node.js engine requirement to `^20.0.0 || ^22.0.0`
+  - Fixed and cleaned up `tsconfig.json` (removed `sourceMap` option)
+  - Upgraded all core SDK dependencies (`@adobe-commerce/elsie`, `@adobe-commerce/event-bus`, `@adobe-commerce/fetch-graphql`, `@adobe-commerce/storefront-design`, `@dropins/build-tools`) to their latest stable releases
+  - Updated README with comprehensive dropin documentation and prerequisites
+
+  ### CI/CD
+
+  - Added PR build workflows on Ubuntu and Windows (`pr-build.yaml`, `pr-build-windows.yaml`)
+  - Integrated Changesets for automated changelog generation and version management