create-shopify-firebase-app 2.0.5 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +122 -74
  2. package/lib/index.js +540 -244
  3. package/lib/preflight.js +358 -0
  4. package/lib/provision.js +187 -5
  5. package/package.json +1 -1
  6. package/templates/js/functions/package.json +6 -6
  7. package/templates/js/functions/src/admin-api.js +1 -1
  8. package/templates/js/functions/src/auth.js +45 -13
  9. package/templates/js/functions/src/firebase.js +6 -4
  10. package/templates/js/functions/src/index.js +14 -0
  11. package/templates/shared/extensions/theme-block/blocks/app-block.liquid +1 -1
  12. package/templates/shared/extensions/theme-block/shopify.extension.toml +1 -1
  13. package/templates/shared/firebase.json +1 -1
  14. package/templates/shared/firestore.rules +10 -2
  15. package/templates/shopify.app.toml +1 -1
  16. package/templates/ts/functions/package.json +10 -10
  17. package/templates/ts/functions/src/admin-api.ts +5 -2
  18. package/templates/ts/functions/src/auth.ts +69 -15
  19. package/templates/ts/functions/src/firebase.ts +8 -4
  20. package/templates/ts/functions/tsconfig.json +2 -1
  21. package/templates/web/css/app.css +78 -1138
  22. package/templates/web/index.html +79 -68
  23. package/templates/web/js/app.js +60 -33
  24. package/templates/web/js/pages/home.js +33 -22
  25. package/templates/web/js/pages/polaris-demo.js +25 -83
  26. package/templates/web/js/pages/products.js +100 -114
  27. package/templates/web/js/pages/settings.js +68 -166
  28. package/templates/web/polaris.html +1221 -950
  29. package/templates/web/products.html +35 -40
  30. package/templates/web/settings.html +69 -17
package/templates/web/products.html CHANGED
@@ -5,7 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Products - {{APP_NAME}}</title>
7
7
  <link rel="stylesheet" href="/css/app.css">
8
+ <meta name="shopify-api-key" content="{{API_KEY}}">
8
9
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
10
+ <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
9
11
  </head>
10
12
  <body>
11
13
  <ui-nav-menu>
@@ -15,55 +17,48 @@
15
17
  <a href="/polaris">Components</a>
16
18
  </ui-nav-menu>
17
19
 
18
- <ui-title-bar title="Products">
19
- <button variant="primary" onclick="openResourcePicker()">Resource Picker</button>
20
- </ui-title-bar>
20
+ <s-page heading="Products">
21
+ <s-link slot="breadcrumb-actions" href="/">Dashboard</s-link>
22
+ <s-button slot="primary-action" onclick="openResourcePicker()">Resource Picker</s-button>
21
23
 
22
- <div class="page">
23
24
  <!-- Search bar -->
24
- <div class="card">
25
- <div class="search-wrapper" style="margin-bottom: 0;">
26
- <span class="search-icon">&#128269;</span>
27
- <input
28
- type="text"
29
- class="search-input"
30
- id="search-input"
31
- placeholder="Search products by title..."
32
- autocomplete="off"
33
- >
34
- </div>
35
- </div>
25
+ <s-section>
26
+ <s-text-field
27
+ id="search-input"
28
+ label="Search products"
29
+ placeholder="Search products by title..."
30
+ labelHidden
31
+ clearButton
32
+ ></s-text-field>
33
+ </s-section>
36
34
 
37
- <!-- Action bar -->
38
- <div class="flex items-center justify-between mb-4">
39
- <p class="text-secondary text-sm" id="results-count"></p>
40
- <button class="btn btn-sm" onclick="openResourcePicker()">
41
- &#128270; Use Resource Picker
42
- </button>
43
- </div>
35
+ <!-- Results count — hidden until there is a count, so the card does not
36
+ render as an empty box on load -->
37
+ <s-section id="results-section" style="display:none;">
38
+ <s-text id="results-count" color="subdued"></s-text>
39
+ </s-section>
44
40
 
45
41
  <!-- Results container -->
46
- <div id="products-container">
47
- <div class="card">
48
- <div class="empty-state">
49
- <div class="empty-state-icon">&#128722;</div>
50
- <h3>Search for products</h3>
51
- <p>Enter a search term above to find products in your store, or use the Resource Picker to browse.</p>
52
- <button class="btn btn-primary" onclick="document.getElementById('search-input').focus()">
53
- Start searching
54
- </button>
55
- </div>
42
+ <s-section>
43
+ <div id="products-container">
44
+ <s-box padding="large-1200" border="base" borderRadius="base">
45
+ <s-stack alignItems="center" gap="base">
46
+ <s-text variant="headingMd">Search for products</s-text>
47
+ <s-text color="subdued">Enter a search term above to find products in your store, or use the Resource Picker to browse.</s-text>
48
+ <s-button variant="primary" onclick="document.getElementById('search-input').focus()">Start searching</s-button>
49
+ </s-stack>
50
+ </s-box>
56
51
  </div>
57
- </div>
58
- </div>
52
+ </s-section>
53
+ </s-page>
59
54
 
60
55
  <!-- Product detail modal -->
61
56
  <ui-modal id="product-detail-modal" variant="large">
62
57
  <div id="product-detail-content" style="padding: 16px;">
63
- <div class="loading-state">
64
- <div class="spinner"></div>
65
- <p>Loading product details...</p>
66
- </div>
58
+ <s-stack alignItems="center" gap="base">
59
+ <s-spinner></s-spinner>
60
+ <s-text color="subdued">Loading product details...</s-text>
61
+ </s-stack>
67
62
  </div>
68
63
  <ui-title-bar title="Product Details">
69
64
  <button variant="primary" onclick="document.getElementById('product-detail-modal').hide()">Done</button>
@@ -73,7 +68,7 @@
73
68
  <!-- Resource picker result modal -->
74
69
  <ui-modal id="picker-result-modal">
75
70
  <div id="picker-result-content" style="padding: 16px;">
76
- <p class="text-secondary">No products selected.</p>
71
+ <s-text color="subdued">No products selected.</s-text>
77
72
  </div>
78
73
  <ui-title-bar title="Selected Products">
79
74
  <button variant="primary" onclick="document.getElementById('picker-result-modal').hide()">Close</button>
package/templates/web/settings.html CHANGED
@@ -5,7 +5,9 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Settings - {{APP_NAME}}</title>
7
7
  <link rel="stylesheet" href="/css/app.css">
8
+ <meta name="shopify-api-key" content="{{API_KEY}}">
8
9
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
10
+ <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
9
11
  </head>
10
12
  <body>
11
13
  <ui-nav-menu>
@@ -15,24 +17,74 @@
15
17
  <a href="/polaris">Components</a>
16
18
  </ui-nav-menu>
17
19
 
18
- <ui-title-bar title="Settings">
19
- <button variant="primary" onclick="saveSettings()">Save</button>
20
- </ui-title-bar>
21
-
22
- <ui-save-bar id="save-bar">
23
- <button id="save-btn" variant="primary"></button>
24
- <button id="discard-btn"></button>
25
- </ui-save-bar>
26
-
27
- <div class="page page-narrow">
28
- <!-- Settings form -->
29
- <div id="settings-container">
30
- <div class="loading-state">
31
- <div class="spinner"></div>
32
- <p>Loading settings...</p>
20
+ <form data-save-bar id="settings-form">
21
+ <s-page heading="Settings" inlineSize="small">
22
+ <s-link slot="breadcrumb-actions" href="/">Dashboard</s-link>
23
+
24
+ <!-- Loading state -->
25
+ <s-box id="settings-loading" padding="large-400">
26
+ <s-stack alignItems="center"><s-spinner></s-spinner></s-stack>
27
+ </s-box>
28
+
29
+ <!-- Settings content (hidden until loaded) -->
30
+ <div id="settings-content" style="display:none;">
31
+
32
+ <!-- General settings -->
33
+ <s-section heading="General">
34
+ <s-text color="subdued">Configure basic app settings.</s-text>
35
+ <s-box paddingBlockStart="base">
36
+ <s-stack gap="base">
37
+ <s-text-field
38
+ id="setting-greeting"
39
+ label="Store greeting message"
40
+ placeholder="Welcome to our store!"
41
+ helpText="Displayed to customers when they visit your app."
42
+ ></s-text-field>
43
+
44
+ <s-select id="setting-theme" label="Theme" helpText="Choose the visual theme for your app interface.">
45
+ <s-option value="auto">Auto (System)</s-option>
46
+ <s-option value="light">Light</s-option>
47
+ <s-option value="dark">Dark</s-option>
48
+ </s-select>
49
+ </s-stack>
50
+ </s-box>
51
+ </s-section>
52
+
53
+ <!-- Notifications -->
54
+ <s-section heading="Notifications">
55
+ <s-text color="subdued">Manage email and push notification preferences.</s-text>
56
+ <s-box paddingBlockStart="base">
57
+ <s-stack gap="base">
58
+ <s-switch id="setting-notifications" label="Enable email notifications" helpText="Receive email alerts for new orders and important events."></s-switch>
59
+ <s-switch id="setting-order-alerts" label="Order alert notifications" helpText="Get notified when a new order is placed."></s-switch>
60
+ </s-stack>
61
+ </s-box>
62
+ </s-section>
63
+
64
+ <!-- Advanced -->
65
+ <s-section heading="Advanced">
66
+ <s-text color="subdued">Advanced customization options.</s-text>
67
+ <s-box paddingBlockStart="base">
68
+ <s-text-field
69
+ id="setting-css"
70
+ label="Custom CSS"
71
+ placeholder="/* Add custom styles here */"
72
+ multiline="6"
73
+ helpText="Add custom CSS to override default styles. Must be sanitized server-side before rendering — never inject raw user CSS into pages."
74
+ ></s-text-field>
75
+ </s-box>
76
+ </s-section>
77
+
78
+ <!-- Fallback save button (visible outside embedded admin where data-save-bar is unavailable) -->
79
+ <s-section>
80
+ <s-stack direction="inline" gap="base">
81
+ <s-button variant="primary" onclick="saveSettings()">Save settings</s-button>
82
+ </s-stack>
83
+ </s-section>
84
+
33
85
  </div>
34
- </div>
35
- </div>
86
+ </s-page>
87
+ </form>
36
88
 
37
89
  <script src="/js/app.js"></script>
38
90
  <script src="/js/pages/settings.js"></script>