@plurix/ecom-components 0.0.2-beta.8 → 1.0.0-SL.1698.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/assets/svgs/NoCouponIcon.d.ts

@@ -1 +1,6 @@
-export declare const NoCouponsIcon: () => import("react/jsx-runtime").JSX.Element;
+interface NoCouponsIconProps {
+    width?: number;
+    height?: number;
+}
+export declare const NoCouponsIcon: ({ width, height }: NoCouponsIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};