Skip to content

Commit 06020a7

Browse files
authored
Merge pull request #2691 from Shopify/fio/update-ab-doc-gen
Update ab doc gen
2 parents 1115e4a + b49e401 commit 06020a7

File tree

137 files changed

+1318
-738
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

137 files changed

+1318
-738
lines changed

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"predeploy": "yarn build",
1515
"deploy": "changeset publish",
1616
"predeploy:unstable": "yarn build",
17+
"docs:ab": "yarn workspace @shopify/ui-extensions docs:ab",
1718
"docs:admin": "yarn workspace @shopify/ui-extensions docs:admin",
1819
"docs:checkout": "yarn workspace @shopify/ui-extensions docs:checkout",
1920
"docs:point-of-sale": "yarn workspace @shopify/ui-extensions docs:point-of-sale",

packages/ui-extensions/docs/surfaces/admin/ReadMe.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,25 @@ A utility script to scaffold documentation files for UI components in the ui-ext
2121

2222
### Examples
2323

24-
# Create documentation for a single component
24+
#### Create documentation for a single component
2525

2626
```bash
2727
./create-doc-files.sh Button
2828
```
2929

30-
# Create documentation for multiple components
30+
#### Create documentation for multiple components
3131

3232
```bash
3333
./create-doc-files.sh Button Card
3434
```
3535

36-
# Create API documentation
36+
#### Create API documentation
3737

3838
```bash
3939
./create-doc-files.sh -t api Toast
4040
```
4141

42-
# Create multiple API docs
42+
#### Create multiple API docs
4343

4444
```bash
4545
./create-doc-files.sh -t api Modal Toast
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
#!/bin/bash
2+
3+
API_VERSION=$1
4+
DOCS_PATH=docs/surfaces/admin
5+
SRC_PATH=src/surfaces/admin
6+
COMPONENTS_DEFINITIONS=src/surfaces/admin/components.d.ts
7+
COMPONENTS_TS=src/surfaces/admin/components.ts
8+
SHOPIFY_DEV_PATH="../../../shopify-dev"
9+
DOT_DEV_DOCS_JSON="$SHOPIFY_DEV_PATH/db/data/docs/templated_apis/app_bridge/generated_docs_data.json"
10+
GENERATED_DOCS_JSON="./$DOCS_PATH/generated/generated_docs_data.json"
11+
12+
fail_and_exit() {
13+
echo "** Failed to generate docs"
14+
echo "See https://vault.shopify.io/page/Extension-Docs~SkgE.md"
15+
exit $1
16+
}
17+
18+
run_sed() {
19+
if [[ "$OSTYPE" == "darwin"* ]]; then
20+
# macOS
21+
sed -i '' "$1" "$2"
22+
else
23+
# Linux and other Unix-like systems
24+
sed -i "$1" "$2"
25+
fi
26+
}
27+
28+
if [ -z $API_VERSION ]
29+
then
30+
API_VERSION="unstable"
31+
echo "Building docs for 'unstable' admin UI extensions API. You can add a calver version argument (e.g. 'yarn docs:admin 2023-07') to generate the docs for a stable version."
32+
else
33+
echo "Building docs for '$API_VERSION' admin UI extensions API."
34+
echo "When generating docs for a stable version, 'unstable' docs are not regenerated. This avoids overwriting other unstable changes that are not included in this version."
35+
echo "If you need to update the 'unstable' version, run this command again without the '$API_VERSION' parameter."
36+
fi
37+
38+
# Read tsconfig.ab.docs.json and extract include/exclude patterns
39+
# Find all .doc.ts files in SRC_PATH
40+
FIND_CMD="find ./$SRC_PATH -name '*.doc.ts'"
41+
42+
# Store original files for restoration
43+
declare -a MODIFIED_FILES
44+
45+
echo "Replacing JSX/tsx references..."
46+
while IFS= read -r file; do
47+
if grep -q "JSX\|\.tsx" "$file"; then
48+
cp "$file" "$file.bak"
49+
MODIFIED_FILES+=("$file")
50+
run_sed 's/JSX/HTML/g' "$file"
51+
run_sed 's/\.tsx/\.html/g' "$file"
52+
fi
53+
done < <(eval "$FIND_CMD")
54+
55+
56+
COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.ab.docs.json --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH --output ./$DOCS_PATH/generated"
57+
# COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated"
58+
59+
# Rename components.d.ts to components.ts so it can be picked up be the compiler
60+
cp $COMPONENTS_DEFINITIONS $COMPONENTS_TS
61+
# Remove references to HTMLElement
62+
run_sed "s/typeof globalThis.HTMLElement/any/" $COMPONENTS_TS
63+
64+
eval $COMPILE_DOCS
65+
build_exit=$?
66+
67+
# Restore original files
68+
for file in "${MODIFIED_FILES[@]}"; do
69+
if [ -f "$file.bak" ]; then
70+
mv "$file.bak" "$file"
71+
fi
72+
done
73+
74+
# Remove .doc.js files
75+
find ./ -name '*.doc*.js' -exec rm -r {} \;
76+
# Remove components.ts as it's no longer needed
77+
rm $COMPONENTS_TS
78+
79+
if [ $build_exit -ne 0 ]; then
80+
fail_and_exit $build_exit
81+
fi
82+
83+
# Make sure https://shopify.dev URLs are relative so they work in Spin.
84+
# See https://github.com/Shopify/generate-docs/issues/181
85+
run_sed 's/https:\/\/shopify.dev//gi' ./$DOCS_PATH/generated/generated_docs_data.json
86+
87+
88+
sed_exit=$?
89+
if [ $sed_exit -ne 0 ]; then
90+
fail_and_exit $sed_exit
91+
fi
92+
93+
if [ -d $SHOPIFY_DEV_PATH ]; then
94+
mkdir -p $SHOPIFY_DEV_PATH/db/data/docs/templated_apis/app_bridge
95+
96+
jq 'map(select(.category != "Experimental Components"))' $DOT_DEV_DOCS_JSON > temp1.json
97+
98+
jq 'map(.category = "Experimental Components")' $GENERATED_DOCS_JSON > temp2.json
99+
100+
jq -s '.[0] + .[1]' temp1.json temp2.json > $DOT_DEV_DOCS_JSON
101+
102+
rm temp1.json temp2.json
103+
104+
rsync -a --delete ./$DOCS_PATH/screenshots/ $SHOPIFY_DEV_PATH/app/assets/images/templated-apis-screenshots/admin-extensions/$API_VERSION
105+
106+
if [ -n "$SPIN_SHOPIFY_DEV_SERVICE_FQDN" ]; then
107+
echo "Docs: https://$SPIN_SHOPIFY_DEV_SERVICE_FQDN/docs/api/admin-extensions"
108+
else
109+
echo "Docs: https://shopify-dev.myshopify.io/docs/api/admin-extensions"
110+
fi
111+
else
112+
echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH."
113+
fi

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

+22-22
Original file line numberDiff line numberDiff line change
@@ -40,33 +40,33 @@ for componentName in "$@"; do
4040
docs_file="${folder}/${componentName}.doc.ts"
4141
lowercaseComponentName=$(echo "$componentName" | sed -E 's/([a-z])([A-Z])/\1-\2/g' | tr '[:upper:]' '[:lower:]')
4242

43-
# Create TypeScript example file
44-
ts_example="${examples_dir}/basic-${lowercaseComponentName}.example.ts"
45-
if [ ! -f "$ts_example" ]; then
46-
cat << EOF > "$ts_example"
47-
export default function extension() {
48-
const ${componentName} = document.createElement('s-${lowercaseComponentName}');
49-
// Add your s-${componentName} implementation here
50-
document.body.appendChild(${componentName});
51-
};
52-
EOF
53-
echo "Created TS example file for ${componentName}"
54-
fi
55-
5643
# Create TSX example file
5744
tsx_example="${examples_dir}/basic-${lowercaseComponentName}.example.tsx"
5845
if [ ! -f "$tsx_example" ]; then
5946
cat << EOF > "$tsx_example"
60-
import '@shopify/ui-extensions/preact';
61-
import {render} from 'preact';
62-
63-
export default function extension() {
64-
render(<s-${lowercaseComponentName} />, document.body);
47+
<s-${lowercaseComponentName}></s-${lowercaseComponentName}>
6548
}
6649
EOF
6750
echo "Created TSX example file for ${componentName}"
6851
fi
6952

53+
# Create preview file
54+
preview_file="${examples_dir}/preview.html"
55+
if [ ! -f "$preview_file" ]; then
56+
cat << EOF > "$preview_file"
57+
<!DOCTYPE html>
58+
<html>
59+
<head>
60+
<script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
61+
</head>
62+
<body>
63+
<s-${lowercaseComponentName}></s-${lowercaseComponentName}>
64+
</body>
65+
</html>
66+
EOF
67+
echo "Created preview file for ${componentName}"
68+
fi
69+
7070
if [ ! -f "$docs_file" ]; then
7171
cat << EOF > "$docs_file"
7272
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
@@ -93,14 +93,14 @@ const data: ReferenceEntityTemplateSchema = {
9393
title: 'TODO: add example title',
9494
tabs: [
9595
{
96-
title: 'Preact',
96+
title: 'JSX',
9797
code: './examples/basic-${lowercaseComponentName}.example.tsx',
9898
language: 'jsx',
9999
},
100100
{
101-
title: 'JS',
102-
code: './examples/basic-${lowercaseComponentName}.example.ts',
103-
language: 'js',
101+
title: 'Preview',
102+
code: './examples/preview.html',
103+
language: 'preview',
104104
},
105105
],
106106
},
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"rootDir": "/"
4+
},
5+
"include": [
6+
"./**/*.doc.ts",
7+
"../../../src/surfaces/admin/components/**/*.doc.ts"
8+
],
9+
"exclude": [
10+
"../../../src/surfaces/admin/components/AdminAction/*",
11+
"../../../src/surfaces/admin/components/AdminBlock/*",
12+
"../../../src/surfaces/admin/components/AdminPrintAction/*"
13+
]
14+
}

packages/ui-extensions/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "2025.7.0",
44
"scripts": {
55
"docs:admin": "bash ./docs/surfaces/admin/build-docs.sh",
6+
"docs:ab": "bash ./docs/surfaces/admin/build-ab-docs.sh",
67
"docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
78
"docs:point-of-sale": "bash ./docs/surfaces/point-of-sale/build-docs.sh",
89
"docs:customer-account": "bash ./docs/surfaces/customer-account/build-docs.sh"

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,10 @@ const data: ReferenceEntityTemplateSchema = {
2323
title: 'Set the primary and secondary action of the Action modal.',
2424
tabs: [
2525
{
26-
title: 'Preact',
26+
title: 'JSX',
2727
code: './examples/basic-adminaction.example.tsx',
2828
language: 'tsx',
2929
},
30-
{
31-
title: 'JS',
32-
code: './examples/basic-adminaction.example.ts',
33-
language: 'js',
34-
},
3530
],
3631
},
3732
},

packages/ui-extensions/src/surfaces/admin/components/AdminAction/examples/basic-adminaction.example.ts

-19
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
1-
import '@shopify/ui-extensions/preact';
2-
import {render} from 'preact';
3-
4-
export default function extension() {
5-
render(
6-
<s-admin-action title="My App Action">
7-
Modal content
8-
<s-button
9-
slot="primaryAction"
10-
onClick={() => console.log('pressed primary action')}
11-
>
12-
Primary
13-
</s-button>
14-
<s-button
15-
slot="secondaryActions"
16-
onClick={() => console.log('pressed secondary action')}
17-
>
18-
Secondary
19-
</s-button>
20-
</s-admin-action>,
21-
document.body,
22-
);
23-
}
1+
<s-admin-action title="My App Action">
2+
Modal content
3+
<s-button
4+
slot="primaryAction"
5+
onClick={() => console.log('pressed primary action')}
6+
>
7+
Primary
8+
</s-button>
9+
<s-button
10+
slot="secondaryActions"
11+
onClick={() => console.log('pressed secondary action')}
12+
>
13+
Secondary
14+
</s-button>
15+
</s-admin-action>;

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,10 @@ const data: ReferenceEntityTemplateSchema = {
2323
title: 'Simple AdminBlock implementation',
2424
tabs: [
2525
{
26-
title: 'Preact',
26+
title: 'JSX',
2727
code: './examples/basic-adminblock.example.tsx',
2828
language: 'tsx',
2929
},
30-
{
31-
title: 'JS',
32-
code: './examples/basic-adminblock.example.ts',
33-
language: 'js',
34-
},
3530
],
3631
},
3732
},

packages/ui-extensions/src/surfaces/admin/components/AdminBlock/examples/basic-adminblock.example.ts

-6
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -1,9 +1 @@
1-
import '@shopify/ui-extensions/preact';
2-
import {render} from 'preact';
3-
4-
export default function extension() {
5-
render(
6-
<s-admin-block title="My App Block">5 items active</s-admin-block>,
7-
document.body,
8-
);
9-
}
1+
<s-admin-block title="My App Block">5 items active</s-admin-block>;

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,10 @@ const data: ReferenceEntityTemplateSchema = {
2323
title: 'Set the source URL of the print action extension.',
2424
tabs: [
2525
{
26-
title: 'Preact',
26+
title: 'JSX',
2727
code: './examples/basic-adminprintaction.example.tsx',
2828
language: 'tsx',
2929
},
30-
{
31-
title: 'JS',
32-
code: './examples/basic-adminprintaction.example.ts',
33-
language: 'js',
34-
},
3530
],
3631
},
3732
},

packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/examples/basic-adminprintaction.example.ts

-5
This file was deleted.

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ const data: ReferenceEntityTemplateSchema = {
2323
title: 'Simple Badge example',
2424
tabs: [
2525
{
26-
title: 'Preact',
26+
title: 'JSX',
2727
code: './examples/basic-badge.example.tsx',
2828
language: 'tsx',
2929
},
3030
{
31-
title: 'JS',
32-
code: './examples/basic-badge.example.ts',
33-
language: 'js',
31+
title: 'Preview',
32+
code: './examples/preview.html',
33+
language: 'preview',
3434
},
3535
],
3636
},

0 commit comments

Comments
 (0)