@sisense/sdk-shared-ui 0.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.
- package/.eslintignore +4 -0
- package/.prettierignore +11 -0
- package/LICENSE.md +35 -0
- package/README.md +91 -0
- package/dist/index.js +4 -0
- package/package.json +72 -0
- package/src/index.ts +1 -0
- package/src/lib/@types/sass.d.ts +19 -0
- package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.module.scss +7 -0
- package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.test.tsx +105 -0
- package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.tsx +89 -0
- package/src/lib/DEPRECATED_Icon/index.ts +4 -0
- package/src/lib/index.ts +1 -0
- package/tsconfig.eslint.json +12 -0
- package/tsconfig.json +17 -0
- package/tsconfig.lib.json +21 -0
- package/tsconfig.spec.json +21 -0
- package/vite.config.ts +123 -0
package/.eslintignore
ADDED
package/.prettierignore
ADDED
package/LICENSE.md
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# SISENSE COMPOSE SDK
|
|
2
|
+
|
|
3
|
+
# END USER LICENSE AGREEMENT
|
|
4
|
+
|
|
5
|
+
THIS END USER LICENSE AGREEMENT (“EULA”) FORMS A BINDING AGREEMENT BETWEEN YOU INDIVIDUALLY OR THE ENTITY ON WHOSE BEHALF YOU ARE ACCEPTING THIS AGREEMENT (“YOU”) AND DESCRIBES THE TERMS AND CONDITIONS GOVERNING THE USE OF ANY APPLICATION PROGRAMMING INTERFACE, SOFTWARE DEVELOPMENT KIT, CODE SNIPPET, SAMPLE CODE, USER INTERFACE COMPONENT, VISUALIZATION, CLI TOOLS, OR SAMPLE DATA, AND THE CORRESPONDING DOCUMENTATION FOR EACH, ANY UPDATES AND UPGRADES THERETO, AND ANY MODIFICATIONS, ENHANCEMENTS, OR IMPROVEMENTS, OF ANY OF THE FOREGOING (EACH, A “TOOL” AND COLLECTIVELY, THE “TOOLS”), MADE AVAILABLE BY SISENSE LTD. OR ITS AFFILIATES (“SISENSE”).
|
|
6
|
+
|
|
7
|
+
1. ACCEPTANCE. By downloading, importing, installing and/or using any Tool (or any portion thereof), You represent and warrant that: (a) You have read, understand and accept all of the provisions of this EULA; and (b) if You are accepting on behalf of an entity, You are an employee, contractor or agent of such entity and have the authority and all legal power to accept on behalf of such entity.
|
|
8
|
+
|
|
9
|
+
2. LICENSE SCOPE. Subject to the terms and conditions of this EULA, Sisense hereby grants You a royalty-free, non-exclusive, non-transferrable, limited license to access, download and use the Tools (in the manner described in the documentation for such Tool) solely for utilization with Your use of the applicable Sisense subscription product (the “Product”), to which You must have purchased the necessary license and use rights pursuant to a separate written agreement with Sisense (the “Master Subscription Agreement”).
|
|
10
|
+
|
|
11
|
+
3. RESTRICTIONS. You agree that You will not (and have no license to) and will not permit any third party to: (i) use the Tools except as permitted under this EULA; (ii) sell, resell, license, sublicense, rent, lease, encumber, lend, distribute, transfer, or provide a third party with access to the Tools; (iii) modify or create derivative works of the Tools; (iv) circumvent or remove by any means any copy protection used by Sisense in connection with the Tools; (v) use the Tools to develop a competitive product offering; (vi) use the Tool to access Sisense products in a manner not authorized by the Master Subscription Agreement or this EULA; or (vii) use the Tools in any manner that violates the Master Subscription Agreement or any applicable laws or regulations;
|
|
12
|
+
|
|
13
|
+
4. SISENSE OWNERSHIP. Except for those portions licensed to Sisense by third parties, Sisense retains all right, title and interest in and to the Tools, including without limitation all copyrights and other intellectual property or other proprietary rights worldwide therein (including but not limited to all patent, trademark, service mark, copyright, trade secret, know-how, moral right, and any other intellectual and intangible property rights, including all continuations, continuations in part, applications, renewals, and extensions of any of the foregoing, whether registered or unregistered). All rights not expressly granted herein are reserved. You may not remove, delete or modify any of the Sisense copyright statements in the Tools.
|
|
14
|
+
|
|
15
|
+
5. OPEN SOURCE COMPONENTS. To the extent any open source software components are provided with or used by the Tools, such components are licensed to You under the terms of the applicable license agreements included with such open source software components.
|
|
16
|
+
|
|
17
|
+
6. THIRD-PARTY COMPONENTS. To the extent that any Tool includes one or more components licensed by a third-party (a “Component”), and such third-party’s license requirements apply to such Component in a Tool, such additional license terms will be provided in the open source disclosure file provided with or within a Tool download. Third-party license terms shall take precedence over this EULA to the extent that they impose additional restrictions or limitations on You than the license provided herein for download and use of a Component. You agree that: (a) to the extent that the terms between You and the third party for use of a third-party technology accessed by the Component are more restrictive, such terms shall apply to Your use of the Component; (b) Sisense, and not the third party, is responsible for the Component including, without limitation, for any warranties, maintenance, and support thereof, and the third party does not warrant the Component’s accuracy, reliability, completeness, usefulness, non-infringement, or quality of the Component, and will not be liable for any losses or damages of any kind, including lost profits or other indirect or consequential damages, relating to use of or reliance on the Component; and (c) the third party owns all right, title, and interest in and to the Component, including all intellectual property rights therein.
|
|
18
|
+
|
|
19
|
+
7. TERM, TERMINATION, AND CHANGES. This EULA shall continue as long as You are in compliance with the terms specified herein or until otherwise terminated. This EULA shall automatically terminate upon the expiration or termination of the Master Subscription Agreement. You agree, upon termination, to destroy all copies of the Tools within Your possession or control. The Disclaimer of Warranties, Limitation of Liability and Indemnification sections set out in this EULA shall survive any termination or expiration of this EULA. Sisense may, in its sole discretion, update this EULA from time to time.
|
|
20
|
+
|
|
21
|
+
8. NO DUTY TO SUPPORT. You expressly acknowledge that Sisense has no duty or obligation to support the Tools, or to provide updates or bug fixes to the Tools.
|
|
22
|
+
|
|
23
|
+
9. DISCLAIMER OF WARRANTIES. THE TOOLS ARE PROVIDED “AS IS” WITHOUT ANY WARRANTIES OF ANY KIND. TO THE MAXIMUM EXTENT PERMITTED BY LAW, SISENSE DISCLAIMS RESPONSIBILITY FOR ANY HARM RESULTING FROM YOUR USE OF ANY TOOL. SISENSE DISCLAIMS TO THE FULLEST EXTENT PERMITTED, ALL GUARANTEES AND EXPRESS, IMPLIED AND STATUTORY WARRANTIES, INCLUDING WITHOUT LIMITATION THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT OF PROPRIETARY RIGHTS, AND ANY WARRANTIES REGARDING THE AVAILABILITY, SECURITY, RELIABILITY, TIMELINESS AND PERFORMANCE OF ANY TOOL. YOU ACKNOWLEDGE THAT YOU DOWNLOAD AND USE THE TOOLS AT YOUR OWN DISCRETION AND RISK, AND YOU ARE SOLELY RESPONSIBLE FOR ANY DAMAGES TO HARDWARE DEVICES OR LOSS OF DATA THAT RESULT FROM THE DOWNLOAD OR USE OF ANY TOOL.
|
|
24
|
+
|
|
25
|
+
10. LIMITATION OF LIABILITY. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT WILL SISENSE BE LIABLE FOR ANY LOST PROFITS OR BUSINESS OPPORTUNITIES, LOSS OF USE, BUSINESS INTERRUPTION, LOSS OF DATA, OR ANY OTHER INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING OUT OF OR FROM LIBRARY OR YOUR USE OF THE TOOLS, UNDER ANY THEORY OF LIABILITY, WHETHER BASED IN CONTRACT, TORT, NEGLIGENCE, PRODUCT LIABILITY, OR OTHERWISE. TO THE EXTENT THE PRECEDING LIMITATION DOES NOT APPLY UNDER APPLICABLE LAW, SISENSE’S LIABILITY ARISING OUT OF THE TOOLS PROVIDED HEREUNDER SHALL NOT, IN ANY EVENT, EXCEED USD $100.00.
|
|
26
|
+
|
|
27
|
+
THE FOREGOING LIMITATIONS SHALL APPLY TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, REGARDLESS OF WHETHER A PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES AND REGARDLESS OF WHETHER ANY REMEDY FAILS OF ITS ESSENTIAL PURPOSE.
|
|
28
|
+
|
|
29
|
+
11. INDEMNIFICATION. You agree to defend, indemnify and hold harmless Sisense, and any of its directors, officers, employees, affiliates, subsidiaries or agents, from and against any and all claims, losses, damages, liabilities and other expenses (including reasonable attorneys' fees), arising from or related to: (i) Your use of the Tools; (ii) any derivative works You create using the Tools; and (iii) Your breach of this EULA.
|
|
30
|
+
|
|
31
|
+
12. EXPORT CONTROL. The Tools are provided subject to the U.S. Export Administration Regulations and the regulations of other jurisdictions (e.g., the European Union). Diversion contrary to applicable law is prohibited. Without limiting the foregoing, You agree that (i) You are not acting on behalf of any person who is a citizen, national, or resident of, or who is controlled by the government of any country to which the United States or other applicable government body has prohibited export transactions; (ii) You are not acting on behalf of, any person or entity listed on a relevant list of persons to whom export is prohibited (e.g., the U.S. Treasury Department list of Specially Designated Nationals and Blocked Persons, the U.S. Commerce Department Denied Persons List or Entity List, etc.); and (iii) You will not use the Tools for any purpose prohibited by applicable law.
|
|
32
|
+
|
|
33
|
+
13. GOVERNMENT USE. If a Tool provided under the Master Subscription Agreement is software, then it is commercial computer software developed exclusively at private expense. Unless otherwise set forth in the Master Subscription Agreement, use, duplication, and disclosure by civilian agencies of the U.S. Government will not exceed those minimum rights set forth in FAR 52.227-19(c) or successor regulations. Use, duplication, and disclosure by U.S. Department of Defense agencies is subject solely to the license terms contained in this EULA, as stated in DFARS 227.7202 or successor regulations. U.S. Government rights will apply only to the specific agency and program for which the Product is obtained.
|
|
34
|
+
|
|
35
|
+
14. GOVERNING LAW; ENTIRE AGREEMENT. This EULA shall be governed by the laws of the State of New York and the United States of America without regard to conflict of laws principles. You may not assign any part of this EULA without the prior written consent of Sisense. Any attempted assignment without consent shall be void. This EULA represents the entire agreement between You and Sisense with respect to the Tools and supersedes all prior written or oral communications, understandings and agreements containing the subject matter contained herein. Any waiver of these terms must be in writing to be effective. If any provision of these terms is found to be invalid or unenforceable, the remaining terms will continue to be valid and enforceable to the fullest extent permitted by law. In the event of a conflict between this EULA and the Master Subscription Agreement, the terms of this EULA will prevail to the extent applicable to the license and use of the Tools.
|
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
### SDK Shared UI Components
|
|
2
|
+
|
|
3
|
+
The SDK Shared UI is a library of internal React components designed to streamline development for frontend developers, primarily focused on use in CSDK-related projects.
|
|
4
|
+
The goal is to save developers' time by promoting reuse of existing work, enabling faster feature development, quicker bug resolution, and greater consistency across projects.
|
|
5
|
+
|
|
6
|
+
### Status of SDK shared UI Components
|
|
7
|
+
|
|
8
|
+
🚧 In Progress
|
|
9
|
+
|
|
10
|
+
### Steps for Adding New Components
|
|
11
|
+
|
|
12
|
+
Follow the Existing Structure: Ensure that the new component follows the same structure and conventions as the existing components in the library.
|
|
13
|
+
|
|
14
|
+
Unit Tests: Provide unit tests for the new component to ensure it functions correctly.
|
|
15
|
+
|
|
16
|
+
Storybook Stories: Add Storybook stories for the new component to enable visual testing and documentation.
|
|
17
|
+
|
|
18
|
+
Update `package.json` (Export Configuration): Add the new component to the export configuration in the package.json file located in the root of the package.
|
|
19
|
+
|
|
20
|
+
Update `typesVersions` Configuration: Include the new component type in the typesVersions configuration in the `package.json` file located in the root of the package.
|
|
21
|
+
|
|
22
|
+
### Usage
|
|
23
|
+
|
|
24
|
+
To use the sdk-shared-ui in your React components import the components you need from the library:
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
// Named import example
|
|
28
|
+
import { DEPRECATED_Icon } from '@sisense/sdk-shared-ui';
|
|
29
|
+
|
|
30
|
+
const App = () => {
|
|
31
|
+
return <DEPRECATED_Icon {...props} />;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export default App;
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
// Default import example from subpath
|
|
39
|
+
import DEPRECATED_Icon from '@sisense/sdk-shared-ui/DEPRECATED_Icon';
|
|
40
|
+
|
|
41
|
+
const App = () => {
|
|
42
|
+
return <DEPRECATED_Icon {...props} />;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export default App;
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Available Scripts
|
|
49
|
+
|
|
50
|
+
## Build
|
|
51
|
+
|
|
52
|
+
- `yarn build`
|
|
53
|
+
Builds the library in deployment mode.
|
|
54
|
+
|
|
55
|
+
- `yarn build:prod`
|
|
56
|
+
Builds the library in production mode.
|
|
57
|
+
|
|
58
|
+
- `yarn build -p @sisense/sdk-shared-ui --verbose`
|
|
59
|
+
Builds only the @sisense/sdk-shared-ui package in development mode.
|
|
60
|
+
- `yarn build:prod -p @sisense/sdk-shared-ui --verbose`
|
|
61
|
+
Builds only the @sisense/sdk-shared-ui package in production mode.
|
|
62
|
+
|
|
63
|
+
## Format
|
|
64
|
+
|
|
65
|
+
- `yarn format:check`
|
|
66
|
+
Checks the code formatting using Prettier and ESLint.
|
|
67
|
+
- `yarn nx:format:check -p @sisense/sdk-shared-ui --verbose`
|
|
68
|
+
Checks the code formatting using Prettier and ESLint for this package.
|
|
69
|
+
- `yarn format`
|
|
70
|
+
Automatically formats code using Prettier and fixes fixable issues with ESLint.
|
|
71
|
+
- `yarn nx:format -p @sisense/sdk-shared-ui --verbose`
|
|
72
|
+
Checks the code formatting using Prettier and ESLint for this package.
|
|
73
|
+
|
|
74
|
+
## Unit Tests
|
|
75
|
+
|
|
76
|
+
- `yarn test`
|
|
77
|
+
Runs [vitest](https://vitest.dev/) unit tests.
|
|
78
|
+
- `yarn nx:test -p @sisense/sdk-shared-ui --verbose`
|
|
79
|
+
Runs unit tests for the @sisense/sdk-shared-ui package.
|
|
80
|
+
|
|
81
|
+
- `yarn test:watch`
|
|
82
|
+
Runs unit tests in watch mode using Vitest.
|
|
83
|
+
|
|
84
|
+
- `yarn workspaces foreach --include @sisense/sdk-shared-ui run test:watch`
|
|
85
|
+
Runs unit tests in watch mode specifically for the @sisense/sdk-shared-ui package.
|
|
86
|
+
|
|
87
|
+
- `yarn test:coverage`
|
|
88
|
+
Runs unit tests with coverage reporting using Vitest.
|
|
89
|
+
|
|
90
|
+
- `yarn nx:test:coverage -p @sisense/sdk-shared-ui --verbose`
|
|
91
|
+
Runs unit tests with coverage reporting specifically for the @sisense/sdk-shared-ui package.
|
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sisense/sdk-shared-ui",
|
|
3
|
+
"homepage": "https://sisense.dev/guides/sdk/",
|
|
4
|
+
"repository": {
|
|
5
|
+
"type": "git",
|
|
6
|
+
"url": "https://github.com/sisense/compose-sdk-monorepo",
|
|
7
|
+
"directory": "packages/sdk-shared-ui"
|
|
8
|
+
},
|
|
9
|
+
"version": "0.1.0",
|
|
10
|
+
"type": "module",
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"main": "./dist/index.js",
|
|
13
|
+
"module": "./dist/index.js",
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"import": "./dist/index.js",
|
|
18
|
+
"default": "./dist/index.js",
|
|
19
|
+
"require": "./dist/index.cjs",
|
|
20
|
+
"types": "./dist/index.d.ts"
|
|
21
|
+
},
|
|
22
|
+
"./DEPRECATED_Icon": {
|
|
23
|
+
"import": "./dist/lib/DEPRECATED_Icon/DEPRECATED_Icon.js",
|
|
24
|
+
"require": "./dist/lib/DEPRECATED_Icon/DEPRECATED_Icon.cjs",
|
|
25
|
+
"types": "./dist/lib/DEPRECATED_Icon/DEPRECATED_Icon.d.ts"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"typesVersions": {
|
|
29
|
+
"*": {
|
|
30
|
+
"DEPRECATED_Icon": [
|
|
31
|
+
"./dist/lib/DEPRECATED_Icon/DEPRECATED_Icon.d.ts"
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"scripts": {
|
|
36
|
+
"dev": "vite",
|
|
37
|
+
"type-check": "tsc --noEmit",
|
|
38
|
+
"build": "run type-check && vite build --mode development",
|
|
39
|
+
"build:prod": "run type-check && vite build",
|
|
40
|
+
"clean": "rm -rf dist coverage tsconfig.build.tsbuildinfo tsconfig.prod.tsbuildinfo",
|
|
41
|
+
"format": "prettier --write .",
|
|
42
|
+
"format:check": "prettier --check .",
|
|
43
|
+
"vitest": "run -T vitest",
|
|
44
|
+
"test": "vitest run",
|
|
45
|
+
"test:watch": "vitest watch",
|
|
46
|
+
"test:coverage": "run vitest run --coverage"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
50
|
+
"@testing-library/react": "^16.0.1",
|
|
51
|
+
"@types/react": "^18.3.1",
|
|
52
|
+
"@types/react-dom": "^18.3.1",
|
|
53
|
+
"@vitejs/plugin-react": "^4.3.3",
|
|
54
|
+
"@vitest/coverage-v8": "^2.1.4",
|
|
55
|
+
"classnames": "^2.3.1",
|
|
56
|
+
"eslint": "^8.40.0",
|
|
57
|
+
"prettier": "3.3.3",
|
|
58
|
+
"react": "~18.3.1",
|
|
59
|
+
"react-dom": "~18.3.1",
|
|
60
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
61
|
+
"typescript": "4.8.4",
|
|
62
|
+
"vite": "^5.4.11",
|
|
63
|
+
"vite-plugin-css-injected-by-js": "^3.5.1",
|
|
64
|
+
"vite-plugin-dts": "^4.3.0",
|
|
65
|
+
"vitest": "^2.1.5"
|
|
66
|
+
},
|
|
67
|
+
"peerDependencies": {
|
|
68
|
+
"classnames": "^2.3.1",
|
|
69
|
+
"react": "^17.0.0 || ^18.3.1",
|
|
70
|
+
"react-dom": "^17.0.0 || ^18.3.1"
|
|
71
|
+
}
|
|
72
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './lib';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
declare module '*.scss' {
|
|
2
|
+
export const content: { [className: string]: string };
|
|
3
|
+
export default content;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
declare module '*.module.scss' {
|
|
7
|
+
const classes: { readonly [key: string]: string };
|
|
8
|
+
export default classes;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
declare module '*.module.sass' {
|
|
12
|
+
const classes: { readonly [key: string]: string };
|
|
13
|
+
export default classes;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
declare module '*.module.css' {
|
|
17
|
+
const classes: { readonly [key: string]: string };
|
|
18
|
+
export default classes;
|
|
19
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
3
|
+
import { describe, it, expect, vi } from 'vitest';
|
|
4
|
+
|
|
5
|
+
import '@testing-library/jest-dom';
|
|
6
|
+
|
|
7
|
+
import { DEPRECATED_Icon, DEPRECATED_IconProps } from './DEPRECATED_Icon';
|
|
8
|
+
|
|
9
|
+
describe('DEPRECATED_Icon Component', () => {
|
|
10
|
+
const defaultProps: DEPRECATED_IconProps = {
|
|
11
|
+
name: 'test-icon',
|
|
12
|
+
dataTestId: 'icon',
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
it('should renders without crashing', () => {
|
|
16
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
|
|
17
|
+
|
|
18
|
+
expect(getByTestId('icon')).toBeInTheDocument();
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('should apply the correct icon name class', () => {
|
|
22
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
|
|
23
|
+
|
|
24
|
+
expect(getByTestId('icon')).toHaveClass('app-icon--test-icon');
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('should apply hover suffix when hovered', () => {
|
|
28
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" />);
|
|
29
|
+
const icon = getByTestId('icon');
|
|
30
|
+
|
|
31
|
+
fireEvent.mouseEnter(icon);
|
|
32
|
+
|
|
33
|
+
expect(icon).toHaveClass('app-icon--test-icon-hover');
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
it('should apply hover suffix when hovered and and remove when hover out', () => {
|
|
37
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" />);
|
|
38
|
+
const icon = getByTestId('icon');
|
|
39
|
+
|
|
40
|
+
fireEvent.mouseEnter(icon);
|
|
41
|
+
fireEvent.mouseLeave(icon);
|
|
42
|
+
|
|
43
|
+
expect(icon).toHaveClass('app-icon--test-icon');
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
it('should not apply hover suffix when disabled', () => {
|
|
47
|
+
const { getByTestId } = render(
|
|
48
|
+
<DEPRECATED_Icon {...defaultProps} hoverSuffix="-hover" disabled />,
|
|
49
|
+
);
|
|
50
|
+
const icon = getByTestId('icon');
|
|
51
|
+
|
|
52
|
+
fireEvent.mouseEnter(icon);
|
|
53
|
+
|
|
54
|
+
expect(icon).not.toHaveClass('app-icon--test-icon-hover');
|
|
55
|
+
expect(icon).toHaveClass('app-icon--test-icon');
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
it('should handles click events when not disabled', () => {
|
|
59
|
+
const onClick = vi.fn();
|
|
60
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} onClick={onClick} />);
|
|
61
|
+
const icon = getByTestId('icon');
|
|
62
|
+
|
|
63
|
+
fireEvent.click(icon);
|
|
64
|
+
|
|
65
|
+
expect(onClick).toHaveBeenCalled();
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
it('should not trigger click events when disabled', () => {
|
|
69
|
+
const onClick = vi.fn();
|
|
70
|
+
const { getByTestId } = render(
|
|
71
|
+
<DEPRECATED_Icon {...defaultProps} onClick={onClick} disabled />,
|
|
72
|
+
);
|
|
73
|
+
const icon = getByTestId('icon');
|
|
74
|
+
|
|
75
|
+
expect(icon.className).toMatch(/disabled/);
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
it('should apply title attribute when title prop is provided and not disabled', () => {
|
|
79
|
+
const title = 'Icon Title';
|
|
80
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} title={title} />);
|
|
81
|
+
const icon = getByTestId('icon');
|
|
82
|
+
|
|
83
|
+
expect(icon).toHaveAttribute('title', title);
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
// There bug in the code, it should be fixed
|
|
87
|
+
it('should not apply title attribute when disabled', () => {
|
|
88
|
+
const title = 'Icon Title';
|
|
89
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} title={title} disabled />);
|
|
90
|
+
const icon = getByTestId('icon');
|
|
91
|
+
|
|
92
|
+
expect(icon).toHaveAttribute('title');
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
it('should render SVG with correct class and href', () => {
|
|
96
|
+
const { getByTestId } = render(<DEPRECATED_Icon {...defaultProps} />);
|
|
97
|
+
const icon = getByTestId('icon');
|
|
98
|
+
const svg = icon.querySelector('svg');
|
|
99
|
+
const useElement = svg?.querySelector('use');
|
|
100
|
+
|
|
101
|
+
expect(svg).toBeInTheDocument();
|
|
102
|
+
expect(svg).toHaveClass('app-icon__svg');
|
|
103
|
+
expect(useElement).toHaveAttribute('xlink:href', '#test-icon');
|
|
104
|
+
});
|
|
105
|
+
});
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React, { MouseEventHandler, useState } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
|
|
4
|
+
import styles from './DEPRECATED_Icon.module.scss';
|
|
5
|
+
|
|
6
|
+
export type DEPRECATED_IconProps = {
|
|
7
|
+
className?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
hoverSuffix?: string;
|
|
10
|
+
name: string;
|
|
11
|
+
onClick?: MouseEventHandler<HTMLSpanElement>;
|
|
12
|
+
onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
|
|
13
|
+
onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
|
|
14
|
+
spin?: boolean;
|
|
15
|
+
title?: string;
|
|
16
|
+
dataTestId?: string;
|
|
17
|
+
} & React.HTMLAttributes<HTMLSpanElement>;
|
|
18
|
+
|
|
19
|
+
const noop = () => {};
|
|
20
|
+
|
|
21
|
+
const DEPRECATED_Icon = (props: DEPRECATED_IconProps) => {
|
|
22
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
23
|
+
const {
|
|
24
|
+
className = '',
|
|
25
|
+
disabled = false,
|
|
26
|
+
name,
|
|
27
|
+
hoverSuffix = '',
|
|
28
|
+
onClick = noop,
|
|
29
|
+
onMouseEnter = noop,
|
|
30
|
+
onMouseLeave = noop,
|
|
31
|
+
title = '',
|
|
32
|
+
} = props;
|
|
33
|
+
const handleMouseEnter = (evt: React.MouseEvent<HTMLSpanElement>) => {
|
|
34
|
+
if (!isHovered) setIsHovered(true);
|
|
35
|
+
|
|
36
|
+
onMouseEnter(evt);
|
|
37
|
+
};
|
|
38
|
+
const handleMouseLeave = (evt: React.MouseEvent<HTMLSpanElement>) => {
|
|
39
|
+
if (isHovered) setIsHovered(false);
|
|
40
|
+
|
|
41
|
+
onMouseLeave(evt);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const iconStyle = { top: 'auto' };
|
|
45
|
+
const iconName = !disabled && isHovered && hoverSuffix ? `${name}${hoverSuffix}` : name;
|
|
46
|
+
const iconClassName = classNames('app-icon', `app-icon--${iconName}`);
|
|
47
|
+
const svgClassName = classNames('app-icon__svg');
|
|
48
|
+
const iconClass = classNames(iconClassName, className, {
|
|
49
|
+
[styles.clickable]: onClick !== noop,
|
|
50
|
+
[styles.disabled]: disabled,
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
const { dataTestId, ...spanProps } = props;
|
|
54
|
+
const extraProps = { disabled, onClick, ...spanProps };
|
|
55
|
+
|
|
56
|
+
if (title && !disabled) {
|
|
57
|
+
extraProps.title = title;
|
|
58
|
+
}
|
|
59
|
+
delete extraProps.hoverSuffix;
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<span
|
|
63
|
+
{...extraProps}
|
|
64
|
+
className={iconClass}
|
|
65
|
+
onMouseEnter={handleMouseEnter}
|
|
66
|
+
onMouseLeave={handleMouseLeave}
|
|
67
|
+
data-testid={dataTestId}
|
|
68
|
+
>
|
|
69
|
+
<svg className={svgClassName} style={iconStyle}>
|
|
70
|
+
<use xlinkHref={`#${iconName}`} />
|
|
71
|
+
<symbol id="general-arrow-down" viewBox="0 0 24 24">
|
|
72
|
+
<path
|
|
73
|
+
fill="currentColor"
|
|
74
|
+
d="M12 13.84l3.174-2.719a.5.5 0 0 1 .65.76l-3.5 2.998a.5.5 0 0 1-.65 0l-3.5-2.998a.5.5 0 1 1 .65-.76L12 13.841z"
|
|
75
|
+
></path>
|
|
76
|
+
</symbol>
|
|
77
|
+
<symbol id="general-vi-small-white" viewBox="0 0 24 24">
|
|
78
|
+
<path
|
|
79
|
+
fill="currentColor"
|
|
80
|
+
d="M8.354 11.646l-.708.708 3.418 3.417 5.343-7.48-.814-.582-4.657 6.52z"
|
|
81
|
+
></path>
|
|
82
|
+
</symbol>
|
|
83
|
+
</svg>
|
|
84
|
+
</span>
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
export default DEPRECATED_Icon;
|
|
89
|
+
export { DEPRECATED_Icon }; // Named export
|
package/src/lib/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DEPRECATED_Icon';
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"composite": true,
|
|
4
|
+
"types": ["vite/client", "vitest", "./src/types"]
|
|
5
|
+
},
|
|
6
|
+
"files": [],
|
|
7
|
+
"include": [],
|
|
8
|
+
"references": [
|
|
9
|
+
{
|
|
10
|
+
"path": "./tsconfig.lib.json"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"path": "./tsconfig.spec.json"
|
|
14
|
+
}
|
|
15
|
+
],
|
|
16
|
+
"extends": "../../tsconfig.json"
|
|
17
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "./tsconfig.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"outDir": "./dist",
|
|
5
|
+
"moduleResolution": "node",
|
|
6
|
+
"module": "ES2020"
|
|
7
|
+
},
|
|
8
|
+
"exclude": [
|
|
9
|
+
"**/*.spec.ts",
|
|
10
|
+
"**/*.test.ts",
|
|
11
|
+
"**/*.spec.tsx",
|
|
12
|
+
"**/*.test.tsx",
|
|
13
|
+
"**/*.spec.js",
|
|
14
|
+
"**/*.test.js",
|
|
15
|
+
"**/*.spec.jsx",
|
|
16
|
+
"**/*.test.jsx",
|
|
17
|
+
"dist",
|
|
18
|
+
"node_modules"
|
|
19
|
+
],
|
|
20
|
+
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
|
|
21
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "./tsconfig.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"types": ["vitest/globals", "vitest/importMeta", "vite/client", "node", "vitest"],
|
|
5
|
+
"moduleResolution": "node",
|
|
6
|
+
"module": "ES2020"
|
|
7
|
+
},
|
|
8
|
+
"include": [
|
|
9
|
+
"vite.config.ts",
|
|
10
|
+
"src/**/*.test.ts",
|
|
11
|
+
"src/**/*.spec.ts",
|
|
12
|
+
"src/**/*.test.tsx",
|
|
13
|
+
"src/**/*.spec.tsx",
|
|
14
|
+
"src/**/*.test.js",
|
|
15
|
+
"src/**/*.spec.js",
|
|
16
|
+
"src/**/*.test.jsx",
|
|
17
|
+
"src/**/*.spec.jsx",
|
|
18
|
+
"src/**/*.d.ts",
|
|
19
|
+
"src/lib/**/*.tsx"
|
|
20
|
+
]
|
|
21
|
+
}
|
package/vite.config.ts
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/// <reference types='vitest' />
|
|
2
|
+
|
|
3
|
+
import { defineConfig, PluginOption } from 'vite';
|
|
4
|
+
import react from '@vitejs/plugin-react';
|
|
5
|
+
import dts from 'vite-plugin-dts';
|
|
6
|
+
import copy from 'rollup-plugin-copy';
|
|
7
|
+
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
8
|
+
import { configDefaults } from 'vitest/config';
|
|
9
|
+
|
|
10
|
+
import * as fs from 'fs';
|
|
11
|
+
import { join, resolve, relative } from 'path';
|
|
12
|
+
import { env } from 'process';
|
|
13
|
+
import { c } from 'vite/dist/node/types.d-aGj9QkWt';
|
|
14
|
+
|
|
15
|
+
const THRESHOLD_LINES = parseInt(env.DEV_APP_THRESHOLD_LINES || '70', 10);
|
|
16
|
+
const THRESHOLD_FUNCTIONS = parseInt(env.DEV_APP_THRESHOLD_FUNCTIONS || '50', 10);
|
|
17
|
+
const THRESHOLD_BRANCHES = parseInt(env.DEV_APP_THRESHOLD_BRANCHES || '70', 10);
|
|
18
|
+
const THRESHOLD_STATEMENTS = parseInt(env.DEV_APP_THRESHOLD_STATEMENTS || '70', 10);
|
|
19
|
+
|
|
20
|
+
interface FileSystem {
|
|
21
|
+
readdirSync(path: string): string[];
|
|
22
|
+
|
|
23
|
+
statSync(path: string): fs.Stats;
|
|
24
|
+
|
|
25
|
+
existsSync(path: string): boolean;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const walkDir = ({
|
|
29
|
+
fs,
|
|
30
|
+
currentDir,
|
|
31
|
+
baseDir,
|
|
32
|
+
entries,
|
|
33
|
+
}: {
|
|
34
|
+
fs: FileSystem;
|
|
35
|
+
currentDir: string;
|
|
36
|
+
baseDir: string;
|
|
37
|
+
entries: Record<string, string>;
|
|
38
|
+
}) => {
|
|
39
|
+
const items = fs.readdirSync(currentDir);
|
|
40
|
+
items.forEach((item) => {
|
|
41
|
+
const itemPath = join(currentDir, item);
|
|
42
|
+
const stat = fs.statSync(itemPath);
|
|
43
|
+
if (stat.isDirectory()) {
|
|
44
|
+
const indexPath = join(itemPath, 'index.ts');
|
|
45
|
+
if (fs.existsSync(indexPath)) {
|
|
46
|
+
const relativePath = relative(baseDir, itemPath).replace(/\\/g, '/');
|
|
47
|
+
entries[`lib/${relativePath}/${relativePath}`] = indexPath;
|
|
48
|
+
} else {
|
|
49
|
+
walkDir({ fs, currentDir: itemPath, baseDir, entries });
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
const getEntries = (dir: string, fs: FileSystem) => {
|
|
56
|
+
const entries: Record<string, string> = {
|
|
57
|
+
index: resolve(__dirname, 'src/lib/index.ts'),
|
|
58
|
+
};
|
|
59
|
+
walkDir({ fs, currentDir: dir, baseDir: dir, entries });
|
|
60
|
+
|
|
61
|
+
return entries;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const entryPoints = getEntries(resolve(__dirname, 'src/lib'), fs);
|
|
65
|
+
|
|
66
|
+
export default defineConfig(({ mode }) => ({
|
|
67
|
+
plugins: [
|
|
68
|
+
react(),
|
|
69
|
+
cssInjectedByJsPlugin(),
|
|
70
|
+
copy({
|
|
71
|
+
targets: [{ src: 'package.json', dest: 'dist' }],
|
|
72
|
+
hook: 'writeBundle',
|
|
73
|
+
}),
|
|
74
|
+
dts({
|
|
75
|
+
entryRoot: 'src',
|
|
76
|
+
tsconfigPath: join(__dirname, 'tsconfig.lib.json'),
|
|
77
|
+
}),
|
|
78
|
+
] as PluginOption[],
|
|
79
|
+
resolve: {
|
|
80
|
+
extensions: ['.ts', '.tsx', '.js', '.json', '.scss'],
|
|
81
|
+
},
|
|
82
|
+
build: {
|
|
83
|
+
lib: {
|
|
84
|
+
entry: entryPoints,
|
|
85
|
+
name: 'sdk-shared-ui',
|
|
86
|
+
formats: ['es', 'cjs'],
|
|
87
|
+
},
|
|
88
|
+
rollupOptions: {
|
|
89
|
+
external: ['classnames', 'react', 'react-dom'],
|
|
90
|
+
treeshake: 'recommended',
|
|
91
|
+
},
|
|
92
|
+
chunkSizeWarningLimit: 500,
|
|
93
|
+
sourcemap: mode === 'development',
|
|
94
|
+
},
|
|
95
|
+
css: {
|
|
96
|
+
modules: {
|
|
97
|
+
scopeBehaviour: 'local',
|
|
98
|
+
generateScopedName: '[name]__[local]___[hash:base64:5]',
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
test: {
|
|
102
|
+
globals: true,
|
|
103
|
+
environment: 'jsdom',
|
|
104
|
+
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
|
105
|
+
coverage: {
|
|
106
|
+
enabled: true,
|
|
107
|
+
provider: 'v8',
|
|
108
|
+
thresholds: {
|
|
109
|
+
lines: THRESHOLD_LINES,
|
|
110
|
+
functions: THRESHOLD_FUNCTIONS,
|
|
111
|
+
branches: THRESHOLD_BRANCHES,
|
|
112
|
+
statements: THRESHOLD_STATEMENTS,
|
|
113
|
+
},
|
|
114
|
+
exclude: [
|
|
115
|
+
...configDefaults.exclude,
|
|
116
|
+
'src/index.ts',
|
|
117
|
+
'src/lib/index.ts',
|
|
118
|
+
'src/lib/**/index.ts',
|
|
119
|
+
'src/lib/@types/**/*',
|
|
120
|
+
],
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
}));
|