@kalink-ui/seedly 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- 6d5d569: [Stack] Use flex-box instead of margin for spacing between elements
+
 ## 0.13.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",

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

@@ -1,4 +1,4 @@
-import { createVar, globalStyle } from '@vanilla-extract/css';
+import { createVar } from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, mapContractVars } from '../../styles';
@@ -16,19 +16,13 @@ export const stackRecipe = recipe({
       [components]: {
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        gap: spacing,
       },
     },
   },
 
   variants: {
-    /**
-     * Whether the stack spacing should be applied recursively
-     */
-    recursive: {
-      true: {},
-    },
-
     /**
      * The spacing between items
      */
@@ -41,18 +35,38 @@ export const stackRecipe = recipe({
         },
       },
     })),
-  },
-});
 
-globalStyle(
-  `${stackRecipe.classNames.base} > * + *, ${stackRecipe.classNames.variants.recursive.true} * + *`,
-  {
-    '@layer': {
-      [components]: {
-        marginBlockStart: spacing,
+    align: {
+      start: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-start',
+          },
+        },
+      },
+      center: {
+        '@layer': {
+          [components]: {
+            alignItems: 'center',
+          },
+        },
+      },
+      end: {
+        '@layer': {
+          [components]: {
+            alignItems: 'flex-end',
+          },
+        },
+      },
+      stretch: {
+        '@layer': {
+          [components]: {
+            alignItems: 'stretch',
+          },
+        },
       },
     },
   },
-);
+});
 
 export type StackVariants = NonNullable<RecipeVariants<typeof stackRecipe>>;

package/src/components/stack/stack.tsx

@@ -18,16 +18,16 @@ export type StackProps<TUse extends ElementType> =
  * https://every-layout.dev/layouts/stack
  */
 export function Stack<TUse extends ElementType = 'div'>({
-  recursive,
   spacing,
   className,
+  align,
   ...props
 }: StackProps<TUse>) {
   const { use: Comp = 'div', ...rest } = props;
 
   return (
     <Comp
-      className={clsx(stackRecipe({ recursive, spacing }), className)}
+      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';

package/src/styles/define-responsive-properties.ts

@@ -61,11 +61,13 @@ export const defineResponsiveProperties = ({
       flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
 
       justifyContent: [
+        'stretch',
         'flex-start',
         'flex-end',
         'center',
         'space-between',
         'space-around',
+        'space-evenly',
       ],
       alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
       alignSelf: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],