react-side-sheet-pro 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Richard Dobroň
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# react-side-sheet-pro
+
+A flexible React SideSheet component for displaying contextual information.
+
+This panel can slide in from either the left or right side of the screen and is typically triggered by user actions like clicking a row in a table. It supports nested sheets, easy state management, and customizable layouts for a seamless and intuitive user experiences.
+
+## 👀 Live Preview
+
+- [Codepen](https://codepen.io/richard-dobro/pen/LEEBGya)
+
+## 💡 Use cases
+- Viewing a user's profile or related details
+- Displaying transaction information (e.g., syncs or automation runs)
+- Accessing settings or configurations that don’t require a direct URL
+- Editing or creating records in a form without navigating away from the main view
+
+## ℹ️ Compatibility
+
+React 0.14.0 - 18.x.x
+
+
+## 📦 Installation
+
+Install the widget via npm or yarn:
+
+```shell
+npm install react-side-sheet-pro
+# or
+yarn add react-side-sheet-pro
+```
+
+## ⚡️ Quick Start
+```typescript jsx
+import React from 'react'
+import { SideSheet, useSideSheet, SideElementProps } from 'react-side-sheet-pro'
+
+const UserDetails: React.FC<SideElementProps & { user: any }> = ({
+    user,
+    sideId,
+    close,
+}) => (
+    <>
+        <SideSheet.Header title={user.name} onClose={() => close(sideId)} />
+        <SideSheet.Content className="sidesheet-padding sidesheet-centered">
+            <div className="sidesheet-card">
+                <p>
+                    <strong>ID:</strong> {user.id}
+                </p>
+                <p>
+                    <strong>Name:</strong> {user.name}
+                </p>
+                <p>
+                    <strong>Email:</strong> {user.email}
+                </p>
+            </div>
+        </SideSheet.Content>
+    </>
+)
+
+export const App = () => {
+    const { open } = useSideSheet()
+
+    const handleOpenSideSheet = () => {
+        open(
+            (props) => (
+                <UserDetails
+                    {...props}
+                    user={{
+                        id: 1,
+                        name: 'John Doe',
+                        email: 'john@doe.com',
+                    }}
+                />
+            ),
+            {
+                width: 600,
+            }
+        )
+    }
+
+    return (
+        <button onClick={handleOpenSideSheet}>Open Side Sheet</button>
+    )
+}
+
+export default () => (
+    <SideSheet.Provider>
+        <App />
+    </SideSheet.Provider>
+)
+```
+
+## 🧪 Testing
+
+```bash
+cd playground/ && npm start
+```
+
+## 🌟 Contributing
+
+We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

package/dist/index.css

@@ -0,0 +1,191 @@
+.sidesheet-overlay {
+    opacity: 0.30;
+    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/dist/index.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { ReactNode } from "react";
+type Sides = "left" | "right";
+interface SideSheetOptions {
+    side: Sides;
+    mountStrategy: "all" | "top-only";
+}
+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;
+}
+interface SideElementProps {
+    sideId: number;
+    close: (id: number | null) => Promise<void>;
+    open: (element: SideElement, options?: SideOptions) => number;
+    update: (id: number, options: SideOptions) => void;
+    options: SideOptions;
+}
+type SideElement = (props: SideElementProps) => ReactNode;
+interface SideStackItem {
+    id: number;
+    element: SideElement;
+    options: Required<SideOptions>;
+    state: "opening" | "open" | "closing";
+}
+interface SideSheetContextValue {
+    open: (el: SideElement, opts?: SideOptions) => number;
+    close: (id: number | null) => Promise<void>;
+    update: (id: number, opts: SideOptions) => void;
+    config: SideSheetOptions;
+}
+declare const useSideSheet: () => SideSheetContextValue;
+declare const SideSheet: {
+    Provider: import("react").FC<{
+        children: import("react").ReactNode;
+        configuration: Partial<SideSheetOptions>;
+    }>;
+    Header: import("react").FC<{
+        title: string;
+        onClose?: (() => void) | undefined;
+        actions?: import("react").ReactNode;
+    }>;
+    Content: import("react").FC<{
+        children: import("react").ReactNode;
+        className?: string | undefined;
+    }>;
+    Footer: import("react").FC<{
+        children: import("react").ReactNode;
+        className?: string | undefined;
+    }>;
+};
+export { useSideSheet, Sides, SideSheetOptions, SideOptions, SideElementProps, SideElement, SideStackItem, SideSheetContextValue, SideSheet };

package/dist/index.esm.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { ReactNode } from "react";
+type Sides = "left" | "right";
+interface SideSheetOptions {
+    side: Sides;
+    mountStrategy: "all" | "top-only";
+}
+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;
+}
+interface SideElementProps {
+    sideId: number;
+    close: (id: number | null) => Promise<void>;
+    open: (element: SideElement, options?: SideOptions) => number;
+    update: (id: number, options: SideOptions) => void;
+    options: SideOptions;
+}
+type SideElement = (props: SideElementProps) => ReactNode;
+interface SideStackItem {
+    id: number;
+    element: SideElement;
+    options: Required<SideOptions>;
+    state: "opening" | "open" | "closing";
+}
+interface SideSheetContextValue {
+    open: (el: SideElement, opts?: SideOptions) => number;
+    close: (id: number | null) => Promise<void>;
+    update: (id: number, opts: SideOptions) => void;
+    config: SideSheetOptions;
+}
+declare const useSideSheet: () => SideSheetContextValue;
+declare const SideSheet: {
+    Provider: import("react").FC<{
+        children: import("react").ReactNode;
+        configuration: Partial<SideSheetOptions>;
+    }>;
+    Header: import("react").FC<{
+        title: string;
+        onClose?: (() => void) | undefined;
+        actions?: import("react").ReactNode;
+    }>;
+    Content: import("react").FC<{
+        children: import("react").ReactNode;
+        className?: string | undefined;
+    }>;
+    Footer: import("react").FC<{
+        children: import("react").ReactNode;
+        className?: string | undefined;
+    }>;
+};
+export { useSideSheet, Sides, SideSheetOptions, SideOptions, SideElementProps, SideElement, SideStackItem, SideSheetContextValue, SideSheet };