@commercelayer/app-elements 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -0
- package/dist/{Async-ba6be658.js → Async-aebe6fb6.js} +2 -2
- package/dist/{InputDateComponent-89d2ab03.js → InputDateComponent-1b76aaec.js} +2695 -3924
- package/dist/{Select-72746d2c.js → Select-cf15ff7b.js} +2 -2
- package/dist/helpers/date.d.ts +14 -4
- package/dist/main-e7c75433.js +6593 -0
- package/dist/main.js +8 -8
- package/dist/{overrides-52d8822b.js → overrides-679fa915.js} +1 -1
- package/dist/style.css +1 -1
- package/package.json +3 -1
- package/dist/main-dc0e3952.js +0 -5009
package/README.md
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# App Elements
|
|
2
|
+
|
|
3
|
+
React UI Elements for Commerce Layer applications.
|
|
4
|
+
|
|
5
|
+
## What is Commerce Layer?
|
|
6
|
+
|
|
7
|
+
[Commerce Layer](https://commercelayer.io) is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.
|
|
8
|
+
|
|
9
|
+
## Table of contents
|
|
10
|
+
|
|
11
|
+
- [Getting started](#getting-started)
|
|
12
|
+
- [Preact](#preact)
|
|
13
|
+
|
|
14
|
+
## Getting started
|
|
15
|
+
|
|
16
|
+
1. Install the package as dependency
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
pnpm install @commercelayer/app-elements
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
2. Add global css in your app index.tsx
|
|
23
|
+
|
|
24
|
+
```jsx
|
|
25
|
+
import "@commercelayer/app-elements/style.css";
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
React.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
29
|
+
<React.StrictMode>
|
|
30
|
+
<App />
|
|
31
|
+
</React.StrictMode>
|
|
32
|
+
)
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
3. load Manrope Google font into your html
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<head>
|
|
39
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
|
40
|
+
<link
|
|
41
|
+
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
|
|
42
|
+
rel="stylesheet"
|
|
43
|
+
/>
|
|
44
|
+
</head>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
4. Import any components your need
|
|
48
|
+
|
|
49
|
+
```jsx
|
|
50
|
+
import { Container, Button, Label } from "@commercelayer/app-elements";
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
5. (optional) install `@commercelayer/sdk` to use `<TokenProvider>` component
|
|
54
|
+
|
|
55
|
+
## Preact
|
|
56
|
+
|
|
57
|
+
Support for `preact` is provided out of the box, thanks to the fact we are not including React jsx-runtime modules in bundled files.
|
|
58
|
+
The application where this package is installed to is responsible of this.
|
|
59
|
+
But no extra configuration should be required in your project, in fact all latest versions of vite, react and preact will handle this automatically.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as de from "react";
|
|
2
2
|
import le, { useRef as W, useState as a, useEffect as z, useCallback as B, forwardRef as ce } from "react";
|
|
3
|
-
import { _ as ve, a as s, h as Oe, b as O, c as Se, u as _e, S as he, d as me, s as ge } from "./overrides-
|
|
3
|
+
import { _ as ve, a as s, h as Oe, b as O, c as Se, u as _e, S as he, d as me, s as ge } from "./overrides-679fa915.js";
|
|
4
4
|
import "react-dom";
|
|
5
|
-
import "./main-
|
|
5
|
+
import "./main-e7c75433.js";
|
|
6
6
|
import "@commercelayer/sdk";
|
|
7
7
|
var ye = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
|
|
8
8
|
function Ce(t) {
|