@abraracs/better-shopify-wc-mcp 1.0.0

package/docs/page.md

@@ -0,0 +1,319 @@
+---
+title: Page
+description: ' Use `s-page` as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.'
+api_name: app-home
+source_url:
+  html: 'https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page'
+  md: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/structure/page.md
+---
+
+# Page
+
+Use `s-page` as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.
+
+## Properties
+
+Use as the outer wrapper of a page
+
+* heading
+
+  string
+
+  The main page heading
+
+* inlineSize
+
+  "small" | "base" | "large"
+
+  Default: 'base'
+
+  The inline size of the page
+
+  * `base` corresponds to a set default inline size
+  * `large` full width with whitespace
+
+## Slots
+
+* aside
+
+  HTMLElement
+
+  The content to display in the aside section of the page.
+
+  This slot is only rendered when `inlineSize` is "base".
+
+* breadcrumb-actions
+
+  HTMLElement
+
+  Navigations back actions for the page.
+
+  Only accepts `Link` components.
+
+* children
+
+  HTMLElement
+
+  The content of the Page.
+
+* primary-action
+
+  HTMLElement
+
+  The primary action for the page.
+
+  Only accepts a single `Button` component with a `variant` of `primary`.
+
+* secondary-actions
+
+  HTMLElement
+
+  Secondary actions for the page.
+
+  Only accepts `ButtonGroup` and `Button` components with a `variant` of `secondary` or `auto`.
+
+Examples
+
+### Examples
+
+* ####
+
+  ##### jsx
+
+  ```jsx
+  <s-page heading="Products">
+    <s-section>
+      <s-text>Hello World</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+  ##### html
+
+  ```html
+  <s-page heading="Products">
+    <s-section>
+      <s-text>Hello World</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+* #### Page with heading
+
+  ##### Description
+
+  Shows a page with a clear heading and descriptive text, illustrating how to use the page component with a title.
+
+  ##### jsx
+
+  ```jsx
+  <s-page heading="Product catalog" inlineSize="base">
+    <s-section>
+      <s-text>Manage your product catalog and inventory.</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+  ##### html
+
+  ```html
+  <s-page heading="Product catalog" inline-size="base">
+    <s-section>
+      <s-text>Manage your product catalog and inventory.</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+* #### Small inline size for focused content
+
+  ##### Description
+
+  Illustrates a page with a small inline size, ideal for focused, compact content like settings or forms with minimal information.
+
+  ##### jsx
+
+  ```jsx
+  <s-page heading="Store settings" inlineSize="small">
+    <s-section>
+      <s-stack gap="base">
+        <s-text>Configure your basic store preferences.</s-text>
+        <s-text-field label="Store name" />
+        <s-button variant="primary">Save</s-button>
+      </s-stack>
+    </s-section>
+  </s-page>
+  ```
+
+  ##### html
+
+  ```html
+  <s-page heading="Store settings" inline-size="small">
+    <s-section>
+      <s-stack gap="base">
+        <s-text>Configure your basic store preferences.</s-text>
+        <s-text-field label="Store name"></s-text-field>
+        <s-button variant="primary">Save</s-button>
+      </s-stack>
+    </s-section>
+  </s-page>
+  ```
+
+* #### Large inline size for wide content
+
+  ##### Description
+
+  Demonstrates a page with a large inline size, perfect for displaying broader content like analytics or dashboards with multiple information sections.
+
+  ##### jsx
+
+  ```jsx
+  <s-page heading="Store analytics" inlineSize="large">
+    <s-section>
+      <s-stack gap="base">
+        <s-text>Monitor your store performance across all channels.</s-text>
+        <s-grid>
+          <s-grid-item>
+            <s-box
+              padding="base"
+              background="base"
+              borderWidth="base"
+              borderColor="base"
+              borderRadius="base"
+            >
+              <s-heading>Sales</s-heading>
+              <s-text type="strong">$12,456</s-text>
+            </s-box>
+          </s-grid-item>
+          <s-grid-item>
+            <s-box
+              padding="base"
+              background="base"
+              borderWidth="base"
+              borderColor="base"
+              borderRadius="base"
+            >
+              <s-heading>Orders</s-heading>
+              <s-text type="strong">145</s-text>
+            </s-box>
+          </s-grid-item>
+        </s-grid>
+      </s-stack>
+    </s-section>
+  </s-page>
+  ```
+
+  ##### html
+
+  ```html
+  <s-page heading="Store analytics" inline-size="large">
+    <s-section>
+      <s-stack gap="base">
+        <s-text>Monitor your store performance across all channels.</s-text>
+        <s-grid>
+          <s-grid-item>
+            <s-box
+              padding="base"
+              background="base"
+              borderWidth="base"
+              borderColor="base"
+              borderRadius="base"
+            >
+              <s-heading>Sales</s-heading>
+              <s-text type="strong">$12,456</s-text>
+            </s-box>
+          </s-grid-item>
+          <s-grid-item>
+            <s-box
+              padding="base"
+              background="base"
+              borderWidth="base"
+              borderColor="base"
+              borderRadius="base"
+            >
+              <s-heading>Orders</s-heading>
+              <s-text type="strong">145</s-text>
+            </s-box>
+          </s-grid-item>
+        </s-grid>
+      </s-stack>
+    </s-section>
+  </s-page>
+  ```
+
+* #### Page with breadcrumbs and title
+
+  ##### Description
+
+  Shows a page with breadcrumb navigation and a descriptive heading, helping users understand their location in the navigation hierarchy.
+
+  ##### jsx
+
+  ```jsx
+  <s-page heading="Edit Product" inlineSize="base">
+    <s-link slot="breadcrumb-actions" href="/products">Products</s-link>
+    <s-link slot="breadcrumb-actions" href="/products/123">Acme Widget</s-link>
+    <s-section>
+      <s-text>Update your product information and settings.</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+  ##### html
+
+  ```html
+  <s-page heading="Edit Product" inline-size="base">
+    <s-link slot="breadcrumb-actions" href="/products">Products</s-link>
+    <s-link slot="breadcrumb-actions" href="/products/123">Acme Widget</s-link>
+    <s-section>
+      <s-text>Update your product information and settings.</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+* #### Page with primary and secondary actions
+
+  ##### Description
+
+  Demonstrates a page with a primary action button and secondary action buttons, showing how to provide main and related actions alongside the page heading.
+
+  ##### jsx
+
+  ```jsx
+  <s-page heading="Products" inlineSize="base">
+    <s-button slot="secondary-actions">Preview</s-button>
+    <s-button slot="secondary-actions">Duplicate</s-button>
+    <s-button slot="primary-action" variant="primary">Save</s-button>
+    <s-section>
+      <s-text>Manage your products and organize your catalog.</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+  ##### html
+
+  ```html
+  <s-page heading="Products" inline-size="base">
+    <s-button slot="secondary-actions">Preview</s-button>
+    <s-button slot="secondary-actions">Duplicate</s-button>
+    <s-button slot="primary-action" variant="primary">Save</s-button>
+    <s-section>
+      <s-text>Manage your products and organize your catalog.</s-text>
+    </s-section>
+  </s-page>
+  ```
+
+## Best practices
+
+* Always provide a title that describes the current page
+* Include breadcrumbs when the page is part of a flow
+* Include page actions in the header only if they are relevant to the entire page
+* Include no more than one primary action and 3 secondary actions per page
+* Don't include any actions at the bottom of the page
+
+## Content guidelines
+
+* Use sentence case and avoid unnecessary words
+* Don't include punctuation like periods or exclamation marks
+* Page titles should clearly communicate the page purpose
+* Page actions should use a verb or verb + noun phrase (e.g., "Create store", "Edit product")

package/docs/paragraph.md

@@ -0,0 +1,333 @@
+---
+title: Paragraph
+description: >-
+  Displays a block of text and can contain inline elements such as buttons,
+  links, or emphasized text. Use to present standalone blocks of content as
+  opposed to inline text.
+api_name: app-home
+source_url:
+  html: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/paragraph
+  md: >-
+    https://shopify.dev/docs/api/app-home/polaris-web-components/titles-and-text/paragraph.md
+---
+
+# Paragraph
+
+Displays a block of text and can contain inline elements such as buttons, links, or emphasized text. Use to present standalone blocks of content as opposed to inline text.
+
+## Properties
+
+* accessibilityVisibility
+
+  "visible" | "hidden" | "exclusive"
+
+  Default: 'visible'
+
+  Changes the visibility of the element.
+
+  * `visible`: the element is visible to all users.
+  * `hidden`: the element is removed from the accessibility tree but remains visible.
+  * `exclusive`: the element is visually hidden but remains in the accessibility tree.
+
+* color
+
+  "base" | "subdued"
+
+  Default: 'base'
+
+  Modify the color to be more or less intense.
+
+* dir
+
+  "" | "auto" | "ltr" | "rtl"
+
+  Default: ''
+
+  Indicates the directionality of the element’s text.
+
+  * `ltr`: languages written from left to right (e.g. English)
+  * `rtl`: languages written from right to left (e.g. Arabic)
+  * `auto`: the user agent determines the direction based on the content
+  * `''`: direction is inherited from parent elements (equivalent to not setting the attribute)
+
+* fontVariantNumeric
+
+  "auto" | "normal" | "tabular-nums"
+
+  Default: 'auto' - inherit from the parent element
+
+  Set the numeric properties of the font.
+
+* lineClamp
+
+  number
+
+  Default: Infinity - no truncation is applied
+
+  Truncates the text content to the specified number of lines.
+
+* tone
+
+  "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"
+
+  Default: 'auto'
+
+  Sets the tone of the component, based on the intention of the information being conveyed.
+
+## Slots
+
+* children
+
+  HTMLElement
+
+  The content of the Paragraph.
+
+Examples
+
+### Examples
+
+* #### Code
+
+  ##### jsx
+
+  ```jsx
+  <s-paragraph>
+    Shopify POS is the easiest way to sell your products in person. Available for
+    iPad, iPhone, and Android.
+  </s-paragraph>
+  ```
+
+  ##### html
+
+  ```html
+  <s-paragraph>
+    Shopify POS is the easiest way to sell your products in person. Available for
+    iPad, iPhone, and Android.
+  </s-paragraph>
+  ```
+
+* #### Basic Usage
+
+  ##### Description
+
+  Demonstrates a simple paragraph with default styling, showing how to use the paragraph component for standard text content.
+
+  ##### jsx
+
+  ```jsx
+  <s-paragraph>
+    Track inventory across all your retail locations in real-time.
+  </s-paragraph>
+  ```
+
+  ##### html
+
+  ```html
+  <s-paragraph>
+    Track inventory across all your retail locations in real-time.
+  </s-paragraph>
+  ```
+
+* #### With Tone and Color
+
+  ##### Description
+
+  Illustrates how to apply different tones and color variations to convey different types of information, such as informational and success messages.
+
+  ##### jsx
+
+  ```jsx
+  <s-section>
+    <s-paragraph tone="info" color="base">
+      Your order will be processed within 2-3 business days.
+    </s-paragraph>
+
+    <s-paragraph tone="success" color="subdued">
+      Payment successfully processed.
+    </s-paragraph>
+  </s-section>
+  ```
+
+  ##### html
+
+  ```html
+  <s-section>
+    <s-paragraph tone="info" color="base">
+      Your order will be processed within 2-3 business days.
+    </s-paragraph>
+
+    <s-paragraph tone="success" color="subdued">
+      Payment successfully processed.
+    </s-paragraph>
+  </s-section>
+  ```
+
+* #### Line Clamping
+
+  ##### Description
+
+  Shows how to limit the number of lines displayed using the lineClamp prop, which truncates long text with an ellipsis after the specified number of lines.
+
+  ##### jsx
+
+  ```jsx
+  <s-box inlineSize="300px">
+    <s-paragraph lineClamp={1}>
+      Premium organic cotton t-shirt featuring sustainable manufacturing
+      processes, ethically sourced materials, and carbon-neutral shipping.
+      Available in multiple colors and sizes with customization options for your
+      brand.
+    </s-paragraph>
+  </s-box>
+  ```
+
+  ##### html
+
+  ```html
+  <s-box inlineSize="300px">
+    <s-paragraph lineClamp="1">
+      Premium organic cotton t-shirt featuring sustainable manufacturing
+      processes, ethically sourced materials, and carbon-neutral shipping.
+      Available in multiple colors and sizes with customization options for your
+      brand.
+    </s-paragraph>
+  </s-box>
+  ```
+
+* #### Tabular Numbers
+
+  ##### Description
+
+  Demonstrates the use of tabular numbers with fontVariantNumeric, ensuring consistent alignment and readability for numerical data.
+
+  ##### jsx
+
+  ```jsx
+  <s-paragraph fontVariantNumeric="tabular-nums">
+    Orders: 1,234 Revenue: $45,678.90 Customers: 890
+  </s-paragraph>
+  ```
+
+  ##### html
+
+  ```html
+  <s-paragraph fontVariantNumeric="tabular-nums">
+    Orders: 1,234 Revenue: $45,678.90 Customers: 890
+  </s-paragraph>
+  ```
+
+* #### RTL Support
+
+  ##### Description
+
+  Illustrates right-to-left (RTL) text rendering, showing how the paragraph component supports internationalization and different text directions.
+
+  ##### jsx
+
+  ```jsx
+  <s-paragraph dir="rtl">
+    محتوى النص باللغة العربية
+  </s-paragraph>
+  ```
+
+  ##### html
+
+  ```html
+  <s-paragraph dir="rtl">
+    محتوى النص باللغة العربية
+  </s-paragraph>
+  ```
+
+* #### Screen Reader Text
+
+  ##### Description
+
+  Shows how to use the accessibilityVisibility prop to create text that is exclusively available to screen readers, improving accessibility for assistive technologies.
+
+  ##### jsx
+
+  ```jsx
+  <s-paragraph accessibilityVisibility="exclusive">
+    Table sorted by date, newest first.
+  </s-paragraph>
+  ```
+
+  ##### html
+
+  ```html
+  <s-paragraph accessibilityVisibility="exclusive">
+    Table sorted by date, newest first.
+  </s-paragraph>
+  ```
+
+* #### Admin UI Patterns
+
+  ##### Description
+
+  Showcases various tone and color combinations for different administrative messages, illustrating how paragraph can communicate different types of information in a user interface.
+
+  ##### jsx
+
+  ```jsx
+  <s-section>
+    <s-paragraph tone="success" color="base">
+      Payment successfully processed and order confirmed.
+    </s-paragraph>
+
+    <s-paragraph tone="warning" color="base">
+      Inventory levels are running low for this product.
+    </s-paragraph>
+
+    <s-paragraph tone="critical" color="base">
+      This order requires immediate attention due to shipping delays.
+    </s-paragraph>
+
+    <s-paragraph tone="info" color="base">
+      Customer requested gift wrapping for this order.
+    </s-paragraph>
+
+    <s-paragraph tone="caution" color="base">
+      Review shipping address before processing.
+    </s-paragraph>
+  </s-section>
+  ```
+
+  ##### html
+
+  ```html
+  <s-section>
+    <s-paragraph tone="success" color="base">
+      Payment successfully processed and order confirmed.
+    </s-paragraph>
+
+    <s-paragraph tone="warning" color="base">
+      Inventory levels are running low for this product.
+    </s-paragraph>
+
+    <s-paragraph tone="critical" color="base">
+      This order requires immediate attention due to shipping delays.
+    </s-paragraph>
+
+    <s-paragraph tone="info" color="base">
+      Customer requested gift wrapping for this order.
+    </s-paragraph>
+
+    <s-paragraph tone="caution" color="base">
+      Review shipping address before processing.
+    </s-paragraph>
+  </s-section>
+  ```
+
+## Useful for
+
+* Displaying text content in a paragraph format.
+* Grouping elements with the same style. For instance, icons inside a paragraph will automatically adopt the paragraph's tone.
+
+## Best practices
+
+* Use short paragraphs to make your content scannable.
+* Use plain and clear terms.
+* Don't use jargon or technical language.
+* Don't use different terms to describe the same thing.
+* Don't duplicate content.