@likable-hair/svelte 0.0.3 → 0.0.6

package/README.md

@@ -1,38 +1,26 @@
-# create-svelte
+# Likablehair Svelte component library
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+A simple library that contains svelte components, used by likablehair frontend applications
 
-## Creating a project
+## Developer guide
 
-If you're seeing this, you've probably already done this step. Congrats!
+Install dependencies and start a local server to develop components:
 
 ```bash
-# create a new project in the current directory
-npm init svelte@next
+# Install deps
+npm install
 
-# create a new project in my-app
-npm init svelte@next my-app
-```
-
-> Note: the `@next` is temporary
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
+# Start local server
 npm run dev
 
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 ```
 
-## Building
-
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+## Publisher guide
 
-```bash
-npm run build
-```
+To publish the package make the following steps:
 
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+- edit the package.json version, then commit all the changes
+- run `npm run package`, svelte will generate a package folder with all the necessary stuff inside
+- make sure you're logged in with your npm account, then run `npm publish ./package --access=public`

package/buttons/Button.svelte

@@ -0,0 +1,102 @@
+<script >export let type = 'default';
+export let icon = undefined;
+export let iconSize = 15;
+let clazz = '';
+export { clazz as class };
+$: position = !!$$slots.append ? 'relative' : undefined;
+$: cssVariables = Object.entries({
+    '--icon-button-height': (iconSize + 15) + 'pt',
+    '--icon-button-width': (iconSize + 15) + 'pt',
+    '--button-position': position
+}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+import '$lib/common/tailwind.css';
+import Icon from '../media/Icon.svelte';
+</script>
+
+<div 
+  class="button {clazz}"
+  class:button-default={type === 'default'}
+  class:button-text={type === 'text'}
+  class:button-icon={type === 'icon'}
+  on:click
+  style={cssVariables}
+>
+  {#if !!icon}
+    <Icon name={icon} size={iconSize}></Icon>
+  {:else}
+    <slot></slot>
+  {/if}
+  {#if $$slots.append}
+    <span class="append-item">
+      <slot name="append">
+        
+      </slot>
+    </span>
+  {/if}
+</div>
+
+<style>
+  .append-item {
+    position: absolute;
+    right: 0px;
+  }
+
+  .button {
+    overflow: hidden;
+    position: var(--button-position);
+    width: var(--width, fit-content);
+    height: var(--height, fit-content);
+    text-align: var(--text-align, center);
+    cursor: var(--cursor, pointer);
+    padding: var(--padding, 5px);
+    font-size: var(--font-size);
+  }
+
+  .button-default {
+    transition: background-color 200ms;
+    color: var(--color);
+    background-color: var(--background-color);
+    outline: 0;
+    border: 0;
+    border-radius: var(--border-radius, 0.25rem);
+    box-shadow: var(--box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
+  }
+
+  .button-default:hover {
+    background-color: var(--hover-background-color, var(--background-color));
+  }
+
+  .button-text {
+    color: var(--color);
+    transition: background-color 200ms;
+    text-transform: uppercase;
+    font-weight: 600;
+    outline: 0;
+    border: 0;
+    border-radius: var(--border-radius, 0.25rem);
+  }
+
+  .button-text:hover {
+    background-color: var(--hover-background-color, transparent);
+  }
+
+  .button-icon {
+    color: var(--color);
+    transition: background-color 200ms;
+    outline: 0;
+    border: 0;
+    border-radius: var(--border-radius, 50%);
+    height: var(--icon-button-height) !important;
+    width: var(--icon-button-width) !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .button-icon:hover {
+    background-color: var(--hover-background-color, transparent);
+  }
+</style>

package/buttons/Button.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {
+        type?: 'default' | 'text' | 'icon';
+        icon?: string;
+        iconSize?: number;
+        class?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        append: {};
+    };
+};
+export declare type ButtonProps = typeof __propDef.props;
+export declare type ButtonEvents = typeof __propDef.events;
+export declare type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/common/Card.svelte

@@ -0,0 +1,45 @@
+<script >import { Elevation } from '../enums/elevation.enum';
+export let rounded = true, outlined = false, elevation = Elevation.md;
+$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+import '$lib/common/tailwind.css';
+</script>
+
+<style>
+  .card-container {
+    height: var(--height, fit-content);
+    width: var(--width, fit-content);
+    max-height: var(--max-height);
+    max-width: var(--max-width);
+    min-height: var(--min-height);
+    min-width: var(--min-width);
+    padding: var(--padding, 5px);
+    background-color: var(--background-color, rgb(252, 252, 252));
+    color: var(--color);
+    border-color: var(--border-color);
+  }
+</style>
+
+<div 
+  class="card-container flex flex-col rounded-md shadow-lg" 
+  style={cssVariables}
+  class:shadow-sm={!outlined && elevation == Elevation.sm}
+  class:shadow-md={!outlined && elevation == Elevation.md}
+  class:shadow-lg={!outlined && elevation == Elevation.lg}
+  class:shadow-xl={!outlined && elevation == Elevation.xl}
+  class:shadow-2xl={!outlined && elevation == Elevation.xxl}
+  class:border-solid={outlined}
+  class:rounded-md={rounded}
+>
+  <div class="header flex-none">
+    <slot name="header"></slot>
+  </div>
+  <div class="body shrink overflow-y-auto">
+    <slot></slot>
+  </div>
+  <div class="footer flex-none">
+    <slot name="footer"></slot>
+  </div>
+</div>

package/common/Card.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import { Elevation } from '../enums/elevation.enum';
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {
+        rounded?: boolean;
+        outlined?: boolean;
+        elevation?: Elevation;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+    };
+};
+export declare type CardProps = typeof __propDef.props;
+export declare type CardEvents = typeof __propDef.events;
+export declare type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/common/IntersectionObserver.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let once = false;
+	export let top = 0;
+	export let bottom = 0;
+	export let left = 0;
+	export let right = 0;
+
+	let intersecting = false;
+	let container;
+
+	onMount(() => {
+		if (typeof IntersectionObserver !== 'undefined') {
+			const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+			const observer = new IntersectionObserver(entries => {
+				intersecting = entries[0].isIntersecting;
+				if (intersecting && once) {
+					observer.unobserve(container);
+				}
+			}, {
+				rootMargin
+			});
+
+			observer.observe(container);
+			return () => observer.unobserve(container);
+		}
+
+		function handler() {
+			const bcr = container.getBoundingClientRect();
+			intersecting = (
+				(bcr.bottom + bottom) > 0 &&
+				(bcr.right + right) > 0 &&
+				(bcr.top - top) < window.innerHeight &&
+				(bcr.left - left) < window.innerWidth
+			);
+
+			if (intersecting && once) {
+				window.removeEventListener('scroll', handler);
+			}
+		}
+
+		window.addEventListener('scroll', handler);
+		return () => window.removeEventListener('scroll', handler);
+	});
+</script>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+
+<div bind:this={container}>
+	<slot {intersecting}></slot>
+</div>

package/common/IntersectionObserver.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @typedef {typeof __propDef.props}  IntersectionObserverProps */
+/** @typedef {typeof __propDef.events}  IntersectionObserverEvents */
+/** @typedef {typeof __propDef.slots}  IntersectionObserverSlots */
+export default class IntersectionObserver extends SvelteComponentTyped<{
+    once?: boolean;
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        intersecting: boolean;
+    };
+}> {
+}
+export type IntersectionObserverProps = typeof __propDef.props;
+export type IntersectionObserverEvents = typeof __propDef.events;
+export type IntersectionObserverSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        once?: boolean;
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            intersecting: boolean;
+        };
+    };
+};
+export {};

package/common/materialDesign.css

@@ -0,0 +1 @@
+@import url("https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css");

package/common/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dates/Calendar.svelte

@@ -0,0 +1,4 @@
+<script >import './utils';
+import '$lib/common/tailwind.css';
+</script>
+

package/dates/Calendar.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CalendarProps = typeof __propDef.props;
+export declare type CalendarEvents = typeof __propDef.events;
+export declare type CalendarSlots = typeof __propDef.slots;
+export default class Calendar extends SvelteComponentTyped<CalendarProps, CalendarEvents, CalendarSlots> {
+}
+export {};

package/dates/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const monthNames: string[];
+export declare const monthDays: number[];
+export declare const isLeapYear: (year: number) => boolean;
+export declare const getEmptyRows: () => any[];
+export declare const getMonthDays: (index: number, year: number) => number;
+export declare const getMonthName: (index: number) => string;
+export declare type MonthStats = {
+    name: string;
+    days: number;
+};
+export declare const getDateRows: (monthIndex: number, year: number) => number[];

package/dates/utils.js

@@ -0,0 +1,59 @@
+export const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+];
+export const monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+export const isLeapYear = year => year % 4 === 0;
+export const getEmptyRows = () => {
+    return Array.from({ length: 42 }).map(() => []);
+};
+export const getMonthDays = (index, year) => {
+    return index !== 1 ? monthDays[index] : isLeapYear(year) ? 29 : 28;
+};
+export const getMonthName = index => monthNames[index];
+const getMonthStats = (monthIndex, year) => {
+    const today = new Date(year, monthIndex, 1);
+    const index = today.getMonth();
+    return {
+        name: index[index],
+        days: getMonthDays(index, year)
+    };
+};
+export const getDateRows = (monthIndex, year) => {
+    const { days } = getMonthStats(monthIndex, year);
+    const { days: daysOfPreviousMonth } = getMonthStats(monthIndex - 1, year);
+    const rows = getEmptyRows();
+    let startIndex = new Date(year, monthIndex, 1).getDay();
+    if (startIndex === 0)
+        startIndex = 6;
+    else
+        startIndex -= 1;
+    let lastIndex = new Date(year, monthIndex + 1, 0).getDay();
+    if (lastIndex === 0)
+        lastIndex = 6;
+    else
+        lastIndex -= 1;
+    Array.from({ length: days }).forEach((_, i) => {
+        const index = startIndex + i;
+        rows[index] = i + 1;
+    });
+    Array.from({ length: startIndex }).forEach((_, i) => {
+        rows[i] = (daysOfPreviousMonth - startIndex) + i + 1;
+    });
+    if (lastIndex !== 6) {
+        Array.from({ length: (6 - lastIndex) }).forEach((_, i) => {
+            rows[startIndex + days + i] = i + 1;
+        });
+    }
+    return rows.filter(el => !Array.isArray(el));
+};

package/enums/elevation.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum Elevation {
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xl = "xl",
+    xxl = "xxl"
+}

package/enums/elevation.enum.js

@@ -0,0 +1,8 @@
+export var Elevation;
+(function (Elevation) {
+    Elevation["sm"] = "sm";
+    Elevation["md"] = "md";
+    Elevation["lg"] = "lg";
+    Elevation["xl"] = "xl";
+    Elevation["xxl"] = "xxl";
+})(Elevation || (Elevation = {}));

package/enums/index.d.ts

@@ -0,0 +1 @@
+export { Elevation } from './elevation.enum';

package/enums/index.js

@@ -0,0 +1 @@
+export { Elevation } from './elevation.enum';

package/forms/Textfield.svelte

@@ -0,0 +1,178 @@
+<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined';
+import { v4 as uuidv4 } from 'uuid';
+import { onMount } from 'svelte';
+let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
+onMount(() => {
+    if (!!labelElement) {
+        legendWidth = (labelElement.offsetWidth * 0.8) + 8;
+    }
+});
+function handleFocus() {
+    focused = true;
+}
+function handleBlur() {
+    focused = false;
+}
+$: if (!!labelElement) {
+    legendWidth = !value && !focused ? 0 : (labelElement.offsetWidth * 0.8) + 8;
+}
+$: cssVariables = Object.entries({
+    '--theme-color': color,
+    '--legend-width': legendWidth + 'px'
+}).filter(([key]) => key.startsWith('--'))
+    .reduce((css, [key, value]) => {
+    return `${css}${key}: ${value};`;
+}, '');
+import '$lib/common/tailwind.css';
+</script>
+
+<style>
+  .input-container {
+    margin-top: 15px;
+    height: 50px;
+    position: relative;
+    width: var(--width, 100%);
+    --final-color: var(--theme-color, --border-color, rgb(88, 88, 88));
+  }
+
+  /* outlined input */
+
+  .input-outlined {
+    border: 0px solid;
+    box-sizing: border-box;
+    color: var(--color, black);
+    font-size: 18px;
+    height: 100%;
+    outline: 0;
+    padding: 4px 0px 0;
+    width: 100%;
+    transition: all 0.3s;
+  }
+
+  .fieldset-outlined {
+    border-radius: var(--border-radius, 5px);
+    border: 1px solid rgb(122, 122, 122);
+    padding-left: 4px;
+  }
+
+  .focused .fieldset-outlined {
+    border: 1px solid var(--final-color);
+    color: var(--final-color);
+  }
+
+  .legend-outlined {
+    width: var(--legend-width);
+    padding: 0px;
+    transition: width 0.3s, color 0.1s;
+  }
+
+  .label-outlined {
+    position: relative;
+    top: 13px;
+    left: 4px;
+    display: inline-block;
+    transition: all 0.3s;
+    transform-origin: top left;
+    transform: scale(1);
+    z-index: 2;
+  }
+
+  .texted .label-outlined {
+    top: -13px;
+    left: 4px;
+    transform: scale(.8);
+  }
+
+  /* boxed input */
+
+  .fieldset-boxed {
+    border: 2px solid var(--final-color);
+    padding: 5px;
+    border-radius: var(--border-radius, 0);
+  }
+
+  .input-boxed {
+    border: 0px solid;
+    box-sizing: border-box;
+    font-size: 18px;
+    height: 100%;
+    outline: 0;
+    padding: 4px 0px 0;
+    width: 100%;
+    transition: all 0.3s;
+    position: relative;
+  }
+
+  .input-boxed::placeholder {
+    color: var(--final-color);
+    opacity: 60%;
+  }
+
+</style>
+
+
+<div 
+  class="input-container" 
+  style={cssVariables}
+  class:focused={focused}
+  class:texted={focused || !!value}
+>
+  <fieldset 
+    aria-hidden="true" 
+    class="fieldset"
+    class:fieldset-outlined={variant == 'outlined'}
+    class:fieldset-boxed={variant == 'boxed'}
+  >
+    {#if variant == 'outlined'}
+        <legend class="legend-outlined"></legend>
+        <label 
+          for={inputId}
+          class="label-outlined"
+          bind:this={labelElement}
+        >{label}</label>
+        <div class="flex content-center relative bottom-3 ml-2 mr-2">
+          <div>
+            <slot name="prepend-inner"></slot>
+          </div>
+          <input 
+            id={inputId} 
+            class="input-outlined"
+            type="text"
+            placeholder={placeholder}
+            bind:value={value}
+            on:change
+            on:input
+            on:focus={handleFocus}
+            on:focus
+            on:blur={handleBlur}
+            on:blur
+          />
+          <div>
+            <slot name="append-inner"></slot>
+          </div>
+        </div>
+    {:else if variant == 'boxed'}
+      <div class="flex">
+        <div>
+          <slot name="prepend-inner"></slot>
+        </div>
+        <input
+          id={inputId}
+          class="input-boxed"
+          type="text"
+          placeholder={placeholder || label}
+          bind:value={value}
+          on:change
+          on:input
+          on:focus={handleFocus}
+          on:focus
+          on:blur={handleBlur}
+          on:blur
+        />
+        <div>
+          <slot name="append-inner"></slot>
+        </div>
+      </div>
+    {/if}
+  </fieldset>
+</div>

package/forms/Textfield.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import '$lib/common/tailwind.css';
+declare const __propDef: {
+    props: {
+        label?: string;
+        placeholder?: string;
+        color?: string;
+        value?: string;
+        variant?: "outlined" | "boxed";
+    };
+    events: {
+        change: Event;
+        input: Event;
+        focus: FocusEvent;
+        blur: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'prepend-inner': {};
+        'append-inner': {};
+    };
+};
+export declare type TextfieldProps = typeof __propDef.props;
+export declare type TextfieldEvents = typeof __propDef.events;
+export declare type TextfieldSlots = typeof __propDef.slots;
+export default class Textfield extends SvelteComponentTyped<TextfieldProps, TextfieldEvents, TextfieldSlots> {
+}
+export {};

package/index.d.ts

@@ -1 +1,2 @@
-export { default as HelloWorld } from "./HelloWorld.svelte";
+export { default as Button } from './buttons/Button.svelte';
+export { default as HeaderMenu } from './navigation/HeaderMenu.svelte';