@tecsinapse/react-core 1.17.2 → 1.18.0
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/CHANGELOG.md +36 -0
- package/dist/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/components/molecules/Grid/functions.d.ts +3 -0
- package/dist/components/molecules/Grid/functions.js +21 -0
- package/dist/components/molecules/Grid/functions.js.map +1 -0
- package/dist/components/molecules/Grid/index.d.ts +42 -2
- package/dist/components/molecules/Grid/index.js +6 -13
- package/dist/components/molecules/Grid/index.js.map +1 -1
- package/dist/components/molecules/IconTextButton/IconComponent.d.ts +9 -0
- package/dist/components/molecules/IconTextButton/IconComponent.js +28 -0
- package/dist/components/molecules/IconTextButton/IconComponent.js.map +1 -0
- package/dist/components/molecules/IconTextButton/IconTextButton.d.ts +10 -0
- package/dist/components/molecules/IconTextButton/IconTextButton.js +4 -0
- package/dist/components/molecules/IconTextButton/IconTextButton.js.map +1 -0
- package/dist/components/molecules/IconTextButton/index.d.ts +2 -0
- package/dist/components/molecules/IconTextButton/index.js +16 -0
- package/dist/components/molecules/IconTextButton/index.js.map +1 -0
- package/dist/components/molecules/IconTextButton/styled.d.ts +4 -0
- package/dist/components/molecules/{Grid/Item/index.js → IconTextButton/styled.js} +19 -5
- package/dist/components/molecules/IconTextButton/styled.js.map +1 -0
- package/dist/components/molecules/LabeledSwitch/LabeledSwitch.d.ts +7 -0
- package/dist/components/molecules/LabeledSwitch/LabeledSwitch.js +4 -0
- package/dist/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -0
- package/dist/components/molecules/LabeledSwitch/index.d.ts +1 -0
- package/dist/components/molecules/LabeledSwitch/index.js +10 -0
- package/dist/components/molecules/LabeledSwitch/index.js.map +1 -0
- package/dist/hooks/useDebouncedState.js +1 -1
- package/dist/hooks/useDebouncedState.js.map +1 -1
- package/dist/index.d.ts +7 -5
- package/dist/index.js +44 -30
- package/dist/index.js.map +1 -1
- package/dist/styles/definitions.d.ts +2 -1
- package/dist/styles/definitions.js +7 -1
- package/dist/styles/definitions.js.map +1 -1
- package/dist/styles/light.js +2 -1
- package/dist/styles/light.js.map +1 -1
- package/dist/types/defaults.d.ts +8 -2
- package/dist/utils/index.d.ts +5 -4
- package/dist/utils/index.js +28 -19
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/variantComplement.d.ts +6 -0
- package/dist/utils/variantComplement.js +35 -0
- package/dist/utils/variantComplement.js.map +1 -0
- package/package.json +5 -5
- package/src/components/atoms/Switch/Switch.tsx +38 -18
- package/src/components/molecules/Grid/functions.ts +29 -0
- package/src/components/molecules/Grid/index.ts +66 -2
- package/src/components/molecules/IconTextButton/IconComponent.tsx +31 -0
- package/src/components/molecules/IconTextButton/IconTextButton.tsx +12 -0
- package/src/components/molecules/IconTextButton/index.ts +2 -0
- package/src/components/molecules/IconTextButton/styled.ts +20 -0
- package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx +9 -0
- package/src/components/molecules/LabeledSwitch/index.ts +1 -0
- package/src/hooks/useDebouncedState.ts +1 -1
- package/src/index.ts +15 -6
- package/src/styles/definitions.ts +8 -1
- package/src/styles/light.ts +2 -0
- package/src/types/defaults.ts +11 -1
- package/src/utils/index.ts +5 -4
- package/src/utils/variantComplement.ts +36 -0
- package/dist/components/molecules/Grid/Grid.d.ts +0 -15
- package/dist/components/molecules/Grid/Grid.js +0 -55
- package/dist/components/molecules/Grid/Grid.js.map +0 -1
- package/dist/components/molecules/Grid/Item/Item.d.ts +0 -30
- package/dist/components/molecules/Grid/Item/Item.js +0 -68
- package/dist/components/molecules/Grid/Item/Item.js.map +0 -1
- package/dist/components/molecules/Grid/Item/index.d.ts +0 -1
- package/dist/components/molecules/Grid/Item/index.js.map +0 -1
- package/src/components/molecules/Grid/Grid.stories.tsx +0 -132
- package/src/components/molecules/Grid/Grid.tsx +0 -87
- package/src/components/molecules/Grid/Item/Item.tsx +0 -93
- package/src/components/molecules/Grid/Item/index.ts +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
-
exports.zIndex = exports.fontColor = exports.fontFiles = exports.fontWeight = exports.fontStack = exports.typography = exports.borderWidth = exports.borderRadius = exports.iconSize = exports.spacing = exports.miscellaneous = exports.hex2rgba = exports.statusColor = void 0;
|
|
4
|
+
exports.breakpoints = exports.zIndex = exports.fontColor = exports.fontFiles = exports.fontWeight = exports.fontStack = exports.typography = exports.borderWidth = exports.borderRadius = exports.iconSize = exports.spacing = exports.miscellaneous = exports.hex2rgba = exports.statusColor = void 0;
|
|
5
5
|
|
|
6
6
|
var _utils = require("../utils");
|
|
7
7
|
|
|
@@ -160,4 +160,10 @@ const zIndex = {
|
|
|
160
160
|
modal: 1000
|
|
161
161
|
};
|
|
162
162
|
exports.zIndex = zIndex;
|
|
163
|
+
const breakpoints = {
|
|
164
|
+
sm: 480,
|
|
165
|
+
md: 768,
|
|
166
|
+
lg: 1366
|
|
167
|
+
};
|
|
168
|
+
exports.breakpoints = breakpoints;
|
|
163
169
|
//# sourceMappingURL=definitions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/styles/definitions.ts"],"names":["statusColor","error","xlight","light","medium","dark","xdark","warning","success","info","hex2rgba","hex","alpha","r","g","b","match","map","x","parseInt","miscellaneous","shadow","overlay","bodyColor","surfaceColor","spacing","nano","micro","mili","centi","deca","kilo","mega","giga","tera","peta","hexa","iconSize","borderRadius","pill","borderWidth","pico","typography","h5","fontSize","lineHeight","h4","h3","h2","h1","base","sub","label","fontStack","default","mono","fontWeight","regular","bold","black","fontFiles","fontColor","orange","zIndex","absolute","select","input","popover","tooltip","header","backdrop","drawer","sidebar","modal"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../src/styles/definitions.ts"],"names":["statusColor","error","xlight","light","medium","dark","xdark","warning","success","info","hex2rgba","hex","alpha","r","g","b","match","map","x","parseInt","miscellaneous","shadow","overlay","bodyColor","surfaceColor","spacing","nano","micro","mili","centi","deca","kilo","mega","giga","tera","peta","hexa","iconSize","borderRadius","pill","borderWidth","pico","typography","h5","fontSize","lineHeight","h4","h3","h2","h1","base","sub","label","fontStack","default","mono","fontWeight","regular","bold","black","fontFiles","fontColor","orange","zIndex","absolute","select","input","popover","tooltip","header","backdrop","drawer","sidebar","modal","breakpoints","sm","md","lg"],"mappings":"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","sourcesContent":["import {\n BorderRadius,\n BorderWidth,\n Breakpoints,\n FontColor,\n FontStack,\n FontWeight,\n IconSize,\n Miscellaneous,\n Spacing,\n TypographyVariation,\n ZIndex,\n} from '../types/defaults';\nimport { RFValueStr } from '../utils';\n\nexport const statusColor = {\n error: {\n xlight: '#fdf3f2',\n light: '#ee9891',\n medium: '#e04638',\n dark: '#9b2318',\n xdark: '#58240e',\n },\n warning: {\n xlight: '#fffcf0',\n light: '#ffe380',\n medium: '#ffc700',\n dark: '#cc9f00',\n xdark: '#665000',\n },\n success: {\n xlight: '#f3fcf8',\n light: '#99e6c9',\n medium: '#2db783',\n dark: '#238f67',\n xdark: '#14523b',\n },\n info: {\n xlight: '#f0f8fe',\n light: '#85c7fa',\n medium: '#239bf6',\n dark: '#0873c4',\n xdark: '#043962',\n },\n};\n\nexport const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {\n const [r, g, b] = hex.match(/\\w\\w/g).map(x => parseInt(x, 16));\n return `rgba(${r},${g},${b},${alpha})`;\n};\n\nexport const miscellaneous: Miscellaneous = {\n shadow: '#000000', // black\n overlay: '#282625', // rgba(40, 38, 37, 0.5)\n bodyColor: '#f8f7f7',\n surfaceColor: '#ffffff', //input, group button, cards\n};\n\nexport const spacing: Spacing = {\n nano: RFValueStr('2px'),\n micro: RFValueStr('4px'),\n mili: RFValueStr('8px'),\n centi: RFValueStr('12px'),\n deca: RFValueStr('16px'),\n kilo: RFValueStr('24px'),\n mega: RFValueStr('32px'),\n giga: RFValueStr('40px'),\n tera: RFValueStr('48px'),\n peta: RFValueStr('56px'),\n hexa: RFValueStr('64px'),\n};\n\nexport const iconSize: IconSize = {\n micro: RFValueStr('12px'),\n mili: RFValueStr('14px'),\n centi: RFValueStr('16px'), // '1rem'\n deca: RFValueStr('18px'), // '1.5rem'\n kilo: RFValueStr('24px'), // '1.6rem'\n mega: RFValueStr('32px'), // '2rem'\n};\n\nexport const borderRadius: BorderRadius = {\n nano: RFValueStr('2px'),\n micro: RFValueStr('4px'),\n mili: RFValueStr('8px'),\n centi: RFValueStr('16px'),\n deca: RFValueStr('24px'),\n pill: RFValueStr('999999px'), // also circle\n};\n\nexport const borderWidth: BorderWidth = {\n pico: RFValueStr('1px'),\n nano: RFValueStr('2px'),\n};\n\nexport const typography: TypographyVariation = {\n h5: {\n fontSize: RFValueStr('16px'), // '1rem'\n lineHeight: RFValueStr('24px'), // '1.5rem'\n },\n h4: {\n fontSize: RFValueStr('18px'), // '1.125rem'\n lineHeight: RFValueStr('27px'), // '1.688rem'\n },\n h3: {\n fontSize: RFValueStr('20px'), // '1.25rem'\n lineHeight: RFValueStr('32px'), // '2rem'\n },\n h2: {\n fontSize: RFValueStr('26px'), // '1.625rem'\n lineHeight: RFValueStr('38px'), // '2.375rem'\n },\n h1: {\n fontSize: RFValueStr('32px'), // '2rem'\n lineHeight: RFValueStr('42px'), // '2.625rem'\n },\n base: {\n fontSize: RFValueStr('14px'), // '0.875rem'\n lineHeight: RFValueStr('21px'), // '1.313rem'\n },\n sub: {\n fontSize: RFValueStr('12px'), // '0.75rem'\n lineHeight: RFValueStr('18px'), // '1.125rem'\n },\n label: {\n fontSize: RFValueStr('10px'),\n lineHeight: RFValueStr('12px'),\n },\n};\n\nexport const fontStack: FontStack = {\n default: 'Lato',\n mono: 'Consolas, monaco, monospace',\n};\n\nexport const fontWeight: FontWeight = {\n regular: '400',\n bold: '700',\n black: '900',\n};\n\nexport const fontFiles: FontWeight = {\n black: '{0}-Black',\n bold: '{0}-Bold',\n regular: '{0}-Regular',\n};\n\nexport const fontColor: FontColor = {\n light: '#fff',\n medium: '#85807a',\n dark: '#353231', // default\n orange: '#f89907',\n};\n\nexport const zIndex: ZIndex = {\n default: 0,\n absolute: 1,\n select: 20,\n input: 20,\n popover: 30,\n tooltip: 40,\n header: 600,\n backdrop: 700,\n drawer: 700,\n sidebar: 800,\n modal: 1000,\n};\n\nexport type IconType =\n | 'material'\n | 'material-community'\n | 'simple-line-icon'\n | 'zocial'\n | 'font-awesome'\n | 'octicon'\n | 'ionicon'\n | 'foundation'\n | 'evilicon'\n | 'entypo'\n | 'antdesign'\n | 'font-awesome-5'\n | string;\n\nexport const breakpoints: Breakpoints = {\n sm: 480,\n md: 768,\n lg: 1366,\n};\n"],"file":"definitions.js"}
|
package/dist/styles/light.js
CHANGED
|
@@ -39,7 +39,8 @@ const lightTheme = {
|
|
|
39
39
|
weight: _definitions.fontWeight,
|
|
40
40
|
files: _definitions.fontFiles
|
|
41
41
|
},
|
|
42
|
-
zIndex: _definitions.zIndex
|
|
42
|
+
zIndex: _definitions.zIndex,
|
|
43
|
+
breakpoints: _definitions.breakpoints
|
|
43
44
|
};
|
|
44
45
|
exports.lightTheme = lightTheme;
|
|
45
46
|
//# sourceMappingURL=light.js.map
|
package/dist/styles/light.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/styles/light.ts"],"names":["primaryGradation","xlight","light","medium","dark","xdark","secondaryGradation","lightTheme","color","primary","secondary","statusColor","miscellaneous","spacing","iconSize","borderRadius","borderWidth","typography","font","fontColor","stack","fontStack","weight","fontWeight","files","fontFiles","zIndex"],"mappings":";;;;;AACA;;
|
|
1
|
+
{"version":3,"sources":["../../src/styles/light.ts"],"names":["primaryGradation","xlight","light","medium","dark","xdark","secondaryGradation","lightTheme","color","primary","secondary","statusColor","miscellaneous","spacing","iconSize","borderRadius","borderWidth","typography","font","fontColor","stack","fontStack","weight","fontWeight","files","fontFiles","zIndex","breakpoints"],"mappings":";;;;;AACA;;AAgBA,MAAMA,gBAAgB,GAAG;AACvBC,EAAAA,MAAM,EAAE,SADe;AAEvBC,EAAAA,KAAK,EAAE,SAFgB;AAGvBC,EAAAA,MAAM,EAAE,SAHe;AAIvBC,EAAAA,IAAI,EAAE,SAJiB;AAKvBC,EAAAA,KAAK,EAAE;AALgB,CAAzB;AAQA,MAAMC,kBAAkB,GAAG;AACzBL,EAAAA,MAAM,EAAE,SADiB;AAEzBC,EAAAA,KAAK,EAAE,SAFkB;AAGzBC,EAAAA,MAAM,EAAE,SAHiB;AAIzBC,EAAAA,IAAI,EAAE,SAJmB;AAKzBC,EAAAA,KAAK,EAAE;AALkB,CAA3B;AAQO,MAAME,UAAqB,GAAG;AACnCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,EACP,GAAGT;AADI,KADJ;AAILU,IAAAA,SAAS,EAAE,EAAE,GAAGJ;AAAL,KAJN;AAKL,OAAGK;AALE,GAD4B;AAQnCC,EAAAA,aAAa,EAAbA,0BARmC;AASnCC,EAAAA,OAAO,EAAPA,oBATmC;AAUnCC,EAAAA,QAAQ,EAARA,qBAVmC;AAWnCC,EAAAA,YAAY,EAAZA,yBAXmC;AAYnCC,EAAAA,WAAW,EAAXA,wBAZmC;AAanCC,EAAAA,UAAU,EAAVA,uBAbmC;AAcnCC,EAAAA,IAAI,EAAE;AACJV,IAAAA,KAAK,EAAEW,sBADH;AAEJC,IAAAA,KAAK,EAAEC,sBAFH;AAGJC,IAAAA,MAAM,EAAEC,uBAHJ;AAIJC,IAAAA,KAAK,EAAEC;AAJH,GAd6B;AAoBnCC,EAAAA,MAAM,EAANA,mBApBmC;AAqBnCC,EAAAA,WAAW,EAAXA;AArBmC,CAA9B","sourcesContent":["import { ThemeProp } from '../types/defaults';\nimport {\n borderRadius,\n borderWidth,\n breakpoints,\n fontColor,\n fontFiles,\n fontStack,\n fontWeight,\n iconSize,\n miscellaneous,\n spacing,\n statusColor,\n typography,\n zIndex,\n} from './definitions';\n\nconst primaryGradation = {\n xlight: '#fef9f0',\n light: '#fccb83',\n medium: '#f89907',\n dark: '#ae6b05',\n xdark: '#633d03',\n};\n\nconst secondaryGradation = {\n xlight: '#f8f7f7',\n light: '#c2bfbc',\n medium: '#85807a',\n dark: '#5d5955',\n xdark: '#353231',\n};\n\nexport const lightTheme: ThemeProp = {\n color: {\n primary: {\n ...primaryGradation,\n },\n secondary: { ...secondaryGradation },\n ...statusColor,\n },\n miscellaneous,\n spacing,\n iconSize,\n borderRadius,\n borderWidth,\n typography,\n font: {\n color: fontColor,\n stack: fontStack,\n weight: fontWeight,\n files: fontFiles,\n },\n zIndex,\n breakpoints,\n};\n"],"file":"light.js"}
|
package/dist/types/defaults.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
export declare type Color = {
|
|
3
3
|
primary: ColorGradation;
|
|
4
4
|
secondary: ColorGradation;
|
|
@@ -95,6 +95,11 @@ export declare type FontWeight = {
|
|
|
95
95
|
bold: string;
|
|
96
96
|
black: string;
|
|
97
97
|
};
|
|
98
|
+
export declare type Breakpoints = {
|
|
99
|
+
sm: number;
|
|
100
|
+
md: number;
|
|
101
|
+
lg: number;
|
|
102
|
+
};
|
|
98
103
|
export declare type ThemeProp = {
|
|
99
104
|
color: Color;
|
|
100
105
|
miscellaneous: Miscellaneous;
|
|
@@ -110,9 +115,10 @@ export declare type ThemeProp = {
|
|
|
110
115
|
files: FontWeight;
|
|
111
116
|
};
|
|
112
117
|
zIndex: ZIndex;
|
|
118
|
+
breakpoints: Breakpoints;
|
|
113
119
|
};
|
|
114
120
|
export interface ThemeProviderProps {
|
|
115
|
-
children?:
|
|
121
|
+
children?: ReactNode;
|
|
116
122
|
theme: ThemeProp;
|
|
117
123
|
}
|
|
118
124
|
export declare type StyleProps = ThemeProviderProps;
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export
|
|
1
|
+
export { extractDigitsFromString, extractNumbersFromString, } from './extractNumbersFromString';
|
|
2
|
+
export * from './formatWithMask';
|
|
3
3
|
export * from './IPhoneXHelper';
|
|
4
|
-
export
|
|
4
|
+
export { lightenDarkenColor } from './lightenDarkenColor';
|
|
5
5
|
export * from './masks';
|
|
6
|
-
export * from './
|
|
6
|
+
export * from './ResponsiveFontSize';
|
|
7
|
+
export * from './variantComplement';
|
package/dist/utils/index.js
CHANGED
|
@@ -2,20 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
var _exportNames = {
|
|
5
|
-
|
|
5
|
+
extractDigitsFromString: true,
|
|
6
6
|
extractNumbersFromString: true,
|
|
7
|
-
|
|
7
|
+
lightenDarkenColor: true
|
|
8
8
|
};
|
|
9
|
-
exports.
|
|
10
|
-
|
|
11
|
-
var _lightenDarkenColor = require("./lightenDarkenColor");
|
|
12
|
-
|
|
13
|
-
exports.lightenDarkenColor = _lightenDarkenColor.lightenDarkenColor;
|
|
9
|
+
exports.lightenDarkenColor = exports.extractNumbersFromString = exports.extractDigitsFromString = void 0;
|
|
14
10
|
|
|
15
11
|
var _extractNumbersFromString = require("./extractNumbersFromString");
|
|
16
12
|
|
|
17
|
-
exports.extractNumbersFromString = _extractNumbersFromString.extractNumbersFromString;
|
|
18
13
|
exports.extractDigitsFromString = _extractNumbersFromString.extractDigitsFromString;
|
|
14
|
+
exports.extractNumbersFromString = _extractNumbersFromString.extractNumbersFromString;
|
|
15
|
+
|
|
16
|
+
var _formatWithMask = require("./formatWithMask");
|
|
17
|
+
|
|
18
|
+
Object.keys(_formatWithMask).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
+
if (key in exports && exports[key] === _formatWithMask[key]) return;
|
|
22
|
+
exports[key] = _formatWithMask[key];
|
|
23
|
+
});
|
|
19
24
|
|
|
20
25
|
var _IPhoneXHelper = require("./IPhoneXHelper");
|
|
21
26
|
|
|
@@ -26,14 +31,9 @@ Object.keys(_IPhoneXHelper).forEach(function (key) {
|
|
|
26
31
|
exports[key] = _IPhoneXHelper[key];
|
|
27
32
|
});
|
|
28
33
|
|
|
29
|
-
var
|
|
34
|
+
var _lightenDarkenColor = require("./lightenDarkenColor");
|
|
30
35
|
|
|
31
|
-
|
|
32
|
-
if (key === "default" || key === "__esModule") return;
|
|
33
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
34
|
-
if (key in exports && exports[key] === _ResponsiveFontSize[key]) return;
|
|
35
|
-
exports[key] = _ResponsiveFontSize[key];
|
|
36
|
-
});
|
|
36
|
+
exports.lightenDarkenColor = _lightenDarkenColor.lightenDarkenColor;
|
|
37
37
|
|
|
38
38
|
var _masks = require("./masks");
|
|
39
39
|
|
|
@@ -44,12 +44,21 @@ Object.keys(_masks).forEach(function (key) {
|
|
|
44
44
|
exports[key] = _masks[key];
|
|
45
45
|
});
|
|
46
46
|
|
|
47
|
-
var
|
|
47
|
+
var _ResponsiveFontSize = require("./ResponsiveFontSize");
|
|
48
48
|
|
|
49
|
-
Object.keys(
|
|
49
|
+
Object.keys(_ResponsiveFontSize).forEach(function (key) {
|
|
50
50
|
if (key === "default" || key === "__esModule") return;
|
|
51
51
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
52
|
-
if (key in exports && exports[key] ===
|
|
53
|
-
exports[key] =
|
|
52
|
+
if (key in exports && exports[key] === _ResponsiveFontSize[key]) return;
|
|
53
|
+
exports[key] = _ResponsiveFontSize[key];
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
var _variantComplement = require("./variantComplement");
|
|
57
|
+
|
|
58
|
+
Object.keys(_variantComplement).forEach(function (key) {
|
|
59
|
+
if (key === "default" || key === "__esModule") return;
|
|
60
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
61
|
+
if (key in exports && exports[key] === _variantComplement[key]) return;
|
|
62
|
+
exports[key] = _variantComplement[key];
|
|
54
63
|
});
|
|
55
64
|
//# sourceMappingURL=index.js.map
|
package/dist/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA
|
|
1
|
+
{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export {\n extractDigitsFromString,\n extractNumbersFromString,\n} from './extractNumbersFromString';\nexport * from './formatWithMask';\nexport * from './IPhoneXHelper';\nexport { lightenDarkenColor } from './lightenDarkenColor';\nexport * from './masks';\nexport * from './ResponsiveFontSize';\nexport * from './variantComplement';\n"],"file":"index.js"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ColorGradationType, ColorType, FontColorType, VariantType } from '../types/defaults';
|
|
2
|
+
export declare const fontColorVC: Record<VariantType, FontColorType>;
|
|
3
|
+
export declare const colorVC: Record<VariantType, ColorType>;
|
|
4
|
+
export declare const colorGradationVC: Record<VariantType, ColorGradationType>;
|
|
5
|
+
export declare const borderColorVC: Record<VariantType, ColorType>;
|
|
6
|
+
export declare const borderColorGradationVC: Record<VariantType, ColorGradationType>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.borderColorGradationVC = exports.borderColorVC = exports.colorGradationVC = exports.colorVC = exports.fontColorVC = void 0;
|
|
5
|
+
const fontColorVC = {
|
|
6
|
+
filled: 'light',
|
|
7
|
+
outlined: 'orange',
|
|
8
|
+
text: 'orange'
|
|
9
|
+
};
|
|
10
|
+
exports.fontColorVC = fontColorVC;
|
|
11
|
+
const colorVC = {
|
|
12
|
+
filled: 'primary',
|
|
13
|
+
outlined: 'primary',
|
|
14
|
+
text: 'primary'
|
|
15
|
+
};
|
|
16
|
+
exports.colorVC = colorVC;
|
|
17
|
+
const colorGradationVC = {
|
|
18
|
+
filled: 'dark',
|
|
19
|
+
outlined: 'dark',
|
|
20
|
+
text: 'dark'
|
|
21
|
+
};
|
|
22
|
+
exports.colorGradationVC = colorGradationVC;
|
|
23
|
+
const borderColorVC = {
|
|
24
|
+
filled: 'primary',
|
|
25
|
+
outlined: 'primary',
|
|
26
|
+
text: 'primary'
|
|
27
|
+
};
|
|
28
|
+
exports.borderColorVC = borderColorVC;
|
|
29
|
+
const borderColorGradationVC = {
|
|
30
|
+
filled: 'dark',
|
|
31
|
+
outlined: 'dark',
|
|
32
|
+
text: 'dark'
|
|
33
|
+
};
|
|
34
|
+
exports.borderColorGradationVC = borderColorGradationVC;
|
|
35
|
+
//# sourceMappingURL=variantComplement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/variantComplement.ts"],"names":["fontColorVC","filled","outlined","text","colorVC","colorGradationVC","borderColorVC","borderColorGradationVC"],"mappings":";;;;AAOO,MAAMA,WAA+C,GAAG;AAC7DC,EAAAA,MAAM,EAAE,OADqD;AAE7DC,EAAAA,QAAQ,EAAE,QAFmD;AAG7DC,EAAAA,IAAI,EAAE;AAHuD,CAAxD;;AAMA,MAAMC,OAAuC,GAAG;AACrDH,EAAAA,MAAM,EAAE,SAD6C;AAErDC,EAAAA,QAAQ,EAAE,SAF2C;AAGrDC,EAAAA,IAAI,EAAE;AAH+C,CAAhD;;AAMA,MAAME,gBAAyD,GAAG;AACvEJ,EAAAA,MAAM,EAAE,MAD+D;AAEvEC,EAAAA,QAAQ,EAAE,MAF6D;AAGvEC,EAAAA,IAAI,EAAE;AAHiE,CAAlE;;AAMA,MAAMG,aAA6C,GAAG;AAC3DL,EAAAA,MAAM,EAAE,SADmD;AAE3DC,EAAAA,QAAQ,EAAE,SAFiD;AAG3DC,EAAAA,IAAI,EAAE;AAHqD,CAAtD;;AAMA,MAAMI,sBAA+D,GAAG;AAC7EN,EAAAA,MAAM,EAAE,MADqE;AAE7EC,EAAAA,QAAQ,EAAE,MAFmE;AAG7EC,EAAAA,IAAI,EAAE;AAHuE,CAAxE","sourcesContent":["import {\n ColorGradationType,\n ColorType,\n FontColorType,\n VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n filled: 'light',\n outlined: 'orange',\n text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n filled: 'primary',\n outlined: 'primary',\n text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n filled: 'dark',\n outlined: 'dark',\n text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n filled: 'primary',\n outlined: 'primary',\n text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n filled: 'dark',\n outlined: 'dark',\n text: 'dark',\n};\n"],"file":"variantComplement.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-core",
|
|
3
3
|
"description": "TecSinapse hybrid React components",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.18.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"yalc:show": "yalc installations show $npm_package_name"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@emotion/native": "^11.
|
|
18
|
-
"@emotion/react": "^11.
|
|
17
|
+
"@emotion/native": "^11.10.0",
|
|
18
|
+
"@emotion/react": "^11.10.0",
|
|
19
19
|
"currency.js": "^2.0.4",
|
|
20
|
-
"date-fns": "^2.
|
|
20
|
+
"date-fns": "^2.29.1"
|
|
21
21
|
},
|
|
22
22
|
"repository": {
|
|
23
23
|
"type": "git",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"react-native": "^0.64.0",
|
|
35
35
|
"react-native-vector-icons": "^8.1.0 || ^9.0.0"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "7014df32d2de88a1f42259b56599d7fc10d794a9"
|
|
38
38
|
}
|
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import { useTheme } from '@emotion/react';
|
|
2
2
|
import React, { FC, useCallback, useEffect } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
Animated,
|
|
5
|
+
LayoutChangeEvent,
|
|
6
|
+
StyleProp,
|
|
7
|
+
ViewStyle,
|
|
8
|
+
} from 'react-native';
|
|
4
9
|
import {
|
|
5
10
|
ColorGradationType,
|
|
6
11
|
ColorType,
|
|
7
|
-
ThemeProp
|
|
12
|
+
ThemeProp,
|
|
8
13
|
} from '../../../types/defaults';
|
|
9
|
-
import {
|
|
14
|
+
import {
|
|
15
|
+
extractNumbersFromString,
|
|
16
|
+
lightenDarkenColor,
|
|
17
|
+
RFValueStr,
|
|
18
|
+
} from '../../../utils';
|
|
10
19
|
import { PressableSurface } from '../PressableSurface';
|
|
11
20
|
import { transitionSwitch } from './animation';
|
|
12
21
|
import { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';
|
|
@@ -36,19 +45,25 @@ const Switch: FC<SwitchProps> = ({
|
|
|
36
45
|
}): JSX.Element => {
|
|
37
46
|
const theme = useTheme() as ThemeProp;
|
|
38
47
|
|
|
39
|
-
const width = React.useRef(0)
|
|
40
|
-
const transitionValue = React.useRef(new Animated.Value(0)).current
|
|
41
|
-
const animatedColor = React.useRef(new Animated.Value(0)).current
|
|
42
|
-
|
|
48
|
+
const width = React.useRef(0);
|
|
49
|
+
const transitionValue = React.useRef(new Animated.Value(0)).current;
|
|
50
|
+
const animatedColor = React.useRef(new Animated.Value(0)).current;
|
|
51
|
+
|
|
43
52
|
const calculateTranslate = () => {
|
|
44
53
|
if (width.current > 0) {
|
|
45
|
-
return
|
|
54
|
+
return (
|
|
55
|
+
width.current -
|
|
56
|
+
extractNumbersFromString(theme.spacing.micro) * 2 -
|
|
57
|
+
extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH))
|
|
58
|
+
);
|
|
46
59
|
}
|
|
47
|
-
return 0
|
|
48
|
-
}
|
|
60
|
+
return 0;
|
|
61
|
+
};
|
|
49
62
|
|
|
50
63
|
const getBackgroundColor = (color: string) => {
|
|
51
|
-
return disabled
|
|
64
|
+
return disabled
|
|
65
|
+
? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)
|
|
66
|
+
: color;
|
|
52
67
|
};
|
|
53
68
|
|
|
54
69
|
const interpolateColor = animatedColor.interpolate({
|
|
@@ -56,11 +71,11 @@ const Switch: FC<SwitchProps> = ({
|
|
|
56
71
|
outputRange: [
|
|
57
72
|
getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),
|
|
58
73
|
getBackgroundColor(theme.color[activeColor][activeColorTone]),
|
|
59
|
-
]
|
|
74
|
+
],
|
|
60
75
|
});
|
|
61
76
|
|
|
62
77
|
useEffect(() => {
|
|
63
|
-
const translate = calculateTranslate()
|
|
78
|
+
const translate = calculateTranslate();
|
|
64
79
|
transitionSwitch(active, translate, transitionValue, animatedColor);
|
|
65
80
|
}, [active]);
|
|
66
81
|
|
|
@@ -69,10 +84,10 @@ const Switch: FC<SwitchProps> = ({
|
|
|
69
84
|
}, [active, onChange]);
|
|
70
85
|
|
|
71
86
|
const handleSwitchLayout = (lce: LayoutChangeEvent) => {
|
|
72
|
-
width.current = lce.nativeEvent.layout.width
|
|
73
|
-
const translate = calculateTranslate()
|
|
87
|
+
width.current = lce.nativeEvent.layout.width;
|
|
88
|
+
const translate = calculateTranslate();
|
|
74
89
|
transitionSwitch(active, translate, transitionValue, animatedColor);
|
|
75
|
-
}
|
|
90
|
+
};
|
|
76
91
|
|
|
77
92
|
return (
|
|
78
93
|
<PressableSurface
|
|
@@ -81,8 +96,13 @@ const Switch: FC<SwitchProps> = ({
|
|
|
81
96
|
effect="none"
|
|
82
97
|
disabled={disabled}
|
|
83
98
|
>
|
|
84
|
-
<StyledSwitchContent
|
|
85
|
-
|
|
99
|
+
<StyledSwitchContent
|
|
100
|
+
onLayout={handleSwitchLayout}
|
|
101
|
+
style={{ backgroundColor: interpolateColor }}
|
|
102
|
+
>
|
|
103
|
+
<StyledSwitch
|
|
104
|
+
style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
|
|
105
|
+
/>
|
|
86
106
|
</StyledSwitchContent>
|
|
87
107
|
</PressableSurface>
|
|
88
108
|
);
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import {
|
|
2
|
+
extractNumbersFromString,
|
|
3
|
+
GridSpacing,
|
|
4
|
+
PaddingPosition,
|
|
5
|
+
Spacing,
|
|
6
|
+
} from '@tecsinapse/react-core';
|
|
7
|
+
|
|
8
|
+
export const getGridItemPadding = (
|
|
9
|
+
pos: PaddingPosition,
|
|
10
|
+
_spacing: GridSpacing | undefined,
|
|
11
|
+
themeSpacing: Spacing
|
|
12
|
+
): number | undefined => {
|
|
13
|
+
if (_spacing) {
|
|
14
|
+
if (typeof _spacing === 'string')
|
|
15
|
+
return extractNumbersFromString(themeSpacing[_spacing]);
|
|
16
|
+
else if (typeof _spacing === 'object' && _spacing[pos]) {
|
|
17
|
+
return extractNumbersFromString(themeSpacing[_spacing[pos] ?? '0']);
|
|
18
|
+
} else return undefined;
|
|
19
|
+
} else return undefined;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Calc the basis width percentage for a given item
|
|
24
|
+
* @param columns - number of grid columns
|
|
25
|
+
* @param span - number of columns to merge
|
|
26
|
+
* @returns {number} - value in %
|
|
27
|
+
*/
|
|
28
|
+
export const getGridItemColumSpan = (columns: number, span: number): number =>
|
|
29
|
+
100 / (columns / span);
|
|
@@ -1,2 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SpacingType } from '@tecsinapse/react-core';
|
|
3
|
+
|
|
4
|
+
export interface IGrid {
|
|
5
|
+
children: JSX.Element[];
|
|
6
|
+
/** Layout should represent the multiplier of columns to fill the rows properly.
|
|
7
|
+
* Example:
|
|
8
|
+
* const layout = [
|
|
9
|
+
* [6, 6], // Two elements on row
|
|
10
|
+
* [4, 4, 4], // Three elements on row
|
|
11
|
+
* [12], // One element on row
|
|
12
|
+
* ];
|
|
13
|
+
* */
|
|
14
|
+
layout?: number[][];
|
|
15
|
+
/** Number of grid columns to be considered (not the number of elements per row) */
|
|
16
|
+
columns?: number;
|
|
17
|
+
spacing?:
|
|
18
|
+
| SpacingType
|
|
19
|
+
| {
|
|
20
|
+
top?: SpacingType;
|
|
21
|
+
right?: SpacingType;
|
|
22
|
+
bottom?: SpacingType;
|
|
23
|
+
left?: SpacingType;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
|
|
28
|
+
export type FlexAlignBase = FlexPositioning | 'stretch';
|
|
29
|
+
export type FlexAlignType = FlexAlignBase | 'baseline';
|
|
30
|
+
export type FlexSpacing = 'space-between' | 'space-around';
|
|
31
|
+
export type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
32
|
+
|
|
33
|
+
export type GridSpacing =
|
|
34
|
+
| SpacingType
|
|
35
|
+
| {
|
|
36
|
+
top?: SpacingType;
|
|
37
|
+
right?: SpacingType;
|
|
38
|
+
bottom?: SpacingType;
|
|
39
|
+
left?: SpacingType;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export interface IGridItem {
|
|
43
|
+
children: React.ReactElement;
|
|
44
|
+
/** Number of columns to fill */
|
|
45
|
+
span: number;
|
|
46
|
+
/** You don't have to give this property since is inherited from Grid */
|
|
47
|
+
columns?: number;
|
|
48
|
+
loading?: boolean;
|
|
49
|
+
/** If your GridItem has a loading state, specify the component here (Skeleton) */
|
|
50
|
+
loadingComponent?: React.ReactElement;
|
|
51
|
+
/** Flex properties below */
|
|
52
|
+
alignContent?: FlexAlignBase | FlexSpacing;
|
|
53
|
+
alignItems?: FlexAlignType;
|
|
54
|
+
alignSelf?: 'auto' | FlexAlignType;
|
|
55
|
+
flex?: number;
|
|
56
|
+
flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
57
|
+
flexGrow?: number;
|
|
58
|
+
flexShrink?: number;
|
|
59
|
+
justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
|
|
60
|
+
/** You don't have to give this property since is inherited from Grid */
|
|
61
|
+
spacing?: GridSpacing;
|
|
62
|
+
/** Used to wrap children in a View when its style extrapolates the dimensions*/
|
|
63
|
+
wrapper?: boolean;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export * from './functions';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ButtonSizeType,
|
|
3
|
+
FontColor,
|
|
4
|
+
Icon,
|
|
5
|
+
IconProps,
|
|
6
|
+
} from '@tecsinapse/react-core';
|
|
7
|
+
import React, { FC } from 'react';
|
|
8
|
+
|
|
9
|
+
interface IconComponentProps {
|
|
10
|
+
iconProps?: IconProps;
|
|
11
|
+
size?: ButtonSizeType;
|
|
12
|
+
defaultFontColor: keyof FontColor;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const IconComponent: FC<IconComponentProps> = ({
|
|
16
|
+
iconProps,
|
|
17
|
+
size = 'default',
|
|
18
|
+
defaultFontColor,
|
|
19
|
+
}) => {
|
|
20
|
+
return iconProps ? (
|
|
21
|
+
<Icon
|
|
22
|
+
size={iconProps.size ?? size === 'small' ? 'deca' : 'kilo'}
|
|
23
|
+
fontColor={iconProps.fontColor ?? defaultFontColor}
|
|
24
|
+
{...iconProps}
|
|
25
|
+
/>
|
|
26
|
+
) : (
|
|
27
|
+
<></>
|
|
28
|
+
);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export default React.memo(IconComponent);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ButtonProps } from '../../atoms/Button';
|
|
2
|
+
import { IconProps } from '../../atoms/Icon';
|
|
3
|
+
import { TextProps } from '../../atoms/Text';
|
|
4
|
+
|
|
5
|
+
export type IconPositionOptions = 'left' | 'right';
|
|
6
|
+
|
|
7
|
+
export interface IconTextButtonProps extends ButtonProps {
|
|
8
|
+
iconProps?: IconProps;
|
|
9
|
+
iconPosition?: IconPositionOptions;
|
|
10
|
+
textProps?: TextProps;
|
|
11
|
+
label?: string;
|
|
12
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import styled, { css } from '@emotion/native';
|
|
2
|
+
import { IconPositionOptions, StyleProps, Text } from '@tecsinapse/react-core';
|
|
3
|
+
|
|
4
|
+
export const StyledText = styled(Text)<
|
|
5
|
+
Partial<StyleProps> & {
|
|
6
|
+
iconPosition: IconPositionOptions;
|
|
7
|
+
hasIcon?: boolean;
|
|
8
|
+
}
|
|
9
|
+
>`
|
|
10
|
+
${({ theme, iconPosition, hasIcon = false }) => {
|
|
11
|
+
if (hasIcon && iconPosition === 'left')
|
|
12
|
+
return css`
|
|
13
|
+
margin-left: ${theme?.spacing.mili};
|
|
14
|
+
`;
|
|
15
|
+
else if (hasIcon && iconPosition === 'right')
|
|
16
|
+
return css`
|
|
17
|
+
margin-right: ${theme?.spacing.mili};
|
|
18
|
+
`;
|
|
19
|
+
}}
|
|
20
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { LabeledSwitchProps, LabelPositionOptions } from './LabeledSwitch';
|
|
@@ -18,7 +18,7 @@ export function useDebouncedState<S>(
|
|
|
18
18
|
if (timeoutId.current) clearTimeout(timeoutId.current);
|
|
19
19
|
if (timeoutCallback)
|
|
20
20
|
timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
|
|
21
|
-
}, [state
|
|
21
|
+
}, [state]);
|
|
22
22
|
|
|
23
23
|
return [state, setState];
|
|
24
24
|
}
|