@phun-ky/speccer 6.2.5 → 6.4.0

package/README.md

@@ -1,18 +1,39 @@
-# speccer
+# @phun-ky/speccer
 
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![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)
+![Image of speccer](./public/speccer.png)
 
-> A zero dependency package to show specifications on components in your design system documentation
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com) [![SemVer 2.0](https://img.shields.io/badge/SemVer-2.0-green.svg)](http://semver.org/spec/v2.0.0.html) ![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) ![npm](https://img.shields.io/npm/dm/%40phun-ky/speccer) ![GitHub Repo stars](https://img.shields.io/github/stars/phun-ky/speccer)
 
-Speccer was created to make it easier to document components in a design system.
+> A zero dependency package to show specifications on components in your design system documentation
 
-    $ npm i @phun-ky/speccer
+- [@phun-ky/speccer](#phun-kyspeccer)
+  - [About](#about)
+  - [Usage](#usage)
+    - [ESM](#esm)
+    - [Script](#script)
+    - [React](#react)
+  - [Advanced usage](#advanced-usage)
+    - [Lazy](#lazy)
+  - [Features](#features)
+    - [Element spacing](#element-spacing)
+    - [Element dimensions](#element-dimensions)
+      - [Subtle measure](#subtle-measure)
+    - [Highlight the anatomy of an element](#highlight-the-anatomy-of-an-element)
+      - [Subtle anatomy](#subtle-anatomy)
+    - [Curly brackets](#curly-brackets)
+    - [Element typogpraphy](#element-typogpraphy)
+    - [Mark elements](#mark-elements)
+  - [Customization](#customization)
+
+## About
 
-See demo here: https://codepen.io/phun-ky/pen/xaOrYX
+Speccer was created to make it easier to document components in a design system.
 
-![Image of speccer](./assets/speccer.png)
+```zsh
+npm i @phun-ky/speccer
+```
 
----
+See demo here: <https://codepen.io/phun-ky/pen/xaOrYX>
 
 ## Usage
 
@@ -74,9 +95,50 @@ const Component = () => {
 export default Component;
 ```
 
+## Advanced usage
+
+If you want to control speccer a bit more, you have some options. Apply one of these attributes to the script element for different types of initialization:
+
+```html
+<script src="../speccer.js" data-<manual|instant|dom|lazy></script>
+```
+
+| Tag            | Description                                                         |
+| -------------- | ------------------------------------------------------------------- |
+| `data-manual`  | Makes `window.speccer()` available to be used when you feel like it |
+| `data-instant` | fires off `speccer()` right away                                    |
+| `data-dom`     | Waits for `DOMContentLoaded`                                        |
+| `data-lazy`    | Lazy loads `speccer()` per specced element                          |
+
+If no attribute is applied, it will default to `data-dom`, as in, it will initialize when `DOMContentLoaded` is fired.
+
+### Lazy
+
+If you're importing speccer instead of with a script tag, you can use the following approach to apply lazy loading:
+
+```javascript
+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);
+      observer.unobserve(entry.target);
+    }
+  });
+});
+
+document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
+  dissectElementObserver.observe(el);
+});
+```
+
+## Features
+
 ### Element spacing
 
-![Image of speccer](./assets/spacing.png)
+![Image of speccer](./public/spacing.png)
 
 In your component examples, use the following attribute:
 
@@ -84,23 +146,26 @@ In your component examples, use the following attribute:
 <div data-speccer class="..."></div>
 ```
 
-This will display the element <em>and all of it's children</em> padding and margin.
+This will display the element _and all of it's children_ padding and margin.
 
 ### Element dimensions
 
-![Image of speccer](./assets/measure.png)
+![Image of speccer](./public/measure.png)
 
 In your component examples, use the following attribute:
 
 ```html
-<div data-speccer-measure="[height right|left] | [width top|bottom]" class="..."></div>
+<div
+  data-speccer-measure="[height right|left] | [width top|bottom]"
+  class="..."
+></div>
 ```
 
 Where `height` and `width` comes with placement flags. Default for `height` is `left`, default for `width` is `top`.
 
-#### Subtle
+#### Subtle measure
 
-![Image of subtle option for measure](./assets/subtle-measure.png)
+![Image of subtle option for measure](./public/subtle-measure.png)
 
 You can also give a more subtle touch to the measure elements.
 
@@ -112,21 +177,24 @@ This will give a dashed border.
 
 ### Highlight the anatomy of an element
 
-![Image of speccer](./assets/anatomy.png)
+![Image of speccer](./public/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.
 
 ```html
 <div data-anatomy-section>
-  <div data-anatomy="outline [full|enclose] [left|right|top|bottom]" class="..."></div>
+  <div
+    data-anatomy="outline [full|enclose][curly] [left|right|top|bottom]"
+    class="..."
+  ></div>
 </div>
 ```
 
 This will place a pin to the outline of the element. Default is `top`.
 
-#### Subtle
+#### Subtle anatomy
 
-![Image of subtle option for anatomy](./assets/subtle.png)
+![Image of subtle option for anatomy](./public/subtle.png)
 
 You can also give a more subtle touch to the anatomy elements.
 
@@ -136,62 +204,63 @@ You can also give a more subtle touch to the anatomy elements.
 </div>
 ```
 
-This will give a dashed border, and a more subtle pin style.
+### Curly brackets
 
-### Element typogpraphy
+You can use curly brackets with the `curly` tag in `data-anatomy` along side `outline full` to provide a more sleek look to the style.
 
-![Image of typography speccer](./assets/typography.png)
+> [!NOTE]  
+> Only works with `outline full`
 
-In your component examples, use the following attribute.
+The curly brackets are made with SVG paths, and it is required to have the following snippet on your page for it to render:
 
 ```html
-<div data-speccer-typography="[left|right|top|bottom]" class="...">Some text</div>
+<svg
+  class="ph"
+  viewBox="0 0"
+  id="ph-speccer-svg"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    class="ph path original"
+    id="ph-speccer-path"
+    fill="none"
+    stroke-width="1"
+    stroke="currentColor"
+  />
+</svg>
 ```
 
-This will place a box to display typography information. Default is `left`.
+This will give a dashed border, and a more subtle pin style.
 
-## Advanced usage
+### Element typogpraphy
 
-If you want to control speccer a bit more, you have some options. Apply one of these attributes to the script element for different types of initialization:
+![Image of typography speccer](./public/typography.png)
+
+In your component examples, use the following attribute.
 
 ```html
-<script src="../speccer.js" data-<manual|instant|dom|lazy></script>
+<div data-speccer-typography="[left|right|top|bottom]" class="...">
+  Some text
+</div>
 ```
 
-| Tag            | Description                                                         |
-| -------------- | ------------------------------------------------------------------- |
-| `data-manual`  | Makes `window.speccer()` available to be used when you feel like it |
-| `data-instant` | fires off `speccer()` right away                                    |
-| `data-dom`     | Waits for `DOMContentLoaded`                                        |
-| `data-lazy`    | Lazy loads `speccer()` per specced element                          |
-
-If no attribute is applied, it will default to `data-dom`, as in, it will initialize when `DOMContentLoaded` is fired.
+This will place a box to display typography information. Default is `left`.
 
-### Lazy
+### Mark elements
 
-If you're importing speccer instead of with a script tag, you can use the following approach to apply lazy loading:
+![Alt text](./public/mark.png)
 
-```javascript
-import { dissect } from '@phun-ky/speccer';
+This will mark the given elements.
 
-let dissectElementObserver = new IntersectionObserver((entries, observer) => {
-  entries.forEach((entry) => {
-    const targets = entry.target.querySelectorAll('[data-anatomy]');
-    if (entry.intersectionRatio > 0) {
-      targets.forEach(dissect.element);
-      observer.unobserve(entry.target);
-    }
-  });
-});
+In your component examples, use the following attribute.
 
-document.querySelectorAll('[data-anatomy-section]').forEach((el) => {
-  dissectElementObserver.observe(el);
-});
+```html
+<div data-speccer-mark …>…</div>
 ```
 
 ## Customization
 
-![Image of speccer dark mode](./assets/darkmode.png)
+![Image of speccer dark mode](./public/darkmode.png)
 
 Allthough the styling works nicely with dark mode, you can use the provided CSS variables to customize the look and feel. If more control is needed, you can use CSS overrides :)
 
@@ -212,7 +281,8 @@ Allthough the styling works nicely with dark mode, you can use the provided CSS
   --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,
+  --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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phun-ky/speccer",
-  "version": "6.2.5",
+  "version": "6.4.0",
   "description": "A script to annotate, show spacing specs and to display typography information in documentation/website on HTML elements",
   "main": "speccer.js",
   "publishConfig": {
@@ -9,16 +9,16 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "rollup": "rollup -c",
-    "prerollup:dev": "npm run clean && npm run stylus && npm run postcss ",
+    "prerollup:dev": "npm run clean && npm run styles",
     "rollup:dev": "rollup -c -w",
     "clean": "rm -rf dist/ dts/ ./speccer.css ./speccer.min.css ./speccer.js",
-    "build": "npm run clean && npm run rollup && npm run stylus && npm run postcss",
+    "build": "npm run clean && npm run rollup && npm run styles",
     "styles": "npm run stylus && npm run postcss",
     "stylus": "rm -rf ./speccer.css && stylus ./src/styles/index.styl -o ./speccer.css",
     "postcss": "rm -rf ./speccer.min.css && postcss ./speccer.css -o  speccer.min.css",
-    "dev": "npx browser-sync start --server --files \"dev/*.html\" --index \"dev/index.html\" --serveStatic \"/dev/*.html\"",
+    "dev": "npx browser-sync start --server --files \"dev/*.html\" \"*.css\" --index \"dev/index.html\" --serveStatic \"/dev/*.html\"",
     "commit": "npx git-cz",
-    "release": "npx standard-version"
+    "release": "release-it"
   },
   "files": [
     "/speccer.js",
@@ -26,54 +26,6 @@
     "/speccer.min.css",
     "/speccer.css"
   ],
-  "standard-version": {
-    "scripts": {
-      "prerelease": "npm run build && git add .",
-      "posttag": "git push --follow-tags origin master"
-    },
-    "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",
     "url": "git+https://github.com/phun-ky/speccer.git"
@@ -81,6 +33,8 @@
   "keywords": [
     "html",
     "css",
+    "design",
+    "design system",
     "javascript",
     "spec",
     "inspect",
@@ -107,6 +61,7 @@
   },
   "homepage": "https://github.com/phun-ky/speccer#readme",
   "devDependencies": {
+    "@release-it/conventional-changelog": "^7.0.1",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "@testing-library/dom": "^7.29.4",
@@ -124,18 +79,25 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "git-cz": "^4.9.0",
     "jest": "^26.6.3",
     "network-information-types": "^0.1.1",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.4.1",
     "prettier-eslint": "^13.0.0",
+    "release-it": "^16.1.5",
     "rollup": "^2.39.0",
     "rollup-plugin-dts": "^4.0.1",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.1",
-    "stylus": "^0.56.0",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "stylus": "^0.60.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.4"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/git-cz"
+    }
   }
 }