@phun-ky/speccer 4.2.1 → 4.3.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.3.0](https://github.com/phun-ky/speccer/compare/v4.2.1...v4.3.0) (2022-02-22)
+
+
+### Feature
+
+* 🎸 Expose API a bit more ([093b465](https://github.com/phun-ky/speccer/commit/093b465653c32ec77fec6bb1d9d9e3adfd59809f))
+
+
+### Documentation
+
+* ✏️ Move images into assets ([2291b31](https://github.com/phun-ky/speccer/commit/2291b31d768a16f202f2ffed453cfc22f3027e67))
+* ✏️ Update documentation ([ec0807e](https://github.com/phun-ky/speccer/commit/ec0807e8c5d9c7eeaa807b80d7c432bee24d59d4))
+
 ### [4.2.1](https://github.com/phun-ky/speccer/compare/v4.2.0...v4.2.1) (2022-02-22)
 
 ## [4.2.0](https://github.com/phun-ky/speccer/compare/v4.1.0...v4.2.0) (2022-02-22)

package/README.md

@@ -1,35 +1,46 @@
 # speccer
 
-> A script to show specifications on html elements in your styleguide
+![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)
 
-Speccer was created to make it easier to document components in a style guide.
+> A script to show specifications on components in your design system documentation
+
+Speccer was created to make it easier to document components in a design system.
 
     $ npm i @phun-ky/speccer
 
 See demo here: https://codepen.io/phun-ky/pen/xaOrYX
 
-![Image of speccer](./speccer.png)
+![Image of speccer](./assets/speccer.png)
+
+---
 
 ## Usage
 
+### ESM
+
 Either import and run the required functions:
 
 ```javascript
-import { speccer } from '@phun-ky/speccer/src/index.js';
+import '@phun-ky/speccer/speccer.min.css';
+import speccer from '@phun-ky/speccer';
 
 // do stuff
 speccer();
 ```
 
+### Script
+
 Or place these `script` and `link` tags in your web page:
 
 ```html
-<link rel="stylesheet" href="../path/to/speccer.css" />
+<link rel="stylesheet" href="../path/to/speccer.min.css" />
 <script src="../path/to/speccer.js"></script>
 ```
 
 And then follow the steps below to display the specifications you want :)
 
+### React
+
 If you use React, you can use an effect like this:
 
 ```javascript
@@ -37,28 +48,21 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import debounce from './lib/debounce';
-import '@phun-ky/speccer/speccer.css';
+import '@phun-ky/speccer/speccer.min.css';
 
 const Component = () => {
   let speccerEventFunc;
 
-  useEffect(() => {
-    import('@phun-ky/speccer/src/index.js').then(speccerScript => {
-      console.info('[@phun-ky/speccer]: Activated speccer ');
+  useEffect(async () => {
+    const { default: speccer } = await import('@phun-ky/speccer');
 
-      const { speccer } = speccerScript;
-      speccer();
+    speccer();
 
-      speccerEventFunc = debounce(function () {
-        console.info('[@phun-ky/speccer]: Event resize triggered');
-        speccer();
-      }, 300);
-
-      window.addEventListener('resize', speccerEventFunc);
-    });
-  });
+    speccerEventFunc = debounce(function () {
+      speccer();
+    }, 300);
 
-  useEffect(() => {
+    window.addEventListener('resize', speccerEventFunc);
     return () => {
       window.removeEventListener('resize', speccerEventFunc);
     };
@@ -72,7 +76,7 @@ export default Component;
 
 ### Element spacing
 
-![Image of speccer](./spacing.png)
+![Image of speccer](./assets/spacing.png)
 
 In your component examples, use the following attribute:
 
@@ -84,7 +88,7 @@ This will display the element <em>and all of it's children</em> padding and marg
 
 ### Element dimensions
 
-![Image of speccer](./measure.png)
+![Image of speccer](./assets/measure.png)
 
 In your component examples, use the following attribute:
 
@@ -96,7 +100,7 @@ Where `height` and `width` comes with placement flags. Default for `height` is `
 
 ### Highlight the anatomy of an element
 
-![Image of speccer](./anatomy.png)
+![Image of speccer](./assets/anatomy.png)
 
 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.
 
@@ -110,7 +114,7 @@ This will place a pin to the outline of the element. Default is `top`.
 
 ### Element typogpraphy
 
-![Image of speccer](./typography.png)
+![Image of speccer](./assets/typography.png)
 
 In your component examples, use the following attribute.
 
@@ -142,13 +146,13 @@ If no attribute is applied, it will default to `data-dom`, as in, it will initia
 If you're importing speccer instead of with a script tag, you can use the following approach to apply lazy loading:
 
 ```javascript
-import * as Dissect from '@phun-ky/speccer/src/dissect.js';
+import { dissect } from '@phun-ky/speccer';
 
 let dissectElementObserver = new IntersectionObserver((entries, observer) => {
   entries.forEach(entry => {
     const targets = entry.target.querySelectorAll('[data-anatomy]');
     if (entry.intersectionRatio > 0) {
-      targets.forEach(Dissect.element);
+      targets.forEach(dissect.element);
       observer.unobserve(entry.target);
     }
   });
@@ -158,3 +162,36 @@ document.querySelectorAll('[data-anatomy-section]').forEach(el => {
   dissectElementObserver.observe(el);
 });
 ```
+
+## Customization
+
+You can use the provided CSS variables to customize the look and feel, to a point.
+
+```css
+.ph.speccer {
+  --ph-speccer-color-padding: rgba(219, 111, 255, 0.4);
+  --ph-speccer-color-padding-hover: #db6fff;
+  --ph-speccer-color-margin: rgba(255, 247, 111, 0.4);
+  --ph-speccer-color-margin-hover: #fff76f;
+  --ph-speccer-color-text-light: #fff;
+  --ph-speccer-color-text-dark: #333;
+  --ph-speccer-color-contrast: #ff3aa8;
+  --ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
+  --ph-speccer-measure-color: #f00;
+  --ph-speccer-pin-color: var(--ph-speccer-color-contrast);
+  --ph-speccer-typography-background-color: #fff;
+  --ph-speccer-typography-color-property: #3f85f2;
+  --ph-speccer-typography-color-text: #57575b;
+  --ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
+  --ph-speccer-depth-opacity-400: 0.4;
+  --ph-speccer-font-family: 'Menlo for Powerline', 'Menlo Regular for Powerline', 'DejaVu Sans Mono', Consolas, Monaco,
+    'Andale Mono', 'Ubuntu Mono', monospace;
+  --ph-speccer-font-size: 12px;
+  --ph-speccer-line-height: 12px;
+  --ph-speccer-pin-size: 24px;
+  --ph-speccer-pin-space: 48px;
+  --ph-speccer-line-width: 1px;
+  --ph-speccer-line-width-negative: -1px;
+  --ph-speccer-measure-size: 8px;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -23,7 +23,49 @@
     "scripts": {
       "prerelease": "npm run build",
       "posttag": "git push --follow-tags origin master && npm publish"
-    }
+    },
+    "types": [
+      {
+        "type": "chore",
+        "section": "Tasks",
+        "hidden": true
+      },
+      {
+        "type": "docs",
+        "section": "Documentation"
+      },
+      {
+        "type": "feat",
+        "section": "Feature"
+      },
+      {
+        "type": "fix",
+        "section": "Bug"
+      },
+      {
+        "type": "perf",
+        "section": "Performance change"
+      },
+      {
+        "type": "refactor",
+        "section": "Refactoring"
+      },
+      {
+        "type": "release",
+        "section": "Create a release commit",
+        "hidden": true
+      },
+      {
+        "type": "style",
+        "section": "Markup, white-space, formatting, missing semi-colons...",
+        "hidden": true
+      },
+      {
+        "type": "test",
+        "section": "Adding missing tests",
+        "hidden": true
+      }
+    ]
   },
   "repository": {
     "type": "git",
@@ -88,9 +130,7 @@
     "regenerator-runtime": "^0.13.7",
     "rollup": "^2.39.0",
     "rollup-plugin-terser": "^7.0.2",
-    "stylus": "^0.56.0"
-  },
-  "dependencies": {
+    "stylus": "^0.56.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0"