@haus-storefront-react/currency-picker 0.1.1 → 1.0.0-next.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.
- package/CHANGELOG.md +86 -0
- package/index.js +36 -62
- package/index.mjs +3762 -4176
- package/package.json +5 -5
- package/README.md +0 -129
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haus-storefront-react/currency-picker",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-next.0",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
}
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@haus-storefront-react/common-utils": "0.0.
|
|
15
|
-
"@haus-storefront-react/core": "0.0.
|
|
16
|
-
"@haus-storefront-react/hooks": "0.0.
|
|
17
|
-
"@haus-storefront-react/shared-types": "0.0.
|
|
14
|
+
"@haus-storefront-react/common-utils": "1.0.0-next.0",
|
|
15
|
+
"@haus-storefront-react/core": "1.0.0-next.0",
|
|
16
|
+
"@haus-storefront-react/hooks": "1.0.0-next.0",
|
|
17
|
+
"@haus-storefront-react/shared-types": "1.0.0-next.0"
|
|
18
18
|
}
|
|
19
19
|
}
|
package/README.md
DELETED
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
# Currency Picker
|
|
2
|
-
|
|
3
|
-
A headless component for managing currency selection in the storefront. This component allows users to view and change the active currency for their shopping experience.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Display available currencies
|
|
8
|
-
- Change active currency
|
|
9
|
-
- Persist currency selection in localStorage
|
|
10
|
-
- Refresh the page to apply currency changes
|
|
11
|
-
- Automatically select the default currency based on the active channel
|
|
12
|
-
|
|
13
|
-
## Installation
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
yarn add @haus-storefront-react/currency-picker
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Basic Usage
|
|
20
|
-
|
|
21
|
-
```tsx
|
|
22
|
-
import { CurrencyPicker } from '@haus-storefront-react/currency-picker'
|
|
23
|
-
|
|
24
|
-
export default function App() {
|
|
25
|
-
return (
|
|
26
|
-
<CurrencyPicker.Root>
|
|
27
|
-
<CurrencyPicker.Trigger />
|
|
28
|
-
<CurrencyPicker.Options />
|
|
29
|
-
</CurrencyPicker.Root>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Advanced Usage
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
import { CurrencyPicker } from '@haus-storefront-react/currency-picker'
|
|
38
|
-
|
|
39
|
-
export default function CustomCurrencySelector() {
|
|
40
|
-
return (
|
|
41
|
-
<CurrencyPicker.Root>
|
|
42
|
-
{({ selectedCurrency, availableCurrencyCodes, isLoading, setSelectedCurrency }) => (
|
|
43
|
-
<div className="currency-selector">
|
|
44
|
-
{isLoading ? (
|
|
45
|
-
<p>Loading currencies...</p>
|
|
46
|
-
) : (
|
|
47
|
-
<>
|
|
48
|
-
<span>Current currency: {selectedCurrency}</span>
|
|
49
|
-
<select
|
|
50
|
-
value={selectedCurrency}
|
|
51
|
-
onChange={(e) => setSelectedCurrency(e.target.value)}
|
|
52
|
-
>
|
|
53
|
-
{availableCurrencyCodes.map((code) => (
|
|
54
|
-
<option key={code} value={code}>
|
|
55
|
-
{code}
|
|
56
|
-
</option>
|
|
57
|
-
))}
|
|
58
|
-
</select>
|
|
59
|
-
</>
|
|
60
|
-
)}
|
|
61
|
-
</div>
|
|
62
|
-
)}
|
|
63
|
-
</CurrencyPicker.Root>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## Component API
|
|
69
|
-
|
|
70
|
-
### CurrencyPicker.Root
|
|
71
|
-
|
|
72
|
-
The root component that provides context to all other components.
|
|
73
|
-
|
|
74
|
-
```tsx
|
|
75
|
-
<CurrencyPicker.Root>{/* Other CurrencyPicker components */}</CurrencyPicker.Root>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
### CurrencyPicker.Trigger
|
|
79
|
-
|
|
80
|
-
A button component that displays the current currency.
|
|
81
|
-
|
|
82
|
-
```tsx
|
|
83
|
-
<CurrencyPicker.Trigger />
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
### CurrencyPicker.Options
|
|
87
|
-
|
|
88
|
-
A container for currency options.
|
|
89
|
-
|
|
90
|
-
```tsx
|
|
91
|
-
<CurrencyPicker.Options />
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### CurrencyPicker.Option
|
|
95
|
-
|
|
96
|
-
An individual currency option.
|
|
97
|
-
|
|
98
|
-
```tsx
|
|
99
|
-
<CurrencyPicker.Option value="USD" />
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
### CurrencyPicker.Value
|
|
103
|
-
|
|
104
|
-
A component that displays the currently selected currency.
|
|
105
|
-
|
|
106
|
-
```tsx
|
|
107
|
-
<CurrencyPicker.Value />
|
|
108
|
-
```
|
|
109
|
-
|
|
110
|
-
## Using with Custom UI Components
|
|
111
|
-
|
|
112
|
-
You can use the `asChild` prop to compose with your own UI components:
|
|
113
|
-
|
|
114
|
-
```tsx
|
|
115
|
-
import { Button } from './your-ui-library'
|
|
116
|
-
|
|
117
|
-
function CustomCurrencyPicker() {
|
|
118
|
-
return (
|
|
119
|
-
<CurrencyPicker.Root>
|
|
120
|
-
<CurrencyPicker.Trigger asChild>
|
|
121
|
-
<Button variant="outline">
|
|
122
|
-
<CurrencyPicker.Value /> ▼
|
|
123
|
-
</Button>
|
|
124
|
-
</CurrencyPicker.Trigger>
|
|
125
|
-
{/* Rest of your implementation */}
|
|
126
|
-
</CurrencyPicker.Root>
|
|
127
|
-
)
|
|
128
|
-
}
|
|
129
|
-
```
|