@shopify/shop-minis-react 0.0.0-snapshot.20250610143037 → 0.0.2

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 (9) hide show
  1. package/README.md +1 -65
  2. package/dist/index.js +75 -77
  3. package/dist/index.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/index.ts +0 -3
  6. package/tailwind.config.js +2 -38
  7. package/dist/lib/tailwind-preset.js +0 -13
  8. package/dist/lib/tailwind-preset.js.map +0 -1
  9. package/src/lib/tailwind-preset.ts +0 -31
package/README.md CHANGED
@@ -46,55 +46,7 @@ Add the library's CSS to your main CSS file or app entry point:
46
46
  }
47
47
  ```
48
48
 
49
- ### 2. Configure Tailwind CSS
50
-
51
- Choose one of the following approaches:
52
-
53
- #### Option A: Using Tailwind Preset (Recommended)
54
-
55
- ```js
56
- // tailwind.config.js
57
- const shopMinisConfig = require('@shopify/shop-minis-react/tailwind')
58
-
59
- module.exports = {
60
- ...shopMinisConfig,
61
- content: [
62
- ...shopMinisConfig.content,
63
- './src/**/*.{js,ts,jsx,tsx}', // your project content
64
- ]
65
- // No theme config needed - all styling via CSS variables
66
- }
67
- ```
68
-
69
- #### Option B: Using TypeScript Preset
70
-
71
- ```ts
72
- // tailwind.config.ts
73
- import { shopMinisPreset } from '@shopify/shop-minis-react'
74
-
75
- export default {
76
- presets: [shopMinisPreset],
77
- content: [
78
- './src/**/*.{js,ts,jsx,tsx}', // your project content
79
- ]
80
- }
81
- ```
82
-
83
- #### Option C: Manual Configuration
84
-
85
- ```js
86
- // tailwind.config.js
87
- module.exports = {
88
- content: [
89
- './src/**/*.{js,ts,jsx,tsx}',
90
- // CRITICAL: Must include library source for class scanning
91
- './node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}',
92
- ],
93
- // No theme configuration needed - all styling via CSS variables
94
- }
95
- ```
96
-
97
- ### 3. Use Components
49
+ ### 2. Use Components
98
50
 
99
51
  ```tsx
100
52
  import { Button, Card, CardContent, CardHeader, CardTitle } from '@shopify/shop-minis-react'
@@ -136,22 +88,6 @@ You can customize the design system by overriding CSS variables:
136
88
  --primary: oklch(0.5 0.3 280);
137
89
  /* ... dark mode overrides */
138
90
  }
139
- ```
140
-
141
- ### TypeScript Configuration
142
-
143
- If you're using path mapping in your `tsconfig.json`:
144
-
145
- ```json
146
- {
147
- "compilerOptions": {
148
- "paths": {
149
- "@/components/*": ["./src/components/*"],
150
- "@shopify/shop-minis-react": ["./node_modules/@shopify/shop-minis-react/src"]
151
- }
152
- }
153
- }
154
- ```
155
91
 
156
92
  ### Vite Configuration
157
93
 
package/dist/index.js CHANGED
@@ -1,80 +1,78 @@
1
- import { shopMinisPreset as e } from "./lib/tailwind-preset.js";
2
- import { Button as s, buttonVariants as i } from "./components/ui/button.js";
3
- import { Card as p, CardAction as n, CardContent as u, CardDescription as l, CardFooter as m, CardHeader as f, CardTitle as x } from "./components/ui/card.js";
4
- import { AlertDialog as c, AlertDialogAction as A, AlertDialogCancel as g, AlertDialogContent as C, AlertDialogDescription as D, AlertDialogFooter as S, AlertDialogHeader as P, AlertDialogOverlay as E, AlertDialogPortal as h, AlertDialogTitle as y, AlertDialogTrigger as M } from "./components/ui/alert-dialog.js";
5
- import { Toaster as F } from "./components/ui/sonner.js";
6
- import { useSavedProductsActions as L } from "./hooks/user/useSavedProductsActions.js";
7
- import { useFollowedShopsActions as U } from "./hooks/user/useFollowedShopsActions.js";
8
- import { useCurrentUser as w } from "./hooks/user/useCurrentUser.js";
9
- import { useOrders as H } from "./hooks/user/useOrders.js";
10
- import { useBuyerAttributes as R } from "./hooks/user/useBuyerAttributes.js";
11
- import { useProductListActions as G } from "./hooks/product/useProductListActions.js";
12
- import { useProductLists as V } from "./hooks/product/useProductLists.js";
13
- import { useProductList as q } from "./hooks/product/useProductList.js";
14
- import { useRecommendedProducts as J } from "./hooks/product/useRecommendedProducts.js";
15
- import { usePopularProducts as Q } from "./hooks/product/usePopularProducts.js";
16
- import { useAsyncStorage as X } from "./hooks/storage/useAsyncStorage.js";
17
- import { useSecureStorage as Z } from "./hooks/storage/useSecureStorage.js";
18
- import { useImageUpload as $ } from "./hooks/storage/useImageUpload.js";
19
- import { useShopNavigation as or } from "./hooks/navigation/useShopNavigation.js";
20
- import { useCloseMini as tr } from "./hooks/navigation/useCloseMini.js";
21
- import { useShopCartActions as ir } from "./hooks/shop/useShopCartActions.js";
22
- import { useRecommendedShops as pr } from "./hooks/shop/useRecommendedShops.js";
23
- import { useErrorToast as ur } from "./hooks/util/useErrorToast.js";
24
- import { useErrorScreen as mr } from "./hooks/util/useErrorScreen.js";
25
- import { MiniEntityNotFoundError as xr, MiniError as dr, MiniNetworkError as cr, formatError as Ar } from "./utils/errors.js";
26
- import { parseUrl as Cr } from "./utils/parseUrl.js";
27
- import { Consent as Sr, ConsentStatus as Pr, CurrencyCode as Er, Gender as hr } from "./types/minisSDK.generated.d.js";
1
+ import { Button as e, buttonVariants as t } from "./components/ui/button.js";
2
+ import { Card as i, CardAction as a, CardContent as p, CardDescription as u, CardFooter as n, CardHeader as l, CardTitle as m } from "./components/ui/card.js";
3
+ import { AlertDialog as d, AlertDialogAction as x, AlertDialogCancel as c, AlertDialogContent as A, AlertDialogDescription as g, AlertDialogFooter as C, AlertDialogHeader as D, AlertDialogOverlay as S, AlertDialogPortal as P, AlertDialogTitle as E, AlertDialogTrigger as y } from "./components/ui/alert-dialog.js";
4
+ import { Toaster as h } from "./components/ui/sonner.js";
5
+ import { useSavedProductsActions as M } from "./hooks/user/useSavedProductsActions.js";
6
+ import { useFollowedShopsActions as L } from "./hooks/user/useFollowedShopsActions.js";
7
+ import { useCurrentUser as U } from "./hooks/user/useCurrentUser.js";
8
+ import { useOrders as w } from "./hooks/user/useOrders.js";
9
+ import { useBuyerAttributes as H } from "./hooks/user/useBuyerAttributes.js";
10
+ import { useProductListActions as R } from "./hooks/product/useProductListActions.js";
11
+ import { useProductLists as G } from "./hooks/product/useProductLists.js";
12
+ import { useProductList as V } from "./hooks/product/useProductList.js";
13
+ import { useRecommendedProducts as q } from "./hooks/product/useRecommendedProducts.js";
14
+ import { usePopularProducts as J } from "./hooks/product/usePopularProducts.js";
15
+ import { useAsyncStorage as Q } from "./hooks/storage/useAsyncStorage.js";
16
+ import { useSecureStorage as X } from "./hooks/storage/useSecureStorage.js";
17
+ import { useImageUpload as Z } from "./hooks/storage/useImageUpload.js";
18
+ import { useShopNavigation as $ } from "./hooks/navigation/useShopNavigation.js";
19
+ import { useCloseMini as or } from "./hooks/navigation/useCloseMini.js";
20
+ import { useShopCartActions as tr } from "./hooks/shop/useShopCartActions.js";
21
+ import { useRecommendedShops as ir } from "./hooks/shop/useRecommendedShops.js";
22
+ import { useErrorToast as pr } from "./hooks/util/useErrorToast.js";
23
+ import { useErrorScreen as nr } from "./hooks/util/useErrorScreen.js";
24
+ import { MiniEntityNotFoundError as mr, MiniError as fr, MiniNetworkError as dr, formatError as xr } from "./utils/errors.js";
25
+ import { parseUrl as Ar } from "./utils/parseUrl.js";
26
+ import { Consent as Cr, ConsentStatus as Dr, CurrencyCode as Sr, Gender as Pr } from "./types/minisSDK.generated.d.js";
28
27
  export {
29
- c as AlertDialog,
30
- A as AlertDialogAction,
31
- g as AlertDialogCancel,
32
- C as AlertDialogContent,
33
- D as AlertDialogDescription,
34
- S as AlertDialogFooter,
35
- P as AlertDialogHeader,
36
- E as AlertDialogOverlay,
37
- h as AlertDialogPortal,
38
- y as AlertDialogTitle,
39
- M as AlertDialogTrigger,
40
- s as Button,
41
- p as Card,
42
- n as CardAction,
43
- u as CardContent,
44
- l as CardDescription,
45
- m as CardFooter,
46
- f as CardHeader,
47
- x as CardTitle,
48
- Sr as Consent,
49
- Pr as ConsentStatus,
50
- Er as CurrencyCode,
51
- hr as Gender,
52
- xr as MiniEntityNotFoundError,
53
- dr as MiniError,
54
- cr as MiniNetworkError,
55
- F as Toaster,
56
- i as buttonVariants,
57
- Ar as formatError,
58
- Cr as parseUrl,
59
- e as shopMinisPreset,
60
- X as useAsyncStorage,
61
- R as useBuyerAttributes,
62
- tr as useCloseMini,
63
- w as useCurrentUser,
64
- mr as useErrorScreen,
65
- ur as useErrorToast,
66
- U as useFollowedShopsActions,
67
- $ as useImageUpload,
68
- H as useOrders,
69
- Q as usePopularProducts,
70
- q as useProductList,
71
- G as useProductListActions,
72
- V as useProductLists,
73
- J as useRecommendedProducts,
74
- pr as useRecommendedShops,
75
- L as useSavedProductsActions,
76
- Z as useSecureStorage,
77
- ir as useShopCartActions,
78
- or as useShopNavigation
28
+ d as AlertDialog,
29
+ x as AlertDialogAction,
30
+ c as AlertDialogCancel,
31
+ A as AlertDialogContent,
32
+ g as AlertDialogDescription,
33
+ C as AlertDialogFooter,
34
+ D as AlertDialogHeader,
35
+ S as AlertDialogOverlay,
36
+ P as AlertDialogPortal,
37
+ E as AlertDialogTitle,
38
+ y as AlertDialogTrigger,
39
+ e as Button,
40
+ i as Card,
41
+ a as CardAction,
42
+ p as CardContent,
43
+ u as CardDescription,
44
+ n as CardFooter,
45
+ l as CardHeader,
46
+ m as CardTitle,
47
+ Cr as Consent,
48
+ Dr as ConsentStatus,
49
+ Sr as CurrencyCode,
50
+ Pr as Gender,
51
+ mr as MiniEntityNotFoundError,
52
+ fr as MiniError,
53
+ dr as MiniNetworkError,
54
+ h as Toaster,
55
+ t as buttonVariants,
56
+ xr as formatError,
57
+ Ar as parseUrl,
58
+ Q as useAsyncStorage,
59
+ H as useBuyerAttributes,
60
+ or as useCloseMini,
61
+ U as useCurrentUser,
62
+ nr as useErrorScreen,
63
+ pr as useErrorToast,
64
+ L as useFollowedShopsActions,
65
+ Z as useImageUpload,
66
+ w as useOrders,
67
+ J as usePopularProducts,
68
+ V as useProductList,
69
+ R as useProductListActions,
70
+ G as useProductLists,
71
+ q as useRecommendedProducts,
72
+ ir as useRecommendedShops,
73
+ M as useSavedProductsActions,
74
+ X as useSecureStorage,
75
+ tr as useShopCartActions,
76
+ $ as useShopNavigation
79
77
  };
80
78
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@shopify/shop-minis-react",
3
3
  "license": "SEE LICENSE IN LICENSE.txt",
4
- "version": "0.0.0-snapshot.20250610143037",
4
+ "version": "0.0.2",
5
5
  "sideEffects": false,
6
6
  "type": "module",
7
7
  "engines": {
package/src/index.ts CHANGED
@@ -9,6 +9,3 @@ export * from './utils'
9
9
 
10
10
  // Types
11
11
  export * from './types'
12
-
13
- // Tailwind Configuration Utilities
14
- export {shopMinisPreset} from './lib/tailwind-preset'
package/tailwind.config.js CHANGED
@@ -1,39 +1,3 @@
1
- /**
2
- * Minimal Tailwind CSS configuration for @shopify/shop-minis-react
3
- *
4
- * This configuration only handles content scanning for the library.
5
- * All theming is handled via CSS variables in the imported stylesheet.
6
- *
7
- * Usage in consumer projects:
8
- *
9
- * // tailwind.config.js
10
- * const shopMinisConfig = require('@shopify/shop-minis-react/tailwind')
11
- *
12
- * module.exports = {
13
- * ...shopMinisConfig,
14
- * content: [
15
- * ...shopMinisConfig.content,
16
- * './src/**\/*.{js,ts,jsx,tsx}', // your project content
17
- * ]
18
- * }
19
- */
20
-
21
- const libraryConfig = {
22
- content: [
23
- // Library content - consumers should append their own content
24
- './node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}',
25
- './node_modules/@shopify/shop-minis-react/dist/**/*.{js,ts,jsx,tsx}',
26
- ],
27
- // No theme configuration - all styling via CSS variables
1
+ module.exports = {
2
+ content: ['./src/**/*.{js,ts,jsx,tsx}'],
28
3
  }
29
-
30
- // For development within this package
31
- const devConfig = {
32
- ...libraryConfig,
33
- content: [libraryConfig.content, './src/**/*.{js,ts,jsx,tsx}'],
34
- }
35
-
36
- // Export the appropriate config based on context
37
- const isDevelopment =
38
- typeof process !== 'undefined' && process.env.NODE_ENV === 'development'
39
- module.exports = isDevelopment ? devConfig : libraryConfig
package/dist/lib/tailwind-preset.js DELETED
@@ -1,13 +0,0 @@
1
- const s = {
2
- content: [
3
- // CRITICAL: Ensure consumer's Tailwind scans our source files
4
- "./node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}",
5
- "./node_modules/@shopify/shop-minis-react/dist/**/*.{js,ts,jsx,tsx}"
6
- ]
7
- // No theme configuration - all styling via CSS variables
8
- };
9
- export {
10
- s as default,
11
- s as shopMinisPreset
12
- };
13
- //# sourceMappingURL=tailwind-preset.js.map
package/dist/lib/tailwind-preset.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"tailwind-preset.js","sources":["../../src/lib/tailwind-preset.ts"],"sourcesContent":["/**\n * Minimal Tailwind CSS preset for @shopify/shop-minis-react\n *\n * This preset ensures your library's source files are scanned for Tailwind classes.\n * Essential for source-only distribution to work properly.\n *\n * Usage in consumer projects:\n *\n * // tailwind.config.ts\n * import { shopMinisPreset } from '@shopify/shop-minis-react/src/lib/tailwind-preset'\n *\n * export default {\n * presets: [shopMinisPreset],\n * content: [\n * './src/**\\/*.{js,ts,jsx,tsx}', // your project content\n * ]\n * }\n */\n\nimport type {Config} from 'tailwindcss'\n\nexport const shopMinisPreset: Config = {\n content: [\n // CRITICAL: Ensure consumer's Tailwind scans our source files\n './node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}',\n './node_modules/@shopify/shop-minis-react/dist/**/*.{js,ts,jsx,tsx}',\n ],\n // No theme configuration - all styling via CSS variables\n}\n\nexport default shopMinisPreset\n"],"names":["shopMinisPreset"],"mappings":"AAqBO,MAAMA,IAA0B;AAAA,EACrC,SAAS;AAAA;AAAA,IAEP;AAAA,IACA;AAAA,EAAA;AAAA;AAGJ;"}
package/src/lib/tailwind-preset.ts DELETED
@@ -1,31 +0,0 @@
1
- /**
2
- * Minimal Tailwind CSS preset for @shopify/shop-minis-react
3
- *
4
- * This preset ensures your library's source files are scanned for Tailwind classes.
5
- * Essential for source-only distribution to work properly.
6
- *
7
- * Usage in consumer projects:
8
- *
9
- * // tailwind.config.ts
10
- * import { shopMinisPreset } from '@shopify/shop-minis-react/src/lib/tailwind-preset'
11
- *
12
- * export default {
13
- * presets: [shopMinisPreset],
14
- * content: [
15
- * './src/**\/*.{js,ts,jsx,tsx}', // your project content
16
- * ]
17
- * }
18
- */
19
-
20
- import type {Config} from 'tailwindcss'
21
-
22
- export const shopMinisPreset: Config = {
23
- content: [
24
- // CRITICAL: Ensure consumer's Tailwind scans our source files
25
- './node_modules/@shopify/shop-minis-react/src/**/*.{js,ts,jsx,tsx}',
26
- './node_modules/@shopify/shop-minis-react/dist/**/*.{js,ts,jsx,tsx}',
27
- ],
28
- // No theme configuration - all styling via CSS variables
29
- }
30
-
31
- export default shopMinisPreset