@shopify/ui-extensions 2022.10.5 → 2023.4.0

package/src/surfaces/admin/components/Select/examples/basic-select.example.ts

@@ -0,0 +1,47 @@
+import {
+  extension,
+  Select,
+} from '@shopify/ui-extensions/admin';
+
+export default extension(
+  'Playground',
+  (root) => {
+    let value = '2';
+    const select = root.createComponent(Select, {
+      value,
+      label: 'Country',
+      onChange(nextValue) {
+        value = nextValue;
+        select.updateProps({value});
+      },
+      options: [
+        {
+          value: '1',
+          label: 'Australia',
+        },
+        {
+          value: '2',
+          label: 'Canada',
+        },
+        {
+          value: '3',
+          label: 'France',
+        },
+        {
+          value: '4',
+          label: 'Japan',
+        },
+        {
+          value: '5',
+          label: 'Nigeria',
+        },
+        {
+          value: '6',
+          label: 'United States',
+        },
+      ],
+    });
+
+    root.appendChild(select);
+  },
+);

package/src/surfaces/admin/components/Text/README.md

@@ -0,0 +1,7 @@
+# Text
+
+The Text component is used to render text, and has optional properties to control the size, font, alignment, overflow, work break, and accessibility role.
+
+## Expected HTML in Web host
+
+`<span>Hello, World!</span>`

package/src/surfaces/admin/components/Text/Text.doc.ts

@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Text',
+  description:
+    'This component renders text. Remember, you can also add your own styling.',
+  requires: '',
+  thumbnail: 'text-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'TextProps',
+      description: '',
+      type: 'TextProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Titles and text',
+  defaultExample: {
+    image: 'text-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-Text.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-Text.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/components/Text/Text.ts

@@ -0,0 +1,124 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+type TextOverflow = 'ellipsis';
+
+type FontStyle = 'italic' | 'normal';
+
+type TextAccessibilityRole =
+  /**
+   * Indicate the text is contact information. Typically used for addresses.
+   */
+  | 'address'
+
+  /**
+   * Indicate the text has been deleted. Typically used for discounted prices.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
+   */
+  | 'deletion'
+
+  /**
+   * Indicate the text is marked or highlighted and relevant to the buyer’s current action.
+   * Typically used to indicate the characters that matched a search query.
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/mark_role
+   */
+  | 'mark'
+
+  /**
+   * Indicate emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.
+   *
+   * In an HTML host, the text will be rendered in a `<em>` tag.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
+   */
+  | 'emphasis'
+
+  /**
+   * Indicate an offset from the normal prose of the text. Typically used to indicate
+   * a foreign word, fictional character thoughts, or when the text refers to the definition of a word
+   * instead of representing its semantic meaning.
+   *
+   * In an HTML host, the text will be rendered in a `<i>` tag.
+   */
+  | 'offset'
+
+  /**
+   * Indicate strong importance, seriousness, or urgency.
+   *
+   * In an HTML host, the text will be rendered in a `<strong>` tag.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
+   */
+  | 'strong';
+
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
+ */
+type FontVariantOptions =
+  /**
+   * The `font-variant-numeric` CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
+   */
+  | 'numeric'
+  /**
+   * The `font-variant-caps` CSS property controls the use of alternate glyphs for capital letters.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps
+   */
+  | 'all-small-caps'
+  /**
+   * Sets the value of the `font-variant-ligatures` as `none`,
+   * and the values of the other longhand properties as `normal`, their initial value.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant#values
+   */
+  | 'none';
+
+type FontWeight =
+  | 'light-400'
+  | 'light-300'
+  | 'light-200'
+  | 'light-100'
+  // alias to light-100
+  | 'light'
+  | 'base'
+  // alias to base
+  | 'normal'
+  // alias to bold-100
+  | 'bold'
+  | 'bold-100'
+  | 'bold-200'
+  | 'bold-300'
+  | 'bold-400';
+
+export interface TextProps {
+  /** A unique identifier for the field. */
+  id?: string;
+
+  /**
+   * Sets the weight (or boldness) of the font.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+   * */
+  fontWeight?: FontWeight;
+
+  /**
+   * Set how hidden overflow content is signaled to users.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
+   * */
+  textOverflow?: TextOverflow;
+
+  /**
+   * Set all the variants for a font with a shorthand property.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
+   */
+  fontVariant?: FontVariantOptions | FontVariantOptions[];
+
+  /**
+   *  Use to emphasize a word or a group of words.
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
+   */
+  fontStyle?: FontStyle;
+
+  /**
+   * Provide semantic meaning to content and improve support for assistive technologies.
+   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
+   */
+  accessibilityRole?: TextAccessibilityRole;
+}
+
+export const Text = createRemoteComponent<'Text', TextProps>('Text');

package/src/surfaces/admin/components/Text/examples/basic-text.example.ts

@@ -0,0 +1,14 @@
+import {extend, Text, BlockStack} from '@shopify/ui-extensions/admin';
+
+extend('Playground', (root) => {
+  const text = root.createComponent(BlockStack, undefined, [
+    root.createComponent(Text, {size: 'extraSmall'}, 'Extra Small'),
+    root.createComponent(Text, {size: 'small'}, 'Small'),
+    root.createComponent(Text, {size: 'base'}, 'Base'),
+    root.createComponent(Text, {size: 'medium'}, 'Medium'),
+    root.createComponent(Text, {size: 'large'}, 'Large'),
+    root.createComponent(Text, {size: 'extraLarge'}, 'Extra Large'),
+  ]);
+
+  root.appendChild(text);
+});

package/src/surfaces/admin/components/TextArea/TextArea.doc.ts

@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'TextArea',
+  description:
+    'This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.',
+  requires: '',
+  thumbnail: 'textarea-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'TextAreaProps',
+      description: '',
+      type: 'TextAreaProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'textarea-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextArea/examples/basic-TextArea.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-TextArea.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/components/TextArea/TextArea.ts

@@ -0,0 +1,24 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+import {
+  AutocompleteProps,
+  TextAutocompleteField,
+  InputProps,
+  MinMaxLengthProps,
+} from '../shared';
+
+export interface TextAreaProps
+  extends InputProps<string>,
+    MinMaxLengthProps,
+    AutocompleteProps<TextAutocompleteField> {
+  /**
+   * A number of visible text lines.
+   *
+   * @defaultValue 2
+   */
+  rows?: number;
+}
+
+export const TextArea = createRemoteComponent<'TextArea', TextAreaProps>(
+  'TextArea',
+);

package/src/surfaces/admin/components/TextArea/examples/basic-textarea.example.ts

@@ -0,0 +1,10 @@
+import {extend, TextArea} from '@shopify/ui-extensions/admin';
+
+extend('Playground', (root) => {
+  const textArea = root.createComponent(TextArea, {
+    label: 'Enter a scheduled social media posting',
+    rows: 5,
+  });
+
+  root.appendChild(textArea);
+});

package/src/surfaces/admin/components/TextField/README.md

@@ -0,0 +1,7 @@
+# TextField
+
+Use a TextField to get text input from a user.
+
+## Expected HTML in Web host
+
+`<input type="text" />`

package/src/surfaces/admin/components/TextField/TextField.doc.ts

@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'TextField',
+  description:
+    'This is your go-to component when you need to let users input textual information.',
+  requires: '',
+  thumbnail: 'textfield-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'TextFieldProps',
+      description: '',
+      type: 'TextFieldProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'textfield-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-TextField.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-TextField.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/components/TextField/TextField.ts

@@ -0,0 +1,16 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {
+  AutocompleteProps,
+  TextAutocompleteField,
+  InputProps,
+  MinMaxLengthProps,
+} from '../shared';
+
+export interface TextFieldProps
+  extends InputProps<string>,
+    MinMaxLengthProps,
+    AutocompleteProps<TextAutocompleteField> {}
+
+export const TextField = createRemoteComponent<'TextField', TextFieldProps>(
+  'TextField',
+);

package/src/surfaces/admin/components/TextField/examples/basic-textfield.example.ts

@@ -0,0 +1,9 @@
+import {extend, TextField} from '@shopify/ui-extensions/admin';
+
+extend('Playground', (root) => {
+  const textfield = root.createComponent(TextField, {
+    label: 'Enter some text',
+  });
+
+  root.appendChild(textfield);
+});

package/src/surfaces/admin/components/URLField/README.md

@@ -0,0 +1,7 @@
+# URLField
+
+Use a URLField to let the user enter a URL.
+
+## Expected HTML in Web host
+
+`<input type="url" />`

package/src/surfaces/admin/components/URLField/URLField.doc.ts

@@ -0,0 +1,41 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'URLField',
+  description: 'This is the right component for letting users enter a URL.',
+  requires: '',
+  thumbnail: 'urlfield-thumbnail.png',
+  isVisualComponent: true,
+  type: '',
+  definitions: [
+    {
+      title: 'URLFieldProps',
+      description: '',
+      type: 'URLFieldProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Forms',
+  defaultExample: {
+    image: 'urlfield-default.png',
+    codeblock: {
+      title: 'TODO: add example title',
+      tabs: [
+        {
+          title: 'React',
+          code: '../../../../../../ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-URLField.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/basic-URLField.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/components/URLField/URLField.ts

@@ -0,0 +1,26 @@
+import {createRemoteComponent} from '@remote-ui/core';
+import {
+  AnyAutocompleteField,
+  AutocompleteProps,
+  AutocompleteAddressGroup,
+  AutocompleteFieldInstantMessageAlias,
+  InputProps,
+  MinMaxLengthProps,
+} from '../shared';
+
+export interface URLFieldProps
+  extends InputProps<string>,
+    MinMaxLengthProps,
+    AutocompleteProps<URLAutocompleteField> {}
+
+export type URLAutocompleteField = Extract<
+  AnyAutocompleteField,
+  | 'url'
+  | 'photo'
+  | `${AutocompleteFieldInstantMessageAlias}`
+  | `${AutocompleteAddressGroup} ${AutocompleteFieldInstantMessageAlias}`
+>;
+
+export const URLField = createRemoteComponent<'URLField', URLFieldProps>(
+  'URLField',
+);

package/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.ts

@@ -0,0 +1,9 @@
+import {extend, URLField} from '@shopify/ui-extensions/admin';
+
+extend('Playground', (root) => {
+  const urlField = root.createComponent(URLField, {
+    label: 'Enter store url',
+  });
+
+  root.appendChild(urlField);
+});