react-side-sheet-pro 0.1.0 โ†’ 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +57 -2
  2. package/dist/index.css +111 -111
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.esm.d.ts +1 -1
  5. package/dist/index.esm.js +1203 -901
  6. package/dist/index.js +1203 -901
  7. package/dist/index.umd.d.ts +1 -1
  8. package/dist/index.umd.js +1203 -901
  9. package/dist/index.umd.min.d.ts +1 -1
  10. package/dist/index.umd.min.js +5 -5
  11. package/package.json +3 -3
  12. package/src/components/SideSheetHeader.tsx +5 -2
  13. package/src/components/SideSheetProvider.tsx +6 -4
  14. package/src/constants/defaultOptions.ts +24 -22
  15. package/src/types/index.ts +4 -2
  16. package/dist/index.html +0 -102
package/README.md CHANGED
@@ -6,7 +6,7 @@ This panel can slide in from either the left or right side of the screen and is
6
6
 
7
7
  ## ๐Ÿ‘€ Live Preview
8
8
 
9
- - [Codepen](https://codepen.io/richard-dobro/pen/LEEBGya)
9
+ [![Edit react-side-sheet-pro](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/9mxzqg)
10
10
 
11
11
  ## ๐Ÿ’ก Use cases
12
12
  - Viewing a user's profile or related details
@@ -16,8 +16,18 @@ This panel can slide in from either the left or right side of the screen and is
16
16
 
17
17
  ## โ„น๏ธ Compatibility
18
18
 
19
- React 0.14.0 - 18.x.x
19
+ React 0.14.0 - 19.x.x
20
20
 
21
+ ## โœจ Key Features
22
+
23
+ - ๐Ÿš€ **Easy Integration**: Get started with minimal setup.
24
+ - ๐Ÿ“ฑ **Responsive Design**: Optimized for all screen sizes.
25
+ - ๐Ÿ’ช **TypeScript Compatibility**: Fully typed for a seamless developer experience.
26
+ - ๐Ÿ”„ **Nested Sheets**: Support for opening multiple side sheets in a nested manner.
27
+ - ๐ŸŽจ **Customizable**: Easily adjust width, styles, and behavior to fit your needs.
28
+ - ๐Ÿ‘Œ **State Management Included**: Built-in hooks for managing the state of the side sheet.
29
+ - โšก **Lightweight and Fast**: Minimal dependencies for a quick and smooth user experience.
30
+ - ๐Ÿงฉ **Modular Components**: Use only the parts you need, like header, content, and footer.
21
31
 
22
32
  ## ๐Ÿ“ฆ Installation
23
33
 
@@ -33,6 +43,7 @@ yarn add react-side-sheet-pro
33
43
  ```typescript jsx
34
44
  import React from 'react'
35
45
  import { SideSheet, useSideSheet, SideElementProps } from 'react-side-sheet-pro'
46
+ import 'react-side-sheet-pro/dist/index.css'
36
47
 
37
48
  const UserDetails: React.FC<SideElementProps & { user: any }> = ({
38
49
  user,
@@ -83,6 +94,8 @@ export const App = () => {
83
94
  )
84
95
  }
85
96
 
97
+ // Wrap your app with the SideSheet.Provider to manage side sheets globally
98
+
86
99
  export default () => (
87
100
  <SideSheet.Provider>
88
101
  <App />
@@ -90,6 +103,48 @@ export default () => (
90
103
  )
91
104
  ```
92
105
 
106
+ ## ๐Ÿงฉ Compound Components
107
+
108
+ ### `Sheet.Provider`
109
+
110
+ Sheet provider component that manages the state of all side sheets in your application. It should wrap your main application component.
111
+
112
+ ### `Sheet.Header`
113
+
114
+ Sheet header component that displays the title and can include custom actions. It also provides custom `onClick` function for a button to close the sheet.
115
+
116
+ #### Header props
117
+
118
+ | Name | Required | Default | Description |
119
+ |-------------|----------|-----------|------------------------------------------|
120
+ | `title` | yes | | Title of the header. |
121
+ | `onClose` | no | undefined | Callback function to close the sheet. |
122
+ | `actions` | no | undefined | Custom actions to render in the header. |
123
+ | `className` | no | undefined | Custom CSS class for additional styling. |
124
+
125
+ ### `Sheet.Content`
126
+
127
+ Sheet content component that wraps the main content of the side sheet. Can be styled using custom classes.
128
+
129
+ #### Content props
130
+
131
+ | Name | Required | Default | Description |
132
+ |-------------|----------|-----------|-------------------------------------------|
133
+ | `children` | yes | | Content to display inside the side sheet. |
134
+ | `className` | no | undefined | Custom CSS class for additional styling. |
135
+
136
+ ### `Sheet.Footer`
137
+
138
+ Sheet footer component that can be used to display actions or additional information at the bottom of the side sheet. Can be styled using custom classes.
139
+
140
+ #### Footer props
141
+
142
+ | Name | Required | Default | Description |
143
+ |-------------|----------|-----------|------------------------------------------|
144
+ | `children` | yes | | Content to display inside the footer. |
145
+ | `className` | no | undefined | Custom CSS class for additional styling. |
146
+
147
+
93
148
  ## ๐Ÿงช Testing
94
149
 
95
150
  ```bash
package/dist/index.css CHANGED
@@ -1,191 +1,191 @@
1
1
  .sidesheet-overlay {
2
- opacity: 0.30;
3
- transition: all 0.4s;
4
- background: #000;
5
- bottom: 0;
6
- left: 0;
7
- position: fixed;
8
- right: 0;
9
- top: 0;
10
- visibility: visible;
11
- z-index: 10000;
2
+ opacity: 0.3;
3
+ transition: all 0.4s;
4
+ background: #000;
5
+ bottom: 0;
6
+ left: 0;
7
+ position: fixed;
8
+ right: 0;
9
+ top: 0;
10
+ visibility: visible;
11
+ z-index: 10000;
12
12
  }
13
13
 
14
14
  .sidesheet-right {
15
- right: 0;
16
- transform: translateX(100%);
15
+ right: 0;
16
+ transform: translateX(100%);
17
17
  }
18
18
 
19
19
  .sidesheet-left {
20
- left: 0;
21
- transform: translateX(-100%);
20
+ left: 0;
21
+ transform: translateX(-100%);
22
22
  }
23
23
 
24
24
  .sidesheet-right.sidesheet-animation-open {
25
- animation: sidesheet-open-right 240ms cubic-bezier(0, 0, 0.3, 1);
25
+ animation: sidesheet-open-right 240ms cubic-bezier(0, 0, 0.3, 1);
26
26
  }
27
27
 
28
28
  .sidesheet-left.sidesheet-animation-open {
29
- animation: sidesheet-open-left 240ms cubic-bezier(0, 0, 0.3, 1);
29
+ animation: sidesheet-open-left 240ms cubic-bezier(0, 0, 0.3, 1);
30
30
  }
31
31
 
32
32
  .sidesheet.sidesheet-animation-open {
33
- transform: translateX(0);
33
+ transform: translateX(0);
34
34
  }
35
35
 
36
36
  .sidesheet-right.sidesheet-animation-closing {
37
- animation: sidesheet-close-right 240ms cubic-bezier(0, 0, 0.3, 1);
37
+ animation: sidesheet-close-right 240ms cubic-bezier(0, 0, 0.3, 1);
38
38
  }
39
39
 
40
40
  .sidesheet-left.sidesheet-animation-closing {
41
- animation: sidesheet-close-left 240ms cubic-bezier(0, 0, 0.3, 1);
41
+ animation: sidesheet-close-left 240ms cubic-bezier(0, 0, 0.3, 1);
42
42
  }
43
43
 
44
44
  @keyframes sidesheet-open-right {
45
- from {
46
- transform: translateX(100%);
47
- }
48
- to {
49
- transform: translateX(0);
50
- }
45
+ from {
46
+ transform: translateX(100%);
47
+ }
48
+ to {
49
+ transform: translateX(0);
50
+ }
51
51
  }
52
52
 
53
53
  @keyframes sidesheet-close-right {
54
- from {
55
- transform: translateX(0);
56
- }
57
- to {
58
- transform: translateX(100%);
59
- }
54
+ from {
55
+ transform: translateX(0);
56
+ }
57
+ to {
58
+ transform: translateX(100%);
59
+ }
60
60
  }
61
61
 
62
62
  @keyframes sidesheet-open-left {
63
- from {
64
- transform: translateX(-100%);
65
- }
66
- to {
67
- transform: translateX(0);
68
- }
63
+ from {
64
+ transform: translateX(-100%);
65
+ }
66
+ to {
67
+ transform: translateX(0);
68
+ }
69
69
  }
70
70
 
71
71
  @keyframes sidesheet-close-left {
72
- from {
73
- transform: translateX(0);
74
- }
75
- to {
76
- transform: translateX(-100%);
77
- }
72
+ from {
73
+ transform: translateX(0);
74
+ }
75
+ to {
76
+ transform: translateX(-100%);
77
+ }
78
78
  }
79
79
 
80
80
  .sidesheet {
81
- flex-direction: column;
82
- display: flex;
83
- flex-wrap: nowrap;
84
- background: #f1f3f4;
85
- bottom: 0;
86
- right: 0;
87
- max-width: 100%;
88
- overflow-x: hidden;
89
- overflow-y: auto;
90
- position: fixed;
91
- z-index: 10000;
92
- top: 0;
93
- width: 100%;
94
- box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2),
95
- 0 0 24px 2px rgba(0, 0, 0, 0.14), 0 0 30px 5px rgba(0, 0, 0, 0.12);
96
- transition: transform 0.3s ease, width 0.3s ease;
81
+ flex-direction: column;
82
+ display: flex;
83
+ flex-wrap: nowrap;
84
+ background: #f1f3f4;
85
+ bottom: 0;
86
+ right: 0;
87
+ max-width: 100%;
88
+ overflow-x: hidden;
89
+ overflow-y: auto;
90
+ position: fixed;
91
+ z-index: 10000;
92
+ top: 0;
93
+ width: 100%;
94
+ box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2), 0 0 24px 2px rgba(0, 0, 0, 0.14),
95
+ 0 0 30px 5px rgba(0, 0, 0, 0.12);
96
+ transition: transform 0.3s ease, width 0.3s ease;
97
97
  }
98
98
 
99
99
  .sheet-white {
100
- background: #fff;
100
+ background: #fff;
101
101
  }
102
102
 
103
103
  .sidesheet-header .sidesheet-header-btn {
104
- background: transparent;
105
- border: none;
106
- cursor: pointer;
107
- padding: 7px;
104
+ background: transparent;
105
+ border: none;
106
+ cursor: pointer;
107
+ padding: 7px;
108
108
  }
109
109
 
110
110
  .sidesheet-header {
111
- padding: 12px;
112
- gap: 16px;
113
- border-bottom: 1px solid #dadce0;
114
- background: #fff;
115
- display: flex;
116
- justify-content: space-between;
117
- align-items: center;
111
+ padding: 12px;
112
+ gap: 16px;
113
+ border-bottom: 1px solid #dadce0;
114
+ background: #fff;
115
+ display: flex;
116
+ justify-content: space-between;
117
+ align-items: center;
118
118
  }
119
119
 
120
120
  .sidesheet-header svg {
121
- width: 24px;
122
- height: 24px;
123
- display: block;
121
+ width: 24px;
122
+ height: 24px;
123
+ display: block;
124
124
  }
125
125
 
126
126
  .sidesheet-header .sidesheet-header-btn {
127
- border-radius: 50%;
128
- height: 40px;
129
- line-height: 40px;
130
- align-items: center;
131
- width: 40px;
132
- justify-content: center;
133
- display: flex;
134
- opacity: 0.8;
127
+ border-radius: 50%;
128
+ height: 40px;
129
+ line-height: 40px;
130
+ align-items: center;
131
+ width: 40px;
132
+ justify-content: center;
133
+ display: flex;
134
+ opacity: 0.8;
135
135
  }
136
136
 
137
137
  .sidesheet-header .sidesheet-header-btn:hover {
138
- opacity: 1;
138
+ opacity: 1;
139
139
  }
140
140
 
141
141
  .sidesheet-header .sidesheet-header-btn:focus {
142
- background-color: rgba(64, 64, 64, 0.12);
142
+ background-color: rgba(64, 64, 64, 0.12);
143
143
  }
144
144
 
145
145
  .sidesheet-header-close:hover {
146
- cursor: pointer;
146
+ cursor: pointer;
147
147
  }
148
148
 
149
149
  .sidesheet-header-title {
150
- font-size: 20px;
151
- font-weight: 400;
152
- align-items: center;
153
- display: flex;
154
- flex: 1 1 auto;
155
- overflow: hidden;
156
- text-overflow: ellipsis;
157
- white-space: nowrap;
158
- padding: 6px 0;
150
+ font-size: 20px;
151
+ font-weight: 400;
152
+ align-items: center;
153
+ display: flex;
154
+ flex: 1 1 auto;
155
+ overflow: hidden;
156
+ text-overflow: ellipsis;
157
+ white-space: nowrap;
158
+ padding: 6px 0;
159
159
  }
160
160
 
161
161
  .sidesheet-content.sidesheet-centered {
162
- margin: 0 auto;
163
- max-width: 768px;
164
- width: 100%;
162
+ margin: 0 auto;
163
+ max-width: 768px;
164
+ width: 100%;
165
165
  }
166
166
 
167
167
  .sidesheet-content {
168
- flex: 1 1 auto;
169
- overflow-y: auto;
170
- position: relative;
168
+ flex: 1 1 auto;
169
+ overflow-y: auto;
170
+ position: relative;
171
171
  }
172
172
 
173
173
  .sidesheet-content.sidesheet-padding {
174
- padding: 24px;
174
+ padding: 24px;
175
175
  }
176
176
 
177
177
  .sidesheet-card {
178
- background: #fff;
179
- border-radius: 8px;
180
- padding: 24px;
181
- box-shadow: 0 0 0 1px #dadce0;
178
+ background: #fff;
179
+ border-radius: 8px;
180
+ padding: 24px;
181
+ box-shadow: 0 0 0 1px #dadce0;
182
182
  }
183
183
 
184
184
  .sidesheet-footer {
185
- padding: 16px;
186
- border-top: 1px solid #dadce0;
187
- background: #fff;
188
- display: flex;
189
- justify-content: space-between;
190
- align-items: center;
185
+ padding: 16px;
186
+ border-top: 1px solid #dadce0;
187
+ background: #fff;
188
+ display: flex;
189
+ justify-content: space-between;
190
+ align-items: center;
191
191
  }
package/dist/index.d.ts CHANGED
@@ -41,7 +41,7 @@ declare const useSideSheet: () => SideSheetContextValue;
41
41
  declare const SideSheet: {
42
42
  Provider: import("react").FC<{
43
43
  children: import("react").ReactNode;
44
- configuration: Partial<SideSheetOptions>;
44
+ configuration?: Partial<SideSheetOptions> | undefined;
45
45
  }>;
46
46
  Header: import("react").FC<{
47
47
  title: string;
package/dist/index.esm.d.ts CHANGED
@@ -41,7 +41,7 @@ declare const useSideSheet: () => SideSheetContextValue;
41
41
  declare const SideSheet: {
42
42
  Provider: import("react").FC<{
43
43
  children: import("react").ReactNode;
44
- configuration: Partial<SideSheetOptions>;
44
+ configuration?: Partial<SideSheetOptions> | undefined;
45
45
  }>;
46
46
  Header: import("react").FC<{
47
47
  title: string;