@ttoss/components 1.15.2 → 1.18.0

package/README.md

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

package/dist/esm/index.js

@@ -1,3 +1,5 @@
+"use strict";
+
 // tsup.inject.js
 import * as React from "react";
 
@@ -58,6 +60,60 @@ var InstallPwa = () => {
     onInstall
   });
 };
+
+// src/components/Modal/Modal.tsx
+import { useResponsiveValue, useTheme } from "@ttoss/ui";
+import ReactModal from "react-modal";
+ReactModal.defaultStyles = {
+  overlay: {},
+  content: {}
+};
+var Modal = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { theme } = useTheme();
+  const padding = useResponsiveValue([
+    (_a = theme.space) == null ? void 0 : _a[2],
+    (_b = theme.space) == null ? void 0 : _b[3],
+    (_c = theme.space) == null ? void 0 : _c[4]
+  ]) || 0;
+  const style = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding,
+      ...(_d = props.style) == null ? void 0 : _d.overlay
+    },
+    content: {
+      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      padding,
+      WebkitOverflowScrolling: "touch",
+      overflow: "auto",
+      position: "relative",
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+      border: "1px solid #ccc",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      ...(_g = props.style) == null ? void 0 : _g.content
+    }
+  };
+  return /* @__PURE__ */ React.createElement(ReactModal, {
+    ...props,
+    style
+  });
+};
+Modal.setAppElement = ReactModal.setAppElement;
 export {
-  InstallPwa
+  InstallPwa,
+  Modal
 };

package/dist/index.d.ts

@@ -1,3 +1,11 @@
+import ReactModal from 'react-modal';
+
 declare const InstallPwa: () => JSX.Element | null;
 
-export { InstallPwa };
+declare type ModalProps = ReactModal.Props;
+declare const Modal: {
+    (props: ModalProps): JSX.Element;
+    setAppElement: typeof ReactModal.setAppElement;
+};
+
+export { InstallPwa, Modal, ModalProps };

package/dist/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,7 +23,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  InstallPwa: () => InstallPwa
+  InstallPwa: () => InstallPwa,
+  Modal: () => Modal
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -86,7 +88,61 @@ var InstallPwa = () => {
     onInstall
   });
 };
+
+// src/components/Modal/Modal.tsx
+var import_ui2 = require("@ttoss/ui");
+var import_react_modal = __toESM(require("react-modal"));
+import_react_modal.default.defaultStyles = {
+  overlay: {},
+  content: {}
+};
+var Modal = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { theme } = (0, import_ui2.useTheme)();
+  const padding = (0, import_ui2.useResponsiveValue)([
+    (_a = theme.space) == null ? void 0 : _a[2],
+    (_b = theme.space) == null ? void 0 : _b[3],
+    (_c = theme.space) == null ? void 0 : _c[4]
+  ]) || 0;
+  const style = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding,
+      ...(_d = props.style) == null ? void 0 : _d.overlay
+    },
+    content: {
+      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      padding,
+      WebkitOverflowScrolling: "touch",
+      overflow: "auto",
+      position: "relative",
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+      border: "1px solid #ccc",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      ...(_g = props.style) == null ? void 0 : _g.content
+    }
+  };
+  return /* @__PURE__ */ React.createElement(import_react_modal.default, {
+    ...props,
+    style
+  });
+};
+Modal.setAppElement = import_react_modal.default.setAppElement;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  InstallPwa
+  InstallPwa,
+  Modal
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.15.2",
+  "version": "1.18.0",
   "description": "React components.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -31,14 +31,19 @@
     "dev": "yarn workspace @docs/storybook run dev"
   },
   "dependencies": {
-    "@ttoss/ui": "^1.15.2"
+    "@types/react-modal": "^3.13.1",
+    "react-modal": "^3.15.1"
   },
   "peerDependencies": {
+    "@ttoss/ui": "^1.16.5",
     "react": ">=16.8.0"
   },
   "devDependencies": {
     "@ttoss/config": "^1.15.2",
-    "@ttoss/test-utils": "^1.15.2"
+    "@ttoss/test-utils": "^1.15.2",
+    "@ttoss/ui": "^1.18.0",
+    "@types/jest": "^28.1.5",
+    "jest": "^28.1.3"
   },
-  "gitHead": "edc913c860d3e8d34b385e599fba28093bf0bd14"
+  "gitHead": "38d76661c6302b6447804375cd0193be9056b446"
 }

package/src/components/Modal/Modal.docs.md

@@ -0,0 +1,56 @@
+# Modal
+
+This components uses [react-modal package](http://reactcommunity.org/react-modal) as a base and apply [@ttoss/ui](/docs/modules/packages/ui/) styles.
+
+## Storybook
+
+[Modal Stories](https://storybook.ttoss.dev/?path=/story/components-modal)
+
+## Example
+
+```jsx
+import { Modal } from "@ttoss/components";
+import { Box, Flex, Text } from "@ttoss/ui";
+
+const Component = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Box>
+      <Modal
+        isOpen={isOpen}
+        onRequestClose={() => {
+          setIsOpen(false);
+        }}
+      >
+        <Flex
+          sx={{
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Text>This is a modal.</Text>
+          <Button
+            onClick={() => {
+              setIsOpen(false);
+            }}
+          >
+            Close Modal
+          </Button>
+        </Flex>
+      </Modal>
+      <Button
+        onClick={() => {
+          setIsOpen(true);
+        }}
+      >
+        Open Modal
+      </Button>
+    </Box>
+  );
+};
+```
+
+## API
+
+This components extends the API of [react-modal package](http://reactcommunity.org/react-modal/#usage).

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,62 @@
+import { useResponsiveValue, useTheme } from '@ttoss/ui';
+import ReactModal from 'react-modal';
+
+ReactModal.defaultStyles = {
+  overlay: {},
+  content: {},
+};
+
+export type ModalProps = ReactModal.Props;
+
+export const Modal = (props: ModalProps) => {
+  const { theme } = useTheme();
+
+  const padding =
+    useResponsiveValue([
+      theme.space?.[2],
+      theme.space?.[3],
+      theme.space?.[4],
+    ]) || 0;
+
+  const style: ReactModal.Styles = {
+    overlay: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding,
+      ...props.style?.overlay,
+    },
+    content: {
+      /**
+       * Theme
+       */
+      background: theme.rawColors?.background?.toString() || '#fff',
+      padding,
+      /**
+       * General
+       */
+      WebkitOverflowScrolling: 'touch',
+      overflow: 'auto',
+      position: 'relative',
+      top: '0px',
+      left: '0px',
+      right: '0px',
+      bottom: '0px',
+      border: '1px solid #ccc',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      ...props.style?.content,
+    },
+  };
+
+  return <ReactModal {...props} style={style} />;
+};
+
+Modal.setAppElement = ReactModal.setAppElement;

package/src/index.spec.tsx

@@ -1,5 +1,8 @@
 import * as componentsModule from './index';
 
-test('should export components', () => {
-  expect(componentsModule.InstallPwa).toBeDefined();
-});
+test.each([componentsModule.InstallPwa, componentsModule.Modal])(
+  'should export components %#',
+  (Component) => {
+    expect(Component).toBeDefined();
+  }
+);

package/src/index.ts

@@ -1 +1,2 @@
 export { InstallPwa } from './components/InstallPwa/InstallPwa';
+export { Modal, ModalProps } from './components/Modal/Modal';