@ttoss/components 1.8.0

package/README.md

@@ -0,0 +1,15 @@
+# @ttoss/components
+
+## 📚 About
+
+<strong>@ttoss/components</strong> is a set of React components that you can use to build your apps.
+
+## 🚀 Getting Started
+
+### Install @ttoss/components
+
+```shell
+$ yarn add @ttoss/components
+# or
+$ npm install @ttoss/components
+```

package/dist/esm/index.js

@@ -0,0 +1,63 @@
+// tsup.inject.js
+import * as React from "react";
+
+// src/components/InstallPwa/InstallPwa.tsx
+import * as React2 from "react";
+
+// src/components/InstallPwa/InstallPwaUi.tsx
+import { Button, Flex, Text } from "@ttoss/ui";
+var InstallPwaUi = ({ onInstall }) => {
+  return /* @__PURE__ */ React.createElement(Flex, {
+    sx: {
+      position: "absolute",
+      bottom: 4,
+      width: "100%",
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */ React.createElement(Flex, {
+    sx: {
+      backgroundColor: "background",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 3,
+      width: "auto",
+      border: "1px solid",
+      borderColor: "muted",
+      borderRadius: 1,
+      padding: 4
+    }
+  }, /* @__PURE__ */ React.createElement(Text, null, "Deseja instalar o nosso aplicativo?"), /* @__PURE__ */ React.createElement(Button, {
+    onClick: onInstall
+  }, "Instalar")));
+};
+
+// src/components/InstallPwa/InstallPwa.tsx
+var InstallPwa = () => {
+  const [supportsPwa, setSupportsPwa] = React2.useState(false);
+  const [promptInstall, setPromptInstall] = React2.useState(null);
+  React2.useEffect(() => {
+    const handler = (e) => {
+      e.preventDefault();
+      setSupportsPwa(true);
+      setPromptInstall(e);
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => window.removeEventListener("transitionend", handler);
+  }, []);
+  const onInstall = (e) => {
+    e.preventDefault();
+    if (!promptInstall) {
+      return;
+    }
+    promptInstall.prompt();
+  };
+  if (!supportsPwa) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
+    onInstall
+  });
+};
+export {
+  InstallPwa
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const InstallPwa: () => JSX.Element | null;
+
+export { InstallPwa };

package/dist/index.js

@@ -0,0 +1,99 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  InstallPwa: () => InstallPwa
+});
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/components/InstallPwa/InstallPwa.tsx
+var React2 = __toESM(require("react"));
+
+// src/components/InstallPwa/InstallPwaUi.tsx
+var import_ui = require("@ttoss/ui");
+var InstallPwaUi = ({ onInstall }) => {
+  return /* @__PURE__ */ React.createElement(import_ui.Flex, {
+    sx: {
+      position: "absolute",
+      bottom: 4,
+      width: "100%",
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */ React.createElement(import_ui.Flex, {
+    sx: {
+      backgroundColor: "background",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 3,
+      width: "auto",
+      border: "1px solid",
+      borderColor: "muted",
+      borderRadius: 1,
+      padding: 4
+    }
+  }, /* @__PURE__ */ React.createElement(import_ui.Text, null, "Deseja instalar o nosso aplicativo?"), /* @__PURE__ */ React.createElement(import_ui.Button, {
+    onClick: onInstall
+  }, "Instalar")));
+};
+
+// src/components/InstallPwa/InstallPwa.tsx
+var InstallPwa = () => {
+  const [supportsPwa, setSupportsPwa] = React2.useState(false);
+  const [promptInstall, setPromptInstall] = React2.useState(null);
+  React2.useEffect(() => {
+    const handler = (e) => {
+      e.preventDefault();
+      setSupportsPwa(true);
+      setPromptInstall(e);
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => window.removeEventListener("transitionend", handler);
+  }, []);
+  const onInstall = (e) => {
+    e.preventDefault();
+    if (!promptInstall) {
+      return;
+    }
+    promptInstall.prompt();
+  };
+  if (!supportsPwa) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
+    onInstall
+  });
+};
+module.exports = __toCommonJS(src_exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InstallPwa
+});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@ttoss/components",
+  "version": "1.8.0",
+  "description": "React components.",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "React",
+    "components"
+  ],
+  "author": "ttoss",
+  "contributors": [
+    {
+      "email": "pedro@arantespp.com",
+      "name": "Pedro Arantes",
+      "url": "https://arantespp.com/contact"
+    }
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "jest",
+    "dev": "yarn workspace @docs/storybook run dev"
+  },
+  "dependencies": {
+    "@ttoss/ui": "^1.8.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@ttoss/config": "^1.8.0",
+    "@ttoss/test-utils": "^1.8.0"
+  },
+  "gitHead": "cc80acf9bb493d047b7bc4d951bd0c1c6875def3"
+}

package/src/components/InstallPwa/InstallPwa.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { InstallPwaUi } from './InstallPwaUi';
+
+export const InstallPwa = () => {
+  const [supportsPwa, setSupportsPwa] = React.useState(false);
+  const [promptInstall, setPromptInstall] = React.useState<any>(null);
+
+  React.useEffect(() => {
+    const handler = (e: any) => {
+      e.preventDefault();
+      setSupportsPwa(true);
+      setPromptInstall(e);
+    };
+
+    window.addEventListener('beforeinstallprompt', handler);
+
+    return () => window.removeEventListener('transitionend', handler);
+  }, []);
+
+  const onInstall = (e: any) => {
+    e.preventDefault();
+    if (!promptInstall) {
+      return;
+    }
+    promptInstall.prompt();
+  };
+
+  if (!supportsPwa) {
+    return null;
+  }
+
+  return <InstallPwaUi onInstall={onInstall} />;
+};

package/src/components/InstallPwa/InstallPwaUi.tsx

@@ -0,0 +1,35 @@
+import { Button, Flex, Text } from '@ttoss/ui';
+
+export type InstallPwaUiProps = {
+  onInstall: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+export const InstallPwaUi = ({ onInstall }: InstallPwaUiProps) => {
+  return (
+    <Flex
+      sx={{
+        position: 'absolute',
+        bottom: 4,
+        width: '100%',
+        justifyContent: 'center',
+      }}
+    >
+      <Flex
+        sx={{
+          backgroundColor: 'background',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 3,
+          width: 'auto',
+          border: '1px solid',
+          borderColor: 'muted',
+          borderRadius: 1,
+          padding: 4,
+        }}
+      >
+        <Text>Deseja instalar o nosso aplicativo?</Text>
+        <Button onClick={onInstall}>Instalar</Button>
+      </Flex>
+    </Flex>
+  );
+};

package/src/index.spec.tsx

@@ -0,0 +1,5 @@
+import * as componentsModule from './index';
+
+test('should export components', () => {
+  expect(componentsModule.InstallPwa).toBeDefined();
+});

package/src/index.ts

@@ -0,0 +1 @@
+export { InstallPwa } from './components/InstallPwa/InstallPwa';