@plurix/ecom-components 0.0.2-beta.9 → 1.0.0

package/README.md

@@ -1,48 +1,76 @@
-<img width="500" alt="ViteReactComponentLibrary" src="https://github.com/receter/my-component-library/assets/2504695/dbb53036-d228-477b-8cf8-f61cd6130776">
-
-# A simple (demo) react component library
-This repository was published together with an article on [how to create a react component library](https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma) using Vite's library mode.
-
-Here is another repo that consumes this libarary: https://github.com/receter/my-component-library-consumer
-
-The demo library on npm: https://www.npmjs.com/package/@receter/my-component-library
-
-## Installation
-You can install it with npm (don't expect much fanciness):
-```bash
-npm i @receter/my-component-library
-```
-
-## Usage
-```javascript
-import { Button, Label, Input } from '@receter/my-component-library';
-```
-See this file for an example on using this library: https://github.com/receter/my-component-library-consumer/blob/main/src/App.tsx
-
-## React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-### Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-   },
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+# @plurix/ecom-components
+
+## Dependencies
+
+Use `yarn` to install all dependencies and prepare `husky` (used to run scripts in git steps).
+
+## Folder Structure
+
+- `lib`: files that will be compiled and published in the `@plurix/ecom-components` package
+- `src`: local development
+
+## How to Create a New Component in the Package
+
+- Create a new folder in `lib/packages`, with your component name. Example: `MyComponent`;
+- Create a `.tsx` file inside this new folder and export a component from there. Example:
+
+```tsx
+// lib/packages/MyComponent/MyComponent.tsx
+
+export const MyComponent = () => {
+  return <h1>My Component</h1>
+}
+```
+
+- Export the new component in `lib/main.ts`. Example:
+
+```tsx
+// lib/main.ts
+
+export { MyComponent } from './packages/MyComponent/MyComponent'
+```
+
+- Create a new file called `<component-name>Example.tsx` in `src/examples` and import your component. Example:
+
+```tsx
+// src/examples/MyComponentExample.tsx
+
+import { MyComponent } from '../../lib/main'
+
+export const MyComponentExample = () => {
+  return (
+    <div className="my-component-example-container">
+      <MyComponent />
+    </div>
+  )
+}
+```
+
+- Export the new example component in `src/index.ts`. Example:
+
+```tsx
+// src/examples/index.ts
+
+export { MyComponentExample } from './MyComponentExample'
+```
+
+- Run `yarn dev`;
+- Open the localhost link in the terminal;
+- Choose your component in the sidebar. Now, you can develop your component and test it with `fast refresh`.
+
+OBS: If you need to use `css` in your components, create them as `<component-name>.global.css` and import them in your Lib Component. Then, you are able to use that in `VTEX IO` and `VTEX Faststore`.
+
+![Imgur](https://imgur.com/NMMASrC.jpg)
+
+## Publishing
+
+- After finishing your component changes, upgrade the package version in `package.json` and create an entry in `CHANGELOG.md`.
+- Commit and push your changes to the remote repository. It will run the husky scripts: commitlint, prettier, lint, tests, and build.
+- After all scripts pass successfully, run `npm publish` in your terminal.
+- Copy the published version from your terminal and install it in another repository.
+- You can import the new component by using:
+
+```tsx
+import { MyComponent } from '@plurix/ecom-components'
+import '@plurix/ecom-components/dist/styles/my-component.global.css' // If you are using css
+```

package/dist/assets/svgs/ArrowIcon.d.ts

@@ -5,5 +5,5 @@ interface ArrowIconProps {
     rotate?: Rotate;
 }
 type Rotate = 'Up' | 'Right' | 'Down' | 'Left';
-export declare const ArrowIcon: ({ width, height, color, rotate, }: ArrowIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrowIcon: ({ width, height, color, rotate }: ArrowIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/assets/svgs/ArrowIcon.js

@@ -4,7 +4,7 @@ const i = {
   Right: 180,
   Down: 270,
   Left: 0
-}, c = ({
+}, a = ({
   width: r = 16,
   height: t = 16,
   color: e = "var(--color-grayScale)",
@@ -20,6 +20,7 @@ const i = {
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    "data-testid": "arrow-icon",
     children: /* @__PURE__ */ o(
       "path",
       {
@@ -33,5 +34,5 @@ const i = {
   }
 );
 export {
-  c as ArrowIcon
+  a as ArrowIcon
 };

package/dist/assets/svgs/ErrorIcon.d.ts

@@ -1,5 +1,5 @@
 interface ErrorIconProps {
     color?: string;
 }
-export declare const ErrorIcon: ({ color, }: ErrorIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ErrorIcon: ({ color }: ErrorIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main.d.ts

@@ -5,3 +5,4 @@ export { Onboarding } from './packages/Onboarding/Onboarding';
 export { Tour } from './packages/Tour/Tour';
 export { Regionalization } from './packages/Regionalization/Regionalization';
 export * from './packages/Regionalization/types';
+export { Modal } from './packages/Modal/Modal';

package/dist/main.js

@@ -2,13 +2,15 @@ import { CartClubAlert as e } from "./packages/CartClubAlert/CartClubAlert.js";
 import { Carousel as p } from "./packages/Carousel/Carousel.js";
 import { Coupons as m } from "./packages/Coupons/Coupons.js";
 import { Onboarding as a } from "./packages/Onboarding/Onboarding.js";
-import { Tour as i } from "./packages/Tour/Tour.js";
+import { Tour as n } from "./packages/Tour/Tour.js";
 import { Regionalization as u } from "./packages/Regionalization/Regionalization.js";
+import { Modal as b } from "./packages/Modal/Modal.js";
 export {
   p as Carousel,
   e as CartClubAlert,
   m as Coupons,
+  b as Modal,
   a as Onboarding,
   u as Regionalization,
-  i as Tour
+  n as Tour
 };

package/dist/packages/Modal/Modal.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, Dispatch, SetStateAction } from 'react';
+
+interface ModalProps {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    children: ReactNode;
+    className?: string;
+    title: string;
+    titleAction?: () => void;
+    hasTitleArrow?: boolean;
+    Footer?: ReactNode;
+}
+export declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/packages/Modal/Modal.js

@@ -0,0 +1,53 @@
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { useRef as s, useEffect as a } from "react";
+import v from "react-outside-click-handler";
+import { ArrowIcon as w } from "../../assets/svgs/ArrowIcon.js";
+import { CloseIcon as C } from "../../assets/svgs/CloseIcon.js";
+import { HAS_WINDOW as x } from "../../constants/index.js";
+/* empty css                  */const I = (m) => {
+  const {
+    isOpen: e,
+    setIsOpen: f,
+    children: u,
+    className: h,
+    title: n,
+    titleAction: i,
+    hasTitleArrow: p,
+    Footer: c
+  } = m, r = s(null), l = s(null), d = () => f(!1);
+  return a(() => {
+    if (x)
+      return e ? window.document.body.classList.add("no-scroll") : window.document.body.classList.remove("no-scroll"), () => {
+        window.document.body.classList.remove("no-scroll");
+      };
+  }, [e]), a(() => {
+    l.current && r.current && (r.current.style.maxHeight = `calc(100% - 56px - ${l.current.offsetHeight}px)`);
+  }, [e]), e ? /* @__PURE__ */ o(
+    "div",
+    {
+      id: "modal-container",
+      "data-testid": "modal-container",
+      className: h,
+      children: /* @__PURE__ */ o("div", { id: "modal-content-container", children: /* @__PURE__ */ o(v, { onOutsideClick: d, children: /* @__PURE__ */ t("div", { id: "modal-content", children: [
+        /* @__PURE__ */ t("header", { children: [
+          i ? /* @__PURE__ */ t("button", { onClick: i, className: "modal-title", children: [
+            p && /* @__PURE__ */ o(
+              w,
+              {
+                rotate: "Left",
+                color: "var(--color-support-links)"
+              }
+            ),
+            n
+          ] }) : /* @__PURE__ */ o("h2", { className: "modal-title", children: n }),
+          /* @__PURE__ */ o("button", { onClick: d, className: "modal-close", children: /* @__PURE__ */ o(C, { color: "var(--color-main)" }) })
+        ] }),
+        /* @__PURE__ */ o("div", { id: "modal-scroll", ref: r, children: u }),
+        c && /* @__PURE__ */ o("footer", { ref: l, children: c })
+      ] }) }) })
+    }
+  ) : null;
+};
+export {
+  I as Modal
+};

package/dist/packages/Onboarding/constants/tips.js

@@ -1,26 +1,26 @@
 import { Tip1 as o } from "../tips/Tip1.js";
-import { Tip2 as e } from "../tips/Tip2.js";
-import { Tip3 as i } from "../tips/Tip3.js";
-import { Tip4 as a } from "../tips/Tip4.js";
+import { Tip2 as i } from "../tips/Tip2.js";
+import { Tip3 as a } from "../tips/Tip3.js";
+import { Tip4 as e } from "../tips/Tip4.js";
 import { Tip5 as s } from "../tips/Tip5.js";
-const p = 5, u = [
+const n = 5, u = [
   {
     svg: o,
     isIllustration: !1,
     tip: "O site e aplicativo vai ficando com a sua cara conforme você vai comprando, assim você tem uma experiência de acordo com seu padrão de compra"
   },
   {
-    svg: e,
+    svg: i,
     isIllustration: !0,
     tip: "Veja produtos que você comprou anteriormente e adicione eles ao seu carrinho, fazendo suas compras com mais rapidez"
   },
   {
-    svg: i,
+    svg: a,
     isIllustration: !0,
-    tip: "Você também consegue consegue repetir um pedido adicionando ele inteiro ao seu carrinho, onde você pode aumentar ou diminuir a quantidade dos produtos"
+    tip: "Você também consegue repetir um pedido adicionando ele inteiro ao seu carrinho, onde você pode aumentar ou diminuir a quantidade dos produtos"
   },
   {
-    svg: a,
+    svg: e,
     isIllustration: !0,
     tip: "Você terá acesso aos corredores que você mais compra logo na tela inicial, assim você consegue conferir melhor a variedade dos produtos que você mais leva"
   },
@@ -32,5 +32,5 @@ const p = 5, u = [
 ];
 export {
   u as TIPS,
-  p as TIPS_LENGTH
+  n as TIPS_LENGTH
 };