@phun-ky/speccer 4.0.0 → 4.3.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 (23) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/README.md +63 -26
  3. package/package.json +81 -22
  4. package/speccer.css +308 -352
  5. package/speccer.js +1 -1647
  6. package/speccer.min.css +1 -1
  7. package/src/dissect.js +2 -2
  8. package/src/index.js +18 -13
  9. package/src/lib/resize.js +2 -2
  10. package/src/measure.js +2 -2
  11. package/src/spec.js +41 -41
  12. package/src/styles/anatomy.styl +274 -0
  13. package/src/styles/index.styl +68 -0
  14. package/src/styles/measure.styl +88 -0
  15. package/src/styles/spacing.styl +152 -0
  16. package/src/{typography.styl → styles/typography.styl} +13 -13
  17. package/src/typography.js +2 -2
  18. package/.eslintignore +0 -1
  19. package/dev/index.html +0 -472
  20. package/scripts/watcher.js +0 -125
  21. package/src/anatomy.styl +0 -358
  22. package/src/index.styl +0 -2
  23. package/src/speccer.styl +0 -162
package/CHANGELOG.md ADDED
@@ -0,0 +1,31 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
+
5
+ ## [4.3.0](https://github.com/phun-ky/speccer/compare/v4.2.1...v4.3.0) (2022-02-22)
6
+
7
+
8
+ ### Feature
9
+
10
+ * 🎸 Expose API a bit more ([093b465](https://github.com/phun-ky/speccer/commit/093b465653c32ec77fec6bb1d9d9e3adfd59809f))
11
+
12
+
13
+ ### Documentation
14
+
15
+ * ✏️ Move images into assets ([2291b31](https://github.com/phun-ky/speccer/commit/2291b31d768a16f202f2ffed453cfc22f3027e67))
16
+ * ✏️ Update documentation ([ec0807e](https://github.com/phun-ky/speccer/commit/ec0807e8c5d9c7eeaa807b80d7c432bee24d59d4))
17
+
18
+ ### [4.2.1](https://github.com/phun-ky/speccer/compare/v4.2.0...v4.2.1) (2022-02-22)
19
+
20
+ ## [4.2.0](https://github.com/phun-ky/speccer/compare/v4.1.0...v4.2.0) (2022-02-22)
21
+
22
+
23
+ ### Features
24
+
25
+ * Use CSS variables ([21c3eb3](https://github.com/phun-ky/speccer/commit/21c3eb3f173ee96b0bf452bae44f76155fcf3cdf))
26
+
27
+ ## [4.1.0](https://github.com/phun-ky/speccer/compare/v4.0.0...v4.1.0) (2022-02-22)
28
+
29
+ ### Features
30
+
31
+ - Add release script ([4cb72cb](https://github.com/phun-ky/speccer/commit/4cb72cbea7dd1d6bcb8f1102384b14eecaa9eef0))
package/README.md CHANGED
@@ -1,35 +1,46 @@
1
1
  # speccer
2
2
 
3
- > A script to show specifications on html elements in your styleguide
3
+ ![npm version](https://img.shields.io/npm/v/@phun-ky/speccer) ![issues](https://img.shields.io/github/issues/phun-ky/speccer) ![license](https://img.shields.io/npm/l/@phun-ky/speccer) ![size](https://img.shields.io/bundlephobia/min/@phun-ky/speccer)
4
4
 
5
- Speccer was created to make it easier to document components in a style guide.
5
+ > A script to show specifications on components in your design system documentation
6
+
7
+ Speccer was created to make it easier to document components in a design system.
6
8
 
7
9
  $ npm i @phun-ky/speccer
8
10
 
9
11
  See demo here: https://codepen.io/phun-ky/pen/xaOrYX
10
12
 
11
- ![Image of speccer](./speccer.png)
13
+ ![Image of speccer](./assets/speccer.png)
14
+
15
+ ---
12
16
 
13
17
  ## Usage
14
18
 
19
+ ### ESM
20
+
15
21
  Either import and run the required functions:
16
22
 
17
23
  ```javascript
18
- import { speccer } from '@phun-ky/speccer/src/index.js';
24
+ import '@phun-ky/speccer/speccer.min.css';
25
+ import speccer from '@phun-ky/speccer';
19
26
 
20
27
  // do stuff
21
28
  speccer();
22
29
  ```
23
30
 
31
+ ### Script
32
+
24
33
  Or place these `script` and `link` tags in your web page:
25
34
 
26
35
  ```html
27
- <link rel="stylesheet" href="../path/to/speccer.css" />
36
+ <link rel="stylesheet" href="../path/to/speccer.min.css" />
28
37
  <script src="../path/to/speccer.js"></script>
29
38
  ```
30
39
 
31
40
  And then follow the steps below to display the specifications you want :)
32
41
 
42
+ ### React
43
+
33
44
  If you use React, you can use an effect like this:
34
45
 
35
46
  ```javascript
@@ -37,28 +48,21 @@ import React, { useEffect } from 'react';
37
48
  import PropTypes from 'prop-types';
38
49
 
39
50
  import debounce from './lib/debounce';
40
- import '@phun-ky/speccer/speccer.css';
51
+ import '@phun-ky/speccer/speccer.min.css';
41
52
 
42
53
  const Component = () => {
43
54
  let speccerEventFunc;
44
55
 
45
- useEffect(() => {
46
- import('@phun-ky/speccer/src/index.js').then(speccerScript => {
47
- console.info('[@phun-ky/speccer]: Activated speccer ');
56
+ useEffect(async () => {
57
+ const { default: speccer } = await import('@phun-ky/speccer');
48
58
 
49
- const { speccer } = speccerScript;
50
- speccer();
59
+ speccer();
51
60
 
52
- speccerEventFunc = debounce(function () {
53
- console.info('[@phun-ky/speccer]: Event resize triggered');
54
- speccer();
55
- }, 300);
56
-
57
- window.addEventListener('resize', speccerEventFunc);
58
- });
59
- });
61
+ speccerEventFunc = debounce(function () {
62
+ speccer();
63
+ }, 300);
60
64
 
61
- useEffect(() => {
65
+ window.addEventListener('resize', speccerEventFunc);
62
66
  return () => {
63
67
  window.removeEventListener('resize', speccerEventFunc);
64
68
  };
@@ -72,7 +76,7 @@ export default Component;
72
76
 
73
77
  ### Element spacing
74
78
 
75
- ![Image of speccer](./spacing.png)
79
+ ![Image of speccer](./assets/spacing.png)
76
80
 
77
81
  In your component examples, use the following attribute:
78
82
 
@@ -84,7 +88,7 @@ This will display the element <em>and all of it's children</em> padding and marg
84
88
 
85
89
  ### Element dimensions
86
90
 
87
- ![Image of speccer](./measure.png)
91
+ ![Image of speccer](./assets/measure.png)
88
92
 
89
93
  In your component examples, use the following attribute:
90
94
 
@@ -96,7 +100,7 @@ Where `height` and `width` comes with placement flags. Default for `height` is `
96
100
 
97
101
  ### Highlight the anatomy of an element
98
102
 
99
- ![Image of speccer](./anatomy.png)
103
+ ![Image of speccer](./assets/anatomy.png)
100
104
 
101
105
  In your component examples, use the following attribute. Remember to use the `data-anatomy-section` as an attribute on a parent element to scope the marking.
102
106
 
@@ -110,7 +114,7 @@ This will place a pin to the outline of the element. Default is `top`.
110
114
 
111
115
  ### Element typogpraphy
112
116
 
113
- ![Image of speccer](./typography.png)
117
+ ![Image of speccer](./assets/typography.png)
114
118
 
115
119
  In your component examples, use the following attribute.
116
120
 
@@ -142,13 +146,13 @@ If no attribute is applied, it will default to `data-dom`, as in, it will initia
142
146
  If you're importing speccer instead of with a script tag, you can use the following approach to apply lazy loading:
143
147
 
144
148
  ```javascript
145
- import * as Dissect from '@phun-ky/speccer/src/dissect.js';
149
+ import { dissect } from '@phun-ky/speccer';
146
150
 
147
151
  let dissectElementObserver = new IntersectionObserver((entries, observer) => {
148
152
  entries.forEach(entry => {
149
153
  const targets = entry.target.querySelectorAll('[data-anatomy]');
150
154
  if (entry.intersectionRatio > 0) {
151
- targets.forEach(Dissect.element);
155
+ targets.forEach(dissect.element);
152
156
  observer.unobserve(entry.target);
153
157
  }
154
158
  });
@@ -158,3 +162,36 @@ document.querySelectorAll('[data-anatomy-section]').forEach(el => {
158
162
  dissectElementObserver.observe(el);
159
163
  });
160
164
  ```
165
+
166
+ ## Customization
167
+
168
+ You can use the provided CSS variables to customize the look and feel, to a point.
169
+
170
+ ```css
171
+ .ph.speccer {
172
+ --ph-speccer-color-padding: rgba(219, 111, 255, 0.4);
173
+ --ph-speccer-color-padding-hover: #db6fff;
174
+ --ph-speccer-color-margin: rgba(255, 247, 111, 0.4);
175
+ --ph-speccer-color-margin-hover: #fff76f;
176
+ --ph-speccer-color-text-light: #fff;
177
+ --ph-speccer-color-text-dark: #333;
178
+ --ph-speccer-color-contrast: #ff3aa8;
179
+ --ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
180
+ --ph-speccer-measure-color: #f00;
181
+ --ph-speccer-pin-color: var(--ph-speccer-color-contrast);
182
+ --ph-speccer-typography-background-color: #fff;
183
+ --ph-speccer-typography-color-property: #3f85f2;
184
+ --ph-speccer-typography-color-text: #57575b;
185
+ --ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
186
+ --ph-speccer-depth-opacity-400: 0.4;
187
+ --ph-speccer-font-family: 'Menlo for Powerline', 'Menlo Regular for Powerline', 'DejaVu Sans Mono', Consolas, Monaco,
188
+ 'Andale Mono', 'Ubuntu Mono', monospace;
189
+ --ph-speccer-font-size: 12px;
190
+ --ph-speccer-line-height: 12px;
191
+ --ph-speccer-pin-size: 24px;
192
+ --ph-speccer-pin-space: 48px;
193
+ --ph-speccer-line-width: 1px;
194
+ --ph-speccer-line-width-negative: -1px;
195
+ --ph-speccer-measure-size: 8px;
196
+ }
197
+ ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@phun-ky/speccer",
3
- "version": "4.0.0",
4
- "description": "A script to show specifications on html elements in your styleguide",
3
+ "version": "4.3.0",
4
+ "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
5
5
  "main": "speccer.js",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -12,10 +12,60 @@
12
12
  "rollup:dev": "npm run clean && rollup -c -w",
13
13
  "clean": "rm -rf ./speccer.css ./speccer.min.css ./speccer.js",
14
14
  "build": "npm run clean && npm run rollup && npm run stylus && npm run postcss",
15
- "stylus": "rm -rf ./speccer.css && stylus ./src/index.styl -o ./speccer.css",
15
+ "styles": "npm run stylus && npm run postcss",
16
+ "stylus": "rm -rf ./speccer.css && stylus ./src/styles/index.styl -o ./speccer.css",
16
17
  "postcss": "rm -rf ./speccer.min.css && postcss ./speccer.css -o speccer.min.css",
17
- "dev": "node ./scripts/watcher.js",
18
- "commit": "npx git-cz"
18
+ "dev": "node ./scripts/server.js",
19
+ "commit": "npx git-cz",
20
+ "release": "npx standard-version"
21
+ },
22
+ "standard-version": {
23
+ "scripts": {
24
+ "prerelease": "npm run build",
25
+ "posttag": "git push --follow-tags origin master && npm publish"
26
+ },
27
+ "types": [
28
+ {
29
+ "type": "chore",
30
+ "section": "Tasks",
31
+ "hidden": true
32
+ },
33
+ {
34
+ "type": "docs",
35
+ "section": "Documentation"
36
+ },
37
+ {
38
+ "type": "feat",
39
+ "section": "Feature"
40
+ },
41
+ {
42
+ "type": "fix",
43
+ "section": "Bug"
44
+ },
45
+ {
46
+ "type": "perf",
47
+ "section": "Performance change"
48
+ },
49
+ {
50
+ "type": "refactor",
51
+ "section": "Refactoring"
52
+ },
53
+ {
54
+ "type": "release",
55
+ "section": "Create a release commit",
56
+ "hidden": true
57
+ },
58
+ {
59
+ "type": "style",
60
+ "section": "Markup, white-space, formatting, missing semi-colons...",
61
+ "hidden": true
62
+ },
63
+ {
64
+ "type": "test",
65
+ "section": "Adding missing tests",
66
+ "hidden": true
67
+ }
68
+ ]
19
69
  },
20
70
  "repository": {
21
71
  "type": "git",
@@ -26,7 +76,22 @@
26
76
  "css",
27
77
  "javascript",
28
78
  "spec",
29
- "inspect"
79
+ "inspect",
80
+ "annotation",
81
+ "annotate",
82
+ "pin",
83
+ "specifications",
84
+ "anatomy",
85
+ "dissection",
86
+ "dissect",
87
+ "documentation",
88
+ "information",
89
+ "specification",
90
+ "specs",
91
+ "html-elements",
92
+ "inspect",
93
+ "spacing",
94
+ "speccer"
30
95
  ],
31
96
  "author": "Alexander Vassbotn Røyne-Helgesen <alexander@phun-ky.net>",
32
97
  "license": "MIT",
@@ -49,29 +114,23 @@
49
114
  "@testing-library/user-event": "^12.7.1",
50
115
  "babel-eslint": "^10.1.0",
51
116
  "babel-jest": "^26.6.3",
117
+ "browser-sync": "^2.27.7",
52
118
  "cssnano": "^5.0.4",
53
- "eslint": "^5.16.0",
54
- "eslint-config-airbnb": "^18.2.0",
55
- "eslint-config-prettier": "^6.11.0",
56
- "eslint-plugin-import": "^2.22.0",
57
- "eslint-plugin-jest": "^24.1.5",
58
- "eslint-plugin-prettier": "^3.1.3",
119
+ "eslint": "^7.32.0",
120
+ "eslint-config-airbnb": "^18.2.1",
121
+ "eslint-config-prettier": "^8.3.0",
122
+ "eslint-plugin-import": "^2.24.2",
123
+ "eslint-plugin-jest": "^24.4.2",
124
+ "eslint-plugin-prettier": "^4.0.0",
59
125
  "jest": "^26.6.3",
60
126
  "postcss": "^8.3.0",
61
127
  "postcss-cli": "^8.3.1",
62
- "prettier": "^2.0.5",
63
- "prettier-eslint": "^9.0.1",
128
+ "prettier": "^2.4.1",
129
+ "prettier-eslint": "^13.0.0",
64
130
  "regenerator-runtime": "^0.13.7",
65
131
  "rollup": "^2.39.0",
66
132
  "rollup-plugin-terser": "^7.0.2",
67
- "async": "^3.2.0",
68
- "body-parser": "^1.19.0",
69
- "express": "^4.17.1",
70
- "node-watch": "^0.7.1",
71
- "open": "^8.0.2",
72
- "reload": "^3.1.1"
73
- },
74
- "dependencies": {
133
+ "stylus": "^0.56.0",
75
134
  "eslint-plugin-jsx-a11y": "^6.4.1",
76
135
  "eslint-plugin-react": "^7.23.2",
77
136
  "eslint-plugin-react-hooks": "^4.2.0"