sveltacular 0.0.1

package/README.md

@@ -0,0 +1,11 @@
+# Sveltacular
+
+I got tired of creating the same components over and over, so I decided to make an open source library of Svelte components.
+
+This library is TypeScript and SASS based. It uses vanilla CSS without any frameworks to get in the way.
+
+## Run Storybook
+
+```
+npm run storybook
+```

package/dist/forms/button/button.stories.svelte

@@ -0,0 +1,33 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import Button from "./button.svelte";
+</script>
+
+<Meta title="Forms/Button" component={Button} />
+
+<Story name="Primary">
+	<Button style="primary">Click Me</Button>
+</Story>
+
+<Story name="Secondary">
+	<Button style="secondary">Click Me</Button>
+</Story>
+
+<Story name="Tertiary">
+	<Button style="tertiary">Click Me</Button>
+</Story>
+
+<Story name="Danger">
+	<Button style="danger">Click Me</Button>
+</Story>
+
+<Story name="Positive">
+	<Button style="positive">Click Me</Button>
+</Story>
+
+<Story name="Negative">
+	<Button style="negative">Click Me</Button>
+</Story>
+
+<Story name="Link">
+	<Button style="link">Click Me</Button>
+</Story>

package/dist/forms/button/button.stories.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/forms/button/button.svelte

@@ -0,0 +1,129 @@
+<script>import { navigateTo } from "../../../helpers/navigate-to.js";
+import { createEventDispatcher } from "svelte";
+export let href = void 0;
+export let size = "md";
+export let style = "secondary";
+export let type = "button";
+export let block = false;
+export let disabled = false;
+const dispatch = createEventDispatcher();
+const click = () => {
+  dispatch("click");
+  if (href) {
+    navigateTo(href);
+  }
+};
+</script>
+
+<button {type} on:click={click} class="{size} {style}" class:block {disabled}>
+	<slot />
+</button>
+
+<style>button {
+  display: inline-block;
+  min-width: 10rem;
+  cursor: pointer;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  background-color: #5c5c5c;
+  border: 1px solid #b7b7b7;
+  border-radius: 0.25rem;
+  color: #e2e2e2;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  padding: 0.5rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}
+button.block {
+  display: block;
+  width: 100%;
+}
+button.sm {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding: 0.25rem 0.5rem;
+}
+button.lg {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding: 0.75rem 1.5rem;
+}
+button.xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  padding: 1rem 2rem;
+}
+button.full {
+  width: 100%;
+  padding: 0.5rem 0;
+  display: block;
+  min-width: auto;
+  flex-grow: 1;
+}
+button:hover {
+  background-color: #4c4c4c;
+}
+button.primary {
+  background-color: #1e88e5;
+  border-color: #1e88e5;
+  color: #fff;
+}
+button.primary:hover {
+  background-color: #1976d2;
+  border-color: #1976d2;
+}
+button.link, button.ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--sv-color-link);
+  text-decoration: underline;
+}
+button.link:hover, button.ghost:hover {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--sv-color-link-hover);
+}
+button.positive {
+  background-color: #43a047;
+  border-color: #43a047;
+  color: #fff;
+}
+button.positive:hover {
+  background-color: #388e3c;
+  border-color: #388e3c;
+}
+button.danger {
+  background-color: #8d0200;
+  border-color: #8d0200;
+  color: #fff;
+}
+button.danger:hover {
+  background-color: #c62828;
+  border-color: #c62828;
+}
+button.negative {
+  background-color: #e53935;
+  border-color: #e53935;
+  color: #fff;
+}
+button.negative:hover {
+  background-color: #c62828;
+  border-color: #c62828;
+}
+button.tertiary {
+  background-color: transparent;
+  border-color: var(--sv-color-fg);
+  color: var(--sv-color-fg);
+}
+button.tertiary:hover {
+  background-color: var(--sv-color-fg);
+  color: var(--sv-color-bg);
+  border-color: var(--sv-color-bg);
+}</style>

package/dist/forms/button/button.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonStyle, FormFieldSizeOptions } from '../../../types/form.js';
+declare const __propDef: {
+    props: {
+        href?: string | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        style?: ButtonStyle | undefined;
+        type?: "submit" | "button" | "reset" | undefined;
+        block?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/forms/check-box/check-box.stories.svelte

@@ -0,0 +1,13 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import CheckBox from "./check-box.svelte";
+</script>
+
+<Meta title="Forms/CheckBox" component={CheckBox} />
+
+<Story name="Standard">
+	<CheckBox isChecked={true}>Turn on sync</CheckBox>
+</Story>
+
+<Story name="No Label">
+	<CheckBox isChecked={false} />
+</Story>

package/dist/forms/check-box/check-box.stories.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckBoxProps = typeof __propDef.props;
+export type CheckBoxEvents = typeof __propDef.events;
+export type CheckBoxSlots = typeof __propDef.slots;
+export default class CheckBox extends SvelteComponent<CheckBoxProps, CheckBoxEvents, CheckBoxSlots> {
+}
+export {};

package/dist/forms/check-box/check-box.svelte

@@ -0,0 +1,26 @@
+<script>import { uniqueId } from "../../../helpers/unique-id.js";
+import CheckInput from "./check-input.svelte";
+import { createEventDispatcher } from "svelte";
+export let value = void 0;
+export let isChecked = false;
+const id = uniqueId();
+const dispatch = createEventDispatcher();
+</script>
+
+<div>
+	<CheckInput {id} bind:value bind:isChecked on:change={() => dispatch('change', isChecked)} />
+	{#if $$slots.default}
+		<label for={id}>
+			<slot />
+		</label>
+	{/if}
+</div>
+
+<style>div label {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.5em;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 2rem;
+}</style>

package/dist/forms/check-box/check-box.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | number | boolean | undefined;
+        isChecked?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<boolean>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CheckBoxProps = typeof __propDef.props;
+export type CheckBoxEvents = typeof __propDef.events;
+export type CheckBoxSlots = typeof __propDef.slots;
+export default class CheckBox extends SvelteComponent<CheckBoxProps, CheckBoxEvents, CheckBoxSlots> {
+}
+export {};

package/dist/forms/check-box/check-input.svelte

@@ -0,0 +1,32 @@
+<script>import { createEventDispatcher } from "svelte";
+export let id = void 0;
+export let value = void 0;
+export let isChecked = false;
+const dispatch = createEventDispatcher();
+</script>
+
+<input
+	type="checkbox"
+	{id}
+	bind:value
+	bind:checked={isChecked}
+	on:change={() => dispatch('change', isChecked)}
+/>
+
+<style>input {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  padding: 0;
+  width: 1em;
+  height: 1em;
+  border: 0.1em solid #000;
+  border-radius: 0.2em;
+  background-color: #fff;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+}
+
+input:checked {
+  background-color: #000;
+}</style>

package/dist/forms/check-box/check-input.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        value?: string | number | boolean | undefined;
+        isChecked?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<boolean>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckInputProps = typeof __propDef.props;
+export type CheckInputEvents = typeof __propDef.events;
+export type CheckInputSlots = typeof __propDef.slots;
+export default class CheckInput extends SvelteComponent<CheckInputProps, CheckInputEvents, CheckInputSlots> {
+}
+export {};

package/dist/forms/date-box/date-box.stories.svelte

@@ -0,0 +1,17 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import DateBox from "./date-box.svelte";
+</script>
+
+<Meta title="Forms/DateBox" component={DateBox} />
+
+<Story name="Date">
+	<DateBox type="date">Birthdate</DateBox>
+</Story>
+
+<Story name="Date + Time">
+	<DateBox type="datetime-local">Deadline</DateBox>
+</Story>
+
+<Story name="Date (Nullable)">
+	<DateBox type="date" nullable={true}>End Date</DateBox>
+</Story>

package/dist/forms/date-box/date-box.stories.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DateBoxProps = typeof __propDef.props;
+export type DateBoxEvents = typeof __propDef.events;
+export type DateBoxSlots = typeof __propDef.slots;
+export default class DateBox extends SvelteComponent<DateBoxProps, DateBoxEvents, DateBoxSlots> {
+}
+export {};

package/dist/forms/date-box/date-box.svelte

@@ -0,0 +1,68 @@
+<script>import { currentDateTime } from "../../../helpers/date.js";
+import { uniqueId } from "../../../helpers/unique-id.js";
+import CheckInput from "../check-box/check-input.svelte";
+import FormField from "../form-field.svelte";
+import FormLabel from "../form-label.svelte";
+const id = uniqueId();
+export let value = "";
+export let placeholder = "";
+export let nullable = false;
+export let enabled = true;
+export let type = "date";
+export let required = false;
+const defaultValue = value || currentDateTime();
+const checkChanged = () => {
+  if (nullable) {
+    value = enabled ? defaultValue : "";
+  }
+};
+$:
+  disabled = !enabled;
+</script>
+
+<FormField>
+	<FormLabel {id} {required}><slot /></FormLabel>
+	<div class:nullable class:disabled>
+		<span class="input">
+			<input {...{ type }} {id} {placeholder} {disabled} bind:value {required} />
+		</span>
+		{#if nullable}
+			<span class="toggle">
+				<CheckInput bind:isChecked={enabled} on:change={checkChanged} />
+			</span>
+		{/if}
+	</div>
+</FormField>
+
+<style>input {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid #b7b7b7;
+  background-color: #fff;
+  color: #5c5c5c;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}
+
+div {
+  display: block;
+  position: relative;
+}
+div.nullable input {
+  padding-left: 2.5rem;
+}
+div.nullable .toggle {
+  position: absolute;
+  top: 0.55rem;
+  left: 0.75rem;
+}
+div.disabled input {
+  background-color: #f5f5f5;
+  border-color: #e0e0e0;
+  color: #a0a0a0;
+}</style>

package/dist/forms/date-box/date-box.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        nullable?: boolean | undefined;
+        enabled?: boolean | undefined;
+        type?: "date" | "datetime-local" | undefined;
+        required?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DateBoxProps = typeof __propDef.props;
+export type DateBoxEvents = typeof __propDef.events;
+export type DateBoxSlots = typeof __propDef.slots;
+export default class DateBox extends SvelteComponent<DateBoxProps, DateBoxEvents, DateBoxSlots> {
+}
+export {};

package/dist/forms/dropdown-box/dropdown-box.stories.svelte

@@ -0,0 +1,15 @@
+<script>import { Meta, Story } from "@storybook/addon-svelte-csf";
+import DropdownBox from "./dropdown-box.svelte";
+const items = [
+  { name: "SvelteKit", value: "svelte " },
+  { name: "Angular", value: "angular " },
+  { name: "React", value: "react " },
+  { name: "Vue", value: "vue " }
+];
+</script>
+
+<Meta title="Forms/DropdownBox" component={DropdownBox} />
+
+<Story name="Simple">
+	<DropdownBox {items}>Best JavaScript Framework</DropdownBox>
+</Story>

package/dist/forms/dropdown-box/dropdown-box.stories.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DropdownBoxProps = typeof __propDef.props;
+export type DropdownBoxEvents = typeof __propDef.events;
+export type DropdownBoxSlots = typeof __propDef.slots;
+export default class DropdownBox extends SvelteComponent<DropdownBoxProps, DropdownBoxEvents, DropdownBoxSlots> {
+}
+export {};

package/dist/forms/dropdown-box/dropdown-box.svelte

@@ -0,0 +1,36 @@
+<script>import { createEventDispatcher } from "svelte";
+import FormField from "../form-field.svelte";
+import FormLabel from "../form-label.svelte";
+import { uniqueId } from "../../../helpers/unique-id.js";
+const dispatch = createEventDispatcher();
+const id = uniqueId();
+export let value = "";
+export let items = [];
+export let size = "md";
+export let disabled = false;
+export let required = false;
+</script>
+
+<FormField {size}>
+	<FormLabel {id} {required}><slot /></FormLabel>
+	<select {id} bind:value on:change={() => dispatch('change', value)} {required} {disabled}>
+		{#each items as item}
+			<option value={item.value}>{item.name}</option>
+		{/each}
+	</select>
+</FormField>
+
+<style>select {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  border: 1px solid #b7b7b7;
+  background-color: #fff;
+  color: #5c5c5c;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}</style>

package/dist/forms/dropdown-box/dropdown-box.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { DropdownOption, FormFieldSizeOptions } from '../../../types/form.js';
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        items?: DropdownOption[] | undefined;
+        size?: FormFieldSizeOptions | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DropdownBoxProps = typeof __propDef.props;
+export type DropdownBoxEvents = typeof __propDef.events;
+export type DropdownBoxSlots = typeof __propDef.slots;
+export default class DropdownBox extends SvelteComponent<DropdownBoxProps, DropdownBoxEvents, DropdownBoxSlots> {
+}
+export {};

package/dist/forms/form-field.svelte

@@ -0,0 +1,22 @@
+<script>const maxWidthMap = {
+  sm: "10rem",
+  md: "20rem",
+  lg: "30rem",
+  xl: "auto",
+  full: "100%"
+};
+export let size = "md";
+$:
+  displayType = ["xl", "full"].includes(size) ? "block" : "inline-block";
+$:
+  maxWidth = maxWidthMap[size];
+</script>
+
+<div style={`display: ${displayType}; width: 100%; min-width: 10rem; max-width: ${maxWidth}`}>
+	<slot />
+</div>
+
+<style>div {
+  margin-bottom: 1rem;
+  margin-right: 1rem;
+}</style>

package/dist/forms/form-field.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { FormFieldSizeOptions } from '../../types/form.js';
+declare const __propDef: {
+    props: {
+        size?: FormFieldSizeOptions | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormFieldProps = typeof __propDef.props;
+export type FormFieldEvents = typeof __propDef.events;
+export type FormFieldSlots = typeof __propDef.slots;
+export default class FormField extends SvelteComponent<FormFieldProps, FormFieldEvents, FormFieldSlots> {
+}
+export {};

package/dist/forms/form-label.svelte

@@ -0,0 +1,14 @@
+<script>export let id;
+export let required = false;
+</script>
+
+<label for={id} class:required><slot /></label>
+
+<style>label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+label.required::after {
+  content: "*";
+  margin-left: 0.25rem;
+}</style>

package/dist/forms/form-label.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        required?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type FormLabelProps = typeof __propDef.props;
+export type FormLabelEvents = typeof __propDef.events;
+export type FormLabelSlots = typeof __propDef.slots;
+export default class FormLabel extends SvelteComponent<FormLabelProps, FormLabelEvents, FormLabelSlots> {
+}
+export {};

package/dist/forms/form.svelte

@@ -0,0 +1,12 @@
+<script>import { createEventDispatcher } from "svelte";
+export let action = "get";
+const dispatch = createEventDispatcher();
+const onSubmit = (e) => {
+  e.preventDefault();
+  dispatch("submit");
+};
+</script>
+
+<form {action} on:submit={onSubmit}>
+	<slot />
+</form>