Merge pull request #2878 from Shopify/mv-admin-components-to-shared

Use shared data for Admin components

Author: sam-b-rose

package.json

@@ -34,6 +34,7 @@
     "@babel/node": "^7.8.7",
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
+    "@rollup/plugin-replace": "^6.0.1",
     "@shopify/babel-preset": "^24.1.0",
     "@shopify/browserslist-config": "^3.0.0",
     "@shopify/eslint-plugin": "^42.0.0",
@@ -44,10 +45,9 @@
     "@shopify/loom-plugin-eslint": "^2.0.0",
     "@shopify/loom-plugin-prettier": "^2.0.0",
     "@shopify/typescript-configs": "^5.1.0",
-    "@rollup/plugin-replace": "^6.0.1",
     "eslint": "^8.28.0",
     "nodemon": "^2.0.4",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.8",
     "typescript": "^4.9.0"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

packages/ui-extensions/src/docs/shared/components/Badge.ts

@@ -0,0 +1,23 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Badge',
+  description:
+    "Use `s-badge` to inform merchants of the status of an object or of an action that's been taken.",
+  category: 'Polaris web components',
+  subCategory: 'Titles and text',
+  related: [
+    {
+      type: 'component',
+      name: 'Banner',
+      url: 'banner',
+    },
+    {
+      type: 'component',
+      name: 'Text',
+      url: 'text',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Checkbox.ts

@@ -0,0 +1,28 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Checkbox',
+  description:
+    'Use `s-checkbox` when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.',
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+  related: [
+    {
+      type: 'component',
+      name: 'Switch',
+      url: 'switch',
+    },
+    {
+      type: 'component',
+      name: 'Select',
+      url: 'select',
+    },
+    {
+      type: 'component',
+      name: 'ChoiceList',
+      url: 'choice-list',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/ChoiceList.ts

@@ -0,0 +1,23 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'ChoiceList',
+  description:
+    'Use `s-choice-list` to present multiple options to merchants. Choice lists can present options with either radio buttons for single selection or checkboxes for multiple selection.',
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+  related: [
+    {
+      type: 'component',
+      name: 'Select',
+      url: 'select',
+    },
+    {
+      type: 'component',
+      name: 'Checkbox',
+      url: 'checkbox',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Clickable.ts

@@ -0,0 +1,23 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Clickable',
+  description:
+    'The `s-clickable` component is an escape hatch for when `s-button` and `s-link` are not sufficient to create an interactive element.',
+  category: 'Polaris web components',
+  subCategory: 'Actions',
+  related: [
+    {
+      type: 'component',
+      name: 'Button',
+      url: 'button',
+    },
+    {
+      type: 'component',
+      name: 'Link',
+      url: 'link',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/DatePicker.ts

@@ -0,0 +1,12 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'DatePicker',
+  description:
+    'Use a date picker to allow merchants to select a date or a date range.',
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+  related: [],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Divider.ts

@@ -0,0 +1,23 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Divider',
+  description:
+    'Use `s-divider` to create a clear visual separation between different elements in your user interface.',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [
+    {
+      type: 'component',
+      name: 'Section',
+      url: 'section',
+    },
+    {
+      type: 'component',
+      name: 'Stack',
+      url: 'stack',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/EmailField.ts

@@ -0,0 +1,23 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'EmailField',
+  description:
+    'Use `s-email-field` to allow merchants to input email addresses. This component provides built-in email validation and appropriate keyboard settings.',
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+  related: [
+    {
+      type: 'component',
+      name: 'TextField',
+      url: 'textfield',
+    },
+    {
+      type: 'component',
+      name: 'TextArea',
+      url: 'textarea',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/Grid.ts

@@ -0,0 +1,23 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'Grid',
+  description:
+    'Use `s-grid` to organize your content in a matrix of rows and columns and make responsive layouts for pages. Grid follows the same pattern as the [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).',
+  category: 'Polaris web components',
+  subCategory: 'Structure',
+  related: [
+    {
+      type: 'component',
+      name: 'Box',
+      url: 'box',
+    },
+    {
+      type: 'component',
+      name: 'Stack',
+      url: 'stack',
+    },
+  ],
+};
+
+export default data;

packages/ui-extensions/src/docs/shared/components/MoneyField.ts

@@ -0,0 +1,23 @@
+import {SharedReferenceEntityTemplateSchema} from '../docs-type';
+
+const data: SharedReferenceEntityTemplateSchema = {
+  name: 'MoneyField',
+  description:
+    'Use `s-money-field` when you need to collect monetary values from merchants. It provides appropriate formatting and validation for currency amounts.',
+  category: 'Polaris web components',
+  subCategory: 'Forms',
+  related: [
+    {
+      type: 'component',
+      name: 'NumberField',
+      url: 'numberfield',
+    },
+    {
+      type: 'component',
+      name: 'TextField',
+      url: 'textfield',
+    },
+  ],
+};
+
+export default data;