td-stylekit 24.0.3 → 24.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +24 -25
  3. package/dist/es/Icon/staticTypes.d.ts +6 -0
  4. package/dist/es/Icon/types.js +16 -1
  5. package/package.json +17 -4
  6. package/tsconfig.json +2 -1
  7. package/Dockerfile +0 -51
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [24.1.0](https://github.com/treasure-data/td-stylekit/compare/v24.0.3...v24.1.0) (2021-10-26)
2
+
3
+
4
+ ### Features
5
+
6
+ * **CON-8796:** Add new icons for journey builder ([#1201](https://github.com/treasure-data/td-stylekit/issues/1201)) ([8dbf106](https://github.com/treasure-data/td-stylekit/commit/8dbf106))
7
+
1
8
  ## [24.0.3](https://github.com/treasure-data/td-stylekit/compare/v24.0.2...v24.0.3) (2021-10-06)
2
9
 
3
10
 
package/README.md CHANGED
@@ -27,13 +27,14 @@ return () => (
27
27
 
28
28
  ## Scripts 👩‍💻
29
29
 
30
- | script | description |
31
- | ------------ | ------------------------------------- |
32
- | `build` | generate a production build of module |
33
- | `test` | run unit tests |
34
- | `tdd` | run tests in watch mode |
35
- | `start` | start dev documentation server |
36
- | `docs:build` | generate static build of docs |
30
+ | script | description |
31
+ | -------------------- | ------------------------------------- |
32
+ | `build` | generate a production build of module |
33
+ | `test` | run unit tests |
34
+ | `tdd` | run tests in watch mode |
35
+ | `start` | start dev documentation server |
36
+ | `docs:build` | generate static build of docs |
37
+ | `download:snapshots` | copy changed snapshots from CircleCI |
37
38
 
38
39
  ## Release 🛸
39
40
 
@@ -43,32 +44,30 @@ Detailed documentation on the release process and how to format commit messages
43
44
 
44
45
  ## Visual Regression Testing 📉
45
46
 
46
- We run visual regression tests on every commit. If you need to update the screenshots for legitimate changes, please [install docker](https://docs.docker.com/docker-for-mac/install/) first. Then [increase Docker](https://docs.docker.com/docker-for-mac/#memory) runtime memory limit to 4 GB. Then follow these steps:
47
+ Visual regression tests take snapshots of each Storybook story and compare them to existing snapshots to identify any visual differences introduced by code changes.
47
48
 
48
- ```bash
49
- docker build -t td-stylekit-docs . # only need to do this every time the source code changes
50
- docker run -it --rm --name differencify td-stylekit-docs
51
- ```
49
+ If a visual regression test fails, that means you've made visual changes to a component. If this is unintentional, it'll alert you to your mistake. If this is intentional, you'll need to update the snapshots to make the test pass.
52
50
 
53
- After storybook has started, run the following in a separate terminal:
51
+ ## Updating Visual Regression Tests 🌠
54
52
 
55
- ```bash
56
- docker exec -it differencify yarn test:visual-update
57
- ```
53
+ ### **Prerequisites**
58
54
 
59
- > (Optional) To increase execution speed, you can specify a filter for the snapshots so that only a limited number are tested/updated:
60
- >
61
- > ```bash
62
- > docker exec -it differencify yarn test:visual-update <ComponentName>
63
- > ```
55
+ - Set up the `$CIRCLECI_TOKEN` environment variable in your local environment
56
+ - Instructions can be found [here](https://github.com/treasure-data/td-crystal/blob/main/packages/build/docs/prerequisites.md#circleci-personal-access-token)
64
57
 
65
- Finally, copy the updated snapshots from the Docker container to your file system:
58
+ ### **Steps**
59
+
60
+ Push your changes, allow CircleCI to finish executing the _Visual Regression_ step, then run:
66
61
 
67
62
  ```bash
68
- docker cp differencify:/tmp/stylekit/differencify_reports/__image_snapshots__/ differencify_reports/
63
+ yarn download:snapshots # Use the --help flag for more options
69
64
  ```
70
65
 
71
- We generate the screenshots inside a docker image because this more closely simulates where the tests are run in circleci, and we avoid any visual differences caused by operating system details.
66
+ - This will script will download any altered snapshots that have been saved in CircleCI's Artifacts to your local snapshot directory.
67
+
68
+ - From there, you can simply commit the new snapshots.
69
+
70
+ ## Disabling Visual Regression Tests ❌
72
71
 
73
72
  Screenshot are automatically generated for all stories. However, if you need to disable tests due to hard-to-screenshot stories, like animations, you have a couple options:
74
73
 
@@ -98,7 +97,7 @@ Contributions are always welcome! Read our [contribution guidelines](https://tre
98
97
  - Set break points wherever you need
99
98
  - Press F5. This will launch a new Chrome browser and run td-stylekit in debugging mode
100
99
 
101
- ## Resolving Security Issues
100
+ ## Resolving Security Issues 🔐
102
101
 
103
102
  ### Using Dependabot
104
103
 
package/dist/es/Icon/staticTypes.d.ts CHANGED
@@ -448,6 +448,8 @@ export declare type IconTypes = {
448
448
  DetailNavIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
449
449
  Document: React.ComponentType<JSX.IntrinsicElements['svg']>;
450
450
  DocumentIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
451
+ End: React.ComponentType<JSX.IntrinsicElements['svg']>;
452
+ EndIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
451
453
  FilledDownArrow: React.ComponentType<JSX.IntrinsicElements['svg']>;
452
454
  FilledDownArrowIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
453
455
  FilledLeftArrow: React.ComponentType<JSX.IntrinsicElements['svg']>;
@@ -466,6 +468,8 @@ export declare type IconTypes = {
466
468
  FolderTagPersonIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
467
469
  Funnel: React.ComponentType<JSX.IntrinsicElements['svg']>;
468
470
  FunnelIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
471
+ Goal: React.ComponentType<JSX.IntrinsicElements['svg']>;
472
+ GoalIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
469
473
  Group: React.ComponentType<JSX.IntrinsicElements['svg']>;
470
474
  GroupIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
471
475
  HelpNav: React.ComponentType<JSX.IntrinsicElements['svg']>;
@@ -530,6 +534,8 @@ export declare type IconTypes = {
530
534
  SourceIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
531
535
  Stage: React.ComponentType<JSX.IntrinsicElements['svg']>;
532
536
  StageIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
537
+ Summary: React.ComponentType<JSX.IntrinsicElements['svg']>;
538
+ SummaryIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
533
539
  SymbolMinus: React.ComponentType<JSX.IntrinsicElements['svg']>;
534
540
  SymbolMinusIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
535
541
  Table: React.ComponentType<JSX.IntrinsicElements['svg']>;
package/dist/es/Icon/types.js CHANGED
@@ -868,6 +868,10 @@ React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
868
868
  React.createElement("path", {
869
869
  d: "M12.879 4H7.5C6.675 4 6 4.675 6 5.5v12c0 .825.675 1.5 1.5 1.5h9c.825 0 1.5-.675 1.5-1.5V9.121a1.5 1.5 0 00-.44-1.06l-3.62-3.622A1.5 1.5 0 0012.879 4zm2.807 4.907a.2.2 0 01-.14.343H12.95a.2.2 0 01-.2-.2V6.506a.2.2 0 01.34-.143l2.596 2.544zm-7.354 3.127a1 1 0 011-1h5.336a1 1 0 010 2H9.332a1 1 0 01-1-1zm1 2.5a1 1 0 000 2h5.336a1 1 0 100-2H9.332z",
870
870
  fillRule: "evenodd"
871
+ }),End: /*#__PURE__*/
872
+ React.createElement("path", {
873
+ d: "M20 12a8 8 0 11-16 0 8 8 0 0116 0zm-2.5 0a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z",
874
+ fillRule: "evenodd"
871
875
  }),FilledDownArrow: /*#__PURE__*/
872
876
  React.createElement("path", {
873
877
  d: "M6.762 10.144l4.97 4.97a.889.889 0 001.257 0l4.97-4.97c.56-.56.164-1.519-.629-1.519H7.39c-.792 0-1.189.958-.628 1.519z"
@@ -899,7 +903,14 @@ React.createElement("path", {
899
903
  }),Funnel: /*#__PURE__*/
900
904
  React.createElement("path", {
901
905
  d: "M4 4.5a.5.5 0 01.5-.5h15a.5.5 0 01.5.5v1.385a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5V4.5zM6.856 8a.3.3 0 00-.233.49l3.486 4.26a.5.5 0 01.113.317v6.07a.5.5 0 00.749.434l2.555-1.463a.5.5 0 00.252-.434v-4.607a.5.5 0 01.113-.316l3.486-4.26a.3.3 0 00-.233-.49H6.856z"
902
- }),Group: /*#__PURE__*/
906
+ }),Goal: /*#__PURE__*/
907
+ React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
908
+ d: "M19.962 7.31a.5.5 0 01-.108.545l-2 2A.5.5 0 0117.5 10h-2.293l-1.91 1.91.003.09a1.3 1.3 0 11-1.2-1.297l1.9-1.9V6.501a.501.501 0 01.146-.354l2-2A.5.5 0 0117 4.5V7h2.5a.5.5 0 01.462.309z"
909
+ }), /*#__PURE__*/React.createElement("path", {
910
+ d: "M19.752 10.017a.079.079 0 00-.132-.036l-1.117 1.117a.757.757 0 01-.245.163.135.135 0 00-.087.135 6.2 6.2 0 11-5.574-5.568.139.139 0 00.138-.089.757.757 0 01.164-.246l1.131-1.13a.065.065 0 00-.03-.11 8 8 0 105.752 5.764z"
911
+ }), /*#__PURE__*/React.createElement("path", {
912
+ d: "M16.681 11.576a.287.287 0 00-.29-.258h-.688a.3.3 0 00-.213.089l-.503.506a.318.318 0 00-.09.212 2.9 2.9 0 11-3.039-3.022.318.318 0 00.211-.09l.522-.524a.3.3 0 00.087-.211v-.67c0-.149-.11-.276-.258-.29a4.7 4.7 0 104.26 4.257z"
913
+ })),Group: /*#__PURE__*/
903
914
  React.createElement("path", {
904
915
  d: "M11.682 9.09a2.584 2.584 0 01-2.587 2.596A2.592 2.592 0 016.5 9.09a2.592 2.592 0 012.595-2.595 2.584 2.584 0 012.587 2.595zM17.812 9.273a2.41 2.41 0 11-4.818 0 2.41 2.41 0 114.818 0zM9.09 13.14c-1.694 0-5.09.851-5.09 2.546v1.09c0 .4.327.728.727.728h8.727a.73.73 0 00.728-.727v-1.091c0-1.695-3.396-2.546-5.091-2.546zM14.204 13.177c.254-.022.494-.037.705-.037 1.695 0 5.091.851 5.091 2.546v1.09a.73.73 0 01-.727.728h-3.768c.08-.225.131-.473.131-.727v-1.091c0-1.07-.574-1.876-1.403-2.48l-.007-.008a.064.064 0 00-.022-.021z"
905
916
  }),Help: /*#__PURE__*/
@@ -1074,6 +1085,10 @@ React.createElement("path", {
1074
1085
  }),Stage: /*#__PURE__*/
1075
1086
  React.createElement("path", {
1076
1087
  d: "M7.327 19a1 1 0 102 0v-6.151l7.063-3.398a.5.5 0 000-.902L9.327 5.151V5a1 1 0 10-2 0v14z"
1088
+ }),Summary: /*#__PURE__*/
1089
+ React.createElement("path", {
1090
+ d: "M6 5.5a2 2 0 00-2 2v9a2 2 0 002 2h12a2 2 0 002-2v-9a2 2 0 00-2-2H6zm0 3a1 1 0 011-1h3a1 1 0 110 2H7a1 1 0 01-1-1zM6 12a1 1 0 011-1h3a1 1 0 110 2H7a1 1 0 01-1-1zm0 3.5a1 1 0 011-1h3a1 1 0 110 2H7a1 1 0 01-1-1zm7-7a1 1 0 011-1h3a1 1 0 011 1v7a1 1 0 01-1 1h-3a1 1 0 01-1-1v-7z",
1091
+ fillRule: "evenodd"
1077
1092
  }),SymbolCircleCheck: /*#__PURE__*/
1078
1093
  React.createElement("path", {
1079
1094
  d: "M12 20a8 8 0 100-16 8 8 0 000 16zm4.858-9.2a1 1 0 00-1.436-1.392l-4.412 4.55-2.432-2.507a1 1 0 00-1.435 1.393l3.15 3.247a1 1 0 001.436 0l5.129-5.291z",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "td-stylekit",
3
- "version": "24.0.3",
3
+ "version": "24.1.0",
4
4
  "main": "dist/es/index.js",
5
5
  "module": "dist/es/index.js",
6
6
  "types": "dist/es/index.d.ts",
@@ -27,7 +27,8 @@
27
27
  "test:visual-update": "update=true ./bin/visual-regression-test",
28
28
  "test:visual": "./bin/visual-regression-test",
29
29
  "test:visual-ci": "./bin/runVisualRegressionTest.sh",
30
- "test": "jest --env=jsdom"
30
+ "test": "jest --env=jsdom",
31
+ "download:snapshots": "ts-node bin/visual-regression/downloadSnapshots.ts"
31
32
  },
32
33
  "dependencies": {
33
34
  "@babel/runtime": "^7.11.2",
@@ -40,6 +41,7 @@
40
41
  "@types/color": "^3.0.1",
41
42
  "classnames": "^2.2.6",
42
43
  "color": "^3.1.2",
44
+ "commander": "^6.0.0",
43
45
  "date-fns": "2.23.0",
44
46
  "emotion-theming": "^10.0.27",
45
47
  "framer-motion": "^1.7.0",
@@ -67,6 +69,7 @@
67
69
  "react-middle-ellipsis": "^1.0.12",
68
70
  "react-select": "^3.0.8",
69
71
  "react-sortable-tree": "^2.7.1",
72
+ "ts-node": "^10.2.1",
70
73
  "use-onclickoutside": "^0.3.1",
71
74
  "victory": "^35.4.2"
72
75
  },
@@ -282,7 +285,10 @@
282
285
  ],
283
286
  "parser": "@typescript-eslint/parser",
284
287
  "parserOptions": {
285
- "project": "./tsconfig.json"
288
+ "project": [
289
+ "./tsconfig.json",
290
+ "./bin/tsconfig.json"
291
+ ]
286
292
  },
287
293
  "plugins": [
288
294
  "@typescript-eslint",
@@ -347,7 +353,14 @@
347
353
  "arrowParens": "avoid",
348
354
  "semi": false,
349
355
  "singleQuote": true,
350
- "trailingComma": "none"
356
+ "trailingComma": "none",
357
+ "overrides": [
358
+ {
359
+ "files": [
360
+ "*/**"
361
+ ]
362
+ }
363
+ ]
351
364
  },
352
365
  "husky": {
353
366
  "hooks": {
package/tsconfig.json CHANGED
@@ -24,7 +24,8 @@
24
24
  "allowSyntheticDefaultImports": true,
25
25
  "downlevelIteration": true,
26
26
  "importsNotUsedAsValues": "error",
27
- "isolatedModules": true
27
+ "isolatedModules": true,
28
+ "esModuleInterop": true
28
29
  },
29
30
  "files": ["src/index.ts"],
30
31
  "include": ["src/**/*", "types/**/*", "docs/**/*"],
package/Dockerfile DELETED
@@ -1,51 +0,0 @@
1
- FROM ubuntu:xenial
2
- ENV LANG en_US.UTF-8
3
-
4
- WORKDIR /tmp/stylekit
5
-
6
- RUN apt-get update && \
7
- apt-get install -yq libgconf-2-4 \
8
- gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 \
9
- libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 \
10
- libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 \
11
- libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation \
12
- libappindicator1 libnss3 lsb-release xdg-utils && \
13
- apt-get update && \
14
- apt-get install -y wget curl --no-install-recommends && \
15
- wget --no-check-certificate -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
16
- sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
17
- apt-get update && \
18
- apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst ttf-freefont --no-install-recommends && \
19
- rm -rf /var/lib/apt/lists/* && \
20
- rm -rf /src/*.deb
21
-
22
- ENV NODEJS_VERSION 12.10.0
23
- ENV PATH="/root/.nvm/versions/node/v${NODEJS_VERSION}/bin:${PATH}"
24
- RUN cd /tmp && wget https://raw.githubusercontent.com/creationix/nvm/v0.33.9/install.sh && \
25
- echo "8ed3356ae40f0d6627eea2aaa21910771d2f95af43b97f4a7d1b220d8b72d6da /tmp/install.sh" | sha256sum -c - && \
26
- bash /tmp/install.sh && \
27
- bash -c "source /root/.nvm/nvm.sh && nvm install $NODEJS_VERSION"
28
-
29
- ENV YARN_VERSION 1.19.0
30
- RUN set -ex \
31
- && for key in \
32
- 6A010C5166006599AA17F08146C2130DFD2497F5 \
33
- ; do \
34
- gpg --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys "$key" || \
35
- gpg --keyserver hkp://ipv4.pool.sks-keyservers.net --recv-keys "$key" || \
36
- gpg --keyserver hkp://pgp.mit.edu:80 --recv-keys "$key" ; \
37
- done \
38
- && curl -fSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
39
- && curl -fSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz.asc" \
40
- && gpg --batch --verify yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz \
41
- && mkdir -p /opt \
42
- && tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
43
- && ln -s /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
44
- && ln -s /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
45
- && rm yarn-v$YARN_VERSION.tar.gz.asc yarn-v$YARN_VERSION.tar.gz
46
-
47
- COPY . .
48
-
49
- RUN bash -c "source /root/.nvm/nvm.sh && yarn"
50
-
51
- CMD [ "yarn", "docs:start", "--quiet", "--ci" ]