Use shared data for Badge and add util for handling related URLs

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/index.ts

@@ -0,0 +1,40 @@
+export {default as Abbreviation} from './Abbreviation';
+export {default as Badge} from './Badge';
+export {default as Banner} from './Banner';
+export {default as Box} from './Box';
+export {default as Button} from './Button';
+export {default as Checkbox} from './Checkbox';
+export {default as ChoiceList} from './ChoiceList';
+export {default as Clickable} from './Clickable';
+export {default as ClipboardItem} from './ClipboardItem';
+export {default as DatePicker} from './DatePicker';
+export {default as Divider} from './Divider';
+export {default as DropZone} from './DropZone';
+export {default as EmailField} from './EmailField';
+export {default as Form} from './Form';
+export {default as Grid} from './Grid';
+export {default as Heading} from './Heading';
+export {default as Icon} from './Icon';
+export {default as Image} from './Image';
+export {default as Link} from './Link';
+export {default as ListItem} from './ListItem';
+export {default as MoneyField} from './MoneyField';
+export {default as NumberField} from './NumberField';
+export {default as OrderedList} from './OrderedList';
+export {default as Paragraph} from './Paragraph';
+export {default as PasswordField} from './PasswordField';
+export {default as PaymentIcon} from './PaymentIcon';
+export {default as Progress} from './Progress';
+export {default as QRCode} from './QRCode';
+export {default as SearchField} from './SearchField';
+export {default as Section} from './Section';
+export {default as Select} from './Select';
+export {default as Spinner} from './Spinner';
+export {default as Stack} from './Stack';
+export {default as Switch} from './Switch';
+export {default as Table} from './Table';
+export {default as Text} from './Text';
+export {default as TextArea} from './TextArea';
+export {default as Time} from './Time';
+export {default as UnorderedList} from './UnorderedList';
+export {default as URLField} from './URLField';

packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.ab.doc.ts

@@ -1,9 +1,12 @@
 import {AdminReferenceEntityTemplateSchema} from '../../docs-types';
+import {setRelatedUrl} from '../../uitls';
+
+import globalShared from '../../../../docs/shared/components/Badge';
 import shared from './shared';
 
 const data: AdminReferenceEntityTemplateSchema = {
+  ...setRelatedUrl(globalShared, 'app-home'),
   ...shared,
-  category: 'Polaris web components',
 };
 
 export default data;

packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts

@@ -1,9 +1,12 @@
 import {AdminReferenceEntityTemplateSchema} from '../../docs-types';
+import {setRelatedUrl} from '../../uitls';
+
+import globalShared from '../../../../docs/shared/components/Badge';
 import shared from './shared';
 
 const data: AdminReferenceEntityTemplateSchema = {
+  ...setRelatedUrl(globalShared, 'admin-extensions'),
   ...shared,
-  category: 'Polaris web components',
 };
 
 export default data;

packages/ui-extensions/src/surfaces/admin/components/Badge/shared.ts

@@ -1,7 +1,4 @@
 const shared = {
-  name: 'Badge',
-  description:
-    "Use `s-badge` to inform merchants of the status of an object or of an action that's been taken.",
   thumbnail: '/assets/templated-apis-screenshots/admin/components/badge.png',
   isVisualComponent: true,
   definitions: [
@@ -11,19 +8,6 @@ const shared = {
       type: 'Badge',
     },
   ],
-  subCategory: 'Titles and text',
-  related: [
-    {
-      type: 'component',
-      name: 'Banner',
-      url: '/docs/api/admin-extensions/polaris-web-components/feedback/banner',
-    },
-    {
-      type: 'component',
-      name: 'Text',
-      url: '/docs/api/admin-extensions/polaris-web-components/titles-and-text/text',
-    },
-  ],
   defaultExample: {
     image: 'badge-default.png',
     codeblock: {

packages/ui-extensions/src/surfaces/admin/uitls.ts

@@ -0,0 +1,35 @@
+import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+import * as components from '../../docs/shared/components';
+
+export function setRelatedUrl<T extends Partial<ReferenceEntityTemplateSchema>>(
+  shared: T,
+  type: 'admin-extensions' | 'app-home' = 'admin-extensions',
+) {
+  shared.related = shared.related?.map((item) => {
+    const component = (components as Record<string, any>)[item.name];
+
+    if (!component) {
+      return item;
+    }
+
+    const path = [component.category, component.subCategory]
+      .map(kebabCase)
+      .filter(Boolean)
+      .join('/');
+
+    return {
+      ...item,
+      url: `/docs/api/${type}/${path}/${item.url}`,
+    };
+  });
+
+  return shared;
+}
+
+function kebabCase(str = '') {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/\s+/g, '-')
+    .toLowerCase();
+}