polpo 0.1.13 → 0.1.16

package/src/hooks/use-modal-transition.ts

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
+
+export enum ModalState {
+  OPENING = 'OPENING',
+  OPEN = 'OPEN',
+  CLOSING = 'CLOSING',
+  CLOSED = 'CLOSED',
+}
+
+export type UseModalTransitionParams = {
+  transitionDuration?: number;
+  isOpen: boolean;
+};
+
+export const useModalTransition = ({ transitionDuration = 0, isOpen }: UseModalTransitionParams) => {
+  const [modalState, setModalState] = React.useState<ModalState>(ModalState.CLOSED);
+
+  const isVisible = useMemo(() => {
+    return modalState !== ModalState.CLOSED;
+  }, [modalState]);
+
+  useEffect(() => {
+    document.documentElement.style.overflow = isVisible ? 'hidden' : 'auto';
+  }, [isVisible]);
+
+  const closeModal = useCallback(() => {
+    if ([ModalState.OPENING, ModalState.OPEN].includes(modalState)) {
+      if (transitionDuration > 0) {
+        setModalState(ModalState.CLOSING);
+        setTimeout(() => {
+          setModalState(ModalState.CLOSED);
+        }, transitionDuration);
+      } else {
+        setModalState(ModalState.CLOSED);
+      }
+    }
+  }, [modalState, transitionDuration]);
+
+  const openModal = useCallback(() => {
+    if ([ModalState.CLOSING, ModalState.CLOSED].includes(modalState)) {
+      if (transitionDuration > 0) {
+        setModalState(ModalState.OPENING);
+        setTimeout(() => {
+          setModalState(ModalState.OPEN);
+        }, transitionDuration);
+      } else {
+        setModalState(ModalState.OPEN);
+      }
+    }
+  }, [modalState, transitionDuration]);
+
+  useLayoutEffect(() => {
+    if (modalState === ModalState.CLOSED && isOpen) {
+      openModal();
+    } else if (modalState === ModalState.OPEN && !isOpen) {
+      closeModal();
+    }
+  }, [isOpen, openModal, closeModal, modalState]);
+
+  return {
+    isVisible,
+    modalState,
+  };
+};

package/src/hooks/use-modal.ts

@@ -0,0 +1,21 @@
+import { useRef, useState } from 'react';
+
+export const useModal = <T extends HTMLElement>() => {
+  const containerRef = useRef<T>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openModal = () => {
+    setIsOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsOpen(false);
+  };
+
+  return {
+    containerRef,
+    isOpen,
+    openModal,
+    closeModal,
+  };
+};

package/src/hooks/use-mouse-position.ts

@@ -0,0 +1,64 @@
+import React, { useRef, useState } from 'react';
+
+import { useEventListener } from './use-event-listener';
+
+type MousePosition = {
+  x: null | number;
+  y: null | number;
+  elementX: number | null;
+  elementY: number | null;
+  elementPositionX: number | null;
+  elementPositionY: number | null;
+};
+
+const getMousePosition = (domRect: DOMRect, e: MouseEvent) => {
+  const { left, top } = domRect;
+  const containerPositionX = left + window.scrollX;
+  const containerPositionY = top + window.scrollY;
+  const containerX = e.pageX - containerPositionX;
+  const containerY = e.pageY - containerPositionY;
+
+  return {
+    x: e.pageX,
+    y: e.pageY,
+    elementX: containerX,
+    elementY: containerY,
+    elementPositionX: containerPositionX,
+    elementPositionY: containerPositionY,
+  };
+};
+
+export const useMousePosition = (containerRef?: React.RefObject<HTMLElement | SVGElement | null>) => {
+  const ref = useRef<HTMLElement>(null);
+  const [position, setPosition] = useState<MousePosition>({
+    x: null,
+    y: null,
+    elementX: null,
+    elementY: null,
+    elementPositionX: null,
+    elementPositionY: null,
+  });
+
+  const mouseMove = (e: MouseEvent) => {
+    const { clientX, clientY } = e;
+    setPosition(prev => ({ ...prev, x: clientX, y: clientY }));
+
+    if (containerRef?.current instanceof Element) {
+      const newState = getMousePosition(containerRef.current.getBoundingClientRect(), e);
+      setPosition(prev => ({
+        ...prev,
+        ...newState,
+      }));
+    } else if (ref.current instanceof Element) {
+      const newState = getMousePosition(ref.current.getBoundingClientRect(), e);
+      setPosition(prev => ({
+        ...prev,
+        ...newState,
+      }));
+    }
+  };
+
+  useEventListener('mousemove', mouseMove);
+
+  return { ...position, ref };
+};

package/src/hooks/use-online-status.ts

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+import { useEventListener } from './use-event-listener';
+
+export const useOnlineStatus = () => {
+  const [online, setOnline] = useState(navigator.onLine);
+
+  useEventListener('online', () => setOnline(navigator.onLine));
+  useEventListener('offline', () => setOnline(navigator.onLine));
+
+  return online;
+};

package/src/hooks/use-render-count.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const useRenderCount = () => {
+  const count = useRef(1);
+
+  useEffect(() => {
+    count.current++;
+  });
+
+  return count.current;
+};

package/src/hooks/use-resize-observer.ts

@@ -0,0 +1,18 @@
+import { RefObject, useEffect } from 'react';
+
+export const useResizeObserver = <T extends Element>(
+  ref: RefObject<T | null> | Array<RefObject<T | null>>,
+  callback: ResizeObserverCallback,
+) => {
+  useEffect(() => {
+    const refs = Array.isArray(ref) ? ref : [ref];
+
+    const observer = new ResizeObserver(callback);
+
+    refs.forEach(r => r.current && observer.observe(r.current));
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, callback]);
+};

package/src/hooks/use-safe-dispatch.ts

@@ -0,0 +1,22 @@
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
+
+export const useSafeDispatch = <T>(dispatch: React.Dispatch<T>): ((action: T) => void) => {
+  const mounted = useRef(false);
+
+  useLayoutEffect(() => {
+    mounted.current = true;
+
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  return useCallback(
+    (...args: Parameters<React.Dispatch<T>>) => {
+      if (mounted.current) {
+        dispatch(...args);
+      }
+    },
+    [dispatch],
+  );
+};

package/src/hooks/use-scroll.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useScroll = () => {
+  const ref = useRef<HTMLElement>(null);
+  const [position, setPosition] = useState([0, 0]);
+
+  useEffect(() => {
+    const element = ref.current;
+
+    const handleScroll = () => {
+      if (!element) return;
+
+      setPosition([element.scrollLeft, element.scrollTop]);
+    };
+
+    if (element) {
+      element.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      if (element) {
+        element.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, []);
+
+  return {
+    ref,
+    position,
+  };
+};

package/src/hooks/use-state-history.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+function useStateHistory<T>(initialState: T | (() => T)): [T, Dispatch<SetStateAction<T>>, Array<T>];
+
+function useStateHistory<T = undefined>(): [T | undefined, Dispatch<SetStateAction<T | undefined>>, Array<T>];
+
+function useStateHistory<T = undefined>(
+  initialState?: T | (() => T) | undefined,
+): [T | undefined, Dispatch<SetStateAction<T | undefined>>, Array<T>] {
+  const [state, setState] = useState<T | undefined>(initialState);
+  const [history, setHistory] = useState<Array<T>>([]);
+
+  useEffect(() => {
+    if (state !== undefined) {
+      setHistory(prevHistory => [...prevHistory, state]);
+    }
+  }, [state]);
+
+  return [state, setState, history];
+}
+
+export { useStateHistory };

package/src/hooks/use-toggle-values.ts

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export const useToggleValues = <T>(values: Array<T>, defaultIndex: number = 0): [T, (index?: number) => void] => {
+  const [index, setIndex] = useState(defaultIndex);
+
+  const toggle = useCallback(
+    (index?: number) => {
+      setIndex(index !== undefined ? index : prev => (prev + 1) % values.length);
+    },
+    [values.length],
+  );
+
+  return [values[index], toggle];
+};

package/src/hooks/use-toggle.ts

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export const useToggle = (defaultValue: boolean = false) => {
+  const [value, setValue] = useState<boolean>(defaultValue);
+
+  const toggle = useCallback(() => {
+    setValue(prev => !prev);
+  }, []);
+
+  return [value, toggle, setValue];
+};

package/src/hooks/use-viewport.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+import { useEventListener } from './use-event-listener';
+
+enum ScreenOrientation {
+  PORTRAIT = 'portrait',
+  LANDSCAPE = 'landscape',
+}
+
+type UseViewportData = {
+  width: number;
+  height: number;
+  orientation: ScreenOrientation;
+};
+
+export const useViewport = (): UseViewportData => {
+  const getData = (): UseViewportData => {
+    const { innerWidth, innerHeight } = window;
+
+    return {
+      width: innerWidth,
+      height: innerHeight,
+      orientation: innerWidth > innerHeight ? ScreenOrientation.LANDSCAPE : ScreenOrientation.PORTRAIT,
+    };
+  };
+
+  const [data, setData] = useState<UseViewportData>(getData);
+
+  useEventListener('resize', () => {
+    setData(getData());
+  });
+
+  useEffect(() => {
+    setData(getData());
+  }, []);
+
+  return data;
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './hooks';
+export * from './types';
+export * from './helpers';
+export * from './layouts';
+export * from './components';

package/src/layouts/flex/flex.component.tsx

@@ -0,0 +1,75 @@
+import React, { createElement } from 'react';
+
+type FlexProps = {
+  tag?: React.HTMLElementType;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  direction?: React.CSSProperties['flexDirection'];
+  wrap?: React.CSSProperties['flexWrap'];
+  basis?: React.CSSProperties['flexBasis'];
+  grow?: React.CSSProperties['flexGrow'];
+  shrink?: React.CSSProperties['flexShrink'];
+  flow?: React.CSSProperties['flexFlow'];
+  pc?: React.CSSProperties['placeContent'];
+  pi?: React.CSSProperties['placeItems'];
+  ps?: React.CSSProperties['placeSelf'];
+  jc?: React.CSSProperties['justifyContent'];
+  ji?: React.CSSProperties['justifyItems'];
+  js?: React.CSSProperties['justifySelf'];
+  ac?: React.CSSProperties['alignContent'];
+  ai?: React.CSSProperties['alignItems'];
+  as?: React.CSSProperties['alignSelf'];
+  gap?: React.CSSProperties['gap'];
+};
+
+export const Flex = ({
+  tag = 'section',
+  children,
+  className,
+  style,
+  direction,
+  wrap,
+  basis,
+  grow,
+  shrink,
+  flow,
+  pc,
+  pi,
+  ps,
+  jc,
+  ji,
+  js,
+  ac,
+  ai,
+  as,
+  gap,
+}: FlexProps) => {
+  return createElement(
+    tag,
+    {
+      className,
+      style: {
+        ...style,
+        ...(direction ? { flexDirection: direction } : {}),
+        ...(wrap ? { flexWrap: wrap } : {}),
+        ...(basis ? { flexBasis: basis } : {}),
+        ...(grow ? { flexGrow: grow } : {}),
+        ...(shrink ? { flexShrink: shrink } : {}),
+        ...(flow ? { flexFlow: flow } : {}),
+        ...(pc ? { placeContent: pc } : {}),
+        ...(pi ? { placeItems: pi } : {}),
+        ...(ps ? { placeSelf: ps } : {}),
+        ...(jc ? { justifyContent: jc } : {}),
+        ...(ji ? { justifyItems: ji } : {}),
+        ...(js ? { justifySelf: js } : {}),
+        ...(ac ? { alignContent: ac } : {}),
+        ...(ai ? { alignItems: ai } : {}),
+        ...(as ? { alignSelf: as } : {}),
+        ...(gap ? { gap: gap } : {}),
+        display: 'flex',
+      },
+    },
+    children,
+  );
+};

package/src/layouts/flex/index.ts

@@ -0,0 +1 @@
+export * from './flex.component';

package/src/layouts/grid/grid.component.tsx

@@ -0,0 +1,89 @@
+import React, { createElement } from 'react';
+
+import './grid.styles.css';
+
+type GridProps = React.HTMLAttributes<HTMLDivElement> & {
+  tag?: React.HTMLElementType;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  flow?: React.CSSProperties['gridAutoFlow'];
+  columnSize?: React.CSSProperties['gridAutoColumns'];
+  rowSize?: React.CSSProperties['gridAutoRows'];
+  column?: React.CSSProperties['gridColumn'];
+  row?: React.CSSProperties['gridRow'];
+  pc?: React.CSSProperties['placeContent'];
+  pi?: React.CSSProperties['placeItems'];
+  ps?: React.CSSProperties['placeSelf'];
+  jc?: React.CSSProperties['justifyContent'];
+  ji?: React.CSSProperties['justifyItems'];
+  js?: React.CSSProperties['justifySelf'];
+  ac?: React.CSSProperties['alignContent'];
+  ai?: React.CSSProperties['alignItems'];
+  as?: React.CSSProperties['alignSelf'];
+  gtc?: React.CSSProperties['gridTemplateColumns'];
+  gtr?: React.CSSProperties['gridTemplateRows'];
+  gta?: React.CSSProperties['gridTemplateAreas'];
+  gt?: React.CSSProperties['gridTemplate'];
+  gap?: React.CSSProperties['gap'];
+  ref?: React.Ref<HTMLElement>;
+};
+
+export const Grid = ({
+  tag = 'section',
+  children,
+  className,
+  style,
+  flow,
+  columnSize,
+  rowSize,
+  column,
+  row,
+  pc,
+  pi,
+  ps,
+  jc,
+  ji,
+  js,
+  ac,
+  ai,
+  as,
+  gtc,
+  gtr,
+  gta,
+  gt,
+  gap,
+  ...props
+}: GridProps) => {
+  return createElement(
+    tag,
+    {
+      className,
+      ...props,
+      style: {
+        ...style,
+        ...(flow ? { gridAutoFlow: flow } : {}),
+        ...(columnSize ? { gridAutoColumns: columnSize } : {}),
+        ...(rowSize ? { gridAutoRows: rowSize } : {}),
+        ...(column ? { gridColumn: column } : {}),
+        ...(row ? { gridRow: row } : {}),
+        ...(pc ? { placeContent: pc } : {}),
+        ...(pi ? { placeItems: pi } : {}),
+        ...(ps ? { placeSelf: ps } : {}),
+        ...(jc ? { justifyContent: jc } : {}),
+        ...(ji ? { justifyItems: ji } : {}),
+        ...(js ? { justifySelf: js } : {}),
+        ...(ac ? { alignContent: ac } : {}),
+        ...(ai ? { alignItems: ai } : {}),
+        ...(as ? { alignSelf: as } : {}),
+        ...(gtc ? { gridTemplateColumns: gtc } : {}),
+        ...(gtr ? { gridTemplateRows: gtr } : {}),
+        ...(gta ? { gridTemplateAreas: gta } : {}),
+        ...(gt ? { gridTemplate: gt } : {}),
+        ...(gap ? { gap: gap } : {}),
+        display: 'grid',
+      },
+    },
+    children,
+  );
+};

package/src/layouts/grid/grid.styles.css

@@ -0,0 +1,5 @@
+@reference "polpo-tailwind-config/styles";
+
+.grida {
+    display: grid;
+}

package/src/layouts/grid/index.ts

@@ -0,0 +1 @@
+export * from './grid.component';

package/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from './flex';
+export * from './grid';

package/src/types/generics.ts

@@ -0,0 +1,68 @@
+/*
+ *KeyValuesOf
+ *
+ *Description:
+ *  This generic type extract specific attributes from an object type, this is
+ *  useful when you are creating a component with a generic type, and then you
+ *  want to add a prop that only could receive specific attributes from that
+ *  generic object.
+ *
+ *  Example:
+ *    - select.tsx
+ *
+ *      type SelectProps<T> = {
+ *        options: Array<T>;
+ *        renderAttribute: KeyValuesOf<T, string>; // <---- Only allow string attributes from T
+ *      }
+ *
+ *      const Select = <T,>(props: SelectProps<T>) => { ... }
+ *
+ *    - user.entities.ts
+ *
+ *      type UserProfileEntity = {
+ *        picture: string;
+ *        website: string;
+ *      };
+ *
+ *      type UserEntity = {
+ *        name: string;
+ *        lastname: string;
+ *        age: number;
+ *        profile: UserProfileEntity;
+ *      }
+ *
+ *    - page.tsx
+ *
+ *      import { Select } from './components';
+ *      import { UserEntity } from './user.entities';
+ *
+ *      <Select<UserEntity>
+ *        options={options}
+ *        renderAttribute='name' // <---- Only allow 'name | lastname'
+ *      />
+ *
+ *Params:
+ *  T: Object or map Type with keys
+ *  V: Type to extract from T
+ *
+ *Example:
+ *  Input: KeyValuesOf<UserEntity, string>
+ *  Output: name | lastname
+ *
+ *  Input: KeyValuesOf<UserEntity, number>
+ *  Output: age
+ *
+ *  Input: KeyValuesOf<UserEntity, string | number>
+ *  Output: name | lastname | age
+ *
+ *  Input: KeyValuesOf<UserEntity, UserProfileEntity>
+ *  Output: profile
+ *
+ */
+export type KeyValuesOf<T, V> = {
+  [P in keyof T]-?: T[P] extends V ? P : never;
+}[keyof T];
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './generics';

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "polpo-typescript-config/react-library",
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "dist",
+    "baseUrl": "src"
+  }
+}

package/tsup.config.cjs

@@ -0,0 +1,36 @@
+import postcss from 'esbuild-postcss';
+import { defineConfig } from 'tsup';
+
+export default defineConfig([
+  {
+    entry: {
+      components: './src/components/index.ts',
+      hooks: './src/hooks/index.ts',
+      layouts: './src/layouts/index.ts',
+      types: './src/types/index.ts',
+      helpers: './src/helpers/index.ts',
+    },
+    outDir: './dist',
+    dts: true,
+    bundle: true,
+    minify: true,
+    sourcemap: false,
+    target: 'node24',
+    format: ['cjs', 'esm'],
+    banner: {
+      js: '"use client";',
+    },
+    clean: true,
+    splitting: false,
+    esbuildTarget: 'esnext',
+    external: ['react', 'react-dom'],
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+    },
+    esbuildPlugins: [postcss()],
+    esbuildOptions: options => {
+      options.packages = 'external';
+    },
+  },
+]);