@kalink-ui/seedly 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @kalink-ui/seedly
 
+## 0.15.0
+
+### Minor Changes
+
+- 7893c13: [Stack] handle items positioning
+- b1e9483: [LoaderOverlay] Correctly center elements
+- 57ca2b9: [useLocalStorage] Add new local storage management hook
+
 ## 0.14.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -48,8 +48,8 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.8",
     "@kalink-ui/dibbly": "0.4.0",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.9.0"
+    "@kalink-ui/eslint-config": "0.9.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

package/src/components/loader-overlay/loader-overlay.tsx

@@ -21,7 +21,7 @@ export function LoaderOverlay({
 }: LoaderOverlayProps) {
   return (
     <div className={clsx(loaderOverlay({ position }), className)}>
-      <Stack use={Center} spacing={spacing} intrinsic andText>
+      <Stack use={Center} align="center" spacing={spacing} intrinsic andText>
         <MoonLoader active forceMount />
         {text && <Text>{text}</Text>}
       </Stack>

package/src/components/stack/stack.css.ts

@@ -35,6 +35,37 @@ export const stackRecipe = recipe({
         },
       },
     })),
+
+    align: {
+      start: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-start',
+          },
+        },
+      },
+      center: {
+        '@layer': {
+          [components]: {
+            alignItems: 'center',
+          },
+        },
+      },
+      end: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-end',
+          },
+        },
+      },
+      stretch: {
+        '@layer': {
+          [components]: {
+            alignItems: 'stretch',
+          },
+        },
+      },
+    },
   },
 });
 

package/src/components/stack/stack.tsx

@@ -20,11 +20,15 @@ export type StackProps<TUse extends ElementType> =
 export function Stack<TUse extends ElementType = 'div'>({
   spacing,
   className,
+  align,
   ...props
 }: StackProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
-    <Comp className={clsx(stackRecipe({ spacing }), className)} {...rest} />
+    <Comp
+      className={clsx(stackRecipe({ spacing, align }), className)}
+      {...rest}
+    />
   );
 }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useLocalStorage } from './use-local-storage';

package/src/hooks/use-local-storage.ts

@@ -0,0 +1,99 @@
+'use client';
+
+import { useCallback, useEffect, useSyncExternalStore } from 'react';
+
+type Serializable =
+  | string
+  | number
+  | boolean
+  | null
+  | Serializable[]
+  | { [key: string]: Serializable };
+
+type StateUpdater<T> = (oldValue: T) => T;
+
+function dispatchStorageEvent(key: string, newValue: string | null) {
+  window.dispatchEvent(new StorageEvent('storage', { key, newValue }));
+}
+
+function subscribeToStorageEvent(callback: () => void) {
+  window.addEventListener('storage', callback);
+
+  return () => window.removeEventListener('storage', callback);
+}
+
+function setLocalStorage<T>(key: string, value: T) {
+  const stringifiedValue = JSON.stringify(value);
+
+  window.localStorage.setItem(key, stringifiedValue);
+
+  dispatchStorageEvent(key, stringifiedValue);
+}
+
+function removeLocalStorage(key: string) {
+  window.localStorage.removeItem(key);
+
+  dispatchStorageEvent(key, null);
+}
+
+function getLocalStorage(key: string) {
+  return window.localStorage.getItem(key);
+}
+
+function getLocalStorageServerSnapshot<T>(initialValue: T) {
+  const initialSnapshot = JSON.stringify(initialValue);
+
+  return () => initialSnapshot;
+}
+
+const cachedStore = new Map<string, Serializable>();
+
+export function useLocalStorage<T extends Serializable>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | StateUpdater<T>) => void] {
+  const getSnapshot = () => getLocalStorage(key);
+
+  const store = useSyncExternalStore(
+    subscribeToStorageEvent,
+    getSnapshot,
+    getLocalStorageServerSnapshot(initialValue),
+  );
+
+  const setValue = useCallback(
+    (value: T | StateUpdater<T>) => {
+      try {
+        const newValue =
+          typeof value === 'function'
+            ? value(store ? JSON.parse(store) : null)
+            : value;
+
+        if (newValue === undefined || newValue === null) {
+          removeLocalStorage(key);
+        } else {
+          setLocalStorage(key, newValue);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [key, store],
+  );
+
+  useEffect(() => {
+    if (getLocalStorage(key) === null && typeof initialValue !== 'undefined') {
+      setLocalStorage(key, initialValue);
+    }
+  }, [key, initialValue]);
+
+  if (!store) {
+    return [initialValue, setValue];
+  }
+
+  if (!cachedStore.has(store)) {
+    cachedStore.clear();
+    cachedStore.set(store, JSON.parse(store));
+  }
+
+  return [cachedStore.get(store) as T, setValue];
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './utils';
+export * from './hooks';