@tecsinapse/react-web-kit 1.22.1-beta.8 → 1.22.2

package/esm/components/organisms/DataGrid/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/organisms/DataGrid/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox, Icon, PressableSurface } from '@tecsinapse/react-core';\nimport { Th, THead, Tr } from '../../../atoms/Table';\nimport { CheckboxHeader } from './styled';\nimport { HeadersType, SortState } from '../types';\nimport {\n  findCurrentItemsOnData,\n  findUnselectedItemsOnData,\n  getIconColor,\n  getIconSuffix,\n  NEXT_STATE,\n} from './utils';\n\nexport interface DataGridHeaderProps<Data> {\n  headers: HeadersType<Data>[];\n  data: Data[];\n  selectedRows: Data[];\n  onSelected?: (data: Data[]) => void;\n  rowKeyExtractor: (data: Data) => string;\n  rowsCount: number;\n  selectable?: boolean;\n}\n\nconst Header = <Data,>({\n  selectable,\n  rowsCount,\n  headers,\n  data,\n  rowKeyExtractor,\n  selectedRows,\n  onSelected,\n}: DataGridHeaderProps<Data>): JSX.Element => {\n  const [sortDirection, setSortDirection] = React.useState<SortState>(\n    NEXT_STATE.initial\n  );\n\n  const handleSortDirection = sort => {\n    sort(NEXT_STATE[sortDirection]);\n    setSortDirection(NEXT_STATE[sortDirection]);\n  };\n\n  const handleSelectAll = checked => {\n    if (!checked) {\n      onSelected?.([]);\n      return;\n    }\n\n    const currentItemsOnData = findCurrentItemsOnData(\n      selectedRows,\n      data,\n      rowKeyExtractor\n    );\n\n    const unselectedItemsOnData = findUnselectedItemsOnData(\n      selectedRows,\n      data,\n      rowKeyExtractor\n    );\n\n    if (checked && selectedRows.length < 1) {\n      onSelected?.(data);\n      return;\n    }\n    if (checked && currentItemsOnData.length < 1) {\n      onSelected?.(unselectedItemsOnData.concat(selectedRows));\n      return;\n    }\n    onSelected?.(selectedRows.concat(unselectedItemsOnData));\n  };\n\n  return (\n    <THead>\n      <Tr>\n        {selectable && (\n          <CheckboxHeader>\n            <Checkbox\n              checked={rowsCount === selectedRows?.length}\n              onChange={handleSelectAll}\n            />\n          </CheckboxHeader>\n        )}\n        {headers.map(({ label, sort, justifyContent = 'flex-start' }) => (\n          <Th key={label}>\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent,\n              }}\n            >\n              {label}\n              {sort && (\n                <div style={{ marginLeft: 8 }}>\n                  <PressableSurface onPress={() => handleSortDirection(sort)}>\n                    <Icon\n                      name={`sort-alphabetical-${getIconSuffix(sortDirection)}`}\n                      type={'material-community'}\n                      fontColor={getIconColor(sortDirection)}\n                    />\n                  </PressableSurface>\n                </div>\n              )}\n            </div>\n          </Th>\n        ))}\n      </Tr>\n    </THead>\n  );\n};\n\nexport default Header;\n"],"names":[],"mappings":"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"}

package/esm/components/organisms/DataGrid/Header/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/organisms/DataGrid/Header/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Th } from '../../../atoms/Table';\n\nexport const CheckboxHeader = styled(Th)<Partial<StyleProps>>`\n  padding: 0 0 0 ${({ theme }) => theme.spacing.mili};\n  & * {\n    user-select: none;\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;AAIa,MAAA,cAAA,GAAiB,OAAO,EAAE,CAAA,CAAA;AAAA,iBAAA,EACpB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/esm/components/organisms/DataGrid/Header/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/components/organisms/DataGrid/Header/utils.ts"],"sourcesContent":["import { SortState } from '../types';\n\nexport const NEXT_STATE: { [key: string]: SortState } = {\n  unsorted: 'ascending',\n  ascending: 'descending',\n  descending: 'unsorted',\n  initial: 'unsorted',\n};\n\nexport const getIconSuffix = (state: SortState): string =>\n  state === 'unsorted' ? 'ascending' : state;\n\nexport const getIconColor = (state: SortState): 'medium' | 'orange' =>\n  state === 'unsorted' ? 'medium' : 'orange';\n\nexport const findUnselectedItemsOnData = <T>(\n  selected: T[],\n  data: T[],\n  rowKeyExtractor: (t: T) => string\n): T[] =>\n  selected.length > 0\n    ? data.filter(item =>\n        selected.every(\n          rowData => rowKeyExtractor(rowData) !== rowKeyExtractor(item)\n        )\n      )\n    : [];\n\nexport const findCurrentItemsOnData = <T>(\n  selected: T[],\n  data: T[],\n  rowKeyExtractor: (t: T) => string\n): T[] =>\n  selected.length > 0\n    ? selected.filter(item =>\n        data.some(rowData => rowKeyExtractor(rowData) === rowKeyExtractor(item))\n      )\n    : [];\n"],"names":[],"mappings":"AAEO,MAAM,UAA2C,GAAA;AAAA,EACtD,QAAU,EAAA,WAAA;AAAA,EACV,SAAW,EAAA,YAAA;AAAA,EACX,UAAY,EAAA,UAAA;AAAA,EACZ,OAAS,EAAA,UAAA;AACX,EAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,KAC5B,KAAA,KAAA,KAAU,aAAa,WAAc,GAAA,MAAA;AAEhC,MAAM,YAAe,GAAA,CAAC,KAC3B,KAAA,KAAA,KAAU,aAAa,QAAW,GAAA,SAAA;AAEvB,MAAA,yBAAA,GAA4B,CACvC,QACA,EAAA,IAAA,EACA,oBAEA,QAAS,CAAA,MAAA,GAAS,IACd,IAAK,CAAA,MAAA;AAAA,EAAO,UACV,QAAS,CAAA,KAAA;AAAA,IACP,CAAW,OAAA,KAAA,eAAA,CAAgB,OAAO,CAAA,KAAM,gBAAgB,IAAI,CAAA;AAAA,GAC9D;AACF,CAAA,GACA,GAAC;AAEM,MAAA,sBAAA,GAAyB,CACpC,QACA,EAAA,IAAA,EACA,oBAEA,QAAS,CAAA,MAAA,GAAS,IACd,QAAS,CAAA,MAAA;AAAA,EAAO,CAAA,IAAA,KACd,KAAK,IAAK,CAAA,CAAA,OAAA,KAAW,gBAAgB,OAAO,CAAA,KAAM,eAAgB,CAAA,IAAI,CAAC,CAAA;AACzE,CAAA,GACA;;;;"}

package/esm/components/organisms/DataGrid/Row/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sources":["../../../../../src/components/organisms/DataGrid/Row/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox } from '@tecsinapse/react-core';\nimport { CheckboxCell } from '../styled';\nimport { Td, Tr } from '../../../atoms/Table';\n\nconst Row = ({\n  rowKeyExtractor,\n  data,\n  checked: _checked,\n  handleSelect,\n  selectable,\n  headers,\n}) => {\n  return (\n    <Tr key={rowKeyExtractor(data)}>\n      {selectable && (\n        <CheckboxCell>\n          <Checkbox\n            checked={_checked}\n            onChange={checked => handleSelect(data, checked)}\n          />\n        </CheckboxCell>\n      )}\n      {headers.map(({ label, render }) => (\n        <Td key={`row-${rowKeyExtractor(data)}-column-${label}`}>\n          {render(data)}\n        </Td>\n      ))}\n    </Tr>\n  );\n};\n\nexport default React.memo(Row);\n"],"names":[],"mappings":";;;;;;;;;;;AAKA,MAAM,MAAM,CAAC;AAAA,EACX,eAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAS,EAAA,QAAA;AAAA,EACT,YAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AACJ,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,EAAA,EAAA;AAAA,IAAG,GAAA,EAAK,gBAAgB,IAAI,CAAA;AAAA,GAC1B,EAAA,UAAA,oBACE,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACC,OAAS,EAAA,QAAA;AAAA,IACT,QAAU,EAAA,CAAA,OAAA,KAAW,YAAa,CAAA,IAAA,EAAM,OAAO,CAAA;AAAA,GACjD,CACF,GAED,OAAQ,CAAA,GAAA,CAAI,CAAC,EAAE,KAAA,EAAO,MAAO,EAAA,qBAC3B,KAAA,CAAA,aAAA,CAAA,EAAA,EAAA;AAAA,IAAG,GAAK,EAAA,CAAA,IAAA,EAAO,eAAgB,CAAA,IAAI,CAAY,CAAA,QAAA,EAAA,KAAA,CAAA,CAAA;AAAA,GAAA,EAC7C,MAAO,CAAA,IAAI,CACd,CACD,CACH,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,YAAe,KAAA,CAAM,KAAK,GAAG,CAAA;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/organisms/DataGrid/styled.ts"],"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"],"names":[],"mappings":";;;;;;;;;;;AAIa,MAAA,YAAA,GAAe,OAAO,EAAE,CAAA,CAAA;AAAA,WAAA,EACxB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/organisms/DataGrid/utils.ts"],"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  pagination: boolean\n): Data[] =>\n  rowsCount || !pagination\n    ? data\n    : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);\n"],"names":[],"mappings":"AAAgB,SAAA,aAAA,CAAiB,KAAU,KAAoB,EAAA;AAC7D,EAAM,MAAA,IAAA,GAAO,CAAC,GAAG,GAAG,CAAA,CAAA;AACpB,EAAK,IAAA,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA,CAAA;AACpB,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAEO,MAAM,UAAU,CACrB,IAAA,EACA,SACA,EAAA,IAAA,EACA,aACA,UAEA,KAAA,SAAA,IAAa,CAAC,UAAA,GACV,OACA,IAAK,CAAA,KAAA,CAAM,OAAO,WAAa,EAAA,IAAA,GAAO,cAAc,WAAW;;;;"}

package/esm/hooks/useBreakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoints.js","sources":["../../src/hooks/useBreakpoints.ts"],"sourcesContent":["import { useTheme } from '@tecsinapse/react-core';\nimport { useWindowSize } from './useWindowSize';\n\nexport type UseBreakpointsReturn = {\n  sm: boolean;\n  md: boolean;\n  lg: boolean;\n};\n\nexport const useBreakpoints = (): UseBreakpointsReturn => {\n  const { width } = useWindowSize();\n  const { breakpoints } = useTheme();\n  return {\n    sm: Number(width) >= 0 && Number(width) <= breakpoints.sm,\n    md: Number(width) > breakpoints.sm && Number(width) <= breakpoints.md,\n    lg: Number(width) > breakpoints.md,\n  };\n};\n"],"names":[],"mappings":";;;AASO,MAAM,iBAAiB,MAA4B;AACxD,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,aAAc,EAAA,CAAA;AAChC,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,QAAS,EAAA,CAAA;AACjC,EAAO,OAAA;AAAA,IACL,EAAA,EAAI,OAAO,KAAK,CAAA,IAAK,KAAK,MAAO,CAAA,KAAK,KAAK,WAAY,CAAA,EAAA;AAAA,IACvD,EAAA,EAAI,OAAO,KAAK,CAAA,GAAI,YAAY,EAAM,IAAA,MAAA,CAAO,KAAK,CAAA,IAAK,WAAY,CAAA,EAAA;AAAA,IACnE,EAAI,EAAA,MAAA,CAAO,KAAK,CAAA,GAAI,WAAY,CAAA,EAAA;AAAA,GAClC,CAAA;AACF;;;;"}

package/esm/hooks/useClickAwayListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickAwayListener.js","sources":["../../src/hooks/useClickAwayListener.ts"],"sourcesContent":["import React from 'react';\n\nexport const useClickAwayListener = (\n  ref: React.MutableRefObject<any>,\n  setVisible: React.Dispatch<React.SetStateAction<boolean>>,\n  event: 'mouseup' | 'mousedown' | undefined = 'mousedown'\n): void => {\n  React.useEffect(() => {\n    const handleClickOutside = event => {\n      if (ref.current && !ref.current.contains(event.target)) {\n        setVisible(false);\n      }\n    };\n    document.addEventListener(event, handleClickOutside);\n    return () => {\n      document.removeEventListener(event, handleClickOutside);\n    };\n  }, [ref]);\n};\n"],"names":["event"],"mappings":";;AAEO,MAAM,oBAAuB,GAAA,CAClC,GACA,EAAA,UAAA,EACA,QAA6C,WACpC,KAAA;AACT,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAM,MAAA,kBAAA,GAAqB,CAAAA,MAAS,KAAA;AAClC,MAAI,IAAA,GAAA,CAAI,WAAW,CAAC,GAAA,CAAI,QAAQ,QAASA,CAAAA,MAAAA,CAAM,MAAM,CAAG,EAAA;AACtD,QAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AACA,IAAS,QAAA,CAAA,gBAAA,CAAiB,OAAO,kBAAkB,CAAA,CAAA;AACnD,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,mBAAA,CAAoB,OAAO,kBAAkB,CAAA,CAAA;AAAA,KACxD,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AACV;;;;"}

package/esm/hooks/useWindowSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":["import React from 'react';\n\ntype WindowSize = {\n  width: number | undefined;\n  height: number | undefined;\n};\n\nexport const useWindowSize = (): WindowSize => {\n  const [windowSize, setWindowSize] = React.useState<WindowSize>({\n    width: undefined,\n    height: undefined,\n  });\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n    window.addEventListener('resize', handleResize);\n    handleResize();\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  return windowSize;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,gBAAgB,MAAkB;AAC7C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,MAAM,QAAqB,CAAA;AAAA,IAC7D,KAAO,EAAA,KAAA,CAAA;AAAA,IACP,MAAQ,EAAA,KAAA,CAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAc,aAAA,CAAA;AAAA,QACZ,OAAO,MAAO,CAAA,UAAA;AAAA,QACd,QAAQ,MAAO,CAAA,WAAA;AAAA,OAChB,CAAA,CAAA;AAAA,KACH,CAAA;AACA,IAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA,CAAA;AAC9C,IAAa,YAAA,EAAA,CAAA;AACb,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AAAA,GAChE,EAAG,EAAE,CAAA,CAAA;AACL,EAAO,OAAA,UAAA,CAAA;AACT;;;;"}

package/package.json

@@ -1,18 +1,11 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.22.1-beta.8+28a3477",
+  "version": "1.22.2",
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "types": "dist/index.d.ts",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    "import": "./dist/esm/index.js",
-    "default": "./dist/cjs/index.js"
-  },
   "scripts": {
     "start": "yarn build:es --watch",
     "build:es": "yarn rollup --config",
@@ -24,13 +17,13 @@
     "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
-    "@emotion/native": "~11.10.0",
-    "@emotion/react": "~11.10.0",
-    "@emotion/styled": "~11.10.0",
-    "@tecsinapse/react-core": "^1.21.1-beta.8+28a3477",
+    "@emotion/native": "^11.10.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@tecsinapse/react-core": "^1.21.2",
     "@types/react-native": "^0.64.4",
-    "react-native-vector-icons": "~9.2.0",
-    "react-transition-group": "~4.4.2"
+    "react-native-vector-icons": "^9.2.0",
+    "react-transition-group": "^4.4.2"
   },
   "repository": {
     "type": "git",
@@ -46,5 +39,5 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native-web": "^0.17.1 || ^0.18.0"
   },
-  "gitHead": "28a3477be880727285a5155950d80f7d78666314"
+  "gitHead": "6fd94322cdd8670ff536a8fb8271cb519b2310c9"
 }

package/rollup.config.js

@@ -0,0 +1,44 @@
+import esbuild from 'rollup-plugin-esbuild';
+import alias from '@rollup/plugin-alias';
+
+const outputDefaultConfig = {
+  preserveModules: true,
+  preserveModulesRoot: 'src',
+  sourcemap: true,
+};
+
+export default [
+  {
+    input: ['./src/index.ts'],
+    output: [
+      {
+        dir: 'esm',
+        format: 'esm',
+        ...outputDefaultConfig,
+      },
+      {
+        dir: 'dist',
+        format: 'cjs',
+        exports: 'auto',
+        ...outputDefaultConfig,
+      },
+    ],
+    plugins: [
+      alias({
+        entries: [{ find: 'react-native', replacement: 'react-native-web' }],
+      }),
+      esbuild({ tsconfig: 'tsconfig.build.json' }),
+    ],
+    external: [
+      'react',
+      'react-dom',
+      'react-native-web',
+      '@emotion/native',
+      '@emotion/react',
+      '@emotion/styled',
+      '@tecsinapse/react-core',
+      'react-native-vector-icons',
+      'react-transition-group',
+    ],
+  },
+];

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: 'Web/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,100 @@
+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 extends React.HTMLAttributes<HTMLDivElement> {
+  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,
+  ...rest
+}) => {
+  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 {...rest}>
+      <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;

package/src/components/atoms/Accordion/animations.ts

@@ -0,0 +1,51 @@
+import { ThemeProp, extractNumbersFromString } from '@tecsinapse/react-core';
+
+export const contentStyle = (
+  open: boolean,
+  transition: number,
+  value: number,
+  theme: ThemeProp
+) => ({
+  transition: `padding-bottom ${transition * 2}ms ease-in-out, height ${
+    transition * 2
+  }ms ease-in-out`,
+  paddingBottom: open ? extractNumbersFromString(theme.spacing.kilo) : 0,
+  height: open ? value : 0,
+});
+
+export const contentTransition = (value: number, theme: ThemeProp) => {
+  const paddingBottom = extractNumbersFromString(theme.spacing.kilo);
+  return {
+    entering: {
+      paddingBottom,
+      height: value,
+    },
+    entered: {
+      paddingBottom,
+      height: value,
+    },
+    exiting: {
+      paddingBottom,
+      height: value,
+    },
+    exited: { paddingBottom: 0, height: 0 },
+  };
+};
+
+export const titleStyle = (transition: number, theme: ThemeProp) => ({
+  transition: `color ${transition * 2}ms ease-in-out`,
+  color: theme.font.color.dark,
+});
+
+export const titleTransition = (theme: ThemeProp) => ({
+  entering: {
+    color: theme.font.color.orange,
+  },
+  entered: {
+    color: theme.font.color.orange,
+  },
+  exiting: {
+    color: theme.font.color.orange,
+  },
+  exited: { color: theme.font.color.dark },
+});

package/src/components/atoms/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';

package/src/components/atoms/Accordion/styled.ts

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+
+export const IconContainer = styled('div')<Partial<StyleProps>>`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  border: ${({ theme }) =>
+    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TitleContainer = styled('div')<Partial<StyleProps>>`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spacing.kilo} 0;
+`;
+
+export const AccordionContainer = styled('div')<Partial<StyleProps>>`
+  display: flex;
+  flex-direction: column;
+  border-bottom: ${({ theme }) =>
+    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+
+export const ContentContainer = styled('div')`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;

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

@@ -0,0 +1,24 @@
+import { Story } from '@storybook/react';
+import { Icon } from '@tecsinapse/react-core';
+import { BadgeWebProps } from './Badge';
+import React from 'react';
+import { Badge } from '.';
+
+export default {
+  title: 'Hybrid/Badge',
+  component: Badge,
+};
+
+const Template: Story<BadgeWebProps> = ({ color, fontColor, tone }) => (
+  <Badge color={color} tone={tone} value={5} fontColor={fontColor}>
+    <Icon name={'user-circle'} type={'font-awesome'} size={'mega'} />
+  </Badge>
+);
+
+export const Base = Template.bind({});
+
+Base.args = {
+  color: 'primary',
+  fontColor: 'light',
+  tone: 'medium',
+};

package/src/components/atoms/Badge/Badge.tsx

@@ -0,0 +1,34 @@
+import {
+  BadgeProps,
+  Badge as BadgeCore,
+  Text,
+  FontColorType,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+
+export interface BadgeWebProps extends Omit<BadgeProps, 'value'> {
+  fontColor?: FontColorType;
+  value: string | number;
+}
+
+const Badge: FC<BadgeWebProps> = ({
+  children,
+  fontColor = 'light',
+  value,
+  ...props
+}) => {
+  return (
+    <BadgeCore
+      {...props}
+      value={
+        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>
+          {value}
+        </Text>
+      }
+    >
+      {children}
+    </BadgeCore>
+  );
+};
+
+export default Badge;

package/src/components/atoms/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export type { BadgeWebProps } from './Badge';

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

@@ -0,0 +1,35 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import { Text } from '@tecsinapse/react-core';
+import React from 'react';
+import Button, { WebButtonProps } from './Button';
+
+export default {
+  title: 'Hybrid/Button',
+  component: Button,
+};
+
+interface ButtonPropsExtended extends WebButtonProps {
+  label: string;
+}
+
+const Template: Story<ButtonPropsExtended> = args => (
+  <div style={{ width: 200 }}>
+    <Button {...args}>
+      <Text fontWeight="bold" fontColor="light">
+        {args.label}
+      </Text>
+    </Button>
+  </div>
+);
+
+export const Base = Template.bind({});
+
+Base.args = {
+  onPress: e => action('onPress')(e),
+  label: 'Button',
+  color: 'primary',
+  variant: 'filled',
+  tone: 'medium',
+  size: 'small',
+};

package/src/components/atoms/Button/Button.tsx

@@ -0,0 +1,61 @@
+import { ButtonProps } from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { useMouseHover } from './hooks/useMouseHover';
+import { useMousePressed } from './hooks/useMousePressed';
+import { StyledWebButton } from './styled';
+
+/**
+ * TODO: Add a property 'defaultElement' to render a default
+ * component and provide some button's state to it.
+ */
+export type WebButtonProps = ButtonProps & {
+  onMouseOver?: () => void;
+  onMouseOut?: () => void;
+  onPressIn?: () => void;
+  onPressOut?: () => void;
+};
+
+const Button: FC<WebButtonProps> = ({
+  children,
+  disabled,
+  frozen,
+  state,
+  variant,
+  onMouseOut,
+  onMouseOver,
+  onPressIn,
+  onPressOut,
+  ...rest
+}): JSX.Element => {
+  const _frozen = frozen || state === 'loading';
+  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(
+    !disabled && !_frozen,
+    onMouseOut,
+    onMouseOver
+  );
+  const { pressed, handlePressIn, handlePressOut } = useMousePressed(
+    !disabled && !_frozen,
+    onPressIn,
+    onPressOut
+  );
+
+  return (
+    <StyledWebButton
+      {...rest}
+      disabled={disabled}
+      frozen={_frozen}
+      state={state}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      mouseOver={mouseOver}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      pressed={pressed}
+      variant={variant}
+    >
+      {children}
+    </StyledWebButton>
+  );
+};
+
+export default Button;

package/src/components/atoms/Button/hooks/useMouseHover.ts

@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'react';
+
+export const useMouseHover = (
+  active: boolean,
+  onMouseOver?: () => void,
+  onMouseOut?: () => void
+) => {
+  const [mouseOver, setMouseOver] = useState<boolean>(false);
+
+  const handleMouseOver = useCallback(() => {
+    if (active) {
+      setMouseOver(true);
+      onMouseOver?.();
+    }
+  }, [active, setMouseOver]);
+
+  const handleMouseOut = useCallback(() => {
+    if (active) {
+      setMouseOver(false);
+      onMouseOut?.();
+    }
+  }, [active, setMouseOver]);
+
+  return {
+    mouseOver,
+    handleMouseOver,
+    handleMouseOut,
+  };
+};