@silas-test/ob-molecules-side-panel 0.1.0

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@silas-test/ob-molecules-side-panel",
+  "version": "0.1.0",
+  "dependencies": {
+    "@silas-test/ui-utils": "0.6.5"
+  },
+  "main": "./index.cjs.js",
+  "type": "commonjs",
+  "types": "./index.d.ts"
+}

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/side-panel';

package/src/lib/side-panel.d.ts

@@ -0,0 +1,5 @@
+import './side-panel.css';
+import React from 'react';
+import { ISidePanelProps } from './side-panel.interface';
+export declare const SidePanel: React.ForwardRefExoticComponent<ISidePanelProps & React.RefAttributes<HTMLDivElement>>;
+export default SidePanel;

package/src/lib/side-panel.interface.d.ts

@@ -0,0 +1,44 @@
+import { DefaultProps } from '@silas-test/ui-utils';
+/**
+ * @typedef {SidePanelAlign} - property that defined on what side off the screen the panel will stick to
+ */ export type SidePanelAlign = 'left' | 'right';
+/**
+ *
+ * @property {string | undefined} id - component identification
+ * @property {string | undefined} dataTestId - react-testing-library identification
+ * @property {HTMLElement | undefined} align - property that defined on what side off the screen the panel will stick to. Can be 'left' or 'right'
+ * @property {function | undefined} isOpen - boolean that defines if the SidePanel is open or closed
+ * @property {string | undefined} closeOnBackdropClick - boolean that defines if the SidePanel should close when clicking on the backdrop
+ * @property {function} onClose - function that runs when closing the SidePanel. If closeOnBackdropBlick is true, it will run when clicking on backdrop too
+ * @property {string | React.ReactElement | React.ReactElement[] | undefined} children - children component that will render inside the SidePanel
+ */
+export interface ISidePanelProps extends DefaultProps {
+    /** Component identification */
+    id?: string;
+    /** React-testing-library identification */
+    dataTestId?: string;
+    /** Property that defined on what side off the screen the panel will stick to. Can be 'left' or 'right' */
+    align: SidePanelAlign;
+    /** Boolean representing if the SidePanel is open or closed */
+    isOpen: boolean;
+    /** Boolean that defines if the SidePanel should close when clicking on the backdrop.
+     *
+     * The default value is `true`
+     */
+    closeOnBackdropClick?: boolean;
+    /** Function that runs when closing the SidePanel.
+     *
+     * NOTE: If closeOnBackdropBlick is true, it will run when clicking on backdrop too
+     *
+     * @example
+     * ```
+     * <SidePanel align='left' isOpen={isOpen} onClose={() => setIsOpen(false)}>
+     *    <p>welcome to side panel</p>
+     * </SidePanel>
+     * ```
+     *
+     * */
+    onClose: () => void;
+    /** Children component that will render inside the SidePanel */
+    children?: string | React.ReactElement | React.ReactElement[];
+}

package/src/lib/side-panel.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta } from '@storybook/react';
+import { SidePanel } from './side-panel';
+declare const Story: Meta<typeof SidePanel>;
+export default Story;
+export declare const Left: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./side-panel.interface").ISidePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Right: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./side-panel.interface").ISidePanelProps & import("react").RefAttributes<HTMLDivElement>>;