hamzus-ui 0.0.1

package/src/components/hamzus-ui/Table/table.js

@@ -0,0 +1,48 @@
+import { writable } from "svelte/store";
+
+
+/**
+ * objet de clé value contenant en clé l'id de la table et en valeur un objet contenant les données de la table
+*/
+export const tableData = writable({}) 
+
+// // exemple
+// const dataTable = {
+//     "user_12" : { // table identifiant
+//         globalSearch:"",// global search
+//         columns : [ //columns list
+//             {
+//                 label:"prénom", // le nom a affiche
+//                 name:"firstname", // le nom a envoyé a l'api lors du filtre
+//                 isSearchable:true, // la colonne peut etre filtré
+//                 searchChoices:[ {value:"active",label:"actif"},{value:"inactive",label:"inactif"}], // la colonne peut etre filtré en fonction de plusieur choix
+//                 initialWidth : 50, // une width par defaut fournis
+//                 hidden: false, //est ce que la colonne est caché
+//             }
+//         ],
+//         filters:{
+//             firstname:"Hamz"
+//         },
+//         actions : [//actions list (quand des element sont selectionné)
+//             {
+//                 label:"suprimmer",
+//                 function:handleDelete
+//             }
+//         ],
+//         rows:[ // the rows of the table
+//             {
+//                 "firstname":"Hamzus"
+//             },
+//             {
+//                 "firstname":{
+//                     component:Tag,
+//                     props:{
+//                         label:"Hamzus"
+//                     }
+//                 }
+//             }
+//         ],
+//         totalOfRows:0 //number of rows
+//     }
+// }
+

package/src/components/hamzus-ui/Tabs/Tabs.svelte

@@ -0,0 +1,87 @@
+<script>
+	export let links = [];
+
+	let activeStyle = 'color:var(--font-u);background-color:var(--bg-2);';
+
+	import TinyScrollArea from '@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte';
+	import Button from '@hamzus-ui/Button/Button.svelte';
+
+	import { page } from '$app/stores';
+
+	let activeButton = null;
+
+	let left = 0;
+	let width = 0;
+
+	$: if (activeButton) {
+		// return
+		left = activeButton.offsetLeft;
+		width = activeButton.offsetWidth;
+	}
+
+	function handleClick(link) {
+		if (link.onClick != undefined) {
+			link.onClick(link);
+		}
+	}
+</script>
+
+<TinyScrollArea style="display: flex;" proximity={0}>
+	<div class="tabs" style="--left:{left}px;--width:{width}px;">
+		{#each links as link}
+			{#if link.label}
+				{#if link.active}
+					<div bind:this={activeButton} class="active">
+						<Button
+							variant="ghost"
+							style="flex-shrink:0;{link.active ? activeStyle : ''}"
+							label={link.label}
+							onClick={() => {
+								handleClick(link);
+							}}
+						></Button>
+					</div>
+				{:else}
+					<Button
+						variant="ghost"
+						style="flex-shrink:0;{link.active ? activeStyle : ''}"
+						label={link.label}
+						onClick={() => {
+							handleClick(link);
+						}}
+					></Button>
+				{/if}
+				<span class="active-line"></span>
+			{/if}
+		{/each}
+	</div>
+</TinyScrollArea>
+
+<style>
+	.tabs {
+		min-width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: baseline;
+		column-gap: var(--pad-m);
+		padding-bottom: var(--pad-m);
+		position: relative;
+	}
+	.active {
+		all: unset;
+		min-width: max-content;
+	}
+
+	.active-line {
+		position: absolute;
+		bottom: 0px;
+		left: var(--left);
+		width: var(--width);
+		height: 1px;
+		background-color: var(--accent);
+		z-index: 1;
+		transition-property: left, width;
+		transition-duration: 0.2s;
+		transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
+	}
+</style>

package/src/components/hamzus-ui/TabsLink/Tabs.svelte

@@ -0,0 +1,80 @@
+<script>
+	export let links = [];
+
+	let activeStyle = 'color:var(--font-u);background-color:var(--bg-2);';
+
+	import TinyScrollArea from '@hamzus-ui/TinyScrollArea/TinyScrollArea.svelte';
+	import Button from '@hamzus-ui/Button/Button.svelte';
+
+	import { page } from '$app/stores';
+
+    let activeButton = null
+
+    let left = 0
+    let width = 0
+
+	$: currentPath = $page.url.pathname;
+
+    $: if (currentPath && activeButton) {
+        left = activeButton.offsetLeft
+        width = activeButton.offsetWidth
+    }
+
+
+</script>
+
+<TinyScrollArea style="display: flex;" proximity={0}>
+	<div class="tabs" style="--left:{left}px;--width:{width}px;">
+		{#each links as link}
+			{#if link.label}
+				{#if currentPath == link.href}
+					<div bind:this={activeButton} class="active">
+						<Button
+							variant="ghost"
+							style="flex-shrink:0;{currentPath == link.href ? activeStyle : ''}"
+							label={link.label}
+							href={link.href}
+						></Button>
+					</div>
+				{:else}
+					<Button
+						variant="ghost"
+						style="flex-shrink:0;{currentPath == link.href ? activeStyle : ''}"
+						label={link.label}
+						href={link.href}
+					></Button>
+				{/if}
+                <span class="active-line"></span>
+			{/if}
+		{/each}
+	</div>
+</TinyScrollArea>
+
+<style>
+	.tabs {
+		min-width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: baseline;
+		column-gap: var(--pad-m);
+        padding-bottom: var(--pad-m);
+        position: relative;
+	}
+    .active{
+        all: unset;
+        min-width: max-content;
+    }
+
+    .active-line{
+        position: absolute;
+        bottom: 0px;
+        left: var(--left);
+        width: var(--width);
+        height: 1px;
+        background-color: var(--accent);
+        z-index: 1;
+        transition-property: left, width;
+        transition-duration: .2s;
+        transition-timing-function: cubic-bezier(.17,.84,.44,1);
+    }
+</style>

package/src/components/hamzus-ui/Tag/Tag.svelte

@@ -0,0 +1,43 @@
+<script>
+    export let color= "accent";
+    export let icon= null;
+    export let label= "";
+    export let style= "";
+</script>
+
+<tag class="tag h6" style="--tag-color:var(--{color}-b);--font-color:var(--{color});{style}">
+    {#if icon}
+        {@html icon}
+    {/if}
+    {#if label}
+        <h6>{label}</h6>
+    {/if}
+    {#if $$slots.default}
+        <slot/>
+    {/if}
+</tag>
+
+<style>
+    .tag{
+        display: inline-flex;
+        padding: var(--pad-xs) var(--pad-s);
+        border-radius: var(--radius-m);
+        font-weight: 300;
+        background-color: var(--tag-color);
+        color: var(--font-color);
+        align-items: center;
+        column-gap: var(--pad-m);
+    }
+    .tag :global(*){
+        color: var(--font-color);
+    }
+    .tag :global(svg){
+        height: 18px;
+        width: auto;
+        flex-shrink: 0;
+    }
+    .tag :global(svg *),
+    .tag :global(svg path){
+        fill: var(--font-color);
+    }
+</style>

package/src/components/hamzus-ui/TinyScrollArea/TinyScrollArea.svelte

@@ -0,0 +1,350 @@
+<script>
+	import { onDestroy, onMount  } from 'svelte';
+
+	export let style = '';
+	export let additionalStyle = '';
+	export let className = '';
+	export let proximity = 0;
+    export let isReverse = false
+
+	let isVisible = true;
+	let lastMove = 0;
+
+	let focusVerticalTrack = false;
+	let focusHorizontalTrack = false;
+
+	let overflowX = true;
+	let overflowY = true;
+
+	let overflowXY = true;
+
+	let topTrack = 0;
+	let leftTrack = 0;
+
+	let heightTrack = 0;
+	let widthTrack = 0;
+
+	let scrollContainer;
+	let offsetHeight;
+	let offsetWidth;
+
+	let scrollArea;
+	let scrollHeight;
+	let scrollWidth;
+	let startscrollTop;
+	let startscrollLeft;
+
+	let startDragX;
+	let startDragY;
+
+	let mousemoveEvent = null;
+	let mouseupEvent = null;
+
+	onMount(mount);
+
+    let scrollEvent = null
+
+    function scrollEventEmmiter() {
+        const monEvenement = new CustomEvent("userScroll",{});
+        document.dispatchEvent(monEvenement);
+    }
+
+    export function mount() {
+        scrollEvent = scrollArea.addEventListener('scroll', scrollEventEmmiter)
+
+		// calculer la height de la track
+		scrollHeight = scrollArea.scrollHeight;
+		offsetHeight = scrollContainer.offsetHeight;
+
+		scrollWidth = scrollArea.scrollWidth;
+		offsetWidth = scrollContainer.offsetWidth;
+
+		const verticalTrackSize = (offsetHeight / scrollHeight) * 100;
+		const horizontalTrackSize = (offsetWidth / scrollWidth) * 100;
+
+		overflowX = scrollWidth != offsetWidth;
+		overflowY = scrollHeight != offsetHeight;
+
+		overflowXY = overflowX && overflowY;
+
+		heightTrack = verticalTrackSize;
+		widthTrack = horizontalTrackSize;
+	}
+
+    onDestroy(()=>{
+        if (scrollEvent) {
+            scrollArea.removeEventListener('scroll', scrollEventEmmiter)
+            scrollEvent = null
+        }
+    })
+
+	function handleStartScrollVertical(event) {
+		startDragX = null;
+		startDragY = event.clientY;
+
+		// verifier sa position relativement a la scroll bar
+		let scrollAreaTop = scrollContainer.getBoundingClientRect()[isReverse ? "bottom" : "top"];
+		let relativePosFromTop = startDragY - scrollAreaTop;
+		let topRatio = relativePosFromTop / scrollContainer.getBoundingClientRect().height;
+
+		// recuperer en ratio la taille de la demi de la scrolltrack
+		let scrollTrackHeightRatio = heightTrack / 100;
+        if (isReverse) {
+            scrollTrackHeightRatio = - scrollTrackHeightRatio
+        }
+		scrollArea.scrollTo(
+			scrollArea.scrollLeft,
+			scrollArea.scrollHeight * (topRatio - scrollTrackHeightRatio / 2)
+		);
+
+		// let percentTop = relativePosFromTop / scrollContainer.offsetHeight
+
+		// let initialProgress = scrollArea.scrollHeight * percentTop
+		// console.log(scrollArea.scrollHeight);
+		// console.log(initialProgress);
+		// scrollArea.scrollTo(scrollArea.scrollLeft, initialProgress)
+
+		focusVerticalTrack = true;
+
+		startscrollTop = scrollArea.scrollTop;
+
+		// calculer le deplacement
+		mousemoveEvent = document.addEventListener('mousemove', handleMouseMove);
+
+		mouseupEvent = document.addEventListener('mouseup', handleStopScroll);
+	}
+	function handleStartScrollHorizontal(event) {
+		startDragX = event.clientX;
+		startDragY = null;
+
+		// verifier sa position relativement a la scroll bar
+		let scrollAreaLeft = scrollContainer.getBoundingClientRect().left;
+		let relativePosFromLeft = startDragX - scrollAreaLeft;
+		let leftRatio = relativePosFromLeft / scrollContainer.getBoundingClientRect().width;
+
+		// recuperer en ratio la taille de la demi de la scrolltrack
+		let scrollTrackWidthRatio = widthTrack / 100;
+
+		scrollArea.scrollTo(
+			scrollArea.scrollWidth * (leftRatio - scrollTrackWidthRatio / 2),
+			scrollArea.scrollTop
+		);
+
+		focusHorizontalTrack = true;
+
+		startscrollLeft = scrollArea.scrollLeft;
+		// calculer le deplacement
+		mousemoveEvent = document.addEventListener('mousemove', handleMouseMove);
+
+		mouseupEvent = document.addEventListener('mouseup', handleStopScroll);
+	}
+	function handleMouseMove(event) {
+		// calculer la pose et scroll
+		if (startDragX) {
+			// scroll horizontal
+			const deltaX = event.clientX - startDragX;
+			const cursorToScroll = (deltaX / offsetWidth) * scrollWidth;
+			scrollArea.scrollTo(startscrollLeft + cursorToScroll, scrollArea.scrollTop);
+		} else {
+			// scroll vertical
+			const deltaY = event.clientY - startDragY;
+			const cursorToScroll = (deltaY / offsetHeight) * scrollHeight;
+			scrollArea.scrollTo(scrollArea.scrollLeft, startscrollTop + cursorToScroll);
+		}
+	}
+
+	function handleStopScroll(event) {
+		document.removeEventListener('mousemove', handleMouseMove);
+		mousemoveEvent = null;
+
+		document.removeEventListener('mouseup', handleStopScroll);
+		mouseupEvent = null;
+
+		// calculer la pose et scroll
+		if (startDragX) {
+			// scroll horizontal
+			const deltaX = event.clientX - startDragX;
+			const cursorToScroll = (deltaX / offsetWidth) * scrollWidth;
+			scrollArea.scrollTo(startscrollLeft + cursorToScroll, scrollArea.scrollTop);
+			focusHorizontalTrack = false;
+		} else {
+			// scroll vertical
+			const deltaY = event.clientY - startDragY;
+			const cursorToScroll = (deltaY / offsetHeight) * scrollHeight;
+			scrollArea.scrollTo(scrollArea.scrollLeft, startscrollTop + cursorToScroll);
+			focusVerticalTrack = false;
+		}
+        startDragX = null
+        startDragY = null
+	}
+
+	function handleScroll() {
+		let calcTop = (scrollArea.scrollTop / scrollHeight) * 100;
+		leftTrack = (scrollArea.scrollLeft / scrollWidth) * 100;
+        
+        topTrack = isReverse ? -calcTop : calcTop
+        
+	}
+	function handleDisplayScrollBar() {
+        
+		if (lastMove + 800 < Date.now()) {
+			mount();
+		}
+		isVisible = true;
+		lastMove = Date.now();
+		setTimeout(() => {
+			if (lastMove + 750 < Date.now()) {
+				isVisible = false;
+			}
+		}, 800);
+	}
+</script>
+
+<scrollarea-container
+    role="scrollbar"
+    tabindex="-1"
+	bind:this={scrollContainer}
+	on:resize={mount}
+	class="scrollarea-container"
+	{style}
+	on:mousemove={handleDisplayScrollBar}
+>
+	<scrollarea
+		on:scroll={handleScroll}
+		bind:this={scrollArea}
+        style="{style + additionalStyle}"
+		class="scrollarea {className}"
+	>
+		<slot />
+	</scrollarea>
+	{#if overflowY && (isVisible || startDragY)}
+		<div
+            role="button"
+            tabindex="-1"
+			class="vertical-sb {overflowXY ? 'global-overflow' : ''}"
+			on:mousedown|preventDefault={handleStartScrollVertical}
+		>
+			<span
+				class="vertical-track {proximity ? 'proxy' : ''} {focusVerticalTrack ? 'focus' : ''}"
+				style="--proximity:{proximity}px;height:{heightTrack}%;{isReverse ? "bottom" : "top"}:{topTrack}%;"
+			></span>
+		</div>
+	{/if}
+	{#if overflowX && (isVisible || startDragX)}
+		<div
+            role="button"
+            tabindex="-1"
+			class="horizontal-sb {overflowXY ? 'global-overflow' : ''}"
+			on:mousedown|preventDefault={handleStartScrollHorizontal}
+		>
+			<span
+				class="horizontal-track {proximity ? 'proxy' : ''} {focusHorizontalTrack ? 'focus' : ''}"
+				style="--proximity:{proximity}px;width:{widthTrack}%;left:{leftTrack}%;"
+			></span>
+		</div>
+	{/if}
+	{#if overflowXY}
+		<div class="overflow-xy-corner"></div>
+	{/if}
+</scrollarea-container>
+
+<style>
+	.scrollarea-container {
+		position: relative;
+		display: flex;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		flex: 1;
+	}
+	.scrollarea {
+		overflow: scroll;
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		/* Pour Firefox plus ancien */
+		overflow: -moz-scrollbars-none;
+		/* Pour Internet Explorer et Edge */
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+        padding-bottom: var(--size);
+		/* display: contents; */
+	}
+	.scrollarea::-webkit-scrollbar {
+		display: none;
+		/* Chrome, Safari, Edge */
+	}
+
+	.vertical-sb {
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: 100%;
+		width: 12px;
+        z-index: 10;
+	}
+	.vertical-sb.global-overflow {
+		height: calc(100% - 12px);
+	}
+	.vertical-track {
+		--size: 4px;
+		position: absolute;
+		right: 0px;
+		width: var(--size);
+		background-color: rgba(122, 122, 122, 0.336);
+		transition: width 0.2s ease-out;
+	}
+	.vertical-track.proxy::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: calc(12px + var(--proximity));
+		height: 100%;
+	}
+	.vertical-track.proxy:hover,
+	.vertical-track.proxy.focus {
+		width: calc(100% + var(--proximity));
+	}
+	.horizontal-sb {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		height: 12px;
+		width: 100%;
+        z-index: 10;
+	}
+	.horizontal-sb.global-overflow {
+		width: calc(100% - 12px);
+	}
+	.horizontal-track {
+		--size: 4px;
+		position: absolute;
+		bottom: 0;
+		height: var(--size);
+		background-color: rgba(122, 122, 122, 0.336);
+		transition: height 0.2s ease-out;
+	}
+	.horizontal-track.proxy::after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		height: calc(12px + var(--proximity));
+		width: 100%;
+	}
+	.horizontal-track.proxy:hover,
+	.horizontal-track.proxy.focus {
+		height: calc(100% + var(--proximity));
+	}
+	.overflow-xy-corner {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 12px;
+		height: 12px;
+		background-color: rgba(143, 143, 143, 0.082);
+	}
+</style>

package/src/styles/font.css

@@ -0,0 +1,71 @@
+/* font */
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
+/* font */
+:root {
+    /* text size */
+    --text-1: 70px;
+    --text-2: 24px;
+    --text-3: 20px;
+    --text-4: 16px;
+    --text-5: 14px;
+    --text-6: 12px;
+    --text-p: 16px;
+}
+
+.h1, h1 {
+    font-size: var(--text-1);
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-u);
+}
+
+.h2, h2 {
+    font-size: var(--text-2);
+    line-height: 2rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-u);
+}
+
+.h3, h3 {
+    font-size: var(--text-3);
+    line-height: 1.75rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: bold;
+    color: var(--font-u);
+}
+
+.h4, h4 {
+    font-size: var(--text-4);
+    line-height: 1.5rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 500;
+    color: var(--font-d);
+}
+
+.h5, h5 {
+    font-size: var(--text-5);
+    line-height: 1.25rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 400;
+    color: var(--font-d);
+}
+
+.h6, h6 {
+    font-size: var(--text-6);
+    line-height: 1rem;
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 300;
+    color: var(--font-u);
+}
+
+.p, p {
+    font-size: var(--text-p);
+    font-family: 'Geist', 'Inter', sans-serif;
+    font-weight: 300;
+    color: var(--font-d);
+}
+
+.mono {
+    font-family:"Geist Mono", 'Inter', sans-serif;
+}