myrentokil-components-library 1.0.82 → 1.0.87
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 +40 -0
- package/package.json +8 -3
package/README.md
CHANGED
|
@@ -37,6 +37,46 @@ npm run storybook
|
|
|
37
37
|
npm run build-storybook
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
+
### Deploy storybook
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
npm run chromatic
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
# Deploying Storybook with Chromatic
|
|
47
|
+
|
|
48
|
+
This guide outlines why we've chosen Chromatic for deploying our Storybook and how it enhances our ReactJS frontend development process.
|
|
49
|
+
|
|
50
|
+
## Why Chromatic?
|
|
51
|
+
|
|
52
|
+
Chromatic is our preferred tool for deploying Storybook for the following reasons:
|
|
53
|
+
|
|
54
|
+
### Integration with Bitbucket
|
|
55
|
+
|
|
56
|
+
Chromatic seamlessly integrates with Bitbucket, allowing authorized users to access the deployed Storybook without additional credentials.
|
|
57
|
+
|
|
58
|
+
### User-Friendly Interface
|
|
59
|
+
|
|
60
|
+
Chromatic's user interface is designed specifically for deploying Storybooks, making it simple to manage and install.
|
|
61
|
+
|
|
62
|
+
### Cost-Free Solution
|
|
63
|
+
|
|
64
|
+
Chromatic is free to use, eliminating financial barriers and enabling easy sharing and collaboration.
|
|
65
|
+
|
|
66
|
+
### Interactive Collaboration
|
|
67
|
+
|
|
68
|
+
Chromatic enables team members to provide feedback through comments and reviews on the deployed Storybook.
|
|
69
|
+
|
|
70
|
+
## Getting Started
|
|
71
|
+
|
|
72
|
+
To get started, log into Chromatic using your Bitbucket credentials at [https://64d24cc60d37542331b45a48-fissmohfpj.chromatic.com/](https://64d24cc60d37542331b45a48-fissmohfpj.chromatic.com/). Explore
|
|
73
|
+
the user-friendly interface and experience the benefits of Chromatic's seamless integration.
|
|
74
|
+
|
|
75
|
+
## Summary
|
|
76
|
+
|
|
77
|
+
Chromatic simplifies the process of sharing and collaborating on ReactJS frontend components. With Bitbucket integration, an intuitive interface, cost-effectiveness, and collaboration features,
|
|
78
|
+
Chromatic enhances our Storybook deployment experience.
|
|
79
|
+
|
|
40
80
|
# Testing React Components: Why Use React Testing Library and Snapshot Testing
|
|
41
81
|
|
|
42
82
|
## Introduction
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "myrentokil-components-library",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.87",
|
|
4
4
|
"description": "myRentokil shared components library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -16,13 +16,16 @@
|
|
|
16
16
|
"build": "rm -rf dist/ && prettier --write src/ && rollup -c && storybook build",
|
|
17
17
|
"build:esm": "tsc --module CommonJS --outDir dist/esm",
|
|
18
18
|
"build:cjs": "tsc --module CommonJS --outDir dist/cjs",
|
|
19
|
+
"chromatic": "npx chromatic --project-token=chpt_470705cb11b2b55 --auto-accept-changes",
|
|
19
20
|
"storybook": "storybook dev -p 6006",
|
|
20
21
|
"build-storybook": "storybook build",
|
|
21
22
|
"lint": "eslint src --ext .ts,.tsx",
|
|
22
23
|
"test": "jest",
|
|
23
24
|
"test:updateSnapshot": "jest --updateSnapshot"
|
|
24
25
|
},
|
|
25
|
-
"author":
|
|
26
|
+
"author": {
|
|
27
|
+
"name": "F Brandao"
|
|
28
|
+
},
|
|
26
29
|
"license": "UNLICENSED",
|
|
27
30
|
"devDependencies": {
|
|
28
31
|
"@babel/preset-env": "^7.22.5",
|
|
@@ -46,6 +49,7 @@
|
|
|
46
49
|
"@types/styled-components": "^5.1.26",
|
|
47
50
|
"@typescript-eslint/eslint-plugin": "^6.2.0",
|
|
48
51
|
"@typescript-eslint/parser": "^6.2.0",
|
|
52
|
+
"chromatic": "^6.21.0",
|
|
49
53
|
"eslint": "^8.46.0",
|
|
50
54
|
"eslint-plugin-react": "^7.33.1",
|
|
51
55
|
"install": "^0.13.0",
|
|
@@ -68,5 +72,6 @@
|
|
|
68
72
|
"react": "^18.0.0",
|
|
69
73
|
"react-dom": "^18.0.0",
|
|
70
74
|
"styled-components": "^5.3.9"
|
|
71
|
-
}
|
|
75
|
+
},
|
|
76
|
+
"readme": "ERROR: No README data found!"
|
|
72
77
|
}
|