@worknice/whiteboard 0.0.1

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2023 Worknice
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared.css

@@ -0,0 +1,391 @@
+/* universal */
+
+a,
+abbr,
+address,
+area,
+article,
+aside,
+audio,
+b,
+base,
+bdi,
+bdo,
+blockquote,
+body,
+br,
+button,
+canvas,
+caption,
+cite,
+code,
+col,
+colgroup,
+data,
+datalist,
+dd,
+del,
+details,
+dfn,
+dialog,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+head,
+header,
+hgroup,
+hr,
+html,
+i,
+iframe,
+img,
+input,
+ins,
+kbd,
+label,
+legend,
+li,
+link,
+main,
+map,
+mark,
+menu,
+meta,
+meter,
+nav,
+noscript,
+object,
+ol,
+optgroup,
+option,
+output,
+p,
+picture,
+pre,
+progress,
+q,
+rp,
+rt,
+ruby,
+s,
+samp,
+script,
+search,
+section,
+select,
+slot,
+small,
+source,
+span,
+strong,
+style,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+template,
+textarea,
+tfoot,
+th,
+thead,
+time,
+title,
+tr,
+track,
+u,
+ul,
+var,
+video,
+wbr {
+  all: unset;
+  box-sizing: border-box;
+}
+
+svg,
+math {
+  box-sizing: border-box;
+}
+
+head,
+link,
+meta,
+noscript,
+script,
+style,
+title {
+  display: none;
+}
+
+address,
+article,
+aside,
+blockquote,
+details,
+dialog,
+dd,
+div,
+dl,
+dt,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+li,
+main,
+nav,
+ol,
+p,
+pre,
+section,
+ul {
+  display: block;
+}
+
+audio,
+canvas,
+iframe,
+img,
+math,
+object,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+table {
+  display: table;
+}
+thead {
+  display: table-header-group;
+}
+tfoot {
+  display: table-footer-group;
+}
+tbody {
+  display: table-row-group;
+}
+tr {
+  display: table-row;
+}
+th,
+td {
+  display: table-cell;
+  text-align: start;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  display: block;
+  height: 100dvh;
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark light;
+  }
+}
+
+/* global */
+
+:root {
+  --size-n5: 1px; /* -1 */
+  --size-n4: 2px; /* -1 */
+  --size-n3: 3px; /* -3 */
+  --size-n2: 6px; /* -3 */
+  --size-n1: 12px; /* -6 */
+  --size-00: 18px;
+  --size-p1: 24px; /* +6 */
+  --size-p2: 36px; /* +12 */
+  --size-p3: 48px; /* +12 */
+  --size-p4: 72px; /* +24 */
+  --size-p5: 96px; /* +24 */
+
+  --typeface-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, "Helvetica Neue", sans-serif;
+  --typeface-brand: var(--typeface-system);
+  --typeface-monospace: monospace;
+
+  --font-regular: normal 400 16px / var(--size-p1) var(--typeface-system);
+  --font-monospace: normal 400 16px / var(--size-p1) var(--typeface-monospace);
+
+  --font-bold: normal 600 16px / var(--size-p1) var(--typeface-system);
+  --font-italic: italic 400 16px / var(--size-p1) var(--typeface-system);
+  --font-bold-italic: italic 600 16px / var(--size-p1) var(--typeface-system);
+
+  --font-title: normal 800 66px / var(--size-p4) var(--typeface-brand);
+  --font-heading: normal 800 36px / var(--size-p3) var(--typeface-brand);
+  --font-subheading: normal 800 30px / var(--size-p2) var(--typeface-brand);
+
+  --font-label: normal 800 16px / var(--size-p1) var(--typeface-system);
+  --font-hero: normal 400 36px / var(--size-p3) var(--typeface-system);
+  --font-small: normal 400 12px / var(--size-00) var(--typeface-system);
+
+  --color-neutral-shade-5: oklch(14.49% 0 0);
+  --color-neutral-shade-4: oklch(20.04% 0 0);
+  --color-neutral-shade-3: oklch(23.88% 0 0);
+  --color-neutral-shade-2: oklch(27.99% 0 0);
+  --color-neutral-shade-1: oklch(31.82% 0 0);
+  --color-neutral-vivid: oklch(44.5% 0 0);
+  --color-neutral-muted: oklch(72.1% 0 0);
+  --color-neutral-pastel: oklch(84.2% 0 0);
+  --color-neutral-tint-1: oklch(85.4% 0 0);
+  --color-neutral-tint-2: oklch(88.2% 0 0);
+  --color-neutral-tint-3: oklch(91.1% 0 0);
+  --color-neutral-tint-4: oklch(93.9% 0 0);
+  --color-neutral-tint-5: oklch(97% 0 0);
+
+  --color-red-shade-5: oklch(14.49% 0.0197 22.1);
+  --color-red-shade-4: oklch(20.04% 0.0174 22.1);
+  --color-red-shade-3: oklch(23.88% 0.0262 22.1);
+  --color-red-shade-2: oklch(27.99% 0.0343 22.1);
+  --color-red-shade-1: oklch(31.82% 0.0408 22.1);
+  --color-red-vivid: oklch(44.5% 0.18 22.1);
+  --color-red-muted: oklch(72.1% 0.079 22.1);
+  --color-red-pastel: oklch(84.2% 0.135 22.1);
+  --color-red-tint-1: oklch(85.4% 0.036 22.1);
+  --color-red-tint-2: oklch(88.2% 0.029 22.1);
+  --color-red-tint-3: oklch(91.1% 0.023 22.1);
+  --color-red-tint-4: oklch(93.9% 0.013 22.1);
+  --color-red-tint-5: oklch(97% 0.007 22.1);
+
+  --color-orange-shade-5: oklch(14.49% 0.0197 59.5);
+  --color-orange-shade-4: oklch(20.04% 0.0174 59.5);
+  --color-orange-shade-3: oklch(23.88% 0.0262 59.5);
+  --color-orange-shade-2: oklch(27.99% 0.0343 59.5);
+  --color-orange-shade-1: oklch(31.82% 0.0408 59.5);
+  --color-orange-vivid: oklch(44.5% 0.18 59.5);
+  --color-orange-muted: oklch(72.1% 0.079 59.5);
+  --color-orange-pastel: oklch(84.2% 0.135 59.5);
+  --color-orange-tint-1: oklch(85.4% 0.036 59.5);
+  --color-orange-tint-2: oklch(88.2% 0.029 59.5);
+  --color-orange-tint-3: oklch(91.1% 0.023 59.5);
+  --color-orange-tint-4: oklch(93.9% 0.013 59.5);
+  --color-orange-tint-5: oklch(97% 0.007 59.5);
+
+  --color-yellow-shade-5: oklch(14.49% 0.0197 93.3);
+  --color-yellow-shade-4: oklch(20.04% 0.0174 93.3);
+  --color-yellow-shade-3: oklch(23.88% 0.0262 93.3);
+  --color-yellow-shade-2: oklch(27.99% 0.0343 93.3);
+  --color-yellow-shade-1: oklch(31.82% 0.0408 93.3);
+  --color-yellow-vivid: oklch(44.5% 0.18 93.3);
+  --color-yellow-muted: oklch(72.1% 0.079 93.3);
+  --color-yellow-pastel: oklch(84.2% 0.135 93.3);
+  --color-yellow-tint-1: oklch(85.4% 0.036 93.3);
+  --color-yellow-tint-2: oklch(88.2% 0.029 93.3);
+  --color-yellow-tint-3: oklch(91.1% 0.023 93.3);
+  --color-yellow-tint-4: oklch(93.9% 0.013 93.3);
+  --color-yellow-tint-5: oklch(97% 0.007 93.3);
+
+  --color-green-shade-5: oklch(14.49% 0.0197 147.15);
+  --color-green-shade-4: oklch(20.04% 0.0174 147.15);
+  --color-green-shade-3: oklch(23.88% 0.0262 147.15);
+  --color-green-shade-2: oklch(27.99% 0.0343 147.15);
+  --color-green-shade-1: oklch(31.82% 0.0408 147.15);
+  --color-green-vivid: oklch(44.5% 0.18 147.15);
+  --color-green-muted: oklch(72.1% 0.079 147.15);
+  --color-green-pastel: oklch(84.2% 0.135 147.15);
+  --color-green-tint-1: oklch(85.4% 0.036 147.15);
+  --color-green-tint-2: oklch(88.2% 0.029 147.15);
+  --color-green-tint-3: oklch(91.1% 0.023 147.15);
+  --color-green-tint-4: oklch(93.9% 0.013 147.15);
+  --color-green-tint-5: oklch(97% 0.007 147.15);
+
+  --color-teal-shade-5: oklch(14.49% 0.0197 218.38);
+  --color-teal-shade-4: oklch(20.04% 0.0174 218.38);
+  --color-teal-shade-3: oklch(23.88% 0.0262 218.38);
+  --color-teal-shade-2: oklch(27.99% 0.0343 218.38);
+  --color-teal-shade-1: oklch(31.82% 0.0408 218.38);
+  --color-teal-vivid: oklch(44.5% 0.18 218.38);
+  --color-teal-muted: oklch(72.1% 0.079 218.38);
+  --color-teal-pastel: oklch(84.2% 0.135 218.38);
+  --color-teal-tint-1: oklch(85.4% 0.036 218.38);
+  --color-teal-tint-2: oklch(88.2% 0.029 218.38);
+  --color-teal-tint-3: oklch(91.1% 0.023 218.38);
+  --color-teal-tint-4: oklch(93.9% 0.013 218.38);
+  --color-teal-tint-5: oklch(97% 0.007 218.38);
+
+  --color-blue-shade-5: oklch(14.49% 0.0197 259);
+  --color-blue-shade-4: oklch(20.04% 0.0174 259);
+  --color-blue-shade-3: oklch(23.88% 0.0262 259);
+  --color-blue-shade-2: oklch(27.99% 0.0343 259);
+  --color-blue-shade-1: oklch(31.82% 0.0408 259);
+  --color-blue-vivid: oklch(44.5% 0.18 259);
+  --color-blue-muted: oklch(72.1% 0.079 259);
+  --color-blue-pastel: oklch(84.2% 0.135 259);
+  --color-blue-tint-1: oklch(85.4% 0.036 259);
+  --color-blue-tint-2: oklch(88.2% 0.029 259);
+  --color-blue-tint-3: oklch(91.1% 0.023 259);
+  --color-blue-tint-4: oklch(93.9% 0.013 259);
+  --color-blue-tint-5: oklch(97% 0.007 259);
+
+  --color-purple-shade-5: oklch(14.49% 0.0197 342.6);
+  --color-purple-shade-4: oklch(20.04% 0.0174 342.6);
+  --color-purple-shade-3: oklch(23.88% 0.0262 342.6);
+  --color-purple-shade-2: oklch(27.99% 0.0343 342.6);
+  --color-purple-shade-1: oklch(31.82% 0.0408 342.6);
+  --color-purple-vivid: oklch(44.5% 0.18 342.6);
+  --color-purple-muted: oklch(72.1% 0.079 342.6);
+  --color-purple-pastel: oklch(84.2% 0.135 342.6);
+  --color-purple-tint-1: oklch(85.4% 0.036 342.6);
+  --color-purple-tint-2: oklch(88.2% 0.029 342.6);
+  --color-purple-tint-3: oklch(91.1% 0.023 342.6);
+  --color-purple-tint-4: oklch(93.9% 0.013 342.6);
+  --color-purple-tint-5: oklch(97% 0.007 342.6);
+}
+
+body {
+  background-color: var(--color-blue-tint-5);
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABCSURBVHgB7dOxCQAgDETRU0TQ/TcVFbFQcIIrIqS4D+nCa0JC6+vAsAjjBAr8BY653zAlagv8M1FgLRlsurJAD+AFpUkK9JbtVqUAAAAASUVORK5CYII=);
+  background-size: 20px 20px;
+  color: var(--color-neutral-shade-5);
+  font: var(--font-regular);
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: var(--color-blue-shade-4);
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABASURBVHgB7dEhDgAgDEPRQjBDInDc/4adhCtMjGSiXzcvS9bWPheJdSQnUOAv0OkgGZnmXzgiI5uGaPqywArgAwbDB1BUNxceAAAAAElFTkSuQmCC);
+    color: var(--color-neutral-tint-5);
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --font-title: normal 800 48px / var(--size-p3) var(--typeface-brand);
+    --font-heading: normal 800 36px / var(--size-p2) var(--typeface-brand);
+    --font-subheading: normal 800 24px / var(--size-p1) var(--typeface-brand);
+    --font-hero: normal 400 36px / var(--size-p2) var(--typeface-system);
+  }
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@worknice/whiteboard",
+  "description": "",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": false,
+  "packageManager": "^pnpm@8.6.12",
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "next": "^13.4.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "bumpp": "^9.1.1",
+    "prettier": "^3.0.1",
+    "typescript": "^5.1.6"
+  },
+  "prettier": {
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "jsxSingleQuote": false,
+    "printWidth": 100,
+    "proseWrap": "never",
+    "quoteProps": "as-needed",
+    "semi": true,
+    "singleQuote": false,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false
+  },
+  "scripts": {
+    "build": "cp ./src/shared.css ./dist/shared.css",
+    "build:prep": "rm -rf ./dist && mkdir -p ./dist",
+    "release": "bumpp --execute \"turbo build\" --commit \"whiteboard-v%s\" --tag \"whiteboard-v%s\" --preid pre && pnpm publish",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}