@plurix/ecom-components 0.0.1

package/README.md

@@ -0,0 +1,48 @@
+<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

package/dist/assets/index.css

@@ -0,0 +1 @@
+._label_mog69_1{font-weight:700}

package/dist/assets/index2.css

@@ -0,0 +1 @@
+._input_1auw0_1{padding:1rem}

package/dist/assets/index3.css

@@ -0,0 +1 @@
+._button_1m5ht_1{padding:1rem}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/index.js

@@ -0,0 +1,12 @@
+import '../../assets/index3.css';
+import { jsx as s } from "react/jsx-runtime";
+const u = "_button_1m5ht_1", r = {
+  button: u
+};
+function e(t) {
+  const { className: o, ...n } = t;
+  return /* @__PURE__ */ s("button", { className: `${o} ${r.button}`, ...n });
+}
+export {
+  e as Button
+};

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Input(props: React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Input/index.js

@@ -0,0 +1,12 @@
+import '../../assets/index2.css';
+import { jsx as p } from "react/jsx-runtime";
+const u = "_input_1auw0_1", o = {
+  input: u
+};
+function r(t) {
+  const { className: n, ...s } = t;
+  return /* @__PURE__ */ p("input", { className: `${n} ${o.input}`, ...s });
+}
+export {
+  r as Input
+};

package/dist/components/Label/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/index.js

@@ -0,0 +1,12 @@
+import '../../assets/index.css';
+import { jsx as a } from "react/jsx-runtime";
+const o = "_label_mog69_1", t = {
+  label: o
+};
+function b(l) {
+  const { className: e, ...s } = l;
+  return /* @__PURE__ */ a("label", { className: `${e} ${t.label}`, ...s });
+}
+export {
+  b as Label
+};

package/dist/main.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Label } from './components/Label';

package/dist/main.js

@@ -0,0 +1,8 @@
+import { Button as t } from "./components/Button/index.js";
+import { Input as p } from "./components/Input/index.js";
+import { Label as m } from "./components/Label/index.js";
+export {
+  t as Button,
+  p as Input,
+  m as Label
+};

package/dist/vite-env.d.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@plurix/ecom-components",
+  "author": "Plurix",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/plurix-ecommerce/ecom-components"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.71",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "glob": "^10.3.10",
+    "prettier": "^2.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.4.3",
+    "vite": "^4.5.3",
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-lib-inject-css": "^2.0.1"
+  }
+}