@wise/art 2.27.2 → 2.29.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 (3) hide show
  1. package/README.md +18 -4
  2. package/package.json +23 -25
  3. package/src/flags/AllFlagsAndSizes.stories.tsx +34 -19
package/README.md CHANGED
@@ -16,10 +16,24 @@ yarn add @wise/art
16
16
  pnpm add @wise/art
17
17
  ```
18
18
 
19
- This package relies on following peer dependencies:
20
-
21
- - `react`
22
- - `react-dom`
19
+ This package declares support for multiple major version of `@react-three/drei` and
20
+ `@react-three/fiber` dependencies to support both React 18 and 19. If
21
+ you are using React 18, your package manager will install
22
+ `@react-three/drei@9.122.0` and `@react-three/fiber@8.18.0`. If you are
23
+ using React 19, you might need to guide your package manager to resolve
24
+ to `@react-three/drei@10.7.7` and `@react-three/fiber@9.5.0` or higher
25
+ instead. For PNPM this can be achieved like so:
26
+
27
+ ```json
28
+ {
29
+ "pnpm": {
30
+ "overrides": {
31
+ "@wise/art>@react-three/drei": "^10.7.7",
32
+ "@wise/art>@react-three/fiber": "^9.5.0",
33
+ }
34
+ }
35
+ }
36
+ ```
23
37
 
24
38
  ## Add Styles
25
39
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wise/art",
3
- "version": "2.27.2",
3
+ "version": "2.29.0",
4
4
  "license": "MIT",
5
5
  "description": "React library for art elements in UI",
6
6
  "homepage": "https://github.com/transferwise/web-art#readme",
@@ -25,27 +25,27 @@
25
25
  "!**/*.tsbuildinfo"
26
26
  ],
27
27
  "dependencies": {
28
- "@babel/runtime": "^7.28.4",
29
- "@react-three/drei": "9.122.0",
30
- "@react-three/fiber": "8.18.0",
31
- "@rive-app/react-webgl2": "^4.25.1",
28
+ "@babel/runtime": "^7.28.6",
29
+ "@react-three/drei": "9.122.0 || ^10.7.7",
30
+ "@react-three/fiber": "8.18.0 || ^9.5.0",
31
+ "@rive-app/react-webgl2": "^4.27.0",
32
32
  "@types/three": "0.164.0",
33
33
  "clsx": "^2.1.1",
34
34
  "three": "0.164.0"
35
35
  },
36
36
  "devDependencies": {
37
- "@babel/core": "^7.28.5",
38
- "@babel/plugin-transform-runtime": "^7.28.5",
39
- "@babel/preset-env": "^7.28.5",
37
+ "@babel/core": "^7.29.0",
38
+ "@babel/plugin-transform-runtime": "^7.29.0",
39
+ "@babel/preset-env": "^7.29.0",
40
40
  "@babel/preset-react": "^7.28.5",
41
41
  "@babel/preset-typescript": "^7.28.5",
42
- "@csstools/postcss-minify": "^2.0.5",
42
+ "@csstools/postcss-minify": "^3.0.0",
43
43
  "@rollup/plugin-babel": "^6.1.0",
44
44
  "@rollup/plugin-typescript": "^12.3.0",
45
- "@storybook/react-vite": "^10.1.11",
45
+ "@storybook/react-vite": "^10.2.10",
46
46
  "@testing-library/jest-dom": "^6.9.1",
47
- "@testing-library/react": "^16.3.1",
48
- "@transferwise/neptune-css": "^14.26.0",
47
+ "@testing-library/react": "^16.3.2",
48
+ "@transferwise/neptune-css": "^14.26.3",
49
49
  "@tsconfig/recommended": "^1.0.13",
50
50
  "@types/babel__core": "^7.20.5",
51
51
  "@types/imagemin": "^9.0.1",
@@ -53,39 +53,37 @@
53
53
  "@types/jest": "^30.0.0",
54
54
  "@types/jsdom": "^27.0.0",
55
55
  "@types/react": "^18.3.23",
56
- "@types/react-dom": "^18.3.7",
57
- "@vitejs/plugin-react": "^5.1.2",
58
- "@wise/eslint-config": "^13.3.0",
56
+ "@vitejs/plugin-react": "^5.1.4",
57
+ "@wise/eslint-config": "^14.0.2",
59
58
  "babel-plugin-optimize-clsx": "^2.6.2",
60
59
  "copyfiles": "^2.4.1",
61
60
  "eslint": "^9.39.2",
62
- "glob": "^13.0.0",
61
+ "glob": "^13.0.6",
63
62
  "gltf-pipeline": "^4.3.0",
64
63
  "imagemin": "^9.0.1",
65
64
  "imagemin-webp": "^8.0.0",
66
65
  "jest": "^30.2.0",
67
66
  "jest-environment-jsdom": "^30.2.0",
68
- "jsdom": "^27.4.0",
67
+ "jsdom": "^28.1.0",
69
68
  "postcss": "^8.5.6",
70
69
  "postcss-cli": "^11.0.1",
71
70
  "postcss-import": "^16.1.1",
72
- "prettier": "^3.7.4",
71
+ "prettier": "^3.8.1",
73
72
  "react": "^18.3.1",
74
73
  "react-dom": "^18.3.1",
75
- "rollup": "^4.54.0",
74
+ "rollup": "^4.58.0",
76
75
  "sharp": "^0.34.5",
77
- "storybook": "^10.1.11",
76
+ "storybook": "^10.2.10",
78
77
  "typescript": "^5.9.3",
79
- "vite": "^7.3.0",
80
- "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#85e770a6d181fba3cdeaf7325ddee17a28792169",
81
- "@storybook/addon-docs": "^10.1.11",
78
+ "vite": "^7.3.1",
79
+ "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#89218cd8c2287addddc18d6c3e11b40250738393",
80
+ "@storybook/addon-docs": "^10.2.10",
82
81
  "@changesets/cli": "^2.29.8",
83
82
  "@changesets/changelog-github": "0.5.2"
84
83
  },
85
84
  "peerDependencies": {
86
85
  "@transferwise/neptune-css": "^14.25.2",
87
- "react": ">=18",
88
- "react-dom": ">=18"
86
+ "react": ">=18"
89
87
  },
90
88
  "resolutions": {
91
89
  "http-cache-semantics": "^4.1.1",
package/src/flags/AllFlagsAndSizes.stories.tsx CHANGED
@@ -14,8 +14,19 @@ type Story = StoryObj<typeof Flag>;
14
14
  // Helper function to render all flags and sizes for a given region
15
15
  const AllFlagsAndSizes = (region: string) => {
16
16
  const regionFlags = Object.entries(flagRawMetaData)
17
- .filter(([r]) => r === region)
18
- .flatMap(([, flags]) => flags);
17
+ .filter(([currentRegion]) => currentRegion === region)
18
+ .flatMap(([, flags]) => flags)
19
+ .reduce<{ country: string[]; currencies: string[][] }[]>((acc, flag) => {
20
+ const existing = acc.find(
21
+ (currentFlag) => currentFlag.country[0] && currentFlag.country[0] === flag.country[0],
22
+ );
23
+ if (existing) {
24
+ existing.currencies.push(flag.currency);
25
+ } else {
26
+ acc.push({ country: flag.country, currencies: [flag.currency] });
27
+ }
28
+ return acc;
29
+ }, []);
19
30
 
20
31
  return (
21
32
  <>
@@ -35,56 +46,60 @@ const AllFlagsAndSizes = (region: string) => {
35
46
  style={{
36
47
  display: 'grid',
37
48
  gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
38
- gap: 'var(--padding-small)',
49
+ gap: 'var(--size-24)',
39
50
  }}
40
51
  >
41
52
  {regionFlags.map((flag) => {
42
53
  const countryCode = flag.country[0]?.toUpperCase();
43
- const currencyCode = flag.currency[0]?.toUpperCase();
44
- const flagCode = countryCode ?? currencyCode;
54
+ const primaryCurrencyCode = flag.currencies[0]?.[0]?.toUpperCase();
55
+ const flagCode = countryCode ?? primaryCurrencyCode;
56
+ const currencyCodes = flag.currencies.map((currency) => currency[0]).filter(Boolean).map((code) => code.toUpperCase());
45
57
 
46
58
  // Covers cases where there's just a currency code and no country (e.g. Euro)
47
59
  const flagName = countryCode
48
60
  ? flag.country.at(-1)
49
- : flag.currency?.at(-1);
61
+ : flag.currencies[0]?.at(-1);
50
62
 
51
63
  return (
52
64
  <div
53
65
  key={flagName}
54
66
  style={{
55
67
  display: 'grid',
56
- gridTemplateColumns: 'minmax(auto, 1fr) auto 1fr',
57
- gap: 'var(--padding-small)',
68
+ gridTemplateColumns: 'auto auto minmax(auto, 1fr)',
69
+ gap: 'var(--size-12)',
58
70
  alignItems: 'center',
59
71
  }}
60
72
  >
73
+ <Flag code={flagCode} intrinsicSize={150} />
74
+ <Flag code={flagCode} />
61
75
  <div
62
76
  style={{
63
77
  display: 'flex',
64
78
  flexWrap: 'wrap',
65
79
  flexDirection: 'column',
66
80
  alignItems: 'flex-start',
67
- gap: 'var(--padding-small)',
68
81
  }}
69
82
  >
70
- {flagName}
83
+ <strong>{flagName}</strong>
71
84
  <span>
72
85
  {countryCode && (
73
86
  <>
74
87
  Country: <code>{countryCode}</code>
75
88
  </>
76
89
  )}
77
- {currencyCode && countryCode && <br />}
78
- {currencyCode && (
79
- <>
80
- Currency: <code>{currencyCode}</code>
81
- </>
82
- )}
90
+ {currencyCodes.length > 0 && (
91
+ <>
92
+ <br />
93
+ <span>
94
+ {`${currencyCodes.length === 1 ? 'Currency' : 'Currencies'}: `}
95
+ {currencyCodes.map((currencyCode) => (
96
+ <code key={currencyCode}>{currencyCode}</code>
97
+ ))}
98
+ </span>
99
+ </>
100
+ )}
83
101
  </span>
84
- {currencyCode && <span />}
85
102
  </div>
86
- <Flag code={flagCode} />
87
- <Flag code={flagCode} intrinsicSize={150} />
88
103
  </div>
89
104
  );
90
105
  })}