caplink-saas-ui-shared-component-library 0.4.3 → 0.4.5

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/README.md CHANGED
@@ -1,78 +1,78 @@
1
- # caplink-saas-ui-shared-component-library
2
-
3
- This project is a shared component library for the Caplink SaaS UI. It is built using React and Storybook.
4
-
5
- ## Installation
6
-
7
- 1. Clone the repository
8
- 2. Run `npm install` to install the dependencies
9
- 3. Run `npm run storybook` to start the Storybook server
10
-
11
- ## Usage
12
-
13
- To use the components in your project, you can install the package from npm:
14
-
15
- ```bash
16
- npm install @caplink/saas-ui-shared-component-library
17
- ```
18
-
19
- Then import the components you need:
20
-
21
- ```javascript
22
- import { Button } from '@caplink/saas-ui-shared-component-library';
23
- ```
24
-
25
- ## Development
26
-
27
- ### Components
28
-
29
- All the components are located in the 'component-library' folder. Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
30
-
31
- An expected component development workflow would be:
32
-
33
- 1. Create a new folder for the component
34
- 2. Create the component file (e.g. MyComponent.js)
35
- 3. Create a story file (e.g. MyComponent.stories.js)
36
- 4. Create a test file (e.g. MyComponent.spec.js)
37
- 5. Create a style file (e.g. MyComponent.css) (if needed, we use tailwindcss for styles)
38
- 6. If it's a complex component, create a Cypress test file (e.g. MyComponent.spec.js in the 'cypress' folder)
39
-
40
- ### Folder structure
41
-
42
- - All the components are located in the '/component-library' folder.
43
- - Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
44
- - Cypress tests are located in the 'cypress' folder and should follow the same folder structure as the components.
45
-
46
- ### Storybook
47
-
48
- We use Storybook to develop and test the components. To start the Storybook server, run:
49
-
50
- ```bash
51
- npm run sb:dev
52
- ```
53
-
54
- ```bash
55
- npm run sb:build
56
- ```
57
-
58
- This will start the Storybook server and open a browser window with the Storybook UI. You can use this to develop and test the components.
59
-
60
- This is the gallery of components that we use to develop and test the components. It's also used to generate the documentation for the components, so it's important to keep it up to date and encompassing relevant states and use cases within the stories.
61
-
62
- ## Testing
63
-
64
- We use multiple testing libraries to test our components. We use Jest for unit tests and Cypress for more complex integration tests that require a browser.
65
-
66
- - All unit tests are located in the same folder as the component they are testing. The file name should be the same as the component file name, but with a '.spec.xxx' suffix.
67
- - All Cypress tests are located in the 'cypress' folder.
68
-
69
- ## Contributing
70
-
71
- This is a project for the Caplink SaaS UI team. If you are a member of the team, you can contribute to this project by following the standard Git workflow:
72
-
73
- 1. Create a new branch for your feature or bug fix
74
- 2. Make your changes
75
- 3. Push your branch to the remote repository
76
- 4. Create a pull request
77
-
78
- Developing components with tests is a requirement for contributing to this project.
1
+ # caplink-saas-ui-shared-component-library
2
+
3
+ This project is a shared component library for the Caplink SaaS UI. It is built using React and Storybook.
4
+
5
+ ## Installation
6
+
7
+ 1. Clone the repository
8
+ 2. Run `npm install` to install the dependencies
9
+ 3. Run `npm run storybook` to start the Storybook server
10
+
11
+ ## Usage
12
+
13
+ To use the components in your project, you can install the package from npm:
14
+
15
+ ```bash
16
+ npm install @caplink/saas-ui-shared-component-library
17
+ ```
18
+
19
+ Then import the components you need:
20
+
21
+ ```javascript
22
+ import { Button } from '@caplink/saas-ui-shared-component-library';
23
+ ```
24
+
25
+ ## Development
26
+
27
+ ### Components
28
+
29
+ All the components are located in the 'component-library' folder. Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
30
+
31
+ An expected component development workflow would be:
32
+
33
+ 1. Create a new folder for the component
34
+ 2. Create the component file (e.g. MyComponent.js)
35
+ 3. Create a story file (e.g. MyComponent.stories.js)
36
+ 4. Create a test file (e.g. MyComponent.spec.js)
37
+ 5. Create a style file (e.g. MyComponent.css) (if needed, we use tailwindcss for styles)
38
+ 6. If it's a complex component, create a Cypress test file (e.g. MyComponent.spec.js in the 'cypress' folder)
39
+
40
+ ### Folder structure
41
+
42
+ - All the components are located in the '/component-library' folder.
43
+ - Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
44
+ - Cypress tests are located in the 'cypress' folder and should follow the same folder structure as the components.
45
+
46
+ ### Storybook
47
+
48
+ We use Storybook to develop and test the components. To start the Storybook server, run:
49
+
50
+ ```bash
51
+ npm run sb:dev
52
+ ```
53
+
54
+ ```bash
55
+ npm run sb:build
56
+ ```
57
+
58
+ This will start the Storybook server and open a browser window with the Storybook UI. You can use this to develop and test the components.
59
+
60
+ This is the gallery of components that we use to develop and test the components. It's also used to generate the documentation for the components, so it's important to keep it up to date and encompassing relevant states and use cases within the stories.
61
+
62
+ ## Testing
63
+
64
+ We use multiple testing libraries to test our components. We use Jest for unit tests and Cypress for more complex integration tests that require a browser.
65
+
66
+ - All unit tests are located in the same folder as the component they are testing. The file name should be the same as the component file name, but with a '.spec.xxx' suffix.
67
+ - All Cypress tests are located in the 'cypress' folder.
68
+
69
+ ## Contributing
70
+
71
+ This is a project for the Caplink SaaS UI team. If you are a member of the team, you can contribute to this project by following the standard Git workflow:
72
+
73
+ 1. Create a new branch for your feature or bug fix
74
+ 2. Make your changes
75
+ 3. Push your branch to the remote repository
76
+ 4. Create a pull request
77
+
78
+ Developing components with tests is a requirement for contributing to this project.
@@ -34,18 +34,18 @@ export declare function getPoint<T>(params: {
34
34
  /** Checks if the source and target point are equal */
35
35
  export declare function isSamePoint(source: Point, target: Point): boolean;
36
36
  /** Returns whether given point exists in given range */
37
- export declare function hasPointInRange(pointsRange: PointRange[], point: Point): boolean;
37
+ export declare function hasPointInRange(pointRange: PointRange, point: Point): boolean;
38
38
  /** Determines whether all columns are selected */
39
39
  export declare function hasEntireColumns(params: {
40
40
  matrix: Matrix<unknown>;
41
- pointsRange: PointRange[];
42
- }): true | undefined;
41
+ pointRange: PointRange;
42
+ }): boolean;
43
43
  /** Determines which row is entirely selected in given selection */
44
44
  export declare function hasEntireRows(params: {
45
45
  matrix: Matrix<unknown>;
46
- pointsRange: PointRange[];
46
+ pointRange: PointRange;
47
47
  row: number;
48
- }): false | undefined;
48
+ }): boolean;
49
49
  /** Converts string value into an matrix */
50
50
  export declare function parseString(value: string): Matrix<unknown>;
51
51
  /**
@@ -60,7 +60,6 @@ export type DataEditor = {
60
60
  export type DataViewer = {
61
61
  width: number;
62
62
  mode: Mode;
63
- setMode?: (mode: Mode) => void;
64
63
  /** Data viewer current value */
65
64
  value?: unknown;
66
65
  column: Column;
@@ -141,8 +140,8 @@ export type Context = {
141
140
  hasSomeEntireRow?: boolean;
142
141
  /** Whether last row is highlighted */
143
142
  highlightLastRow?: boolean;
144
- pointsRange: Matrix.PointRange[];
145
- setPointsRange: (pointRange: Matrix.PointRange[]) => void;
143
+ pointRange: Matrix.PointRange | null;
144
+ setPointRange: (pointRange: Matrix.PointRange | null) => void;
146
145
  containerDimensions: Dimensions;
147
146
  setContainerDimensions: (dimensions: Dimensions) => void;
148
147
  onPaste: (point: Matrix.Point, event: ClipboardEvent) => void;