@mapples/ui 1.0.7 → 1.0.8
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 +32 -0
- package/dist/components/inputs/Pressable/Pressable.d.ts +4 -3
- package/dist/components/inputs/Pressable/Pressable.d.ts.map +1 -1
- package/dist/components/media/QRCode/QRCode.d.ts.map +1 -1
- package/dist/components/media/QRCode/QRCode.js +2 -8
- package/dist/components/media/QRCode/QRCode.js.map +1 -1
- package/dist/schematics.d.ts +1 -1
- package/dist/schematics.d.ts.map +1 -1
- package/dist/schematics.js +1 -1
- package/dist/schematics.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -51,6 +51,14 @@ Interactive input components:
|
|
|
51
51
|
- **IconButton**: Button with icon support
|
|
52
52
|
- **Pressable**: Enhanced pressable component with styling
|
|
53
53
|
|
|
54
|
+
### Form
|
|
55
|
+
|
|
56
|
+
Form building blocks that work with `@mapples/form`:
|
|
57
|
+
|
|
58
|
+
- **FormView**: Container that provides form context to children
|
|
59
|
+
- **TextField**: Text input bound to a form field
|
|
60
|
+
- **SubmitButton**: Button that triggers form submit and shows submitting state
|
|
61
|
+
|
|
54
62
|
### Media
|
|
55
63
|
|
|
56
64
|
Media display components:
|
|
@@ -172,6 +180,30 @@ function MyInput() {
|
|
|
172
180
|
}
|
|
173
181
|
```
|
|
174
182
|
|
|
183
|
+
### Form with FormView, TextField, SubmitButton
|
|
184
|
+
|
|
185
|
+
`FormView` wraps `Form` from `@mapples/form` and provides a styled container. Use `fieldName` on `TextField` to bind to form values; `SubmitButton` triggers submit and shows submitting state.
|
|
186
|
+
|
|
187
|
+
```tsx
|
|
188
|
+
import { FormView, TextField, SubmitButton } from '@mapples/ui';
|
|
189
|
+
|
|
190
|
+
function MyForm() {
|
|
191
|
+
return (
|
|
192
|
+
<FormView
|
|
193
|
+
initialValues={{ name: '', email: '' }}
|
|
194
|
+
onSubmit={(values) => console.log(values)}
|
|
195
|
+
styled={{ style: { padding: 16 } }}
|
|
196
|
+
>
|
|
197
|
+
<TextField fieldName="name" placeholder="Name" />
|
|
198
|
+
<TextField fieldName="email" placeholder="Email" />
|
|
199
|
+
<SubmitButton label="Submit" />
|
|
200
|
+
</FormView>
|
|
201
|
+
);
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
For Yup validation, use `Form` from `@mapples/form` as the outer wrapper and pass `validationSchema`; use `FormView` inside for layout and styling.
|
|
206
|
+
|
|
175
207
|
## Visual Editor Integration
|
|
176
208
|
|
|
177
209
|
The UI package includes comprehensive schematics for visual editor integration:
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { WithStyledProps } from '@mapples/style';
|
|
2
2
|
import { PressableProps as RNPressableProps, View } from 'react-native';
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export type PressableProps = WithStyledProps<RNPressableProps>;
|
|
4
|
+
declare const Pressable: import("react").ForwardRefExoticComponent<{
|
|
5
|
+
styled?: import("@mapples/style").StyledProps<Partial<RNPressableProps>> | undefined;
|
|
6
|
+
} & RNPressableProps & {
|
|
6
7
|
children?: import("react").ReactNode | undefined;
|
|
7
8
|
} & import("react").RefAttributes<View>>;
|
|
8
9
|
export default Pressable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,cAAc,IAAI,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExE,MAAM,
|
|
1
|
+
{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,cAAc,IAAI,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExE,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;;;;wCAQd,CAAC;AAGF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../../src/components/media/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,
|
|
1
|
+
{"version":3,"file":"QRCode.d.ts","sourceRoot":"","sources":["../../../../src/components/media/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EACL,UAAU,EACV,WAAW,EAEX,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,GAAG;IAC3C,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;IACF,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC5B,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,MAAM;IAhDR,8DAA8D;aACrD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACjC;IACD,uCAAuC;YAC/B,MAAM;IACd,6CAA6C;WACtC,MAAM;IACb,sCAAsC;sBACpB,MAAM;IACxB,sCAAsC;YAC9B,MAAM;IACd,6BAA6B;UACvB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;IAC3B,mDAAmD;WAC5C,MAAM;IACb,uBAAuB;eACZ,MAAM;IACjB,gCAAgC;gBACpB,MAAM;;;wCA+DrB,CAAC;AAGF,eAAe,MAAM,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { forwardRef
|
|
2
|
-
import { StyledView,
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { StyledView, } from '@mapples/style';
|
|
3
3
|
import QRCodeSvg from 'react-native-qrcode-svg';
|
|
4
4
|
/**
|
|
5
5
|
* A customizable QR code component with built-in styling support.
|
|
@@ -27,12 +27,6 @@ import QRCodeSvg from 'react-native-qrcode-svg';
|
|
|
27
27
|
*/
|
|
28
28
|
const QRCode = forwardRef(({ styled, value = '', size = 200, backgroundColor = '#FFFFFF', color = '#000000', ecl = 'M', logo, logoSize, quietZone, ...props }, ref) => {
|
|
29
29
|
const { styleSvg, ...styledProps } = styled || {};
|
|
30
|
-
const svgStyle = useMemo(() => {
|
|
31
|
-
const flattened = styleSvg ? Styler.flatten(styleSvg) : {};
|
|
32
|
-
return {
|
|
33
|
-
...flattened,
|
|
34
|
-
};
|
|
35
|
-
}, [styleSvg]);
|
|
36
30
|
return (<StyledView ref={ref} styled={styledProps} {...props}>
|
|
37
31
|
{value && (<QRCodeSvg value={value} size={size} color={color} backgroundColor={backgroundColor} ecl={ecl} logo={logo ? { uri: logo } : undefined} logoSize={logoSize} quietZone={quietZone}/>)}
|
|
38
32
|
</StyledView>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../../src/components/media/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,
|
|
1
|
+
{"version":3,"file":"QRCode.js","sourceRoot":"","sources":["../../../../src/components/media/QRCode/QRCode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAGL,UAAU,GAEX,MAAM,gBAAgB,CAAC;AAExB,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAkChD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EACE,MAAM,EACN,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,GAAG,EACV,eAAe,GAAG,SAAS,EAC3B,KAAK,GAAG,SAAS,EACjB,GAAG,GAAG,GAAG,EACT,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAElD,OAAO,CACL,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,CACnD;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CACvC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,SAAS,CAAC,CAAC,SAAS,CAAC,EACrB,CACH,CACH;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,eAAe,MAAM,CAAC"}
|
package/dist/schematics.d.ts
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
*
|
|
15
15
|
* @public
|
|
16
16
|
*/
|
|
17
|
-
export declare const
|
|
17
|
+
export declare const UIComponents: {
|
|
18
18
|
readonly [x: string]: import("@mapples/types").RegisteredComponent<object> | import("@mapples/types").RegisteredComponent<object>;
|
|
19
19
|
};
|
|
20
20
|
//# sourceMappingURL=schematics.d.ts.map
|
package/dist/schematics.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH;;;;;;;GAOG;AACH,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY;;CAKf,CAAC"}
|
package/dist/schematics.js
CHANGED
package/dist/schematics.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../src/schematics.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,GAAG,eAAe;IAClB,GAAG,oBAAoB;IACvB,GAAG,gBAAgB;IACnB,GAAG,eAAe;CACV,CAAC"}
|