@bacon-pos/ui 0.1.0 → 0.2.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/README.md +4 -3
- package/lib/commonjs/components/CodeField/CodeField.js +127 -0
- package/lib/commonjs/components/CodeField/CodeField.js.map +1 -0
- package/lib/commonjs/components/CodeField/CodeField.stories.js +76 -0
- package/lib/commonjs/components/CodeField/CodeField.stories.js.map +1 -0
- package/lib/commonjs/components/CodeField/CodeField.test.js +79 -0
- package/lib/commonjs/components/CodeField/CodeField.test.js.map +1 -0
- package/lib/commonjs/components/CodeField/index.js +13 -0
- package/lib/commonjs/components/CodeField/index.js.map +1 -0
- package/lib/commonjs/components/Spinner/Spinner.js +114 -0
- package/lib/commonjs/components/Spinner/Spinner.js.map +1 -0
- package/lib/commonjs/components/Spinner/Spinner.stories.js +72 -0
- package/lib/commonjs/components/Spinner/Spinner.stories.js.map +1 -0
- package/lib/commonjs/components/Spinner/Spinner.test.js +34 -0
- package/lib/commonjs/components/Spinner/Spinner.test.js.map +1 -0
- package/lib/commonjs/components/Spinner/index.js +13 -0
- package/lib/commonjs/components/Spinner/index.js.map +1 -0
- package/lib/commonjs/components/index.js +22 -11
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/module/components/CodeField/CodeField.js +125 -0
- package/lib/module/components/CodeField/CodeField.js.map +1 -0
- package/lib/module/components/CodeField/CodeField.stories.js +72 -0
- package/lib/module/components/CodeField/CodeField.stories.js.map +1 -0
- package/lib/module/components/CodeField/CodeField.test.js +78 -0
- package/lib/module/components/CodeField/CodeField.test.js.map +1 -0
- package/lib/module/components/CodeField/index.js +4 -0
- package/lib/module/components/CodeField/index.js.map +1 -0
- package/lib/module/components/Spinner/Spinner.js +109 -0
- package/lib/module/components/Spinner/Spinner.js.map +1 -0
- package/lib/module/components/Spinner/Spinner.stories.js +68 -0
- package/lib/module/components/Spinner/Spinner.stories.js.map +1 -0
- package/lib/module/components/Spinner/Spinner.test.js +33 -0
- package/lib/module/components/Spinner/Spinner.test.js.map +1 -0
- package/lib/module/components/Spinner/index.js +4 -0
- package/lib/module/components/Spinner/index.js.map +1 -0
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/typescript/commonjs/components/CodeField/CodeField.d.ts +40 -0
- package/lib/typescript/commonjs/components/CodeField/CodeField.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/CodeField/index.d.ts +2 -0
- package/lib/typescript/commonjs/components/CodeField/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Spinner/Spinner.d.ts +31 -0
- package/lib/typescript/commonjs/components/Spinner/Spinner.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/Spinner/index.d.ts +2 -0
- package/lib/typescript/commonjs/components/Spinner/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/index.d.ts +1 -0
- package/lib/typescript/commonjs/components/index.d.ts.map +1 -1
- package/lib/typescript/module/components/CodeField/CodeField.d.ts +40 -0
- package/lib/typescript/module/components/CodeField/CodeField.d.ts.map +1 -0
- package/lib/typescript/module/components/CodeField/index.d.ts +2 -0
- package/lib/typescript/module/components/CodeField/index.d.ts.map +1 -0
- package/lib/typescript/module/components/Spinner/Spinner.d.ts +31 -0
- package/lib/typescript/module/components/Spinner/Spinner.d.ts.map +1 -0
- package/lib/typescript/module/components/Spinner/index.d.ts +2 -0
- package/lib/typescript/module/components/Spinner/index.d.ts.map +1 -0
- package/lib/typescript/module/components/index.d.ts +1 -0
- package/lib/typescript/module/components/index.d.ts.map +1 -1
- package/package.json +14 -16
- package/src/components/CodeField/CodeField.tsx +160 -0
- package/src/components/CodeField/index.ts +1 -0
- package/src/components/Spinner/Spinner.tsx +128 -0
- package/src/components/Spinner/index.ts +1 -0
- package/src/components/index.ts +1 -0
|
@@ -69,7 +69,7 @@ Object.keys(_index6).forEach(function (key) {
|
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
71
|
});
|
|
72
|
-
var _index7 = require("./
|
|
72
|
+
var _index7 = require("./CodeField/index.js");
|
|
73
73
|
Object.keys(_index7).forEach(function (key) {
|
|
74
74
|
if (key === "default" || key === "__esModule") return;
|
|
75
75
|
if (key in exports && exports[key] === _index7[key]) return;
|
|
@@ -80,7 +80,7 @@ Object.keys(_index7).forEach(function (key) {
|
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
82
|
});
|
|
83
|
-
var _index8 = require("./
|
|
83
|
+
var _index8 = require("./CodeInput/index.js");
|
|
84
84
|
Object.keys(_index8).forEach(function (key) {
|
|
85
85
|
if (key === "default" || key === "__esModule") return;
|
|
86
86
|
if (key in exports && exports[key] === _index8[key]) return;
|
|
@@ -91,7 +91,7 @@ Object.keys(_index8).forEach(function (key) {
|
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
93
|
});
|
|
94
|
-
var _index9 = require("./
|
|
94
|
+
var _index9 = require("./Icon/index.js");
|
|
95
95
|
Object.keys(_index9).forEach(function (key) {
|
|
96
96
|
if (key === "default" || key === "__esModule") return;
|
|
97
97
|
if (key in exports && exports[key] === _index9[key]) return;
|
|
@@ -102,7 +102,7 @@ Object.keys(_index9).forEach(function (key) {
|
|
|
102
102
|
}
|
|
103
103
|
});
|
|
104
104
|
});
|
|
105
|
-
var _index0 = require("./
|
|
105
|
+
var _index0 = require("./IconButton/index.js");
|
|
106
106
|
Object.keys(_index0).forEach(function (key) {
|
|
107
107
|
if (key === "default" || key === "__esModule") return;
|
|
108
108
|
if (key in exports && exports[key] === _index0[key]) return;
|
|
@@ -113,7 +113,7 @@ Object.keys(_index0).forEach(function (key) {
|
|
|
113
113
|
}
|
|
114
114
|
});
|
|
115
115
|
});
|
|
116
|
-
var _index1 = require("./
|
|
116
|
+
var _index1 = require("./Input/index.js");
|
|
117
117
|
Object.keys(_index1).forEach(function (key) {
|
|
118
118
|
if (key === "default" || key === "__esModule") return;
|
|
119
119
|
if (key in exports && exports[key] === _index1[key]) return;
|
|
@@ -124,7 +124,7 @@ Object.keys(_index1).forEach(function (key) {
|
|
|
124
124
|
}
|
|
125
125
|
});
|
|
126
126
|
});
|
|
127
|
-
var _index10 = require("./
|
|
127
|
+
var _index10 = require("./LinkButton/index.js");
|
|
128
128
|
Object.keys(_index10).forEach(function (key) {
|
|
129
129
|
if (key === "default" || key === "__esModule") return;
|
|
130
130
|
if (key in exports && exports[key] === _index10[key]) return;
|
|
@@ -135,7 +135,7 @@ Object.keys(_index10).forEach(function (key) {
|
|
|
135
135
|
}
|
|
136
136
|
});
|
|
137
137
|
});
|
|
138
|
-
var _index11 = require("./
|
|
138
|
+
var _index11 = require("./ProductCard/index.js");
|
|
139
139
|
Object.keys(_index11).forEach(function (key) {
|
|
140
140
|
if (key === "default" || key === "__esModule") return;
|
|
141
141
|
if (key in exports && exports[key] === _index11[key]) return;
|
|
@@ -146,7 +146,7 @@ Object.keys(_index11).forEach(function (key) {
|
|
|
146
146
|
}
|
|
147
147
|
});
|
|
148
148
|
});
|
|
149
|
-
var _index12 = require("./
|
|
149
|
+
var _index12 = require("./QuantityStepper/index.js");
|
|
150
150
|
Object.keys(_index12).forEach(function (key) {
|
|
151
151
|
if (key === "default" || key === "__esModule") return;
|
|
152
152
|
if (key in exports && exports[key] === _index12[key]) return;
|
|
@@ -157,7 +157,7 @@ Object.keys(_index12).forEach(function (key) {
|
|
|
157
157
|
}
|
|
158
158
|
});
|
|
159
159
|
});
|
|
160
|
-
var _index13 = require("./
|
|
160
|
+
var _index13 = require("./Radio/index.js");
|
|
161
161
|
Object.keys(_index13).forEach(function (key) {
|
|
162
162
|
if (key === "default" || key === "__esModule") return;
|
|
163
163
|
if (key in exports && exports[key] === _index13[key]) return;
|
|
@@ -168,7 +168,7 @@ Object.keys(_index13).forEach(function (key) {
|
|
|
168
168
|
}
|
|
169
169
|
});
|
|
170
170
|
});
|
|
171
|
-
var _index14 = require("./
|
|
171
|
+
var _index14 = require("./Surface/index.js");
|
|
172
172
|
Object.keys(_index14).forEach(function (key) {
|
|
173
173
|
if (key === "default" || key === "__esModule") return;
|
|
174
174
|
if (key in exports && exports[key] === _index14[key]) return;
|
|
@@ -179,7 +179,7 @@ Object.keys(_index14).forEach(function (key) {
|
|
|
179
179
|
}
|
|
180
180
|
});
|
|
181
181
|
});
|
|
182
|
-
var _index15 = require("./
|
|
182
|
+
var _index15 = require("./Switch/index.js");
|
|
183
183
|
Object.keys(_index15).forEach(function (key) {
|
|
184
184
|
if (key === "default" || key === "__esModule") return;
|
|
185
185
|
if (key in exports && exports[key] === _index15[key]) return;
|
|
@@ -190,4 +190,15 @@ Object.keys(_index15).forEach(function (key) {
|
|
|
190
190
|
}
|
|
191
191
|
});
|
|
192
192
|
});
|
|
193
|
+
var _index16 = require("./Text/index.js");
|
|
194
|
+
Object.keys(_index16).forEach(function (key) {
|
|
195
|
+
if (key === "default" || key === "__esModule") return;
|
|
196
|
+
if (key in exports && exports[key] === _index16[key]) return;
|
|
197
|
+
Object.defineProperty(exports, key, {
|
|
198
|
+
enumerable: true,
|
|
199
|
+
get: function () {
|
|
200
|
+
return _index16[key];
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
});
|
|
193
204
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_index","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_index2","_index3","_index4","_index5","_index6","_index7","_index8","_index9","_index0","_index1","_index10","_index11","_index12","_index13","_index14","_index15"],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_index","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_index2","_index3","_index4","_index5","_index6","_index7","_index8","_index9","_index0","_index1","_index10","_index11","_index12","_index13","_index14","_index15","_index16"],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useRef, useState } from 'react';
|
|
4
|
+
import { Pressable, TextInput, View } from 'react-native';
|
|
5
|
+
import { useTheme } from "../../theme/index.js";
|
|
6
|
+
import { Text } from "../Text/Text.js";
|
|
7
|
+
|
|
8
|
+
/** Removes the browser's default focus outline on web (no-op on native). */
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const WEB_NO_OUTLINE = {
|
|
11
|
+
outlineStyle: 'none',
|
|
12
|
+
outlineWidth: 0
|
|
13
|
+
};
|
|
14
|
+
/** Chars to strip per mode (applied after upper-casing). */
|
|
15
|
+
const DISALLOWED = {
|
|
16
|
+
numeric: /[^0-9]/g,
|
|
17
|
+
alpha: /[^A-Z]/g,
|
|
18
|
+
alphanumeric: /[^A-Z0-9]/g
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Code field — a row of boxes for entering a code (numeric / alpha /
|
|
22
|
+
* alphanumeric, always upper-cased). Backed by a single hidden input, so paste,
|
|
23
|
+
* backspace-to-previous and type-to-next all work natively. The active cell
|
|
24
|
+
* shows the lime focus ring. Cell size, gap, font and font size are configurable.
|
|
25
|
+
*/
|
|
26
|
+
export function CodeField({
|
|
27
|
+
value,
|
|
28
|
+
onChangeText,
|
|
29
|
+
length = 6,
|
|
30
|
+
mode = 'numeric',
|
|
31
|
+
onComplete,
|
|
32
|
+
disabled = false,
|
|
33
|
+
autoFocus = false,
|
|
34
|
+
cellWidth = 126,
|
|
35
|
+
cellHeight = 58,
|
|
36
|
+
gap = 24,
|
|
37
|
+
fontFamily,
|
|
38
|
+
fontSize = 18,
|
|
39
|
+
accessibilityLabel = 'Code',
|
|
40
|
+
style
|
|
41
|
+
}) {
|
|
42
|
+
const theme = useTheme();
|
|
43
|
+
const inputRef = useRef(null);
|
|
44
|
+
const [focused, setFocused] = useState(false);
|
|
45
|
+
const handleChange = text => {
|
|
46
|
+
const next = text.toUpperCase().replace(DISALLOWED[mode], '').slice(0, length);
|
|
47
|
+
onChangeText(next);
|
|
48
|
+
if (next.length === length) onComplete?.(next);
|
|
49
|
+
};
|
|
50
|
+
const activeIndex = Math.min(value.length, length - 1);
|
|
51
|
+
return /*#__PURE__*/_jsxs(Pressable, {
|
|
52
|
+
onPress: () => inputRef.current?.focus(),
|
|
53
|
+
disabled: disabled,
|
|
54
|
+
style: [{
|
|
55
|
+
position: 'relative',
|
|
56
|
+
alignSelf: 'flex-start'
|
|
57
|
+
}, style],
|
|
58
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
59
|
+
style: {
|
|
60
|
+
flexDirection: 'row',
|
|
61
|
+
gap
|
|
62
|
+
},
|
|
63
|
+
children: Array.from({
|
|
64
|
+
length
|
|
65
|
+
}).map((_, i) => {
|
|
66
|
+
const isActive = focused && i === activeIndex && !disabled;
|
|
67
|
+
return /*#__PURE__*/_jsx(View, {
|
|
68
|
+
testID: "code-field-cell",
|
|
69
|
+
style: {
|
|
70
|
+
width: cellWidth,
|
|
71
|
+
height: cellHeight,
|
|
72
|
+
borderRadius: theme.radii.pill,
|
|
73
|
+
borderWidth: 1,
|
|
74
|
+
borderColor: isActive ? theme.colors.border.focus : theme.colors.border.default,
|
|
75
|
+
backgroundColor: disabled ? theme.colors.disabled.background : theme.colors.background.default,
|
|
76
|
+
alignItems: 'center',
|
|
77
|
+
justifyContent: 'center',
|
|
78
|
+
opacity: disabled ? 0.6 : 1,
|
|
79
|
+
...(isActive ? {
|
|
80
|
+
boxShadow: [{
|
|
81
|
+
offsetX: 0,
|
|
82
|
+
offsetY: 0,
|
|
83
|
+
blurRadius: 0,
|
|
84
|
+
spreadDistance: 6,
|
|
85
|
+
color: 'rgba(201,255,0,0.15)'
|
|
86
|
+
}]
|
|
87
|
+
} : null)
|
|
88
|
+
},
|
|
89
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
90
|
+
color: disabled ? 'tertiary' : 'primary',
|
|
91
|
+
style: {
|
|
92
|
+
fontFamily: fontFamily ?? theme.fontFamily.regular,
|
|
93
|
+
fontSize,
|
|
94
|
+
lineHeight: Math.round(fontSize * 1.45)
|
|
95
|
+
},
|
|
96
|
+
children: value[i] ?? ''
|
|
97
|
+
})
|
|
98
|
+
}, i);
|
|
99
|
+
})
|
|
100
|
+
}), /*#__PURE__*/_jsx(TextInput, {
|
|
101
|
+
ref: inputRef,
|
|
102
|
+
value: value,
|
|
103
|
+
onChangeText: handleChange,
|
|
104
|
+
onFocus: () => setFocused(true),
|
|
105
|
+
onBlur: () => setFocused(false),
|
|
106
|
+
keyboardType: mode === 'numeric' ? 'number-pad' : 'default',
|
|
107
|
+
autoCapitalize: "characters",
|
|
108
|
+
autoCorrect: false,
|
|
109
|
+
maxLength: length,
|
|
110
|
+
editable: !disabled,
|
|
111
|
+
caretHidden: true,
|
|
112
|
+
autoFocus: autoFocus,
|
|
113
|
+
accessibilityLabel: accessibilityLabel,
|
|
114
|
+
style: [{
|
|
115
|
+
position: 'absolute',
|
|
116
|
+
top: 0,
|
|
117
|
+
left: 0,
|
|
118
|
+
right: 0,
|
|
119
|
+
bottom: 0,
|
|
120
|
+
opacity: 0
|
|
121
|
+
}, WEB_NO_OUTLINE]
|
|
122
|
+
})]
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
//# sourceMappingURL=CodeField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useRef","useState","Pressable","TextInput","View","useTheme","Text","jsx","_jsx","jsxs","_jsxs","WEB_NO_OUTLINE","outlineStyle","outlineWidth","DISALLOWED","numeric","alpha","alphanumeric","CodeField","value","onChangeText","length","mode","onComplete","disabled","autoFocus","cellWidth","cellHeight","gap","fontFamily","fontSize","accessibilityLabel","style","theme","inputRef","focused","setFocused","handleChange","text","next","toUpperCase","replace","slice","activeIndex","Math","min","onPress","current","focus","position","alignSelf","children","flexDirection","Array","from","map","_","i","isActive","testID","width","height","borderRadius","radii","pill","borderWidth","borderColor","colors","border","default","backgroundColor","background","alignItems","justifyContent","opacity","boxShadow","offsetX","offsetY","blurRadius","spreadDistance","color","regular","lineHeight","round","ref","onFocus","onBlur","keyboardType","autoCapitalize","autoCorrect","maxLength","editable","caretHidden","top","left","right","bottom"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { CodeField } from "./CodeField.js";
|
|
6
|
+
import { Text } from "../Text/Text.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'Components/CodeField',
|
|
10
|
+
component: CodeField
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
function Demo(props) {
|
|
14
|
+
const [value, setValue] = useState('');
|
|
15
|
+
const [done, setDone] = useState('');
|
|
16
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
17
|
+
style: {
|
|
18
|
+
gap: 8,
|
|
19
|
+
alignItems: 'flex-start'
|
|
20
|
+
},
|
|
21
|
+
children: [/*#__PURE__*/_jsx(CodeField, {
|
|
22
|
+
value: value,
|
|
23
|
+
onChangeText: setValue,
|
|
24
|
+
onComplete: setDone,
|
|
25
|
+
...props
|
|
26
|
+
}), /*#__PURE__*/_jsxs(Text, {
|
|
27
|
+
variant: "caption",
|
|
28
|
+
color: "secondary",
|
|
29
|
+
children: ["value: \"", value, "\"", done ? ` · complete: ${done}` : '']
|
|
30
|
+
})]
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Figma defaults (wide desktop cells).
|
|
35
|
+
export const Default = {
|
|
36
|
+
render: () => /*#__PURE__*/_jsx(Demo, {
|
|
37
|
+
length: 4
|
|
38
|
+
})
|
|
39
|
+
};
|
|
40
|
+
// Compact cells for mobile.
|
|
41
|
+
export const Compact = {
|
|
42
|
+
render: () => /*#__PURE__*/_jsx(Demo, {
|
|
43
|
+
length: 6,
|
|
44
|
+
cellWidth: 48,
|
|
45
|
+
gap: 8
|
|
46
|
+
})
|
|
47
|
+
};
|
|
48
|
+
export const Alphanumeric = {
|
|
49
|
+
render: () => /*#__PURE__*/_jsx(Demo, {
|
|
50
|
+
length: 6,
|
|
51
|
+
mode: "alphanumeric",
|
|
52
|
+
cellWidth: 48,
|
|
53
|
+
gap: 8
|
|
54
|
+
})
|
|
55
|
+
};
|
|
56
|
+
export const Alpha = {
|
|
57
|
+
render: () => /*#__PURE__*/_jsx(Demo, {
|
|
58
|
+
length: 5,
|
|
59
|
+
mode: "alpha",
|
|
60
|
+
cellWidth: 48,
|
|
61
|
+
gap: 8
|
|
62
|
+
})
|
|
63
|
+
};
|
|
64
|
+
export const Disabled = {
|
|
65
|
+
render: () => /*#__PURE__*/_jsx(Demo, {
|
|
66
|
+
length: 4,
|
|
67
|
+
cellWidth: 48,
|
|
68
|
+
gap: 8,
|
|
69
|
+
disabled: true
|
|
70
|
+
})
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=CodeField.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","View","CodeField","Text","jsx","_jsx","jsxs","_jsxs","meta","title","component","Demo","props","value","setValue","done","setDone","style","gap","alignItems","children","onChangeText","onComplete","variant","color","Default","render","length","Compact","cellWidth","Alphanumeric","mode","Alpha","Disabled","disabled"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.stories.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,OAAO;AAEhC,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,SAAS,QAA4B,gBAAa;AAC3D,SAASC,IAAI,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpC,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAER;AACb,CAAkC;AAElC,eAAeM,IAAI;AAGnB,SAASG,IAAIA,CAACC,KAQb,EAAE;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGd,QAAQ,CAAC,EAAE,CAAC;EACtC,MAAM,CAACe,IAAI,EAAEC,OAAO,CAAC,GAAGhB,QAAQ,CAAC,EAAE,CAAC;EACpC,oBACEO,KAAA,CAACN,IAAI;IAACgB,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,UAAU,EAAE;IAAa,CAAE;IAAAC,QAAA,gBAChDf,IAAA,CAACH,SAAS;MAACW,KAAK,EAAEA,KAAM;MAACQ,YAAY,EAAEP,QAAS;MAACQ,UAAU,EAAEN,OAAQ;MAAA,GAAKJ;IAAK,CAAG,CAAC,eACnFL,KAAA,CAACJ,IAAI;MAACoB,OAAO,EAAC,SAAS;MAACC,KAAK,EAAC,WAAW;MAAAJ,QAAA,GAAC,WAChC,EAACP,KAAK,EAAC,IAAC,EAACE,IAAI,GAAG,gBAAgBA,IAAI,EAAE,GAAG,EAAE;IAAA,CAC/C,CAAC;EAAA,CACH,CAAC;AAEX;;AAEA;AACA,OAAO,MAAMU,OAAc,GAAG;EAAEC,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE;EAAE,CAAE;AAAE,CAAC;AACnE;AACA,OAAO,MAAMC,OAAc,GAAG;EAAEF,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACE,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE;EAAE,CAAE;AAAE,CAAC;AAC1F,OAAO,MAAMY,YAAmB,GAAG;EACjCJ,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACI,IAAI,EAAC,cAAc;IAACF,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE;EAAE,CAAE;AAC7E,CAAC;AACD,OAAO,MAAMc,KAAY,GAAG;EAAEN,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACI,IAAI,EAAC,OAAO;IAACF,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE;EAAE,CAAE;AAAE,CAAC;AACrG,OAAO,MAAMe,QAAe,GAAG;EAAEP,MAAM,EAAEA,CAAA,kBAAMrB,IAAA,CAACM,IAAI;IAACgB,MAAM,EAAE,CAAE;IAACE,SAAS,EAAE,EAAG;IAACX,GAAG,EAAE,CAAE;IAACgB,QAAQ;EAAA,CAAE;AAAE,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { render, screen, fireEvent } from '@testing-library/react-native';
|
|
5
|
+
import { CodeField } from "./CodeField.js";
|
|
6
|
+
import { ThemeProvider } from "../../theme/index.js";
|
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
function renderWithTheme(ui) {
|
|
9
|
+
return render(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
10
|
+
children: ui
|
|
11
|
+
}));
|
|
12
|
+
}
|
|
13
|
+
describe('CodeField', () => {
|
|
14
|
+
it('renders one cell per length', () => {
|
|
15
|
+
renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
|
|
16
|
+
value: "",
|
|
17
|
+
onChangeText: () => {},
|
|
18
|
+
length: 4
|
|
19
|
+
}));
|
|
20
|
+
expect(screen.getAllByTestId('code-field-cell')).toHaveLength(4);
|
|
21
|
+
});
|
|
22
|
+
it('numeric mode keeps digits only', () => {
|
|
23
|
+
const onChangeText = jest.fn();
|
|
24
|
+
renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
|
|
25
|
+
value: "",
|
|
26
|
+
onChangeText: onChangeText,
|
|
27
|
+
mode: "numeric",
|
|
28
|
+
length: 4
|
|
29
|
+
}));
|
|
30
|
+
fireEvent.changeText(screen.getByLabelText('Code'), '12ab34');
|
|
31
|
+
expect(onChangeText).toHaveBeenCalledWith('1234');
|
|
32
|
+
});
|
|
33
|
+
it('alphanumeric mode upper-cases and strips symbols', () => {
|
|
34
|
+
const onChangeText = jest.fn();
|
|
35
|
+
renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
|
|
36
|
+
value: "",
|
|
37
|
+
onChangeText: onChangeText,
|
|
38
|
+
mode: "alphanumeric",
|
|
39
|
+
length: 6
|
|
40
|
+
}));
|
|
41
|
+
fireEvent.changeText(screen.getByLabelText('Code'), 'a1-b2!');
|
|
42
|
+
expect(onChangeText).toHaveBeenCalledWith('A1B2');
|
|
43
|
+
});
|
|
44
|
+
it('alpha mode strips digits', () => {
|
|
45
|
+
const onChangeText = jest.fn();
|
|
46
|
+
renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
|
|
47
|
+
value: "",
|
|
48
|
+
onChangeText: onChangeText,
|
|
49
|
+
mode: "alpha",
|
|
50
|
+
length: 4
|
|
51
|
+
}));
|
|
52
|
+
fireEvent.changeText(screen.getByLabelText('Code'), 'a1b2c3');
|
|
53
|
+
expect(onChangeText).toHaveBeenCalledWith('ABC');
|
|
54
|
+
});
|
|
55
|
+
it('caps a pasted value to length and fires onComplete', () => {
|
|
56
|
+
const onChangeText = jest.fn();
|
|
57
|
+
const onComplete = jest.fn();
|
|
58
|
+
renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
|
|
59
|
+
value: "",
|
|
60
|
+
onChangeText: onChangeText,
|
|
61
|
+
onComplete: onComplete,
|
|
62
|
+
length: 4
|
|
63
|
+
}));
|
|
64
|
+
fireEvent.changeText(screen.getByLabelText('Code'), '123456');
|
|
65
|
+
expect(onChangeText).toHaveBeenCalledWith('1234');
|
|
66
|
+
expect(onComplete).toHaveBeenCalledWith('1234');
|
|
67
|
+
});
|
|
68
|
+
it('shows entered characters in the cells', () => {
|
|
69
|
+
renderWithTheme(/*#__PURE__*/_jsx(CodeField, {
|
|
70
|
+
value: "12",
|
|
71
|
+
onChangeText: () => {},
|
|
72
|
+
length: 4
|
|
73
|
+
}));
|
|
74
|
+
expect(screen.getByText('1')).toBeTruthy();
|
|
75
|
+
expect(screen.getByText('2')).toBeTruthy();
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
//# sourceMappingURL=CodeField.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","render","screen","fireEvent","CodeField","ThemeProvider","jsx","_jsx","renderWithTheme","ui","children","describe","it","value","onChangeText","length","expect","getAllByTestId","toHaveLength","jest","fn","mode","changeText","getByLabelText","toHaveBeenCalledWith","onComplete","getByText","toBeTruthy"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/CodeField.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CodeField"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CodeField/index.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAiD,gBAAa","ignoreList":[]}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
import { Animated, Easing, Platform, View } from 'react-native';
|
|
5
|
+
import Svg, { Circle } from 'react-native-svg';
|
|
6
|
+
import { useTheme } from "../../theme/index.js";
|
|
7
|
+
import { Text } from "../Text/Text.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
/** Diameters per size — `xl` matches the Figma spinner (164, 12px ring). */
|
|
10
|
+
const SIZES = {
|
|
11
|
+
xs: 24,
|
|
12
|
+
sm: 40,
|
|
13
|
+
md: 64,
|
|
14
|
+
lg: 96,
|
|
15
|
+
xl: 164
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Spinner — an infinitely rotating ring (react-native-svg + Animated, native
|
|
19
|
+
* driver for smooth motion). Configurable size, color, thickness and an
|
|
20
|
+
* optional label (top/bottom, with adjustable gap and font size).
|
|
21
|
+
*/
|
|
22
|
+
export function Spinner({
|
|
23
|
+
size = 'md',
|
|
24
|
+
color,
|
|
25
|
+
thickness,
|
|
26
|
+
label,
|
|
27
|
+
labelPosition = 'bottom',
|
|
28
|
+
gap = 8,
|
|
29
|
+
labelSize = 16,
|
|
30
|
+
labelColor,
|
|
31
|
+
duration = 900,
|
|
32
|
+
style,
|
|
33
|
+
accessibilityLabel
|
|
34
|
+
}) {
|
|
35
|
+
const theme = useTheme();
|
|
36
|
+
const diameter = SIZES[size];
|
|
37
|
+
const stroke = thickness ?? Math.max(2, Math.round(diameter * 0.073));
|
|
38
|
+
const arcColor = color ?? theme.colors.action.primary;
|
|
39
|
+
const radius = (diameter - stroke) / 2;
|
|
40
|
+
const circumference = 2 * Math.PI * radius;
|
|
41
|
+
const rotation = useRef(new Animated.Value(0)).current;
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
rotation.setValue(0);
|
|
44
|
+
const loop = Animated.loop(Animated.timing(rotation, {
|
|
45
|
+
toValue: 1,
|
|
46
|
+
duration,
|
|
47
|
+
easing: Easing.linear,
|
|
48
|
+
// Native driver loops smoothly on iOS/Android; on web (react-native-web)
|
|
49
|
+
// a native-driven loop only runs once, so drive it on the JS thread there.
|
|
50
|
+
useNativeDriver: Platform.OS !== 'web'
|
|
51
|
+
}));
|
|
52
|
+
loop.start();
|
|
53
|
+
return () => loop.stop();
|
|
54
|
+
}, [rotation, duration]);
|
|
55
|
+
const spin = rotation.interpolate({
|
|
56
|
+
inputRange: [0, 1],
|
|
57
|
+
outputRange: ['0deg', '360deg']
|
|
58
|
+
});
|
|
59
|
+
const labelStyle = {
|
|
60
|
+
fontSize: labelSize,
|
|
61
|
+
lineHeight: Math.round(labelSize * 1.4),
|
|
62
|
+
...(labelPosition === 'top' ? {} : null)
|
|
63
|
+
};
|
|
64
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
65
|
+
accessibilityRole: "progressbar",
|
|
66
|
+
accessibilityLabel: accessibilityLabel ?? label,
|
|
67
|
+
style: [{
|
|
68
|
+
alignItems: 'center',
|
|
69
|
+
gap,
|
|
70
|
+
flexDirection: labelPosition === 'top' ? 'column-reverse' : 'column'
|
|
71
|
+
}, style],
|
|
72
|
+
children: [/*#__PURE__*/_jsx(Animated.View, {
|
|
73
|
+
style: {
|
|
74
|
+
width: diameter,
|
|
75
|
+
height: diameter,
|
|
76
|
+
transform: [{
|
|
77
|
+
rotate: spin
|
|
78
|
+
}]
|
|
79
|
+
},
|
|
80
|
+
children: /*#__PURE__*/_jsxs(Svg, {
|
|
81
|
+
width: diameter,
|
|
82
|
+
height: diameter,
|
|
83
|
+
children: [/*#__PURE__*/_jsx(Circle, {
|
|
84
|
+
cx: diameter / 2,
|
|
85
|
+
cy: diameter / 2,
|
|
86
|
+
r: radius,
|
|
87
|
+
stroke: arcColor,
|
|
88
|
+
strokeWidth: stroke,
|
|
89
|
+
fill: "none",
|
|
90
|
+
opacity: 0.2
|
|
91
|
+
}), /*#__PURE__*/_jsx(Circle, {
|
|
92
|
+
cx: diameter / 2,
|
|
93
|
+
cy: diameter / 2,
|
|
94
|
+
r: radius,
|
|
95
|
+
stroke: arcColor,
|
|
96
|
+
strokeWidth: stroke,
|
|
97
|
+
fill: "none",
|
|
98
|
+
strokeLinecap: "round",
|
|
99
|
+
strokeDasharray: [circumference * 0.7, circumference * 0.3]
|
|
100
|
+
})]
|
|
101
|
+
})
|
|
102
|
+
}), label ? /*#__PURE__*/_jsx(Text, {
|
|
103
|
+
color: labelColor ?? 'secondary',
|
|
104
|
+
style: labelStyle,
|
|
105
|
+
children: label
|
|
106
|
+
}) : null]
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
//# sourceMappingURL=Spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","Animated","Easing","Platform","View","Svg","Circle","useTheme","Text","jsx","_jsx","jsxs","_jsxs","SIZES","xs","sm","md","lg","xl","Spinner","size","color","thickness","label","labelPosition","gap","labelSize","labelColor","duration","style","accessibilityLabel","theme","diameter","stroke","Math","max","round","arcColor","colors","action","primary","radius","circumference","PI","rotation","Value","current","setValue","loop","timing","toValue","easing","linear","useNativeDriver","OS","start","stop","spin","interpolate","inputRange","outputRange","labelStyle","fontSize","lineHeight","accessibilityRole","alignItems","flexDirection","children","width","height","transform","rotate","cx","cy","r","strokeWidth","fill","opacity","strokeLinecap","strokeDasharray"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/Spinner.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { Spinner } from "./Spinner.js";
|
|
5
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
const meta = {
|
|
7
|
+
title: 'Components/Spinner',
|
|
8
|
+
component: Spinner,
|
|
9
|
+
args: {
|
|
10
|
+
size: 'md'
|
|
11
|
+
},
|
|
12
|
+
argTypes: {
|
|
13
|
+
size: {
|
|
14
|
+
control: 'inline-radio',
|
|
15
|
+
options: ['xs', 'sm', 'md', 'lg', 'xl']
|
|
16
|
+
},
|
|
17
|
+
labelPosition: {
|
|
18
|
+
control: 'inline-radio',
|
|
19
|
+
options: ['top', 'bottom']
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
export default meta;
|
|
24
|
+
export const Default = {};
|
|
25
|
+
export const WithLabel = {
|
|
26
|
+
args: {
|
|
27
|
+
label: 'Wait a moment please...'
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export const LabelTop = {
|
|
31
|
+
args: {
|
|
32
|
+
label: 'Loading',
|
|
33
|
+
labelPosition: 'top'
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
export const XL = {
|
|
37
|
+
args: {
|
|
38
|
+
size: 'xl',
|
|
39
|
+
label: 'Wait a moment please...'
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
export const CustomColor = {
|
|
43
|
+
args: {
|
|
44
|
+
size: 'lg',
|
|
45
|
+
color: '#FF003A'
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
export const Sizes = {
|
|
49
|
+
render: () => /*#__PURE__*/_jsxs(View, {
|
|
50
|
+
style: {
|
|
51
|
+
flexDirection: 'row',
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
gap: 24
|
|
54
|
+
},
|
|
55
|
+
children: [/*#__PURE__*/_jsx(Spinner, {
|
|
56
|
+
size: "xs"
|
|
57
|
+
}), /*#__PURE__*/_jsx(Spinner, {
|
|
58
|
+
size: "sm"
|
|
59
|
+
}), /*#__PURE__*/_jsx(Spinner, {
|
|
60
|
+
size: "md"
|
|
61
|
+
}), /*#__PURE__*/_jsx(Spinner, {
|
|
62
|
+
size: "lg"
|
|
63
|
+
}), /*#__PURE__*/_jsx(Spinner, {
|
|
64
|
+
size: "xl"
|
|
65
|
+
})]
|
|
66
|
+
})
|
|
67
|
+
};
|
|
68
|
+
//# sourceMappingURL=Spinner.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["View","Spinner","jsx","_jsx","jsxs","_jsxs","meta","title","component","args","size","argTypes","control","options","labelPosition","Default","WithLabel","label","LabelTop","XL","CustomColor","color","Sizes","render","style","flexDirection","alignItems","gap","children"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Spinner/Spinner.stories.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,OAAO,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpC,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,oBAAoB;EAC3BC,SAAS,EAAEP,OAAO;EAClBQ,IAAI,EAAE;IAAEC,IAAI,EAAE;EAAK,CAAC;EACpBC,QAAQ,EAAE;IACRD,IAAI,EAAE;MAAEE,OAAO,EAAE,cAAc;MAAEC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAAE,CAAC;IAC1EC,aAAa,EAAE;MAAEF,OAAO,EAAE,cAAc;MAAEC,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ;IAAE;EACvE;AACF,CAAgC;AAEhC,eAAeP,IAAI;AAGnB,OAAO,MAAMS,OAAc,GAAG,CAAC,CAAC;AAChC,OAAO,MAAMC,SAAgB,GAAG;EAAEP,IAAI,EAAE;IAAEQ,KAAK,EAAE;EAA0B;AAAE,CAAC;AAC9E,OAAO,MAAMC,QAAe,GAAG;EAAET,IAAI,EAAE;IAAEQ,KAAK,EAAE,SAAS;IAAEH,aAAa,EAAE;EAAM;AAAE,CAAC;AACnF,OAAO,MAAMK,EAAS,GAAG;EAAEV,IAAI,EAAE;IAAEC,IAAI,EAAE,IAAI;IAAEO,KAAK,EAAE;EAA0B;AAAE,CAAC;AACnF,OAAO,MAAMG,WAAkB,GAAG;EAAEX,IAAI,EAAE;IAAEC,IAAI,EAAE,IAAI;IAAEW,KAAK,EAAE;EAAU;AAAE,CAAC;AAE5E,OAAO,MAAMC,KAAY,GAAG;EAC1BC,MAAM,EAAEA,CAAA,kBACNlB,KAAA,CAACL,IAAI;IAACwB,KAAK,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAG,CAAE;IAAAC,QAAA,gBACnEzB,IAAA,CAACF,OAAO;MAACS,IAAI,EAAC;IAAI,CAAE,CAAC,eACrBP,IAAA,CAACF,OAAO;MAACS,IAAI,EAAC;IAAI,CAAE,CAAC,eACrBP,IAAA,CAACF,OAAO;MAACS,IAAI,EAAC;IAAI,CAAE,CAAC,eACrBP,IAAA,CAACF,OAAO;MAACS,IAAI,EAAC;IAAI,CAAE,CAAC,eACrBP,IAAA,CAACF,OAAO;MAACS,IAAI,EAAC;IAAI,CAAE,CAAC;EAAA,CACjB;AAEV,CAAC","ignoreList":[]}
|