@mirai/ui 1.0.132 → 1.0.134

package/build/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","names":["Table","dataSource","inline","schema","search","selected","propSelected","onPress","onScroll","onSelect","others","useState","setSelected","sort","setSort","handleSelect","row","event","exists","includes","next","filter","item","push","handleHeadSelect","length","handleSort","field","undefined","testId","React","createElement","ScrollView","View","Fragment","className","styles","style","outlined","table","useMemo","select","map","index","propTypes","PropTypes","arrayOf","shape","bool","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { Fragment, useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ScrollView, View } from '../../primitives';\nimport { select } from './helpers';\nimport style from './Table.module.css';\nimport { TableRow } from './Table.Row';\n\nexport const Table = ({\n  dataSource = [],\n  inline = true,\n  schema,\n  search,\n  selected: propSelected = [],\n  onPress,\n  onScroll,\n  onSelect,\n  ...others\n}) => {\n  const [selected, setSelected] = useState(propSelected);\n  const [sort, setSort] = useState({});\n\n  const handleSelect = (row, event) => {\n    setSelected(() => {\n      const exists = selected.includes(row);\n      const next = selected.filter((item) => item !== row);\n      if (!exists) next.push(row);\n\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleHeadSelect = (row, event) => {\n    setSelected(() => {\n      const next = selected.length !== dataSource.length ? dataSource : [];\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return React.createElement(\n    onScroll ? ScrollView : !inline ? View : Fragment,\n    onScroll || !inline\n      ? { ...others, onScroll, className: styles(!inline && style.outlined, others.className) }\n      : undefined,\n    <table\n      {...(!onScroll ? others : undefined)}\n      className={styles(style.table, !onScroll && !inline && others.className)}\n    >\n      <thead>\n        <TableRow\n          checked={selected.length === dataSource.length}\n          indeterminate={selected.length > 0}\n          schema={schema}\n          sort={sort}\n          onSelect={onSelect ? handleHeadSelect : undefined}\n          onSort={handleSort}\n          data-testid={testId ? `${testId}-head` : undefined}\n        />\n      </thead>\n      <tbody>\n        {useMemo(() => select(dataSource, { search, sort }), [dataSource, search, sort]).map((row, index) => (\n          <TableRow\n            checked={selected.includes(row)}\n            dataSource={row}\n            key={index}\n            schema={schema}\n            onPress={onPress}\n            onSelect={onSelect ? handleSelect : undefined}\n            data-testid={testId ? `${testId}-${index}` : undefined}\n          />\n        ))}\n      </tbody>\n    </table>,\n  );\n};\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  inline: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  selected: PropTypes.arrayOf(PropTypes.shape()),\n  onPress: PropTypes.func,\n  onScroll: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Table.js","names":["Table","dataSource","filter","propFilter","inline","schema","search","selected","propSelected","onPress","onScroll","onSelect","others","useState","setFilter","setSelected","sort","setSort","useEffect","JSON","stringify","handleAddFilter","item","handleRemoveFilter","index","splice","handleHeadSelect","row","event","next","length","handleSelect","exists","includes","push","handleSort","field","undefined","testId","React","createElement","ScrollView","View","Fragment","className","styles","style","outlined","table","useMemo","select","map","find","displayName","propTypes","PropTypes","arrayOf","shape","bool","isRequired","string","func"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { Fragment, useEffect, useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { ScrollView, View } from '../../primitives';\nimport { select } from './helpers';\nimport { Filter } from './Table.Filter';\nimport style from './Table.module.css';\nimport { Row } from './Table.Row';\n\nexport const Table = ({\n  dataSource = [],\n  filter: propFilter = [],\n  inline = true,\n  schema,\n  search,\n  selected: propSelected = [],\n  onPress,\n  onScroll,\n  onSelect,\n  ...others\n}) => {\n  const [filter, setFilter] = useState(propFilter);\n  const [selected, setSelected] = useState(propSelected);\n  const [sort, setSort] = useState({});\n\n  useEffect(() => {\n    if (JSON.stringify(filter) !== JSON.stringify(propFilter)) setFilter(propFilter);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [propFilter]);\n\n  const handleAddFilter = (item) => {\n    setFilter([...filter, item]);\n  };\n\n  const handleRemoveFilter = (index) => {\n    filter.splice(index, 1);\n    setFilter([...filter]);\n  };\n\n  const handleHeadSelect = (row, event) => {\n    setSelected(() => {\n      const next = selected.length !== dataSource.length ? dataSource : [];\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleSelect = (row, event) => {\n    setSelected(() => {\n      const exists = selected.includes(row);\n      const next = selected.filter((item) => item !== row);\n      if (!exists) next.push(row);\n      onSelect(next, event);\n\n      return next;\n    });\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return React.createElement(\n    onScroll ? ScrollView : !inline ? View : Fragment,\n    onScroll || !inline\n      ? { ...others, onScroll, className: styles(!inline && style.outlined, others.className) }\n      : undefined,\n    <>\n      {filter.length > 0 && <Filter filter={filter} onRemove={(index) => handleRemoveFilter(index)} />}\n      <table\n        {...(!onScroll ? others : undefined)}\n        className={styles(style.table, !onScroll && !inline && others.className)}\n      >\n        <thead>\n          <Row\n            checked={selected.length === dataSource.length}\n            indeterminate={selected.length > 0}\n            schema={schema}\n            sort={sort}\n            onFilter={handleAddFilter}\n            onSelect={onSelect ? handleHeadSelect : undefined}\n            onSort={handleSort}\n            data-testid={testId ? `${testId}-head` : undefined}\n          />\n        </thead>\n        <tbody>\n          {useMemo(() => select(dataSource, { filter, search, sort }), [dataSource, filter, search, sort]).map(\n            (row, index) => (\n              <Row\n                checked={!!selected.find((item) => JSON.stringify(item) === JSON.stringify(row))}\n                dataSource={row}\n                key={index}\n                schema={schema}\n                onPress={onPress}\n                onSelect={onSelect ? handleSelect : undefined}\n                data-testid={testId ? `${testId}-${index}` : undefined}\n              />\n            ),\n          )}\n        </tbody>\n      </table>\n    </>,\n  );\n};\n\nTable.displayName = 'Component:Table';\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  filter: PropTypes.arrayOf(PropTypes.shape({})),\n  inline: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  selected: PropTypes.arrayOf(PropTypes.shape()),\n  onPress: PropTypes.func,\n  onScroll: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/components/Table/Table.module.css

@@ -67,9 +67,9 @@
   padding-right: var(--mirai-ui-table-padding-x);
 }
 
-.table th .icon {
-  /* ? TODO: Ask design */
-  /* margin-left: auto; */
+.table th .icons {
+  gap: calc(var(--mirai-ui-space-XS) / 2);
+  margin-left: auto;
 }
 
 .table th .icon.disabled {
@@ -104,7 +104,44 @@
   overflow-y: hidden;
 }
 
-@media only screen and (min-width: 430px) {
+/* <ColumnFilter> */
+.table .menuFilter .items {
+  gap: var(--mirai-ui-space-M);
+}
+
+.table .menuFilter .input {
+  margin-bottom: 0;
+}
+
+/*  */
+.filters {
+  background-color: var(--mirai-ui-table-background);
+  box-shadow: inset 0 calc(var(--mirai-ui-border-width) * -1) var(--mirai-ui-table-border-color);
+  flex-wrap: wrap;
+  gap: var(--mirai-ui-space-XS);
+  left: 0;
+  padding: var(--mirai-ui-table-padding-y) var(--mirai-ui-table-padding-x);
+  position: sticky;
+  width: 100%;
+}
+
+.filters .filter {
+  background-color: var(--mirai-ui-table-color);
+  background-color: var(--mirai-ui-table-selected-background);
+  border-radius: var(--mirai-ui-table-border-radius);
+  gap: calc(var(--mirai-ui-space-XS) / 2);
+  padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
+  user-select: none;
+}
+
+.filters .filter * {
+  color: var(--mirai-ui-table-selected-color);
+}
+
+@media only screen and (max-width: 430px) {
+}
+
+@media only screen and (min-width: 431px) {
   .table thead tr th:hover {
     color: var(--mirai-ui-table-color);
     cursor: pointer;
@@ -118,4 +155,9 @@
   .table tbody tr:hover.onPress:not(.selected) td:first-child {
     background-color: var(--mirai-ui-table-selected-background);
   }
+
+  .table .menuFilter {
+    margin: var(--mirai-ui-space-M) 0;
+    width: calc(var(--mirai-ui-breakpoint-S) * 0.8);
+  }
 }

package/build/components/Table/Table.stories.js

@@ -139,6 +139,17 @@ var dataSource = [{
 Story.storyName = 'Table';
 Story.args = (_Story$args = {
   dataSource: dataSource,
+  filter: [{
+    field: 'email',
+    value: '@mirai.com'
+  }, {
+    field: 'email',
+    value: '@soyjavi.com'
+  }, {
+    field: 'year',
+    min: 2020,
+    max: 2023
+  }],
   inline: true,
   schema: {
     username: {
@@ -175,7 +186,7 @@ Story.args = (_Story$args = {
 }, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {
   height: '128px !important;',
   width: 128,
-  background: 'red'
+  background: 'green'
 }), _Story$args);
 Story.argTypes = {};
 //# sourceMappingURL=Table.stories.js.map

package/build/components/Table/Table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","names":["title","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","console","log","handlePress","handleSelect","style","table","dataSource","username","email","year","tags","map","language","tag","languages","action","twitter","undefined","bio","storyName","args","inline","schema","label","type","height","width","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputText, Text } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n  const [search, setSearch] = useState();\n\n  useEffect(() => {\n    setSearch(props.search);\n  }, [props.search]);\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <>\n      <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n      <Table\n        {...props}\n        search={search}\n        selected={selected}\n        onPress={handlePress}\n        onScroll={handleScroll}\n        onSelect={handleSelect}\n        className={style.table}\n      />\n    </>\n  );\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    year: 1,\n    tags: ['es', 'en', 'ja'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    languages: ['spanish', 'english', 'japanese'],\n    action: null,\n  },\n  { username: 'mario/1', email: 'mario.1@mirai.com', tags: null, year: 2005 },\n  { username: 'carlos', email: 'carlos@mirai.com', tags: null, year: 2012 },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    tags: ['en'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    languages: ['english'],\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n  },\n  {\n    username: 'javi',\n    email: 'hi@soyjavi.com',\n    tags: null,\n    year: 2022,\n    twitter: 'soyjavi',\n    bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n  },\n  { username: 'victor', email: 'victor@mirai.com', tags: null, year: 2021 },\n  { username: 'mario/2', email: 'mario.2@mirai.com', tags: null, year: 2022 },\n];\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource,\n  inline: true,\n  schema: {\n    username: { label: 'User Name', type: 'text' },\n    email: { label: 'Email' },\n    tags: { label: 'Tags', type: 'component' },\n    languages: { label: 'Languages (hidden)', type: 'hidden' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    bio: { label: 'Biography' },\n    action: { label: 'Action', type: 'component' },\n  },\n  search: '',\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: { height: '128px !important;', width: 128, background: 'red' },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
+{"version":3,"file":"Table.stories.js","names":["title","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","console","log","handlePress","handleSelect","style","table","dataSource","username","email","year","tags","map","language","tag","languages","action","twitter","undefined","bio","storyName","args","filter","field","value","min","max","inline","schema","label","type","height","width","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, InputText, Text } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n  const [search, setSearch] = useState();\n\n  useEffect(() => {\n    setSearch(props.search);\n  }, [props.search]);\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <>\n      <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n      <Table\n        {...props}\n        search={search}\n        selected={selected}\n        onPress={handlePress}\n        onScroll={handleScroll}\n        onSelect={handleSelect}\n        className={style.table}\n      />\n    </>\n  );\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    year: 1,\n    tags: ['es', 'en', 'ja'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    languages: ['spanish', 'english', 'japanese'],\n    action: null,\n  },\n  { username: 'mario/1', email: 'mario.1@mirai.com', tags: null, year: 2005 },\n  { username: 'carlos', email: 'carlos@mirai.com', tags: null, year: 2012 },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    tags: ['en'].map((language) => (\n      <Text key={language} bold small className={style.tag}>\n        {language}\n      </Text>\n    )),\n    languages: ['english'],\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n  },\n  {\n    username: 'javi',\n    email: 'hi@soyjavi.com',\n    tags: null,\n    year: 2022,\n    twitter: 'soyjavi',\n    bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n  },\n  { username: 'victor', email: 'victor@mirai.com', tags: null, year: 2021 },\n  { username: 'mario/2', email: 'mario.2@mirai.com', tags: null, year: 2022 },\n];\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource,\n  filter: [\n    { field: 'email', value: '@mirai.com' },\n    { field: 'email', value: '@soyjavi.com' },\n    { field: 'year', min: 2020, max: 2023 },\n  ],\n  inline: true,\n  schema: {\n    username: { label: 'User Name', type: 'text' },\n    email: { label: 'Email' },\n    tags: { label: 'Tags', type: 'component' },\n    languages: { label: 'Languages (hidden)', type: 'hidden' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    bio: { label: 'Biography' },\n    action: { label: 'Action', type: 'component' },\n  },\n  search: '',\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: { height: '128px !important;', width: 128, background: 'green' },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}

package/build/components/Table/Table.stories.module.css

@@ -18,7 +18,7 @@
 
 @media only screen and (min-width: 430px) {
   .table {
-    height: 50vh;
-    width: 50vw;
+    max-height: 30vh;
+    width: 60vw;
   }
 }