react-restyle-components 0.2.34 → 0.2.36

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.
package/README.md CHANGED
@@ -9,6 +9,10 @@ yarn add react-restyle-components
9
9
 
10
10
  ```
11
11
 
12
+ ## IMP : Please use before 0.2.34 version.
13
+
14
+ Currently WIP
15
+
12
16
  ### 📚 Storybook
13
17
 
14
18
  https://appasaheb4.github.io/react-restyle-components
package/lib/index.d.ts CHANGED
@@ -1,2 +1 @@
1
- import './tc.css';
2
1
  export * from './src/core-components';
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import './tc.css';
1
+ // import './tc.css';
2
2
  export * from './src/core-components';
package/lib/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.33",
3
+ "version": "0.2.35",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {
package/lib/src/App.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import React, { useState } from 'react';
2
2
  import './App.css';
3
- import { Tab, Tabs, Button, } from './core-components';
3
+ import { Tab, Tabs } from './core-components';
4
4
  function App() {
5
5
  const [color, setColor] = useState('#aabbcc');
6
6
  return (React.createElement("div", { className: "flex flex-col gap-4 p-4" },
7
- React.createElement(Button, null, "Title"),
8
7
  React.createElement(Tabs, { options: [{ title: 'Work History' }, { title: 'Book Order' }] },
9
8
  React.createElement(Tab, { title: "Work History" },
10
9
  React.createElement("div", null, "Work")),
@@ -24,14 +24,14 @@ declare const meta: {
24
24
  formNoValidate?: boolean | undefined;
25
25
  formTarget?: string | undefined;
26
26
  name?: string | undefined;
27
- type?: "button" | "reset" | "submit" | undefined;
27
+ type?: "button" | "submit" | "reset" | undefined;
28
28
  value?: string | number | readonly string[] | undefined;
29
29
  defaultChecked?: boolean | undefined;
30
30
  defaultValue?: string | number | readonly string[] | undefined;
31
31
  suppressContentEditableWarning?: boolean | undefined;
32
32
  suppressHydrationWarning?: boolean | undefined;
33
33
  accessKey?: string | undefined;
34
- autoCapitalize?: (string & {}) | "off" | "on" | "none" | "sentences" | "words" | "characters" | undefined;
34
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
35
35
  autoFocus?: boolean | undefined;
36
36
  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
37
37
  contextMenu?: string | undefined;
@@ -72,7 +72,7 @@ declare const meta: {
72
72
  results?: number | undefined;
73
73
  security?: string | undefined;
74
74
  unselectable?: "off" | "on" | undefined;
75
- inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
75
+ inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
76
76
  is?: string | undefined;
77
77
  "aria-activedescendant"?: string | undefined;
78
78
  "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -86,7 +86,7 @@ declare const meta: {
86
86
  "aria-colindextext"?: string | undefined;
87
87
  "aria-colspan"?: number | undefined;
88
88
  "aria-controls"?: string | undefined;
89
- "aria-current"?: boolean | "time" | "date" | "true" | "false" | "page" | "step" | "location" | undefined;
89
+ "aria-current"?: boolean | "time" | "true" | "false" | "date" | "page" | "step" | "location" | undefined;
90
90
  "aria-describedby"?: string | undefined;
91
91
  "aria-description"?: string | undefined;
92
92
  "aria-details"?: string | undefined;
@@ -1,6 +1,6 @@
1
1
  import React, { Suspense } from 'react';
2
2
  import _ from 'lodash';
3
- import { Tooltip } from '../..';
3
+ import { Tooltip } from '../tooltip/tooltip.component';
4
4
  import loadable from '@loadable/component';
5
5
  import '../../../tc.css';
6
6
  let lib = 'md';
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import '../../../tc.css';
3
2
  interface TabProps {
4
3
  title: string;
5
4
  children: React.JSX.Element;
@@ -1,20 +1,20 @@
1
1
  import React, { useState } from 'react';
2
- import '../../../tc.css';
2
+ import s from './tabs.module.css';
3
3
  import { cn } from '../../../core-utils';
4
4
  export const Tab = ({ title, children }) => {
5
- return (React.createElement("div", { className: "flex", key: title }, children));
5
+ return (React.createElement("div", { className: cn(s.flex), key: title }, children));
6
6
  };
7
7
  export const Tabs = ({ options, children }) => {
8
8
  const [activeTab, setActiveTab] = useState(0);
9
9
  const [selected, setSelected] = useState(options[0].title);
10
10
  const tabs = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Tab);
11
11
  return (React.createElement(React.Fragment, null,
12
- React.createElement("div", { className: cn('flex flex-col w-full') },
13
- React.createElement("div", { className: "flex border-b" }, options?.map((tab, index) => (React.createElement("button", { type: "button", key: index, className: cn(`py-2 px-4 mr-1 border-none rounded-t-md shadow-inner cursor-pointer ${activeTab === index ? 'bg-blue-500 border-none text-white' : ''}`), onClick: () => {
12
+ React.createElement("div", { className: cn(s.flex, s['flex-col'], s['w-full']) },
13
+ React.createElement("div", { className: cn(s.flex, s['border-b']) }, options?.map((tab, index) => (React.createElement("button", { type: "button", key: index, className: cn(s['py-2'], s['px-4'], s['mr-1'], s['border-none'], s['rounded-t-md'], s['shadow-inner'], s['cursor-pointer'], activeTab === index && s['bg-blue-500'], activeTab === index && s['border-none'], activeTab === index && s['text-white']), onClick: () => {
14
14
  setSelected(tab?.title);
15
15
  !tab.inActive && setActiveTab(index);
16
16
  }, disabled: tab.inActive }, tab.title)))),
17
- React.createElement("div", { className: cn('p-2 border border-solid border-slate-600 rounded-b-md') }, options[activeTab]?.content
17
+ React.createElement("div", { className: cn(s['p-2'], s.border, s['border-solid'], s['border-slate-600'], s['rounded-b-md']) }, options[activeTab]?.content
18
18
  ? options[activeTab]?.content
19
19
  : tabs[options?.findIndex((item) => item.title === selected)]))));
20
20
  };
@@ -0,0 +1,238 @@
1
+ .flex {
2
+ display: flex;
3
+ }
4
+
5
+ .flex-col {
6
+ flex-direction: column;
7
+ }
8
+ .w-full {
9
+ width: 100%;
10
+ }
11
+ .border {
12
+ border-width: 1px;
13
+ }
14
+
15
+ .border-b {
16
+ border-bottom-width: 1px;
17
+ }
18
+
19
+ .border-t {
20
+ border-top-width: 1px;
21
+ }
22
+
23
+ .border-solid {
24
+ border-style: solid;
25
+ }
26
+
27
+ .border-none {
28
+ border-style: none;
29
+ }
30
+ .py-2 {
31
+ padding-top: 0.5rem;
32
+ padding-bottom: 0.5rem;
33
+ }
34
+
35
+ .pb-2 {
36
+ padding-bottom: 0.5rem;
37
+ }
38
+
39
+ .pt-1 {
40
+ padding-top: 0.25rem;
41
+ }
42
+
43
+ .pt-2 {
44
+ padding-top: 0.5rem;
45
+ }
46
+
47
+ .pt-3 {
48
+ padding-top: 0.75rem;
49
+ }
50
+
51
+ .text-center {
52
+ text-align: center;
53
+ }
54
+ .rounded {
55
+ border-radius: 0.25rem;
56
+ }
57
+
58
+ .rounded-100px {
59
+ border-radius: 100px;
60
+ }
61
+
62
+ .rounded-full {
63
+ border-radius: 9999px;
64
+ }
65
+
66
+ .rounded-lg {
67
+ border-radius: 0.5rem;
68
+ }
69
+
70
+ .rounded-md {
71
+ border-radius: 0.375rem;
72
+ }
73
+
74
+ .rounded-none {
75
+ border-radius: 0px;
76
+ }
77
+
78
+ .rounded-sm {
79
+ border-radius: 0.125rem;
80
+ }
81
+
82
+ .rounded-b {
83
+ border-bottom-right-radius: 0.25rem;
84
+ border-bottom-left-radius: 0.25rem;
85
+ }
86
+
87
+ .rounded-b-md {
88
+ border-bottom-right-radius: 0.375rem;
89
+ border-bottom-left-radius: 0.375rem;
90
+ }
91
+
92
+ .rounded-t {
93
+ border-top-left-radius: 0.25rem;
94
+ border-top-right-radius: 0.25rem;
95
+ }
96
+
97
+ .rounded-t-md {
98
+ border-top-left-radius: 0.375rem;
99
+ border-top-right-radius: 0.375rem;
100
+ }
101
+
102
+ .border {
103
+ border-width: 1px;
104
+ }
105
+
106
+ .border-b {
107
+ border-bottom-width: 1px;
108
+ }
109
+
110
+ .border-t {
111
+ border-top-width: 1px;
112
+ }
113
+
114
+ .border-solid {
115
+ border-style: solid;
116
+ }
117
+
118
+ .border-none {
119
+ border-style: none;
120
+ }
121
+ .bg-blue-500 {
122
+ --tw-bg-opacity: 1;
123
+ background-color: rgb(59 130 246 / var(--tw-bg-opacity));
124
+ }
125
+ .cursor-pointer {
126
+ cursor: pointer;
127
+ }
128
+ .text-white {
129
+ --tw-text-opacity: 1;
130
+ color: rgb(255 255 255 / var(--tw-text-opacity));
131
+ }
132
+ .border-solid {
133
+ border-style: solid;
134
+ }
135
+ .border-slate-600 {
136
+ --tw-border-opacity: 1;
137
+ border-color: rgb(71 85 105 / var(--tw-border-opacity));
138
+ }
139
+ .rounded-b-md {
140
+ border-bottom-right-radius: 0.375rem;
141
+ border-bottom-left-radius: 0.375rem;
142
+ }
143
+ .p-1 {
144
+ padding: 0.25rem;
145
+ }
146
+
147
+ .p-2 {
148
+ padding: 0.5rem;
149
+ }
150
+
151
+ .p-4 {
152
+ padding: 1rem;
153
+ }
154
+
155
+ .px-0 {
156
+ padding-left: 0px;
157
+ padding-right: 0px;
158
+ }
159
+
160
+ .px-2 {
161
+ padding-left: 0.5rem;
162
+ padding-right: 0.5rem;
163
+ }
164
+
165
+ .px-3 {
166
+ padding-left: 0.75rem;
167
+ padding-right: 0.75rem;
168
+ }
169
+
170
+ .px-4 {
171
+ padding-left: 1rem;
172
+ padding-right: 1rem;
173
+ }
174
+
175
+ .py-1 {
176
+ padding-top: 0.25rem;
177
+ padding-bottom: 0.25rem;
178
+ }
179
+
180
+ .py-2 {
181
+ padding-top: 0.5rem;
182
+ padding-bottom: 0.5rem;
183
+ }
184
+
185
+ .pb-2 {
186
+ padding-bottom: 0.5rem;
187
+ }
188
+
189
+ .pt-1 {
190
+ padding-top: 0.25rem;
191
+ }
192
+
193
+ .pt-2 {
194
+ padding-top: 0.5rem;
195
+ }
196
+
197
+ .pt-3 {
198
+ padding-top: 0.75rem;
199
+ }
200
+ .ml-1 {
201
+ margin-left: 0.25rem;
202
+ }
203
+
204
+ .ml-2 {
205
+ margin-left: 0.5rem;
206
+ }
207
+
208
+ .ml-4 {
209
+ margin-left: 1rem;
210
+ }
211
+
212
+ .ml-6 {
213
+ margin-left: 1.5rem;
214
+ }
215
+
216
+ .mr-1 {
217
+ margin-right: 0.25rem;
218
+ }
219
+
220
+ .mr-2 {
221
+ margin-right: 0.5rem;
222
+ }
223
+
224
+ .mr-3 {
225
+ margin-right: 0.75rem;
226
+ }
227
+
228
+ .mt-0 {
229
+ margin-top: 0px;
230
+ }
231
+
232
+ .mt-1 {
233
+ margin-top: 0.25rem;
234
+ }
235
+
236
+ .mt-4 {
237
+ margin-top: 1rem;
238
+ }
@@ -1,34 +1 @@
1
- import '../tc.css';
2
- import * as Form from './atoms/form/form.component';
3
- export * from './atoms/button/button.component';
4
- export * from './atoms/button/buttonGroup/buttonGroup.component';
5
- export * from './atoms/check-box/checkBox.component';
6
- export * from './atoms/date-picker/date-picker.component';
7
- export * from './atoms/input/input-otp.component';
8
- export * from './atoms/input/input-pin.component';
9
- export * from './atoms/input/input.component';
10
- export * from './atoms/input-dropdown/input-dropdown.component';
11
- export * from './atoms/loader/loader.component';
12
- export * from './atoms/radio/radio.component';
13
- export * from './atoms/stepper/stepper.component';
14
- export * from './atoms/timer/timer.component';
15
- export * from './atoms/tooltip/tooltip.component';
16
- export * from './atoms/icons/icons.component';
17
1
  export * from './atoms/tabs/tabs.component';
18
- export * from './atoms/grid/grid.component';
19
- export * from './atoms/list/list.component';
20
- export * from './atoms/pdf/pdf-images.components';
21
- export * from './atoms/pdf/pdf-table.components';
22
- export * from './atoms/pdf/pdf-typography.components';
23
- export * from './atoms/pdf/pdf-wrapped-view.components';
24
- export * from './molecules/css-multiline-input/css-multiline-input.component';
25
- export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
26
- export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
27
- export * from './molecules/multi-select/multi-select.component';
28
- export * from './molecules/multi-select-with-field/multi-select-with-field.component';
29
- export * from './molecules/modal-confirm/modal-confirm.component';
30
- export * from './molecules/autocomplete/autocomplete';
31
- export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
32
- export * from './molecules/color-picker/color-picker.component';
33
- export * from './molecules/color-picker-modal/color-picker-modal.component';
34
- export { Form };
@@ -1,34 +1,33 @@
1
- import '../tc.css';
2
- import * as Form from './atoms/form/form.component';
3
- export * from './atoms/button/button.component';
4
- export * from './atoms/button/buttonGroup/buttonGroup.component';
5
- export * from './atoms/check-box/checkBox.component';
6
- export * from './atoms/date-picker/date-picker.component';
7
- export * from './atoms/input/input-otp.component';
8
- export * from './atoms/input/input-pin.component';
9
- export * from './atoms/input/input.component';
10
- export * from './atoms/input-dropdown/input-dropdown.component';
11
- export * from './atoms/loader/loader.component';
12
- export * from './atoms/radio/radio.component';
13
- export * from './atoms/stepper/stepper.component';
14
- export * from './atoms/timer/timer.component';
15
- export * from './atoms/tooltip/tooltip.component';
16
- export * from './atoms/icons/icons.component';
1
+ // import * as Form from './atoms/form/form.component';
2
+ // export * from './atoms/button/button.component';
3
+ // export * from './atoms/button/buttonGroup/buttonGroup.component';
4
+ // export * from './atoms/check-box/checkBox.component';
5
+ // export * from './atoms/date-picker/date-picker.component';
6
+ // export * from './atoms/input/input-otp.component';
7
+ // export * from './atoms/input/input-pin.component';
8
+ // export * from './atoms/input/input.component';
9
+ // export * from './atoms/input-dropdown/input-dropdown.component';
10
+ // export * from './atoms/loader/loader.component';
11
+ // export * from './atoms/radio/radio.component';
12
+ // export * from './atoms/stepper/stepper.component';
13
+ // export * from './atoms/timer/timer.component';
14
+ // export * from './atoms/tooltip/tooltip.component';
15
+ // export * from './atoms/icons/icons.component';
17
16
  export * from './atoms/tabs/tabs.component';
18
- export * from './atoms/grid/grid.component';
19
- export * from './atoms/list/list.component';
20
- export * from './atoms/pdf/pdf-images.components';
21
- export * from './atoms/pdf/pdf-table.components';
22
- export * from './atoms/pdf/pdf-typography.components';
23
- export * from './atoms/pdf/pdf-wrapped-view.components';
24
- export * from './molecules/css-multiline-input/css-multiline-input.component';
25
- export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
26
- export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
27
- export * from './molecules/multi-select/multi-select.component';
28
- export * from './molecules/multi-select-with-field/multi-select-with-field.component';
29
- export * from './molecules/modal-confirm/modal-confirm.component';
30
- export * from './molecules/autocomplete/autocomplete';
31
- export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
32
- export * from './molecules/color-picker/color-picker.component';
33
- export * from './molecules/color-picker-modal/color-picker-modal.component';
34
- export { Form };
17
+ // export * from './atoms/grid/grid.component';
18
+ // export * from './atoms/list/list.component';
19
+ // export * from './atoms/pdf/pdf-images.components';
20
+ // export * from './atoms/pdf/pdf-table.components';
21
+ // export * from './atoms/pdf/pdf-typography.components';
22
+ // export * from './atoms/pdf/pdf-wrapped-view.components';
23
+ // export * from './molecules/css-multiline-input/css-multiline-input.component';
24
+ // export * from './molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component';
25
+ // export * from './molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component';
26
+ // export * from './molecules/multi-select/multi-select.component';
27
+ // export * from './molecules/multi-select-with-field/multi-select-with-field.component';
28
+ // export * from './molecules/modal-confirm/modal-confirm.component';
29
+ // export * from './molecules/autocomplete/autocomplete';
30
+ // export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
31
+ // export * from './molecules/color-picker/color-picker.component';
32
+ // export * from './molecules/color-picker-modal/color-picker-modal.component';
33
+ // export {Form};
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable */
2
2
  import React, { useState, useEffect, useRef } from 'react';
3
- import { Icon } from '../..';
3
+ import { Icon } from '../../atoms/icons/icons.component';
4
4
  import '../../../tc.css';
5
5
  export const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', isSelectedStringArray = false, loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, }) => {
6
6
  const [value, setValue] = useState('');
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable */
2
2
  import React, { useState, useEffect, useRef } from 'react';
3
- import { Icon } from '../..';
3
+ import { Icon } from '../../atoms/icons/icons.component';
4
4
  import '../../../tc.css';
5
5
  export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', onFilter, onSelect, onBlur, }) => {
6
6
  const [value, setValue] = useState(displayValue);
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable */
2
2
  import React, { useState, useEffect, useRef } from 'react';
3
- import { Icon } from '../..';
3
+ import { Icon } from '../../atoms/icons/icons.component';
4
4
  // import PerfectScrollbar from 'react-perfect-scrollbar';
5
5
  import '../../../tc.css';
6
6
  export const AutocompleteGroupBy = (props) => {
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useState, useRef } from 'react';
2
- import { Form } from '../..';
2
+ import * as Form from '../../atoms/form/form.component';
3
3
  import { properties as propertiesObj } from './css-properties';
4
4
  import '../../../tc.css';
5
5
  const mapToArray = (arr) => {
@@ -1 +1,2 @@
1
1
  export declare const cn: (...inputs: any[]) => string;
2
+ export declare const classNames: (styles: any, classes: string[]) => string;
@@ -3,3 +3,6 @@ import { twMerge } from 'tailwind-merge';
3
3
  export const cn = (...inputs) => {
4
4
  return twMerge(clsx(inputs));
5
5
  };
6
+ export const classNames = (styles, classes) => {
7
+ return classes.map((className) => styles[className]).join(' ');
8
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.2.34",
3
+ "version": "0.2.36",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "author": {