drab 1.9.3

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Ross Robino
+
+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/README.md

@@ -0,0 +1,35 @@
+# drab
+
+## An unstyled Svelte component library
+
+### MIT License
+
+### Install
+
+```bash
+npm create svelte@latest
+```
+
+```bash
+npm i -D drab
+```
+
+### Use
+
+```svelte
+<script>
+	import { ShareButton } from "drab";
+</script>
+
+<ShareButton
+	text="Check out this page: "
+	title="drab"
+	url="https://drab.robino.dev"
+/>
+```
+
+### Preview
+
+[drab.robino.dev](https://drab.robino.dev)
+
+### Open to contributions

package/dist/components/Chord.svelte

@@ -0,0 +1,208 @@
+<!--
+@component
+
+### Chord
+
+Generates a guitar chord `svg`.
+
+@props
+
+- `class` 
+- `id` 
+- `name` - name of chord
+- `notes` - list of the positioning of the notes required for the chord
+- `size` - total size of chord square
+- `strings` - total number of strings for the instrument
+
+@example
+
+```svelte
+<script>
+	import { Chord } from "drab";
+</script>
+
+<Chord name="D" notes={[
+		{
+			finger: 0,
+			string: 4,
+			fret: 0,
+		},
+		{
+			finger: 1,
+			string: 3,
+			fret: 2,
+		},
+		{
+			finger: 2,
+			string: 1,
+			fret: 2,
+		},
+		{
+			finger: 3,
+			string: 2,
+			fret: 3,
+		},
+	]}
+/>
+```
+-->
+
+<script>let className = "";
+export { className as class };
+export let id = "";
+export let strings = 6;
+export let name = "";
+export let size = 200;
+const boxSize = size * 0.61;
+const offset = (size - boxSize) / 2;
+const strokeWidth = size / 60;
+const stringList = Array.from(Array(strings).keys());
+export let notes = [];
+let notesList = structuredClone(notes);
+const usedStrings = notesList.map((note) => note.string);
+for (let i = 1; i < strings + 1; i++) {
+  if (!usedStrings.includes(i)) {
+    notesList.push({
+      finger: "X",
+      string: i,
+      fret: 0
+    });
+  }
+}
+const frets = notesList.map((note) => note.fret).filter((fret) => fret !== 0);
+if (!frets.length)
+  frets.push(0);
+const highFret = Math.max(...frets);
+const lowFret = Math.min(...frets);
+let fretRange = highFret - lowFret + 1;
+if (fretRange < 5)
+  fretRange = 5;
+let firstFret = lowFret;
+if (firstFret < 4 && highFret < 5) {
+  firstFret = 1;
+  if (lowFret !== 0)
+    fretRange += lowFret - 1;
+  if (lowFret === 2 && highFret < 5)
+    fretRange -= 1;
+  if (lowFret === 3 && highFret < 5)
+    fretRange -= 2;
+} else {
+  notesList.forEach((note) => {
+    if (note.fret !== 0) {
+      note.fret = note.fret - firstFret + 1;
+    }
+  });
+}
+const circleRadius = boxSize / fretRange / 2.3;
+const stringX = (string) => {
+  return boxSize / (strings - 1) * string + offset;
+};
+const fretY = (fret) => {
+  return boxSize / fretRange * fret + offset;
+};
+const noteX = (string) => {
+  return boxSize + offset - boxSize / (strings - 1) * (string - 1);
+};
+const noteY = (fret) => {
+  return boxSize / fretRange * fret + offset / 2 - boxSize / fretRange / 2;
+};
+</script>
+
+{#if notes.length}
+	<svg
+		width={size}
+		height={size}
+		stroke="currentColor"
+		fill="currentColor"
+		class={className}
+		{id}
+	>
+		<title>{name}</title>
+
+		<!-- BACKGROUND -->
+		<rect
+			width={boxSize}
+			height={boxSize}
+			fill="transparent"
+			x={offset}
+			y={offset / 2}
+			stroke-width={strokeWidth}
+		/>
+		<line
+			x1={offset - strokeWidth / 2}
+			y1={offset / 2 - strokeWidth / 2}
+			x2={boxSize + offset + strokeWidth / 2}
+			y2={offset / 2 - strokeWidth / 2}
+			stroke-width={strokeWidth * 2}
+		/>
+
+		<!-- FRETS -->
+		{#each Array.from(Array(fretRange).keys()) as fret}
+			<line
+				x1={offset}
+				y1={fretY(fret) - offset / 2}
+				x2={boxSize + offset}
+				y2={fretY(fret) - offset / 2}
+				stroke-width={strokeWidth}
+				opacity="0.2"
+			/>
+		{/each}
+
+		<!-- STRINGS -->
+		{#each stringList as string}
+			<line
+				x1={stringX(string)}
+				y1={offset / 2}
+				x2={stringX(string)}
+				y2={boxSize + offset / 2}
+				stroke-width={strokeWidth}
+			/>
+		{/each}
+
+		<!-- NOTES -->
+		{#each notesList as note}
+			{#if note.fret !== 0}
+				<circle
+					cx={noteX(note.string)}
+					cy={noteY(note.fret)}
+					r={circleRadius}
+				/>
+			{/if}
+			{#if note.finger !== 0}
+				<!-- RECOMMENDED FINGER -->
+				<text
+					x={noteX(note.string) - size / 50}
+					y={note.fret === 0
+						? offset / 2 - strokeWidth * 2.4
+						: size - offset * 1.1}
+					color="currentColor"
+					fill="currentColor"
+					font-size={size / 13}
+				>
+					{note.finger}
+				</text>
+			{/if}
+		{/each}
+
+		<!-- CHORD NAME -->
+		<text
+			x={offset}
+			y={size - offset / 2.5}
+			font-size={boxSize / 6}
+			font-weight="600"
+		>
+			{name}
+		</text>
+
+		<!-- STARTING FRET -->
+		{#if firstFret > 1}
+			<text
+				x={size - offset / 1.8}
+				y={offset / 2 + boxSize / 7}
+				font-size={size / 13}
+			>
+				{firstFret}f
+			</text>
+		{/if}
+	</svg>
+{/if}

package/dist/components/Chord.svelte.d.ts

@@ -0,0 +1,74 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** total number of strings for the instrument */ strings?: number | undefined;
+        /** name of chord */ name?: string | undefined;
+        /** total size of chord square */ size?: number | undefined;
+        /** list of the positioning of the notes required for the chord */ notes?: {
+            /** recommended finger to use */
+            finger: number | string;
+            /** string number */
+            string: number;
+            /** fret number */
+            fret: number;
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChordProps = typeof __propDef.props;
+export type ChordEvents = typeof __propDef.events;
+export type ChordSlots = typeof __propDef.slots;
+/**
+ * ### Chord
+ *
+ * Generates a guitar chord `svg`.
+ *
+ * @props
+ *
+ * - `class`
+ * - `id`
+ * - `name` - name of chord
+ * - `notes` - list of the positioning of the notes required for the chord
+ * - `size` - total size of chord square
+ * - `strings` - total number of strings for the instrument
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ * import { Chord } from "drab";
+ * </script>
+ *
+ * <Chord name="D" notes={[
+ * 	{
+ * 		finger: 0,
+ * 		string: 4,
+ * 		fret: 0,
+ * 	},
+ * 	{
+ * 		finger: 1,
+ * 		string: 3,
+ * 		fret: 2,
+ * 	},
+ * 	{
+ * 		finger: 2,
+ * 		string: 1,
+ * 		fret: 2,
+ * 	},
+ * 	{
+ * 		finger: 3,
+ * 		string: 2,
+ * 		fret: 3,
+ * 	},
+ * ]}
+ * />
+ * ```
+ */
+export default class Chord extends SvelteComponent<ChordProps, ChordEvents, ChordSlots> {
+}
+export {};

package/dist/components/ContextMenu.svelte

@@ -0,0 +1,93 @@
+<!--
+@component
+
+### ContextMenu
+
+Displays when the parent element is right clicked.
+
+@props
+
+- `class` 
+- `display` - controls `display` css property
+- `id` 
+
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | Context Menu  |
+
+@example
+
+```svelte
+<script>
+    import { ContextMenu } from "@rossrobino/components";
+</script>
+
+<div class="p-12 border border-dashed flex justify-center">
+	<div>Right click here</div>
+	<ContextMenu class="rounded shadow p-2 bg-white">
+		<div class="flex flex-col gap-2 not-prose w-48">
+			<div class="font-bold">Context Menu</div>
+			<button class="btn">Button</button>
+			<button class="btn">Button</button>
+			<button class="btn">Button</button>
+		</div>
+	</ContextMenu>
+</div>
+```
+-->
+
+<script>import { onMount, tick } from "svelte";
+let className = "";
+export { className as class };
+export let id = "";
+export let display = false;
+let contextMenu;
+let position = { x: 0, y: 0 };
+const hide = () => display = false;
+onMount(() => {
+  const parent = contextMenu.parentElement;
+  if (parent) {
+    parent.addEventListener("contextmenu", async (e) => {
+      if (contextMenu) {
+        e.preventDefault();
+        const scrollY = window.scrollY;
+        position.x = e.clientX;
+        position.y = e.clientY + scrollY;
+        display = true;
+        await tick();
+        const offsetWidth = contextMenu.offsetWidth + 24;
+        const offsetHeight = contextMenu.offsetHeight + 6;
+        const innerWidth = window.innerWidth;
+        const innerHeight = window.innerHeight;
+        if (position.x + offsetWidth > innerWidth) {
+          position.x = innerWidth - offsetWidth;
+        }
+        if (position.y + offsetHeight > scrollY + innerHeight) {
+          position.y = scrollY + innerHeight - offsetHeight;
+        }
+      }
+    });
+  }
+});
+</script>
+
+<svelte:document on:click={hide} />
+
+<div
+	class={className}
+	{id}
+	bind:this={contextMenu}
+	style="display: {display
+		? 'block'
+		: 'none'}; top: {position.y}px; left: {position.x}px;"
+>
+	<slot>Context Menu</slot>
+</div>
+
+<style>
+	div {
+		position: absolute;
+	}
+</style>

package/dist/components/ContextMenu.svelte.d.ts

@@ -0,0 +1,57 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        /** controls `display` css property */ display?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ContextMenuProps = typeof __propDef.props;
+export type ContextMenuEvents = typeof __propDef.events;
+export type ContextMenuSlots = typeof __propDef.slots;
+/**
+ * ### ContextMenu
+ *
+ * Displays when the parent element is right clicked.
+ *
+ * @props
+ *
+ * - `class`
+ * - `display` - controls `display` css property
+ * - `id`
+ *
+ * @slots
+ *
+ * | name       | purpose                         | default value |
+ * | ---------- | ------------------------------- | ------------- |
+ * | `default`  | default                         | Context Menu  |
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ *    import { ContextMenu } from "@rossrobino/components";
+ * </script>
+ *
+ * <div class="p-12 border border-dashed flex justify-center">
+ * <div>Right click here</div>
+ * <ContextMenu class="rounded shadow p-2 bg-white">
+ * 	<div class="flex flex-col gap-2 not-prose w-48">
+ * 		<div class="font-bold">Context Menu</div>
+ * 		<button class="btn">Button</button>
+ * 		<button class="btn">Button</button>
+ * 		<button class="btn">Button</button>
+ * 	</div>
+ * </ContextMenu>
+ * </div>
+ * ```
+ */
+export default class ContextMenu extends SvelteComponent<ContextMenuProps, ContextMenuEvents, ContextMenuSlots> {
+}
+export {};

package/dist/components/CopyButton.svelte

@@ -0,0 +1,56 @@
+<!--
+@component
+
+### CopyButton
+
+Uses the navigator api to copy text to the clipboard.
+
+@props
+
+- `class` 
+- `id` 
+- `text` - text to copy
+- `title` 
+
+@slots
+
+| name       | purpose                         | default value |
+| ---------- | ------------------------------- | ------------- |
+| `default`  | default                         | `Copy`        |
+| `complete` | displays after copy is complete | `Copied`      |
+
+@example
+
+```svelte
+<script>
+    import { CopyButton } from "@rossrobino/components";
+</script>
+
+<CopyButton	text="Text to copy" />
+```
+-->
+
+<script>let className = "";
+export { className as class };
+export let id = "";
+export let title = "Copy";
+export let text;
+let complete = false;
+const copyText = async () => {
+  try {
+    await navigator.clipboard.writeText(text);
+    complete = true;
+    setTimeout(() => complete = false, 800);
+  } catch (error) {
+    console.error(error);
+  }
+};
+</script>
+
+<button on:click={copyText} class={className} {id} {title}>
+	{#if complete}
+		<slot name="complete">Copied</slot>
+	{:else}
+		<slot>Copy</slot>
+	{/if}
+</button>

package/dist/components/CopyButton.svelte.d.ts

@@ -0,0 +1,51 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        title?: string | undefined;
+        /** text to copy */ text: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        complete: {};
+        default: {};
+    };
+};
+export type CopyButtonProps = typeof __propDef.props;
+export type CopyButtonEvents = typeof __propDef.events;
+export type CopyButtonSlots = typeof __propDef.slots;
+/**
+ * ### CopyButton
+ *
+ * Uses the navigator api to copy text to the clipboard.
+ *
+ * @props
+ *
+ * - `class`
+ * - `id`
+ * - `text` - text to copy
+ * - `title`
+ *
+ * @slots
+ *
+ * | name       | purpose                         | default value |
+ * | ---------- | ------------------------------- | ------------- |
+ * | `default`  | default                         | `Copy`        |
+ * | `complete` | displays after copy is complete | `Copied`      |
+ *
+ * @example
+ *
+ * ```svelte
+ * <script>
+ * import { CopyButton } from "@rossrobino/components";
+ * </script>
+ *
+ * <CopyButton	text="Text to copy" />
+ * ```
+ */
+export default class CopyButton extends SvelteComponent<CopyButtonProps, CopyButtonEvents, CopyButtonSlots> {
+}
+export {};