@tecsinapse/react-web-kit 1.3.2 → 1.6.1

package/dist/components/organisms/DataGrid/Row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Row/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as Row } from './Row';\n"],"file":"index.js"}

package/dist/components/organisms/DataGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DataGrid, DataGridProps } from './DataGrid';
+export * from './types';

package/dist/components/organisms/DataGrid/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  DataGrid: true,
+  DataGridProps: true
+};
+Object.defineProperty(exports, "DataGrid", {
+  enumerable: true,
+  get: function () {
+    return _DataGrid.default;
+  }
+});
+Object.defineProperty(exports, "DataGridProps", {
+  enumerable: true,
+  get: function () {
+    return _DataGrid.DataGridProps;
+  }
+});
+
+var _DataGrid = _interopRequireWildcard(require("./DataGrid"));
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.js.map

package/dist/components/organisms/DataGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/DataGrid/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as DataGrid, DataGridProps } from './DataGrid';\nexport * from './types';\n"],"file":"index.js"}

package/dist/components/organisms/DataGrid/styled.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxCell: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/dist/components/organisms/DataGrid/styled.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxCell = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _Table = require("../../atoms/Table");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CheckboxCell = (0, _styled.default)(_Table.Td)`
+  padding: ${({
+  theme
+}) => theme.spacing.mili};
+  & * {
+    user-select: none;
+  }
+`;
+exports.CheckboxCell = CheckboxCell;
+//# sourceMappingURL=styled.js.map

package/dist/components/organisms/DataGrid/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/DataGrid/styled.ts"],"names":["CheckboxCell","Td","theme","spacing","mili"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAEO,MAAMA,YAAY,GAAG,qBAAOC,SAAP,CAAgC;AAC5D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAC/C;AACA;AACA;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Td } from '../../atoms/Table';\n\nexport const CheckboxCell = styled(Td)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.mili};\n  & * {\n    user-select: none;\n  }\n`;\n"],"file":"styled.js"}

package/dist/components/organisms/DataGrid/types.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type HeadersType<Data> = {
+    label: string;
+    render: (data: Data) => React.ReactNode;
+    sort?: (direction: 'ascending' | 'descending' | 'unsorted') => void;
+    justifyContent?: 'flex-start' | 'center' | 'flex-end';
+};

package/dist/components/organisms/DataGrid/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/dist/components/organisms/DataGrid/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/dist/components/organisms/DataGrid/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function removeElement<T>(arr: T[], index: number): T[];
+export declare const getData: <Data>(data: Data[], rowsCount: number | undefined, page: number, rowsPerPage: number) => Data[];

package/dist/components/organisms/DataGrid/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeElement = removeElement;
+exports.getData = void 0;
+
+function removeElement(arr, index) {
+  const data = arr;
+  data.splice(index, 1);
+  return data;
+}
+
+const getData = (data, rowsCount, page, rowsPerPage) => rowsCount ? data : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
+
+exports.getData = getData;
+//# sourceMappingURL=utils.js.map

package/dist/components/organisms/DataGrid/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/organisms/DataGrid/utils.ts"],"names":["removeElement","arr","index","data","splice","getData","rowsCount","page","rowsPerPage","slice"],"mappings":";;;;;;;;AAAO,SAASA,aAAT,CAA0BC,GAA1B,EAAoCC,KAApC,EAAwD;AAC7D,QAAMC,IAAI,GAAGF,GAAb;AACAE,EAAAA,IAAI,CAACC,MAAL,CAAYF,KAAZ,EAAmB,CAAnB;AACA,SAAOC,IAAP;AACD;;AAEM,MAAME,OAAO,GAAG,CACrBF,IADqB,EAErBG,SAFqB,EAGrBC,IAHqB,EAIrBC,WAJqB,KAMrBF,SAAS,GACLH,IADK,GAELA,IAAI,CAACM,KAAL,CAAWF,IAAI,GAAGC,WAAlB,EAA+BD,IAAI,GAAGC,WAAP,GAAqBA,WAApD,CARC","sourcesContent":["export function removeElement<T>(arr: T[], index: number): T[] {\n  const data = arr; // Sometimes looks like the data is removed from table, check if this is a bug. I'm copying the arr to a new variable for security reasons\n  data.splice(index, 1);\n  return data;\n}\n\nexport const getData = <Data>(\n  data: Data[],\n  rowsCount: number | undefined,\n  page: number,\n  rowsPerPage: number\n): Data[] =>\n  rowsCount\n    ? data\n    : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);\n"],"file":"utils.js"}

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useClickAwayListener", {
+  enumerable: true,
+  get: function () {
+    return _useClickAwayListener.useClickAwayListener;
+  }
+});
+
+var _useClickAwayListener = require("./useClickAwayListener");
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { useClickAwayListener } from './useClickAwayListener';\n"],"file":"index.js"}

package/dist/hooks/useClickAwayListener.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useClickAwayListener: (ref: React.MutableRefObject<any>, setVisible: React.Dispatch<React.SetStateAction<boolean>>) => void;

package/dist/hooks/useClickAwayListener.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickAwayListener = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useClickAwayListener = (ref, setVisible) => {
+  _react.default.useEffect(() => {
+    const handleClickOutside = event => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setVisible(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+};
+
+exports.useClickAwayListener = useClickAwayListener;
+//# sourceMappingURL=useClickAwayListener.js.map

package/dist/hooks/useClickAwayListener.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useClickAwayListener.ts"],"names":["useClickAwayListener","ref","setVisible","React","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener"],"mappings":";;;;;;;AAAA;;;;AAEO,MAAMA,oBAAoB,GAAG,CAClCC,GADkC,EAElCC,UAFkC,KAG/B;AACHC,iBAAMC,SAAN,CAAgB,MAAM;AACpB,UAAMC,kBAAkB,GAAGC,KAAK,IAAI;AAClC,UAAIL,GAAG,CAACM,OAAJ,IAAe,CAACN,GAAG,CAACM,OAAJ,CAAYC,QAAZ,CAAqBF,KAAK,CAACG,MAA3B,CAApB,EAAwD;AACtDP,QAAAA,UAAU,CAAC,KAAD,CAAV;AACD;AACF,KAJD;;AAKAQ,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCN,kBAAvC;AACA,WAAO,MAAM;AACXK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CP,kBAA1C;AACD,KAFD;AAGD,GAVD,EAUG,CAACJ,GAAD,CAVH;AAWD,CAfM","sourcesContent":["import React from 'react';\n\nexport const useClickAwayListener = (\n  ref: React.MutableRefObject<any>,\n  setVisible: React.Dispatch<React.SetStateAction<boolean>>\n) => {\n  React.useEffect(() => {\n    const handleClickOutside = event => {\n      if (ref.current && !ref.current.contains(event.target)) {\n        setVisible(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [ref]);\n};\n"],"file":"useClickAwayListener.js"}

package/dist/index.d.ts

@@ -6,5 +6,11 @@ export { Tag, TagProps } from './components/atoms/Tag';
 export { InputPassword, InputPasswordWebProps, } from './components/molecules/InputPassword';
 export { Menubar, MenubarProps } from './components/molecules/Menubar';
 export { Drawer, DrawerProps } from './components/molecules/Drawer';
+export { Select, SelectProps } from './components/molecules/Select';
 export { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';
 export { Breadcrumbs, BreadcrumbsProps, } from './components/molecules/Breadcrumbs';
+export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
+export { Accordion, AccordionProps } from './components/atoms/Accordion';
+export { DataGrid, DataGridProps, HeadersType, } from './components/organisms/DataGrid';
+export { Modal, ModalProps } from './components/atoms/Modal';
+export * from './hooks';

package/dist/index.js

@@ -19,10 +19,21 @@ var _exportNames = {
   MenubarProps: true,
   Drawer: true,
   DrawerProps: true,
+  Select: true,
+  SelectProps: true,
   Snackbar: true,
   SnackbarWebProps: true,
   Breadcrumbs: true,
-  BreadcrumbsProps: true
+  BreadcrumbsProps: true,
+  Skeleton: true,
+  SkeletonProps: true,
+  Accordion: true,
+  AccordionProps: true,
+  DataGrid: true,
+  DataGridProps: true,
+  HeadersType: true,
+  Modal: true,
+  ModalProps: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -114,6 +125,18 @@ Object.defineProperty(exports, "DrawerProps", {
     return _Drawer.DrawerProps;
   }
 });
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _Select.Select;
+  }
+});
+Object.defineProperty(exports, "SelectProps", {
+  enumerable: true,
+  get: function () {
+    return _Select.SelectProps;
+  }
+});
 Object.defineProperty(exports, "Snackbar", {
   enumerable: true,
   get: function () {
@@ -138,6 +161,60 @@ Object.defineProperty(exports, "BreadcrumbsProps", {
     return _Breadcrumbs.BreadcrumbsProps;
   }
 });
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.Skeleton;
+  }
+});
+Object.defineProperty(exports, "SkeletonProps", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.SkeletonProps;
+  }
+});
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _Accordion.Accordion;
+  }
+});
+Object.defineProperty(exports, "AccordionProps", {
+  enumerable: true,
+  get: function () {
+    return _Accordion.AccordionProps;
+  }
+});
+Object.defineProperty(exports, "DataGrid", {
+  enumerable: true,
+  get: function () {
+    return _DataGrid.DataGrid;
+  }
+});
+Object.defineProperty(exports, "DataGridProps", {
+  enumerable: true,
+  get: function () {
+    return _DataGrid.DataGridProps;
+  }
+});
+Object.defineProperty(exports, "HeadersType", {
+  enumerable: true,
+  get: function () {
+    return _DataGrid.HeadersType;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "ModalProps", {
+  enumerable: true,
+  get: function () {
+    return _Modal.ModalProps;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -167,11 +244,35 @@ var _Menubar = require("./components/molecules/Menubar");
 
 var _Drawer = require("./components/molecules/Drawer");
 
+var _Select = require("./components/molecules/Select");
+
 var _Snackbar = require("./components/molecules/Snackbar");
 
 var _Breadcrumbs = require("./components/molecules/Breadcrumbs");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _Skeleton = require("./components/atoms/Skeleton");
+
+var _Accordion = require("./components/atoms/Accordion");
+
+var _DataGrid = require("./components/organisms/DataGrid");
+
+var _Modal = require("./components/atoms/Modal");
+
+var _hooks = require("./hooks");
+
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport { Menubar, MenubarProps } from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n} from './components/molecules/Breadcrumbs';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA;;AACA;;AAKA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport { Menubar, MenubarProps } from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport * from './hooks';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.3.2",
+  "version": "1.6.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -12,10 +12,11 @@
   },
   "dependencies": {
     "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.4.0",
+    "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.3.2",
-    "react-native-vector-icons": "^8.1.0"
+    "@tecsinapse/react-core": "^1.6.1",
+    "react-native-vector-icons": "^8.1.0",
+    "react-transition-group": "^4.4.2"
   },
   "repository": {
     "type": "git",
@@ -29,7 +30,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "react-native-web": "^0.15.0"
+    "react-native-web": "^0.17.1"
   },
-  "gitHead": "4d0be2097d37529b1a2cd728e92fc417ae567464"
+  "gitHead": "2f0c4cdbd33faad24cc6d51cfbd01e976543e4ab"
 }

package/src/components/atoms/Accordion/Accordion.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import Accordion, { AccordionProps } from './Accordion';
+import { Text } from '@tecsinapse/react-core';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    backgrounds: {
+      default: 'white',
+    },
+  },
+};
+
+const Template: Story<AccordionProps> = args => {
+  return (
+    <div style={{ width: 600 }}>
+      <Accordion {...args} title="Agreement terms">
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis
+          lorem sed felis pretium posuere quis ut quam. Nunc at mi quis urna
+          maximus feugiat id et neque. Nunc sit amet leo magna. Quisque eu risus
+          interdum, sagittis neque nec, ultrices ex.
+        </Text>
+      </Accordion>
+    </div>
+  );
+};
+
+export const Base = Template.bind({});
+
+Base.args = {
+  title: 'Agreement terms',
+};

package/src/components/atoms/Accordion/Accordion.tsx

@@ -0,0 +1,99 @@
+import React, { useRef } from 'react';
+import { Icon, Text, ThemeProp } from '@tecsinapse/react-core';
+import {
+  AccordionContainer,
+  IconContainer,
+  TitleContainer,
+  ContentContainer,
+} from './styled';
+import { Transition } from 'react-transition-group';
+import {
+  contentStyle,
+  contentTransition,
+  titleStyle,
+  titleTransition,
+} from './animations';
+import { useTheme } from '@emotion/react';
+
+export interface AccordionProps {
+  open?: boolean;
+  onChange?: () => void;
+  title: string;
+  /** Transition time for collapse effect in ms */
+  transition?: number;
+}
+
+const Accordion: React.FC<AccordionProps> = ({
+  title,
+  open: _open = false,
+  onChange,
+  transition = 200,
+  children,
+}) => {
+  const [open, setOpen] = React.useState(_open);
+  const [contentHeight, setContentHeight] = React.useState(0);
+  const theme = useTheme() as ThemeProp;
+
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => setOpen(_open), [_open]);
+
+  React.useLayoutEffect(() => {
+    const size = Array.from(
+      (ref.current?.children || []) as HTMLCollection
+    ).reduce((prev, curr) => prev + curr.clientHeight, 0);
+    setContentHeight(size);
+  }, []);
+
+  const handleClick = React.useCallback(() => {
+    if (onChange) {
+      onChange();
+      return;
+    }
+    setOpen(state => !state);
+  }, [onChange]);
+
+  return (
+    <AccordionContainer>
+      <TitleContainer onClick={handleClick}>
+        <Transition in={open} timeout={transition}>
+          {state => (
+            <Text
+              typography="h4"
+              fontWeight="bold"
+              style={{
+                ...titleStyle(transition, theme),
+                ...titleTransition(theme)[state],
+              }}
+            >
+              {title}
+            </Text>
+          )}
+        </Transition>
+        <IconContainer>
+          <Icon
+            type="material-community"
+            name={open ? 'chevron-up' : 'chevron-down'}
+            size="kilo"
+            fontColor="medium"
+          />
+        </IconContainer>
+      </TitleContainer>
+      <Transition in={open} timeout={transition}>
+        {state => (
+          <ContentContainer
+            ref={htmlEl => (ref.current = htmlEl)}
+            style={{
+              ...contentStyle(open, transition, contentHeight, theme),
+              ...contentTransition(contentHeight, theme)[state],
+            }}
+          >
+            {children}
+          </ContentContainer>
+        )}
+      </Transition>
+    </AccordionContainer>
+  );
+};
+
+export default Accordion;