react-side-sheet-pro 0.1.0

package/src/components/SideSheetFooter.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+
+export const SideSheetFooter: React.FC<{
+  children: ReactNode;
+  className?: string;
+}> = ({ children, className }) => (
+  <footer className={classNames('sidesheet-footer', className)}>
+    {children}
+  </footer>
+);

package/src/components/SideSheetHeader.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { HiX } from 'react-icons/hi';
+
+export const SideSheetHeader: React.FC<{
+  title: string;
+  onClose?: () => void;
+  actions?: ReactNode;
+}> = React.memo(({ title, onClose, actions }) => (
+  <header className="sidesheet-header">
+    {onClose && (
+      <button
+        className="sidesheet-header-close sidesheet-header-btn"
+        onClick={onClose}
+      >
+        <HiX />
+      </button>
+    )}
+    <div className="sidesheet-header-title">{title}</div>
+    {actions}
+  </header>
+));

package/src/components/SideSheetProvider.tsx

@@ -0,0 +1,105 @@
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+  DEFAULT_OPTIONS,
+  DEFAULT_SHEET_OPTIONS,
+} from '../constants/defaultOptions';
+import {
+  SideElement,
+  SideOptions,
+  SideSheetContextValue,
+  SideSheetOptions,
+  SideStackItem,
+} from '../types';
+import { SideSheetContainer } from '../components/SideSheetContainer';
+import { SideSheetReducer } from '../contexts/SideSheetReducer';
+
+export const SideSheetContext = createContext<SideSheetContextValue | null>(
+  null
+);
+
+export const SideSheetProvider: React.FC<{
+  children: ReactNode;
+  configuration: Partial<SideSheetOptions>;
+}> = ({ children, configuration }) => {
+  const [stack, dispatch] = useReducer(SideSheetReducer, []);
+  const idRef = useRef(0);
+  const stackRef = useRef<SideStackItem[]>(stack);
+
+  useEffect(() => {
+    stackRef.current = stack;
+  }, [stack]);
+
+  const open = useCallback((element: SideElement, opts: SideOptions = {}) => {
+    const id = ++idRef.current;
+    const options = { ...DEFAULT_SHEET_OPTIONS, ...opts };
+    dispatch({
+      type: 'OPEN',
+      payload: { id, element, options, state: 'opening' },
+    });
+    setTimeout(() => {
+      dispatch({ type: 'SET_OPEN', id });
+      options.onOpen?.(id);
+    }, options.animationDuration);
+    return id;
+  }, []);
+
+  const close = useCallback(async (id: number | null) => {
+    const itemsToClose =
+      id === null
+        ? [...stackRef.current]
+        : stackRef.current.filter(i => i.id === id);
+
+    for (const item of itemsToClose) {
+      if (item.options.confirmBeforeClose) {
+        const confirmed = await item.options.confirmCallback(
+          item.options.confirmMessage
+        );
+        if (!confirmed) return;
+      }
+      item.options.onClose?.(item.id);
+    }
+    const duration =
+      itemsToClose[itemsToClose.length - 1]?.options.animationDuration;
+    dispatch({ type: 'CLOSE', id });
+    setTimeout(() => {
+      if (id === null) {
+        stackRef.current.forEach(item =>
+          dispatch({ type: 'REMOVE', id: item.id })
+        );
+      } else {
+        dispatch({ type: 'REMOVE', id: id! });
+      }
+    }, duration);
+  }, []);
+
+  const update = useCallback((id: number, options: Partial<SideOptions>) => {
+    dispatch({ type: 'UPDATE', id, options });
+  }, []);
+  const config = { ...DEFAULT_OPTIONS, ...configuration } as Required<
+    SideSheetOptions
+  >;
+
+  return (
+    <SideSheetContext.Provider value={{ open, close, update, config }}>
+      {children}
+      {createPortal(
+        <SideSheetContainer
+          stack={stack}
+          close={close}
+          open={open}
+          update={update}
+          config={config}
+        />,
+        document.body
+      )}
+    </SideSheetContext.Provider>
+  );
+};

package/src/constants/defaultOptions.ts

@@ -0,0 +1,22 @@
+import { SideOptions, SideSheetOptions } from '../types';
+
+export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
+  side: 'right',
+  mountStrategy: 'all',
+};
+
+export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
+  width: 400,
+  className: '',
+  confirmBeforeClose: false,
+  confirmMessage: 'Are you sure you want to close?',
+  confirmCallback: async (msg: string) =>
+    typeof window !== 'undefined'
+      ? Promise.resolve(window.confirm(msg))
+      : Promise.resolve(true),
+  closeOnOverlayClick: true,
+  closeOnEsc: true,
+  animationDuration: 240,
+  onOpen: () => {},
+  onClose: () => {},
+};

package/src/contexts/SideSheetReducer.ts

@@ -0,0 +1,41 @@
+import { SideOptions, SideStackItem } from '../types';
+
+type Action =
+  | { type: 'OPEN'; payload: SideStackItem }
+  | { type: 'SET_OPEN'; id: number }
+  | { type: 'CLOSE'; id: number | null }
+  | { type: 'REMOVE'; id: number }
+  | { type: 'UPDATE'; id: number; options: Partial<SideOptions> };
+
+export const SideSheetReducer = (
+  state: SideStackItem[],
+  action: Action
+): SideStackItem[] => {
+  switch (action.type) {
+    case 'OPEN':
+      return [...state, action.payload];
+    case 'SET_OPEN':
+      return state.map(item =>
+        item.id === action.id ? { ...item, state: 'open' } : item
+      );
+    case 'CLOSE':
+      return state.map(item =>
+        action.id === null || item.id === action.id
+          ? { ...item, state: 'closing' }
+          : item
+      );
+    case 'REMOVE':
+      return state.filter(item => item.id !== action.id);
+    case 'UPDATE':
+      return state.map(item =>
+        item.id === action.id
+          ? {
+              ...item,
+              options: { ...item.options, ...action.options },
+            }
+          : item
+      );
+    default:
+      return state;
+  }
+};

package/src/hooks/useSideSheet.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { SideSheetContextValue } from '../types';
+import { SideSheetContext } from '../components/SideSheetProvider';
+
+export const useSideSheet = (): SideSheetContextValue => {
+  const context = useContext(SideSheetContext);
+  if (!context) {
+    throw new Error('useSideSheet must be used within SideSheetProvider');
+  }
+  return context;
+};

package/src/index.css

@@ -0,0 +1,191 @@
+.sidesheet-overlay {
+  opacity: 0.3;
+  transition: all 0.4s;
+  background: #000;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  visibility: visible;
+  z-index: 10000;
+}
+
+.sidesheet-right {
+  right: 0;
+  transform: translateX(100%);
+}
+
+.sidesheet-left {
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.sidesheet-right.sidesheet-animation-open {
+  animation: sidesheet-open-right 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+
+.sidesheet-left.sidesheet-animation-open {
+  animation: sidesheet-open-left 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+
+.sidesheet.sidesheet-animation-open {
+  transform: translateX(0);
+}
+
+.sidesheet-right.sidesheet-animation-closing {
+  animation: sidesheet-close-right 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+
+.sidesheet-left.sidesheet-animation-closing {
+  animation: sidesheet-close-left 240ms cubic-bezier(0, 0, 0.3, 1);
+}
+
+@keyframes sidesheet-open-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes sidesheet-close-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes sidesheet-open-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes sidesheet-close-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+.sidesheet {
+  flex-direction: column;
+  display: flex;
+  flex-wrap: nowrap;
+  background: #f1f3f4;
+  bottom: 0;
+  right: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  width: 100%;
+  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2), 0 0 24px 2px rgba(0, 0, 0, 0.14),
+    0 0 30px 5px rgba(0, 0, 0, 0.12);
+  transition: transform 0.3s ease, width 0.3s ease;
+}
+
+.sheet-white {
+  background: #fff;
+}
+
+.sidesheet-header .sidesheet-header-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 7px;
+}
+
+.sidesheet-header {
+  padding: 12px;
+  gap: 16px;
+  border-bottom: 1px solid #dadce0;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidesheet-header svg {
+  width: 24px;
+  height: 24px;
+  display: block;
+}
+
+.sidesheet-header .sidesheet-header-btn {
+  border-radius: 50%;
+  height: 40px;
+  line-height: 40px;
+  align-items: center;
+  width: 40px;
+  justify-content: center;
+  display: flex;
+  opacity: 0.8;
+}
+
+.sidesheet-header .sidesheet-header-btn:hover {
+  opacity: 1;
+}
+
+.sidesheet-header .sidesheet-header-btn:focus {
+  background-color: rgba(64, 64, 64, 0.12);
+}
+
+.sidesheet-header-close:hover {
+  cursor: pointer;
+}
+
+.sidesheet-header-title {
+  font-size: 20px;
+  font-weight: 400;
+  align-items: center;
+  display: flex;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 6px 0;
+}
+
+.sidesheet-content.sidesheet-centered {
+  margin: 0 auto;
+  max-width: 768px;
+  width: 100%;
+}
+
+.sidesheet-content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  position: relative;
+}
+
+.sidesheet-content.sidesheet-padding {
+  padding: 24px;
+}
+
+.sidesheet-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 0 0 1px #dadce0;
+}
+
+.sidesheet-footer {
+  padding: 16px;
+  border-top: 1px solid #dadce0;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+import { SideSheetHeader } from './components/SideSheetHeader';
+import { SideSheetContent } from './components/SideSheetContent';
+import { SideSheetFooter } from './components/SideSheetFooter';
+import { SideSheetProvider } from './components/SideSheetProvider';
+
+export { useSideSheet } from './hooks/useSideSheet';
+export * from './types';
+
+export const SideSheet = {
+  Provider: SideSheetProvider,
+  Header: SideSheetHeader,
+  Content: SideSheetContent,
+  Footer: SideSheetFooter,
+};

package/src/types/index.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+
+export type Sides = 'left' | 'right';
+
+export interface SideSheetOptions {
+  side: Sides;
+  mountStrategy: 'all' | 'top-only';
+}
+
+export interface SideOptions {
+  width?: number;
+  className?: string;
+  confirmBeforeClose?: boolean;
+  confirmMessage?: string;
+  confirmCallback?: (message: string) => Promise<boolean>;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+  animationDuration?: number;
+  onOpen?: (id: number) => void;
+  onClose?: (id: number) => void;
+}
+
+export interface SideElementProps {
+  sideId: number;
+  close: (id: number | null) => Promise<void>;
+  open: (element: SideElement, options?: SideOptions) => number;
+  update: (id: number, options: SideOptions) => void;
+  options: SideOptions;
+}
+
+export type SideElement = (props: SideElementProps) => ReactNode;
+
+export interface SideStackItem {
+  id: number;
+  element: SideElement;
+  options: Required<SideOptions>;
+  state: 'opening' | 'open' | 'closing';
+}
+
+export interface SideSheetContextValue {
+  open: (el: SideElement, opts?: SideOptions) => number;
+  close: (id: number | null) => Promise<void>;
+  update: (id: number, opts: SideOptions) => void;
+  config: SideSheetOptions;
+}