@saasquatch/mint-components 2.2.0-6 → 2.2.0-8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.2.0-6",
+  "version": "2.2.0-8",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",

package/readme.md

@@ -4,7 +4,66 @@
 
 Mint components for the SaaSquatch content platform. Built with Stencil.
 
-# About Stencil
+## Contributing
+
+### Version Management with Changesets
+
+This project uses [Changesets](https://github.com/changesets/changesets) to manage versioning and changelogs.
+
+#### Adding a Changeset
+
+When you make changes that should be included in the next release, create a changeset:
+
+```bash
+npm run changeset
+```
+
+Follow the prompts to:
+
+1. Select the type of change (major, minor, or patch)
+2. Provide a summary of your changes
+
+This will create a new file in the `.changeset` directory that will be used to automatically update the version and changelog when the changes are released.
+
+#### Releasing a New Version
+
+When changesets are merged to the `master` branch, the mint-components release workflow will automatically:
+
+1. Create or update a "Version Packages" pull request that:
+   - Bumps the version in `package.json`
+   - Updates `package-lock.json`
+   - Updates `CHANGELOG.md` with all changeset summaries
+   - Removes the processed changeset files
+
+2. When you're ready to release, simply **merge the "Version Packages" PR** to `master`
+
+3. The workflow will then automatically:
+   - Publish the new version to npm
+   - Deploy the production Stencilbook site for mint-components
+   - Create a git tag for the release
+
+mint-components stable releases use the mint-specific **Mint Components Release** workflow (Changesets), and prereleases use the shared **Publish Package** workflow.
+
+**Local `npm publish` is blocked.** A `prepublishOnly` script in `package.json` aborts publishes that aren't running in CI (where `CI=true`). All publishes must go through the GitHub Actions workflows below.
+
+#### Manual Development Releases (Prereleases)
+
+For development and testing purposes, use the shared **Publish Package** GitHub Actions workflow:
+
+1. Run the workflow from the branch you want to publish.
+2. Set `package` to `mint-components`.
+3. Set `increment-type` to `prerelease`. The workflow rejects `patch` / `minor` / `major` for mint-components — stable releases must go through the **Mint Components Release** (Changesets) workflow.
+
+The workflow will:
+
+- Compute the next semver from `package.json` (e.g. `2.1.8` → `2.1.9-0` for `prerelease`)
+- Build mint-components automatically via the `prepack` lifecycle script
+- Publish to npm with `--access public --provenance`, tagged `next` for prereleases or `latest` for stable
+- Commit the version bump and create a signed `@saasquatch/mint-components@<version>` git tag via `saasquatch/git-commit-action`
+
+Stable releases should still flow through `master` via the Changesets "Version Packages" PR. When the next stable Changesets release runs, `changeset version` will compute the next stable version from changesets and overwrite any manual prerelease version in `package.json` — that is intentional.
+
+## About Stencil
 
 Stencil is a compiler for building fast web apps using Web Components.
 

package/shoelace/assets/icons/twitter-x.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" fill="currentColor"/>
+<path d="M8.86754 7.23214L12.5378 3H11.6681L8.48117 6.67471L5.93579 3H3L6.84911 8.55681L3 12.9949H3.86979L7.23525 9.11425L9.92336 12.9949H12.8592L8.86732 7.23214H8.86754ZM7.67624 8.60577L7.28624 8.05244L4.18319 3.64951H5.51914L8.02334 7.20281L8.41333 7.75615L11.6685 12.3749H10.3325L7.67624 8.60598V8.60577Z" fill="white"/>
+</svg>

package/dist/cjs/utils-15ce04e3.js

@@ -1,93 +0,0 @@
-'use strict';
-
-const index = require('./index-8277cbb3.js');
-const global = require('./global-b7b1b8fe.js');
-const JSS = require('./JSS-8503a151.js');
-
-const style = {
-  Container: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "35px",
-  },
-  HeaderContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "10px",
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-const LoadingView = () => {
-  return (index.h("div", { class: sheet.classes.Container },
-    index.h("style", { type: "text/css" }, styleString),
-    index.h("sqm-skeleton", { width: "45%", height: "40px !important" }),
-    index.h("div", { class: sheet.classes.HeaderContainer },
-      index.h("sqm-skeleton", { width: "15%" }),
-      index.h("sqm-skeleton", { width: "25%", height: "30px !important" })),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "75%", height: "35px" }),
-    index.h("sqm-skeleton", { width: "15%" }),
-    index.h("sqm-skeleton", { width: "80px", height: "30px !important" })));
-};
-
-function validTaxDocument(requiredType) {
-  const validTypes = ["W9", "W8BENE", "W8BEN"];
-  if (validTypes.includes(requiredType))
-    return true;
-  return false;
-}
-const objectIsFull = (obj) => {
-  return !Object.keys(obj).find((k) => obj[k] == undefined);
-};
-const taxTypeToName = (taxType) => {
-  switch (taxType) {
-    case "W9":
-      return "W-9";
-    case "W8BEN":
-    case "W8BENE":
-      return "W-8";
-    default:
-      return "";
-  }
-};
-function validateBillingField(regex, value) {
-  const trimmed = value.trim();
-  const idx = trimmed.search(regex);
-  return idx > -1;
-}
-const formatErrorMessage = (fieldName, errorMessage) => {
-  return global.intl.formatMessage({
-    id: fieldName,
-    defaultMessage: errorMessage,
-  }, {
-    fieldName,
-  });
-};
-function getCountryObj({ countryCode, locale, }) {
-  // @ts-ignore DisplayNames not in Intl type
-  const displayName = new Intl.DisplayNames([locale], {
-    type: "region",
-  }).of(countryCode);
-  return {
-    countryCode,
-    displayName,
-  };
-}
-
-exports.LoadingView = LoadingView;
-exports.formatErrorMessage = formatErrorMessage;
-exports.getCountryObj = getCountryObj;
-exports.objectIsFull = objectIsFull;
-exports.taxTypeToName = taxTypeToName;
-exports.validTaxDocument = validTaxDocument;
-exports.validateBillingField = validateBillingField;

package/dist/esm/utils-17daa419.js

@@ -1,85 +0,0 @@
-import { h } from './index-38ad4957.js';
-import { i as intl } from './global-75e96214.js';
-import { c as createStyleSheet } from './JSS-67b5cff8.js';
-
-const style = {
-  Container: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "35px",
-  },
-  HeaderContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "10px",
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const LoadingView = () => {
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("sqm-skeleton", { width: "45%", height: "40px !important" }),
-    h("div", { class: sheet.classes.HeaderContainer },
-      h("sqm-skeleton", { width: "15%" }),
-      h("sqm-skeleton", { width: "25%", height: "30px !important" })),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "75%", height: "35px" }),
-    h("sqm-skeleton", { width: "15%" }),
-    h("sqm-skeleton", { width: "80px", height: "30px !important" })));
-};
-
-function validTaxDocument(requiredType) {
-  const validTypes = ["W9", "W8BENE", "W8BEN"];
-  if (validTypes.includes(requiredType))
-    return true;
-  return false;
-}
-const objectIsFull = (obj) => {
-  return !Object.keys(obj).find((k) => obj[k] == undefined);
-};
-const taxTypeToName = (taxType) => {
-  switch (taxType) {
-    case "W9":
-      return "W-9";
-    case "W8BEN":
-    case "W8BENE":
-      return "W-8";
-    default:
-      return "";
-  }
-};
-function validateBillingField(regex, value) {
-  const trimmed = value.trim();
-  const idx = trimmed.search(regex);
-  return idx > -1;
-}
-const formatErrorMessage = (fieldName, errorMessage) => {
-  return intl.formatMessage({
-    id: fieldName,
-    defaultMessage: errorMessage,
-  }, {
-    fieldName,
-  });
-};
-function getCountryObj({ countryCode, locale, }) {
-  // @ts-ignore DisplayNames not in Intl type
-  const displayName = new Intl.DisplayNames([locale], {
-    type: "region",
-  }).of(countryCode);
-  return {
-    countryCode,
-    displayName,
-  };
-}
-
-export { LoadingView as L, validTaxDocument as a, formatErrorMessage as f, getCountryObj as g, objectIsFull as o, taxTypeToName as t, validateBillingField as v };