Add Admin API docs, aditional APIs and align with checkout docs

Co-authored-by: Tiffany Tse <tiffanytse@users.noreply.github.com>

.changeset/small-walls-sin.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Exposes Action and Block extension targets in the admin surface.

.gitignore

@@ -17,6 +17,3 @@ packages/ui-extensions/docs/**/generated
 .idea
 
 tsconfig.tsbuildinfo
-
-# Generated doc files
-docs/*/generated/*

package.json

@@ -14,6 +14,7 @@
     "predeploy": "yarn build",
     "deploy": "changeset publish",
     "predeploy:unstable": "yarn build",
+    "docs:admin": "yarn workspace @shopify/ui-extensions docs:admin",
     "docs:checkout": "yarn workspace @shopify/ui-extensions docs:checkout",
     "deploy:unstable": "changeset version --snapshot unstable && changeset publish --tag unstable --no-git-tag",
     "lint": "loom lint",
@@ -22,8 +23,7 @@
     "restore-consumer-spin": "./scripts/restore-consumer-spin.sh",
     "run:ts": "babel-node --extensions .ts,.tsx,.mjs,.js,.json",
     "run:ts:watch": "nodemon --ext .ts,.tsx,.mjs,.json,.graphql node_modules/.bin/babel-node --extensions .ts,.tsx,.mjs,.js,.json",
-    "scaffold-docs:admin": "./scripts/create-doc-files.sh \"admin\"",
-    "generate-docs:admin": "./docs/build-docs.sh \"admin\"",
+    "scaffold-docs:admin": "./packages/ui-extensions/docs/surfaces/admin/create-doc-files.sh \"admin\"",
     "test": "loom test",
     "type-check": "loom type-check"
   },

packages/ui-extensions-react/src/surfaces/admin/components/Button/examples/basic-button.example.tsx

@@ -0,0 +1,15 @@
+import {render, Button} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Button
+      onPress={() => {
+        console.log('onPress event');
+      }}
+    >
+      Click here
+    </Button>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Divider/examples/basic-Divider.example.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  render,
+  Divider,
+  VerticalStack,
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <VerticalStack gap="3">
+      <>First text</>
+      <Divider />
+      <>Second Text</>
+    </VerticalStack>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/EmailField/examples/basic-emailfield.example.tsx

@@ -0,0 +1,7 @@
+import {render, EmailField} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return <EmailField label="Enter your email address" />;
+}

packages/ui-extensions-react/src/surfaces/admin/components/Form/examples/basic-form.example.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, useState } from 'react';
+import {
+  reactExtension,
+  Form,
+  TextField,
+} from '@shopify/ui-extensions-react/admin';
+
+export default reactExtension("admin.product-details.block.render", () => <App />);
+
+function App() {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState();
+
+  const onSubmit = useCallback(
+    async () => {
+      // API call to save the values
+      const res = await fetch('/save', {method:'POST', body: JSON.stringify({name: value})});
+      if (!res.ok) {
+        // The Host can catch these errors and do something with them.
+        throw Error(`There were errors: ${res.errors.join(',')}`);
+      }
+      setError();
+    },
+    [value]
+  );
+
+  const onReset = useCallback(async () => {
+     // Reset to initial value
+     setValue("")
+     // Clear errors
+     setError()
+  }, []);
+
+  const onInput = useCallback((nameValue) => {
+    if (!nameValue) {
+      setError("Please enter a name.");
+    }
+  }, [])
+
+  // Field values can only be updated on change when using Remote UI.
+  const onChange = useCallback((nameValue) => {
+    setValue(nameValue);
+  }, [])
+
+
+  return (
+    <Form id="form" onSubmit={onSubmit} onReset={onReset}>
+      <TextField label="name" value={value} onInput={onInput} onChange={onChange} error={error} />
+    </Form>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/Heading/examples/basic-heading.example.tsx

@@ -0,0 +1,7 @@
+import {render, Heading} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return <Heading>Store name</Heading>;
+}

packages/ui-extensions-react/src/surfaces/admin/components/HeadingGroup/examples/basic-headinggroup.example.tsx

@@ -0,0 +1,23 @@
+import {
+    render,
+    HeadingGroup,
+    Heading,
+  } from '@shopify/ui-extensions-react/admin';
+
+  render('Playground', () => <App />);
+
+  function App() {
+    return (
+      <>
+        <Heading>Heading &lt;h1&gt;</Heading>
+
+        <HeadingGroup>
+          <Heading>Heading &lt;h2&gt;</Heading>
+
+          <HeadingGroup>
+            <Heading>Heading &lt;h3&gt;</Heading>
+          </HeadingGroup>
+        </HeadingGroup>
+      </>
+    );
+  }

packages/ui-extensions-react/src/surfaces/admin/components/Icon/examples/basic-icon.example.tsx

@@ -0,0 +1,7 @@
+import {render, Icon} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return <Icon source="AppsMajor" />;
+}

packages/ui-extensions-react/src/surfaces/admin/components/Image/examples/basic-image.example.tsx

@@ -0,0 +1,9 @@
+import {render, Image} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <Image source="https://shopify.dev/assets/api/ui-extensions/admin/components/image-example-code.png" />
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/NumberField/examples/basic-numberfield.example.tsx

@@ -0,0 +1,7 @@
+import {render, NumberField} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return <NumberField label="Enter a discount amount" />;
+}

packages/ui-extensions-react/src/surfaces/admin/components/PasswordField/examples/basic-passwordfield.example.tsx

@@ -0,0 +1,17 @@
+import {
+  render,
+  BlockStack,
+  TextField,
+  PasswordField
+} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <BlockStack>
+      <TextField label="Enter some text" />
+      <PasswordField label="Enter some text" />
+    </BlockStack>
+  )
+}

packages/ui-extensions-react/src/surfaces/admin/components/Text/examples/basic-text.example.tsx

@@ -0,0 +1,16 @@
+import {render, Text, BlockStack} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return (
+    <BlockStack inlineAlignment="center">
+      <Text size="extraSmall">Extra Small</Text>
+      <Text size="small">Small</Text>
+      <Text size="base">Base</Text>
+      <Text size="medium">Medium</Text>
+      <Text size="large">Large</Text>
+      <Text size="extraLarge">Extra Large</Text>
+    </BlockStack>
+  );
+}

packages/ui-extensions-react/src/surfaces/admin/components/TextField/examples/basic-textfield.example.tsx

@@ -0,0 +1,7 @@
+import {render, TextField} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return <TextField label="Enter some text" />;
+}

packages/ui-extensions-react/src/surfaces/admin/components/URLField/examples/basic-urlfield.example.tsx

@@ -0,0 +1,7 @@
+import {render, URLField} from '@shopify/ui-extensions-react/admin';
+
+render('Playground', () => <App />);
+
+function App() {
+  return <URLField label="Enter store url" />;
+}

packages/ui-extensions/docs/surfaces/admin/build-docs.sh

@@ -0,0 +1,23 @@
+DOCS_PATH=docs/surfaces/admin
+SRC_PATH=src/surfaces/admin
+
+
+# COMPILE_COMPONENT_DOCS="yarn tsc --project ./docs/surfaces/${surface}/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && generate-docs --input ./src/surfaces/${surface}/components/* ./src/surfaces/${surface}/api/* --typesInput ./src --output ./docs/surfaces/${surface}/generated && rm -rf ../../src/surfaces/${surface}/**/**/*.doc.js"
+# COMPILE_API_DOCS="yarn tsc --project ./docs/${surface}/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && generate-docs --input ./src/surfaces/${surface}/components/* --typesInput ./src --output ./docs/surfaces/${surface}/generated && rm -rf ./src/surfaces/${surface}/components/**/*.doc.js"
+# COMPILE_STATIC_PAGES="yarn tsc ./docs/surfaces/${surface}/staticPages/*.doc.ts --types react --moduleResolution node  --target esNext  --module CommonJS && generate-docs --isLandingPage --input ./docs/surfaces/${surface}/staticPages --output ./docs/surfaces/${surface}/generated && rm -rf ./docs/surfaces/${surface}/staticPages/*.doc.js"
+
+
+COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH ../ui-extensions-react/$SRC_PATH --output ./$DOCS_PATH/generated"
+COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node  --target esNext  --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated"
+
+
+eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES
+build_exit=$?
+
+
+# Remove .doc.js files
+find ./ -name '*.doc*.js' -exec rm -r {} \;
+
+if [ $build_exit -ne 0 ]; then
+  fail_and_exit $build_exit
+fi

scripts/create-doc-files.sh → packages/ui-extensions/docs/surfaces/admin/create-doc-files.sh

@@ -14,6 +14,7 @@ fi
 
 # Make this an input to the script
 components_dir="./packages/ui-extensions/src/surfaces/${surface}/components"
+# components_dir="./packages/ui-extensions/src/surfaces/${surface}/api"
 
 addExamples() {
     folder=$1