@abraracs/better-shopify-wc-mcp 1.0.0

package/docs/tooltip.md

@@ -0,0 +1,130 @@
+---
+title: Tooltip
+description: >-
+  Displays helpful information in a small overlay when users hover or focus on
+  an element. Use to provide additional context without cluttering the
+  interface.
+api_name: app-home
+source_url:
+  html: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/tooltip
+  md: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/tooltip.md
+---
+
+# Tooltip
+
+Displays helpful information in a small overlay when users hover or focus on an element. Use to provide additional context without cluttering the interface.
+
+## Slots
+
+* children
+
+  HTMLElement
+
+  The content of the Tooltip.
+
+  Only accepts `Text`, `Paragraph` components, and raw `textContent`.
+
+## Slots
+
+* children
+
+  HTMLElement
+
+  The content of the Tooltip.
+
+  Only accepts `Text`, `Paragraph` components, and raw `textContent`.
+
+Examples
+
+### Examples
+
+* #### Code
+
+  ##### jsx
+
+  ```jsx
+  <>
+    <s-tooltip id="bold-tooltip">Bold</s-tooltip>
+    <s-button interestFor="bold-tooltip" accessibilityLabel="Bold">
+      B
+    </s-button>
+  </>
+  ```
+
+  ##### html
+
+  ```html
+  <s-tooltip id="bold-tooltip">Bold</s-tooltip>
+  <s-button interestFor="bold-tooltip" accessibilityLabel="Bold">B</s-button>
+  ```
+
+* #### Basic Usage
+
+  ##### Description
+
+  Demonstrates a simple tooltip that provides additional context for a text element when hovered or focused.
+
+  ##### jsx
+
+  ```jsx
+  <>
+    <s-tooltip id="shipping-status-tooltip">
+      <s-text>This order has shipping labels.</s-text>
+    </s-tooltip>
+    <s-text interestFor="shipping-status-tooltip">Shipping status</s-text>
+  </>
+  ```
+
+  ##### html
+
+  ```html
+  <s-tooltip id="shipping-status-tooltip">
+    <s-text>This order has shipping labels.</s-text>
+  </s-tooltip>
+  <s-text interestFor="shipping-status-tooltip">Shipping status</s-text>
+  ```
+
+* #### With Icon Button
+
+  ##### Description
+
+  Shows how to add a tooltip to an icon button, providing a clear explanation of the button's action when hovered.
+
+  ##### jsx
+
+  ```jsx
+  <>
+    <s-tooltip id="delete-button-tooltip">
+      <s-text>Delete item permanently</s-text>
+    </s-tooltip>
+    <s-button interestFor="delete-button-tooltip">
+      <s-icon tone="neutral" type="info" />
+    </s-button>
+  </>
+  ```
+
+  ##### html
+
+  ```html
+  <s-tooltip id="delete-button-tooltip">
+    <s-text>Delete item permanently</s-text>
+  </s-tooltip>
+  <s-button interestFor="delete-button-tooltip">
+    <s-icon tone="neutral" type="info"></s-icon>
+  </s-button>
+  ```
+
+## Usage
+
+Tooltips only render on devices with a pointer and do not display on mobile devices.
+
+## Best practices
+
+* Use for additional, non-essential context only
+* Provide for icon-only buttons or buttons with keyboard shortcuts
+* Keep content concise and in sentence case
+* Don't use for critical information, errors, or blocking messages
+* Don't contain any links or buttons
+* Use sparingly. If you need many tooltips, clarify the design and language instead

package/docs/unorderedlist.md

@@ -0,0 +1,135 @@
+---
+title: UnorderedList
+description: >-
+  Displays a bulleted list of related items. Use to present collections of items
+  or options where the sequence isn’t critical.
+api_name: app-home
+source_url:
+  html: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/structure/unorderedlist
+  md: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/structure/unorderedlist.md
+---
+
+# Unordered​List
+
+Displays a bulleted list of related items. Use to present collections of items or options where the sequence isn’t critical.
+
+## Slots
+
+* children
+
+  HTMLElement
+
+  The items of the UnorderedList.
+
+  Only ListItems are accepted.
+
+## ListItem
+
+Represents a single item within an unordered or ordered list. Use only as a child of `s-unordered-list` or `s-ordered-list` components.
+
+## Slots
+
+* children
+
+  HTMLElement
+
+  The content of the ListItem.
+
+Examples
+
+### Examples
+
+* #### Code
+
+  ##### jsx
+
+  ```jsx
+  <s-unordered-list>
+    <s-list-item>Red shirt</s-list-item>
+    <s-list-item>Green shirt</s-list-item>
+    <s-list-item>Blue shirt</s-list-item>
+  </s-unordered-list>
+  ```
+
+  ##### html
+
+  ```html
+  <s-unordered-list>
+    <s-list-item>Red shirt</s-list-item>
+    <s-list-item>Green shirt</s-list-item>
+    <s-list-item>Blue shirt</s-list-item>
+  </s-unordered-list>
+  ```
+
+* #### Unordered list with nested items
+
+  ##### Description
+
+  A standard unordered list with nested items demonstrating hierarchical content structure.
+
+  ##### jsx
+
+  ```jsx
+  <s-stack gap="base">
+    <s-box borderWidth="small-100" borderRadius="base" padding="base">
+      <s-unordered-list>
+        <s-list-item>Configure payment settings</s-list-item>
+        <s-list-item>
+          Set up shipping options
+          <s-unordered-list>
+            <s-list-item>Domestic shipping rates</s-list-item>
+            <s-list-item>International shipping zones</s-list-item>
+          </s-unordered-list>
+        </s-list-item>
+        <s-list-item>Add product descriptions</s-list-item>
+      </s-unordered-list>
+    </s-box>
+
+    <s-box borderWidth="small-100" borderRadius="base" padding="base">
+      <s-unordered-list>
+        <s-list-item>Enable online payments</s-list-item>
+        <s-list-item>Set up shipping rates</s-list-item>
+        <s-list-item>Configure tax settings</s-list-item>
+        <s-list-item>Add product descriptions</s-list-item>
+      </s-unordered-list>
+    </s-box>
+  </s-stack>
+  ```
+
+  ##### html
+
+  ```html
+  <s-stack gap="base">
+    <s-box borderWidth="small-100" borderRadius="base" padding="base">
+      <s-unordered-list>
+        <s-list-item>Configure payment settings</s-list-item>
+        <s-list-item>
+          Set up shipping options
+          <s-unordered-list>
+            <s-list-item>Domestic shipping rates</s-list-item>
+            <s-list-item>International shipping zones</s-list-item>
+          </s-unordered-list>
+        </s-list-item>
+        <s-list-item>Add product descriptions</s-list-item>
+      </s-unordered-list>
+    </s-box>
+
+    <s-box borderWidth="small-100" borderRadius="base" padding="base">
+      <s-unordered-list>
+        <s-list-item>Enable online payments</s-list-item>
+        <s-list-item>Set up shipping rates</s-list-item>
+        <s-list-item>Configure tax settings</s-list-item>
+        <s-list-item>Add product descriptions</s-list-item>
+      </s-unordered-list>
+    </s-box>
+  </s-stack>
+  ```
+
+## Best practices
+
+* Use to break up related content and improve scannability
+* Phrase items consistently (start each with a noun or verb)
+* Start each item with a capital letter
+* Don't use commas or semicolons at the end of lines

package/docs/urlfield.md

@@ -0,0 +1,314 @@
+---
+title: URLField
+description: Collect URLs from users with built-in formatting and validation.
+api_name: app-home
+source_url:
+  html: 'https://shopify.dev/docs/api/app-home/polaris-web-components/forms/urlfield'
+  md: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/forms/urlfield.md
+---
+
+# URLField
+
+Collect URLs from users with built-in formatting and validation.
+
+## URLField
+
+* autocomplete
+
+  "on" | "off" | \`section-${string} url\` | \`section-${string} photo\` | \`section-${string} impp\` | \`section-${string} home impp\` | \`section-${string} mobile impp\` | \`section-${string} fax impp\` | \`section-${string} pager impp\` | "shipping url" | "shipping photo" | "shipping impp" | "shipping home impp" | "shipping mobile impp" | "shipping fax impp" | "shipping pager impp" | "billing url" | "billing photo" | "billing impp" | "billing home impp" | "billing mobile impp" | "billing fax impp" | "billing pager impp" | \`section-${string} shipping url\` | \`section-${string} shipping photo\` | \`section-${string} shipping impp\` | \`section-${string} shipping home impp\` | \`section-${string} shipping mobile impp\` | \`section-${string} shipping fax impp\` | \`section-${string} shipping pager impp\` | \`section-${string} billing url\` | \`section-${string} billing photo\` | \`section-${string} billing impp\` | \`section-${string} billing home impp\` | \`section-${string} billing mobile impp\` | \`section-${string} billing fax impp\` | \`section-${string} billing pager impp\` | URLAutocompleteField
+
+  Default: 'on' for everything else
+
+  A hint as to the intended content of the field.
+
+  When set to `on` (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.
+
+  When set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.
+
+  Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.
+
+* defaultValue
+
+  string
+
+  The default value for the field.
+
+* details
+
+  string
+
+  Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.
+
+  This will also be exposed to screen reader users.
+
+* disabled
+
+  boolean
+
+  Default: false
+
+  Disables the field, disallowing any interaction.
+
+* error
+
+  string
+
+  Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
+
+* id
+
+  string
+
+  A unique identifier for the element.
+
+* label
+
+  string
+
+  Content to use as the field label.
+
+* labelAccessibilityVisibility
+
+  "visible" | "exclusive"
+
+  Default: 'visible'
+
+  Changes the visibility of the component's label.
+
+  * `visible`: the label is visible to all users.
+  * `exclusive`: the label is visually hidden but remains in the accessibility tree.
+
+* maxLength
+
+  number
+
+  Default: Infinity
+
+  Specifies the maximum number of characters allowed.
+
+* minLength
+
+  number
+
+  Default: 0
+
+  Specifies the min number of characters allowed.
+
+* name
+
+  string
+
+  An identifier for the field that is unique within the nearest containing form.
+
+* placeholder
+
+  string
+
+  A short hint that describes the expected value of the field.
+
+* readOnly
+
+  boolean
+
+  Default: false
+
+  The field cannot be edited by the user. It is focusable will be announced by screen readers.
+
+* required
+
+  boolean
+
+  Default: false
+
+  Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the `error` property.
+
+* value
+
+  string
+
+  The current value for the field. If omitted, the field will be empty.
+
+### URLAutocompleteField
+
+```ts
+'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'
+```
+
+## Events
+
+Learn more about [registering events](https://shopify.dev/docs/api/app-home/using-polaris-components#event-handling).
+
+* blur
+
+  CallbackEventListener<'input'>
+
+* change
+
+  CallbackEventListener<'input'>
+
+* focus
+
+  CallbackEventListener<'input'>
+
+* input
+
+  CallbackEventListener<'input'>
+
+### CallbackEventListener
+
+```ts
+(EventListener & {
+      (event: CallbackEvent<T>): void;
+    }) | null
+```
+
+### CallbackEvent
+
+```ts
+Event & {
+  currentTarget: HTMLElementTagNameMap[T];
+}
+```
+
+Examples
+
+### Examples
+
+* #### Code
+
+  ##### jsx
+
+  ```jsx
+  <s-url-field
+    label="Your website"
+    details="Join the partner ecosystem"
+    placeholder="https://shopify.com/partner"
+   />
+  ```
+
+  ##### html
+
+  ```html
+  <s-url-field
+    label="Your website"
+    details="Join the partner ecosystem"
+    placeholder="https://shopify.com/partner"
+  ></s-url-field>
+  ```
+
+* #### Basic usage
+
+  ##### Description
+
+  Demonstrates a simple URL input field with a label and placeholder, showing the minimal configuration needed for collecting a URL.
+
+  ##### jsx
+
+  ```jsx
+  <s-stack gap="base">
+    {/* Simple URL input */}
+    <s-url-field
+      label="Website URL"
+      placeholder="https://example.com"
+     />
+  </s-stack>
+  ```
+
+  ##### html
+
+  ```html
+  <s-stack gap="base">
+    <!-- Simple URL input -->
+    <s-url-field
+      label="Website URL"
+      placeholder="https://example.com"
+    ></s-url-field>
+  </s-stack>
+  ```
+
+* #### With validation
+
+  ##### Description
+
+  Shows a URL input field with built-in validation, including required status, minimum and maximum length constraints, and a custom error message for invalid inputs.
+
+  ##### jsx
+
+  ```jsx
+  <s-url-field
+    label="Company website"
+    required
+    minLength={10}
+    maxLength={200}
+    error="Please enter a valid website URL"
+    />
+  ```
+
+  ##### html
+
+  ```html
+  <s-url-field
+    label="Company website"
+    required
+    minLength="10"
+    maxLength="200"
+    error="Please enter a valid website URL"
+  ></s-url-field>
+  ```
+
+* #### With default value
+
+  ##### Description
+
+  Illustrates a URL field pre-populated with a default value, set to read-only mode to prevent user modifications.
+
+  ##### jsx
+
+  ```jsx
+  <s-stack gap="base">
+    <s-url-field
+      label="Profile URL"
+      defaultValue="https://shop.myshopify.com"
+      readOnly
+    />
+  </s-stack>
+  ```
+
+  ##### html
+
+  ```html
+  <s-stack gap="base">
+    <s-url-field
+      label="Profile URL"
+      value="https://shop.myshopify.com"
+      readOnly
+    ></s-url-field>
+  </s-stack>
+  ```
+
+* #### Disabled state
+
+  ##### Description
+
+  Shows a URL field in a disabled state, displaying a pre-filled URL that cannot be edited by the user.
+
+  ##### jsx
+
+  ```jsx
+  <s-url-field
+    label="Store URL"
+    value="https://your-store.myshopify.com"
+    disabled
+  />
+  ```
+
+  ##### html
+
+  ```html
+  <s-url-field
+    label="Store URL"
+    value="https://your-store.myshopify.com"
+    disabled
+  ></s-url-field>
+  ```

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@abraracs/better-shopify-wc-mcp",
+  "version": "1.0.0",
+  "description": "MCP server for Shopify Polaris web components - accurate attributes, no hallucinations, with workaround patterns",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "better-shopify-wc-mcp": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsx src/index.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "mcp",
+    "shopify",
+    "polaris",
+    "web-components",
+    "cursor",
+    "github-copilot",
+    "claude",
+    "ai"
+  ],
+  "author": "abraracs",
+  "license": "MIT",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "dist",
+    "docs"
+  ],
+  "engines": {
+    "node": ">=18"
+  }
+}