npm - @commercelayer/app-elements - Versions diffs - 0.0.80 → 0.1.1 - Mend

@commercelayer/app-elements 0.0.80 → 0.1.1

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.

Files changed (128) hide show

package/README.md CHANGED Viewed

@@ -1,59 +1,25 @@
-# App Elements
-React UI Elements for Commerce Layer applications.
-## What is Commerce Layer?
-[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.
+> [!WARNING]
+> This library is still in active development.
-## Table of contents
-- [Getting started](#getting-started)
-- [Preact](#preact)
+# App Elements
-## Getting started
+`App Elements` is a React components library used to build Commerce Layer dashboard HUB apps. This library contains different types of components, helpers and hooks, from simple and small bits like `Button` o `Card` to complex components like `OrderSummary`.
-1. Install the package as dependency
+## Local development
 ```sh
-pnpm install @commercelayer/app-elements
-```
-2. Add global css in your app index.tsx
-```jsx
-import "@commercelayer/app-elements/style.css";
-React.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+pnpm install
+pnpm dev
 ```
-3. load Manrope Google font into your html
+### Link to other application
-```html
-<head>
-  <link rel="preconnect" href="https://fonts.gstatic.com" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
-    rel="stylesheet"
-  />
-</head>
-```
+```sh
+pnpm build:elements --watch
-4. Import any components your need
+cd ~/projects/app-elements/packages/app-elements
+pnpm link --global
-```jsx
-import { Container, Button, Label } from "@commercelayer/app-elements";
+cd ~/projects/my-app/packages/app
+pnpm link --global @commercelayer/app-elements
 ```
-5. (optional) install `@commercelayer/sdk` to use `<TokenProvider>` component
-## Preact
-Support for `preact` is provided out of the box, thanks to the fact we are not including React jsx-runtime modules in bundled files.
-The application where this package is installed to is responsible of this.
-But no extra configuration should be required in your project, in fact all latest versions of vite, react and preact will handle this automatically.

package/dist/{Async-a8cbdb5b.js → Async-566ec3f7.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { L as de, H as le } from "./main-dd440dc6.js";
+import { L as de, H as le } from "./main-795be39b.js";
 import * as ce from "react";
 import { useRef as F, useState as a, useEffect as x, useCallback as D, forwardRef as ve } from "react";
-import { _ as Oe, a as s, h as Se, b as g, u as me, S as _e, c as he, s as ge } from "./overrides-0673bab0.js";
-import { d as ye } from "./unsupportedIterableToArray-0f93b40f.js";
+import { _ as Oe, a as s, h as Se, b as g, u as me, S as _e, c as he, s as ge } from "./overrides-346bb0f6.js";
+import { d as ye } from "./unsupportedIterableToArray-a3020d44.js";
 import "react-dom";
 import "@commercelayer/sdk";
 import "react-hook-form";

package/dist/{InputDateComponent-a8c34dc1.js → InputDateComponent-4461b3e6.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { P as Ma, r as E, a as Rn, t as H, b as Mt, c as Ee, d as _, g as Cr, _ as Qt, s as je, e as cr, f as xa, h as ur, i as Ln, j as Sa, k as Oa, l as Ea, m as qr, n as _a, o as Kr, p as Pa, q as Ta, u as Na, v as An, w as ae, x as nt, y as pr, z as Hn, A as Ya, B as lr, C as Zr, D as Ia, E as Ra, F as La, G as At, H as Ke, I as Aa, J as Ha, K as Fa } from "./main-dd440dc6.js";
+import { P as Ma, r as E, a as Rn, t as H, b as Mt, c as Ee, d as _, g as Cr, _ as Qt, s as je, e as cr, f as xa, h as ur, i as Ln, j as Sa, k as Oa, l as Ea, m as qr, n as _a, o as Kr, p as Pa, q as Ta, u as Na, v as An, w as ae, x as nt, y as pr, z as Hn, A as Ya, B as lr, C as Zr, D as Ia, E as Ra, F as La, G as At, H as Ke, I as Aa, J as Ha, K as Fa } from "./main-795be39b.js";
 import * as B from "react";
 import h, { forwardRef as Fn, createElement as ja, Component as Ua, createRef as Ba } from "react";
-import { _ as Wa, a as I, b as R, c as N, d as D, e as b, f as Y } from "./unsupportedIterableToArray-0f93b40f.js";
+import { _ as Wa, a as I, b as R, c as N, d as D, e as b, f as Y } from "./unsupportedIterableToArray-a3020d44.js";
 import * as Va from "react-dom";
 import Qa, { findDOMNode as $a } from "react-dom";
 import "@commercelayer/sdk";
@@ -5227,7 +5227,7 @@ const Lc = Fn(
         hint: p,
         feedback: f,
         label: s,
-        children: /* @__PURE__ */ Ke.jsxs("div", { className: "relative", children: [
+        children: /* @__PURE__ */ Ke.jsxs("div", { className: "relative w-full", children: [
           /* @__PURE__ */ Ke.jsx(
             Ic,
             {

package/dist/{Select-e581ae99.js → Select-89937223.js} RENAMED Viewed

@@ -1,12 +1,12 @@
-import { H as n } from "./main-dd440dc6.js";
-import { u as s, S as m, c as p, s as i } from "./overrides-0673bab0.js";
+import { H as n } from "./main-795be39b.js";
+import { u as s, S as m, c as p, s as i } from "./overrides-346bb0f6.js";
 import * as c from "react";
 import { forwardRef as S } from "react";
 import "react-dom";
 import "@commercelayer/sdk";
 import "react-hook-form";
 import "query-string";
-import "./unsupportedIterableToArray-0f93b40f.js";
+import "./unsupportedIterableToArray-a3020d44.js";
 var f = /* @__PURE__ */ S(function(e, t) {
   var o = s(e);
   return /* @__PURE__ */ c.createElement(m, p({

package/dist/helpers/appsNavigation.d.ts CHANGED Viewed

@@ -68,5 +68,5 @@ interface NavigateToExternalDetailsParams {
 export declare function navigateToDetail(params: NavigateToInternalDetailsParams | NavigateToExternalDetailsParams): {
     href: string;
     onClick: (e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement, MouseEvent>) => void;
-};
+} | null;
 export {};