@akinon/next 1.14.0 → 1.15.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 (127) hide show
  1. package/.editorconfig +7 -7
  2. package/.eslintrc.js +40 -40
  3. package/.gitattributes +15 -0
  4. package/.prettierrc +13 -13
  5. package/CHANGELOG.md +14 -0
  6. package/api/auth.ts +231 -231
  7. package/api/cache.ts +44 -44
  8. package/api/client.ts +174 -174
  9. package/api/logout.ts +42 -42
  10. package/bin/pz-check-dependencies.js +98 -98
  11. package/bin/pz-install-plugins.js +33 -33
  12. package/bin/pz-install-theme.js +58 -58
  13. package/bin/pz-postbuild.js +1 -1
  14. package/bin/pz-postdev.js +1 -1
  15. package/bin/pz-postinstall.js +6 -6
  16. package/bin/pz-poststart.js +1 -1
  17. package/bin/pz-prebuild.js +4 -4
  18. package/bin/pz-predev.js +4 -4
  19. package/bin/pz-prestart.js +1 -1
  20. package/bin/run-script.js +44 -44
  21. package/components/accordion.tsx +52 -52
  22. package/components/button.tsx +46 -46
  23. package/components/client-root.tsx +19 -19
  24. package/components/icon.tsx +18 -18
  25. package/components/image.tsx +133 -133
  26. package/components/index.ts +1 -0
  27. package/components/input.tsx +110 -110
  28. package/components/lazy-component.tsx +33 -33
  29. package/components/loader-spinner.tsx +23 -23
  30. package/components/mobile-app-toggler.tsx +26 -26
  31. package/components/modal.tsx +66 -0
  32. package/components/oauth-login.tsx +24 -24
  33. package/components/plugin-module.tsx +5 -0
  34. package/components/price.tsx +55 -55
  35. package/components/pz-providers.tsx +24 -24
  36. package/components/pz-root.tsx +21 -21
  37. package/components/radio.tsx +18 -18
  38. package/components/react-portal.tsx +45 -45
  39. package/components/redirect-three-d/content/index.tsx +74 -74
  40. package/components/redirect-three-d/index.tsx +17 -17
  41. package/components/selected-payment-option-view.tsx +1 -1
  42. package/components/trans.tsx +39 -39
  43. package/data/client/account.ts +208 -208
  44. package/data/client/api.ts +85 -85
  45. package/data/client/basket.ts +82 -82
  46. package/data/client/misc.ts +101 -101
  47. package/data/client/product.ts +89 -89
  48. package/data/client/user.ts +99 -99
  49. package/data/client/wishlist.ts +118 -118
  50. package/data/server/category.ts +132 -132
  51. package/data/server/flatpage.ts +21 -21
  52. package/data/server/form.ts +22 -22
  53. package/data/server/index.ts +10 -10
  54. package/data/server/landingpage.ts +24 -24
  55. package/data/server/list.ts +67 -67
  56. package/data/server/menu.ts +35 -35
  57. package/data/server/product.ts +86 -86
  58. package/data/server/seo.ts +48 -48
  59. package/data/server/special-page.ts +47 -47
  60. package/data/server/widget.ts +27 -27
  61. package/data/urls.ts +221 -221
  62. package/hocs/client/index.ts +1 -1
  63. package/hocs/client/with-segment-defaults.tsx +25 -25
  64. package/hocs/server/index.ts +1 -1
  65. package/hocs/server/with-segment-defaults.tsx +85 -85
  66. package/hooks/index.ts +10 -10
  67. package/hooks/use-captcha.tsx +76 -76
  68. package/hooks/use-common-product-attributes.ts +36 -36
  69. package/hooks/use-debounce.ts +20 -20
  70. package/hooks/use-localization.ts +78 -78
  71. package/hooks/use-media-query.ts +36 -36
  72. package/hooks/use-mobile-iframe-handler.ts +23 -23
  73. package/hooks/use-on-click-outside.tsx +28 -28
  74. package/hooks/use-payment-options.ts +3 -1
  75. package/hooks/use-router.ts +45 -45
  76. package/hooks/use-translation.ts +14 -14
  77. package/lib/cache.ts +215 -215
  78. package/localization/index.ts +5 -5
  79. package/localization/provider.tsx +58 -58
  80. package/middlewares/complete-gpay.ts +159 -0
  81. package/middlewares/currency.ts +100 -100
  82. package/middlewares/default.ts +259 -256
  83. package/middlewares/index.ts +31 -29
  84. package/middlewares/locale.ts +68 -68
  85. package/middlewares/oauth-login.ts +79 -79
  86. package/middlewares/pretty-url.ts +104 -104
  87. package/middlewares/redirection-payment.ts +160 -160
  88. package/middlewares/three-d-redirection.ts +159 -159
  89. package/middlewares/url-redirection.ts +65 -65
  90. package/package.json +2 -2
  91. package/plugins.js +1 -0
  92. package/redux/hooks.ts +7 -7
  93. package/redux/middlewares/index.ts +50 -50
  94. package/redux/reducers/checkout.ts +184 -184
  95. package/redux/reducers/config.ts +28 -28
  96. package/redux/reducers/header.ts +59 -59
  97. package/redux/reducers/root.ts +61 -61
  98. package/sentry/index.ts +27 -27
  99. package/tailwind/rtl.js +137 -137
  100. package/types/commerce/account.ts +64 -64
  101. package/types/commerce/address.ts +94 -94
  102. package/types/commerce/basket.ts +43 -43
  103. package/types/commerce/category.ts +114 -114
  104. package/types/commerce/checkout.ts +143 -143
  105. package/types/commerce/flatpage.ts +7 -7
  106. package/types/commerce/form.ts +66 -66
  107. package/types/commerce/index.ts +12 -12
  108. package/types/commerce/landingpage.ts +7 -7
  109. package/types/commerce/misc.ts +127 -127
  110. package/types/commerce/order.ts +119 -119
  111. package/types/commerce/product.ts +109 -109
  112. package/types/commerce/widget.ts +28 -28
  113. package/types/gtm.ts +16 -16
  114. package/types/index.ts +274 -274
  115. package/types/metadata.ts +7 -7
  116. package/types/next-auth.d.ts +24 -24
  117. package/utils/app-fetch.ts +69 -69
  118. package/utils/deep-merge.js +24 -24
  119. package/utils/image-loader.ts +31 -31
  120. package/utils/index.ts +150 -150
  121. package/utils/localization.ts +29 -29
  122. package/utils/log.ts +138 -138
  123. package/utils/menu-generator.ts +27 -27
  124. package/utils/mobile-3d-iframe.ts +77 -77
  125. package/utils/server-translation.ts +57 -57
  126. package/utils/server-variables.ts +9 -9
  127. package/with-pz-config.js +94 -94
@@ -1,98 +1,98 @@
1
- #!/usr/bin/env node
2
-
3
- const fs = require('fs');
4
- const path = require('path');
5
- const semver = require('semver');
6
-
7
- function checkDir() {
8
- let currentDir = __dirname;
9
-
10
- while (currentDir !== path.resolve(currentDir, '..')) {
11
- if (
12
- fs.existsSync(
13
- path.join(currentDir, 'node_modules/@akinon/next/package.json')
14
- )
15
- ) {
16
- return currentDir;
17
- }
18
- currentDir = path.resolve(currentDir, '..');
19
- }
20
-
21
- return path.resolve(__dirname, '../../../../');
22
- }
23
-
24
- const BASE_DIR = checkDir();
25
-
26
- try {
27
- const akinonNextPackagePath = fs.existsSync(
28
- path.join(BASE_DIR, 'packages/akinon-next/package.json')
29
- )
30
- ? path.join(BASE_DIR, 'packages/akinon-next/package.json')
31
- : path.join(BASE_DIR, 'node_modules/@akinon/next/package.json');
32
-
33
- let akinonNextPackage = JSON.parse(
34
- fs.readFileSync(akinonNextPackagePath, 'utf8')
35
- );
36
-
37
- const projectZeroPwaPackagePath = path.join(BASE_DIR, 'package.json');
38
-
39
- const projectZeroPwaPackage = JSON.parse(
40
- fs.readFileSync(projectZeroPwaPackagePath, 'utf8')
41
- );
42
-
43
- const { peerDependencies } = akinonNextPackage;
44
-
45
- let hasErrors = false;
46
-
47
- let errorMessages = [];
48
-
49
- for (const dependency in peerDependencies) {
50
- const requiredVersion = peerDependencies[dependency];
51
-
52
- const installedVersion =
53
- projectZeroPwaPackage.dependencies[dependency] ||
54
- projectZeroPwaPackage.devDependencies[dependency];
55
-
56
- if (!installedVersion) {
57
- errorMessages.push(
58
- `Dependency ${dependency} is missing in projectzeropwa.`
59
- );
60
- hasErrors = true;
61
- } else {
62
- const requiredSemver = semver.coerce(requiredVersion);
63
-
64
- const installedSemver = semver.coerce(installedVersion);
65
-
66
- if (!requiredSemver || !installedSemver) {
67
- errorMessages.push(
68
- `Invalid semver for ${dependency}: required ${requiredVersion}, found ${installedVersion}`
69
- );
70
- hasErrors = true;
71
- } else if (
72
- requiredSemver.major !== installedSemver.major ||
73
- requiredSemver.minor !== installedSemver.minor
74
- ) {
75
- errorMessages.push(
76
- `Version mismatch for ${dependency}: expected ${requiredVersion} or higher but found ${installedVersion}`
77
- );
78
- hasErrors = true;
79
- }
80
- }
81
- }
82
-
83
- if (hasErrors) {
84
- console.error(
85
- '\x1b[31mDependency errors found:\n' +
86
- errorMessages.join('\n') +
87
- '\x1b[0m'
88
- );
89
- process.exit(1);
90
- }
91
-
92
- console.log(
93
- 'All dependencies are installed and compatible in projectzeropwa.'
94
- );
95
- } catch (error) {
96
- console.error('\x1b[31mError:', error.message + '\x1b[0m');
97
- process.exit(1);
98
- }
1
+ #!/usr/bin/env node
2
+
3
+ const fs = require('fs');
4
+ const path = require('path');
5
+ const semver = require('semver');
6
+
7
+ function checkDir() {
8
+ let currentDir = __dirname;
9
+
10
+ while (currentDir !== path.resolve(currentDir, '..')) {
11
+ if (
12
+ fs.existsSync(
13
+ path.join(currentDir, 'node_modules/@akinon/next/package.json')
14
+ )
15
+ ) {
16
+ return currentDir;
17
+ }
18
+ currentDir = path.resolve(currentDir, '..');
19
+ }
20
+
21
+ return path.resolve(__dirname, '../../../../');
22
+ }
23
+
24
+ const BASE_DIR = checkDir();
25
+
26
+ try {
27
+ const akinonNextPackagePath = fs.existsSync(
28
+ path.join(BASE_DIR, 'packages/akinon-next/package.json')
29
+ )
30
+ ? path.join(BASE_DIR, 'packages/akinon-next/package.json')
31
+ : path.join(BASE_DIR, 'node_modules/@akinon/next/package.json');
32
+
33
+ let akinonNextPackage = JSON.parse(
34
+ fs.readFileSync(akinonNextPackagePath, 'utf8')
35
+ );
36
+
37
+ const projectZeroPwaPackagePath = path.join(BASE_DIR, 'package.json');
38
+
39
+ const projectZeroPwaPackage = JSON.parse(
40
+ fs.readFileSync(projectZeroPwaPackagePath, 'utf8')
41
+ );
42
+
43
+ const { peerDependencies } = akinonNextPackage;
44
+
45
+ let hasErrors = false;
46
+
47
+ let errorMessages = [];
48
+
49
+ for (const dependency in peerDependencies) {
50
+ const requiredVersion = peerDependencies[dependency];
51
+
52
+ const installedVersion =
53
+ projectZeroPwaPackage.dependencies[dependency] ||
54
+ projectZeroPwaPackage.devDependencies[dependency];
55
+
56
+ if (!installedVersion) {
57
+ errorMessages.push(
58
+ `Dependency ${dependency} is missing in projectzeropwa.`
59
+ );
60
+ hasErrors = true;
61
+ } else {
62
+ const requiredSemver = semver.coerce(requiredVersion);
63
+
64
+ const installedSemver = semver.coerce(installedVersion);
65
+
66
+ if (!requiredSemver || !installedSemver) {
67
+ errorMessages.push(
68
+ `Invalid semver for ${dependency}: required ${requiredVersion}, found ${installedVersion}`
69
+ );
70
+ hasErrors = true;
71
+ } else if (
72
+ requiredSemver.major !== installedSemver.major ||
73
+ requiredSemver.minor !== installedSemver.minor
74
+ ) {
75
+ errorMessages.push(
76
+ `Version mismatch for ${dependency}: expected ${requiredVersion} or higher but found ${installedVersion}`
77
+ );
78
+ hasErrors = true;
79
+ }
80
+ }
81
+ }
82
+
83
+ if (hasErrors) {
84
+ console.error(
85
+ '\x1b[31mDependency errors found:\n' +
86
+ errorMessages.join('\n') +
87
+ '\x1b[0m'
88
+ );
89
+ process.exit(1);
90
+ }
91
+
92
+ console.log(
93
+ 'All dependencies are installed and compatible in projectzeropwa.'
94
+ );
95
+ } catch (error) {
96
+ console.error('\x1b[31mError:', error.message + '\x1b[0m');
97
+ process.exit(1);
98
+ }
@@ -1,33 +1,33 @@
1
- #!/usr/bin/env node
2
-
3
- const fs = require('fs');
4
- const path = require('path');
5
- const rootDir = path.resolve(process.cwd());
6
- const spawn = require('cross-spawn');
7
- const availablePlugins = require('../plugins');
8
-
9
- let plugins;
10
-
11
- try {
12
- plugins = require(path.resolve(rootDir, './src/plugins.js'));
13
- } catch (error) {}
14
-
15
- let installCmd = [];
16
-
17
- availablePlugins
18
- .filter((p) => plugins?.includes(p))
19
- .forEach((name) => {
20
- installCmd.push(`git+https://bitbucket.org/akinonteam/${name}`);
21
- });
22
-
23
- spawn.sync('yarn', ['cache clean']);
24
- spawn.sync('yarn', ['remove', ...availablePlugins]);
25
-
26
- if (
27
- installCmd.length > 0 &&
28
- !fs.existsSync(path.resolve(rootDir, '../../turbo.json'))
29
- ) {
30
- spawn.sync('yarn', ['add', ...installCmd, '--ignore-scripts'], {
31
- stdio: 'inherit'
32
- });
33
- }
1
+ #!/usr/bin/env node
2
+
3
+ const fs = require('fs');
4
+ const path = require('path');
5
+ const rootDir = path.resolve(process.cwd());
6
+ const spawn = require('cross-spawn');
7
+ const availablePlugins = require('../plugins');
8
+
9
+ let plugins;
10
+
11
+ try {
12
+ plugins = require(path.resolve(rootDir, './src/plugins.js'));
13
+ } catch (error) {}
14
+
15
+ let installCmd = [];
16
+
17
+ availablePlugins
18
+ .filter((p) => plugins?.includes(p))
19
+ .forEach((name) => {
20
+ installCmd.push(`git+https://bitbucket.org/akinonteam/${name}`);
21
+ });
22
+
23
+ spawn.sync('yarn', ['cache clean']);
24
+ spawn.sync('yarn', ['remove', ...availablePlugins]);
25
+
26
+ if (
27
+ installCmd.length > 0 &&
28
+ !fs.existsSync(path.resolve(rootDir, '../../turbo.json'))
29
+ ) {
30
+ spawn.sync('yarn', ['add', ...installCmd, '--ignore-scripts'], {
31
+ stdio: 'inherit'
32
+ });
33
+ }
@@ -1,58 +1,58 @@
1
- #!/usr/bin/env node
2
-
3
- const fs = require('fs');
4
- const path = require('path');
5
- const spawn = require('cross-spawn');
6
-
7
- function findBaseDir() {
8
- const insideNodeModules = __dirname.includes('node_modules');
9
-
10
- if (insideNodeModules) {
11
- return path.resolve(__dirname, '../../../../');
12
- } else {
13
- return path.resolve(__dirname, '../../../apps/projectzeropwa');
14
- }
15
- }
16
-
17
- const BASE_DIR = findBaseDir();
18
-
19
- const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
20
-
21
- let theme;
22
- try {
23
- theme = require(getFullPath('src/theme.js'));
24
- } catch (error) {
25
- console.error('Error loading theme.js:', error.message);
26
- process.exit(1);
27
- }
28
-
29
- try {
30
- const tsConfigPath = getFullPath('tsconfig.json');
31
-
32
- if (!fs.existsSync(tsConfigPath)) {
33
- throw new Error(`tsconfig.json not found at ${tsConfigPath}`);
34
- }
35
-
36
- const tsConfigContent = fs.readFileSync(tsConfigPath, 'utf8');
37
- const themePaths = ['"./*"'];
38
-
39
- if (theme !== 'default') {
40
- themePaths.splice(0, 0, `"themes/${theme}/*"`);
41
- }
42
-
43
- const newContent = tsConfigContent.replace(
44
- /"@theme\/\*":\s\[.+\]/,
45
- `"@theme/*": [${themePaths.join(', ')}]`
46
- );
47
-
48
- fs.writeFileSync(tsConfigPath, newContent);
49
-
50
- if (fs.existsSync(getFullPath('turbo.json'))) {
51
- spawn.sync('turbo', ['clean'], {
52
- stdio: 'inherit'
53
- });
54
- }
55
- } catch (error) {
56
- console.error('Error modifying tsconfig.json:', error.message);
57
- process.exit(1);
58
- }
1
+ #!/usr/bin/env node
2
+
3
+ const fs = require('fs');
4
+ const path = require('path');
5
+ const spawn = require('cross-spawn');
6
+
7
+ function findBaseDir() {
8
+ const insideNodeModules = __dirname.includes('node_modules');
9
+
10
+ if (insideNodeModules) {
11
+ return path.resolve(__dirname, '../../../../');
12
+ } else {
13
+ return path.resolve(__dirname, '../../../apps/projectzeropwa');
14
+ }
15
+ }
16
+
17
+ const BASE_DIR = findBaseDir();
18
+
19
+ const getFullPath = (relativePath) => path.join(BASE_DIR, relativePath);
20
+
21
+ let theme;
22
+ try {
23
+ theme = require(getFullPath('src/theme.js'));
24
+ } catch (error) {
25
+ console.error('Error loading theme.js:', error.message);
26
+ process.exit(1);
27
+ }
28
+
29
+ try {
30
+ const tsConfigPath = getFullPath('tsconfig.json');
31
+
32
+ if (!fs.existsSync(tsConfigPath)) {
33
+ throw new Error(`tsconfig.json not found at ${tsConfigPath}`);
34
+ }
35
+
36
+ const tsConfigContent = fs.readFileSync(tsConfigPath, 'utf8');
37
+ const themePaths = ['"./*"'];
38
+
39
+ if (theme !== 'default') {
40
+ themePaths.splice(0, 0, `"themes/${theme}/*"`);
41
+ }
42
+
43
+ const newContent = tsConfigContent.replace(
44
+ /"@theme\/\*":\s\[.+\]/,
45
+ `"@theme/*": [${themePaths.join(', ')}]`
46
+ );
47
+
48
+ fs.writeFileSync(tsConfigPath, newContent);
49
+
50
+ if (fs.existsSync(getFullPath('turbo.json'))) {
51
+ spawn.sync('turbo', ['clean'], {
52
+ stdio: 'inherit'
53
+ });
54
+ }
55
+ } catch (error) {
56
+ console.error('Error modifying tsconfig.json:', error.message);
57
+ process.exit(1);
58
+ }
@@ -1 +1 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
package/bin/pz-postdev.js CHANGED
@@ -1 +1 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
@@ -1,6 +1,6 @@
1
- #!/usr/bin/env node
2
-
3
- const runScript = require('./run-script');
4
-
5
- runScript('pz-check-dependencies.js');
6
- runScript('pz-install-plugins.js');
1
+ #!/usr/bin/env node
2
+
3
+ const runScript = require('./run-script');
4
+
5
+ runScript('pz-check-dependencies.js');
6
+ runScript('pz-install-plugins.js');
@@ -1 +1 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
@@ -1,4 +1,4 @@
1
- #!/usr/bin/env node
2
-
3
- const runScript = require('./run-script');
4
- runScript('pz-install-theme.js');
1
+ #!/usr/bin/env node
2
+
3
+ const runScript = require('./run-script');
4
+ runScript('pz-install-theme.js');
package/bin/pz-predev.js CHANGED
@@ -1,4 +1,4 @@
1
- #!/usr/bin/env node
2
-
3
- const runScript = require('./run-script');
4
- runScript('pz-install-theme.js');
1
+ #!/usr/bin/env node
2
+
3
+ const runScript = require('./run-script');
4
+ runScript('pz-install-theme.js');
@@ -1 +1 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
package/bin/run-script.js CHANGED
@@ -1,44 +1,44 @@
1
- const spawn = require('cross-spawn');
2
- const path = require('path');
3
- const fs = require('fs');
4
-
5
- function runScript(scriptName) {
6
- let currentPath;
7
-
8
- const monorepoPath = path.join(
9
- process.cwd(),
10
- '../../packages/akinon-next/bin',
11
- scriptName
12
- );
13
-
14
- const standardRepoPath = path.join(
15
- process.cwd(),
16
- 'node_modules/@akinon/next/bin',
17
- scriptName
18
- );
19
-
20
- if (fs.existsSync(monorepoPath)) {
21
- currentPath = monorepoPath;
22
- } else if (fs.existsSync(standardRepoPath)) {
23
- currentPath = standardRepoPath;
24
- } else {
25
- console.error(`Unable to find the ${scriptName} file`);
26
- return;
27
- }
28
-
29
- const result = spawn.sync('node', [currentPath], { stdio: 'inherit' });
30
-
31
- if (result.error) {
32
- console.error(`Error executing ${scriptName}:`, result.error);
33
- process.exit(1);
34
- }
35
-
36
- if (result.status !== 0) {
37
- console.error(
38
- `Script ${scriptName} failed with exit code ${result.status}`
39
- );
40
- process.exit(result.status);
41
- }
42
- }
43
-
44
- module.exports = runScript;
1
+ const spawn = require('cross-spawn');
2
+ const path = require('path');
3
+ const fs = require('fs');
4
+
5
+ function runScript(scriptName) {
6
+ let currentPath;
7
+
8
+ const monorepoPath = path.join(
9
+ process.cwd(),
10
+ '../../packages/akinon-next/bin',
11
+ scriptName
12
+ );
13
+
14
+ const standardRepoPath = path.join(
15
+ process.cwd(),
16
+ 'node_modules/@akinon/next/bin',
17
+ scriptName
18
+ );
19
+
20
+ if (fs.existsSync(monorepoPath)) {
21
+ currentPath = monorepoPath;
22
+ } else if (fs.existsSync(standardRepoPath)) {
23
+ currentPath = standardRepoPath;
24
+ } else {
25
+ console.error(`Unable to find the ${scriptName} file`);
26
+ return;
27
+ }
28
+
29
+ const result = spawn.sync('node', [currentPath], { stdio: 'inherit' });
30
+
31
+ if (result.error) {
32
+ console.error(`Error executing ${scriptName}:`, result.error);
33
+ process.exit(1);
34
+ }
35
+
36
+ if (result.status !== 0) {
37
+ console.error(
38
+ `Script ${scriptName} failed with exit code ${result.status}`
39
+ );
40
+ process.exit(result.status);
41
+ }
42
+ }
43
+
44
+ module.exports = runScript;
@@ -1,52 +1,52 @@
1
- 'use client';
2
-
3
- import { useState } from 'react';
4
- import { Icon } from './icon';
5
- import { twMerge } from 'tailwind-merge';
6
- import { AccordionProps } from '../types';
7
-
8
- export const Accordion = ({
9
- isCollapse = false,
10
- title,
11
- subTitle,
12
- icons = ['chevron-up', 'chevron-down'],
13
- iconSize = 16,
14
- iconColor = 'fill-[#000000]',
15
- children,
16
- className,
17
- titleClassName,
18
- dataTestId
19
- }: AccordionProps) => {
20
- const [collapse, setCollapse] = useState(isCollapse);
21
-
22
- return (
23
- <div
24
- className={twMerge(
25
- 'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
26
- className
27
- )}
28
- >
29
- <div
30
- className="flex items-center justify-between cursor-pointer"
31
- onClick={() => setCollapse(!collapse)}
32
- data-testid={dataTestId}
33
- >
34
- <div className="flex flex-col">
35
- {title && (
36
- <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
37
- )}
38
- {subTitle && <h4 className="text-xs text-gray-700">{subTitle}</h4>}
39
- </div>
40
-
41
- {icons && (
42
- <Icon
43
- name={collapse ? icons[0] : icons[1]}
44
- size={iconSize}
45
- className={`fill-[${iconColor}]}`}
46
- />
47
- )}
48
- </div>
49
- {collapse && <div className="mt-3 text-sm">{children}</div>}
50
- </div>
51
- );
52
- };
1
+ 'use client';
2
+
3
+ import { useState } from 'react';
4
+ import { Icon } from './icon';
5
+ import { twMerge } from 'tailwind-merge';
6
+ import { AccordionProps } from '../types';
7
+
8
+ export const Accordion = ({
9
+ isCollapse = false,
10
+ title,
11
+ subTitle,
12
+ icons = ['chevron-up', 'chevron-down'],
13
+ iconSize = 16,
14
+ iconColor = 'fill-[#000000]',
15
+ children,
16
+ className,
17
+ titleClassName,
18
+ dataTestId
19
+ }: AccordionProps) => {
20
+ const [collapse, setCollapse] = useState(isCollapse);
21
+
22
+ return (
23
+ <div
24
+ className={twMerge(
25
+ 'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
26
+ className
27
+ )}
28
+ >
29
+ <div
30
+ className="flex items-center justify-between cursor-pointer"
31
+ onClick={() => setCollapse(!collapse)}
32
+ data-testid={dataTestId}
33
+ >
34
+ <div className="flex flex-col">
35
+ {title && (
36
+ <h3 className={twMerge('text-sm', titleClassName)}>{title}</h3>
37
+ )}
38
+ {subTitle && <h4 className="text-xs text-gray-700">{subTitle}</h4>}
39
+ </div>
40
+
41
+ {icons && (
42
+ <Icon
43
+ name={collapse ? icons[0] : icons[1]}
44
+ size={iconSize}
45
+ className={`fill-[${iconColor}]}`}
46
+ />
47
+ )}
48
+ </div>
49
+ {collapse && <div className="mt-3 text-sm">{children}</div>}
50
+ </div>
51
+ );
52
+ };