From 300862acbc75efae256930664c348d9b1ab8ae59 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 22 Jul 2021 20:20:57 -0400 Subject: [PATCH] new(component) Select --- .eslintrc.js | 1 + README.md | 161 +- components.tsx | 376 +-- components/alert.ts | 23 + components/avatar.ts | 35 + components/avatarGroup.ts | 23 + components/button.ts | 41 + components/checkbox.ts | 41 + components/datePicker.ts | 53 + components/errorBoundary.tsx | 37 + components/select.ts | 41 + components/stepper.ts | 41 + components/switch.ts | 53 + components/tabs.ts | 17 + copy.ts | 1 + entities.ts | 12 + frameworks/index.ts => frameworks.ts | 78 +- frameworks/antDesign.ts | 12 + frameworks/atlaskit.ts | 12 + frameworks/blueprint.ts | 12 + frameworks/carbonDesign.ts | 12 + frameworks/chakraUI.ts | 12 + frameworks/elasticUI.ts | 12 + frameworks/element.ts | 12 + frameworks/elementalUI.ts | 12 + frameworks/evergreen.ts | 12 + frameworks/{uiFabric.ts => fluentUI.ts} | 18 +- frameworks/gestalt.ts | 12 + frameworks/grommet.ts | 12 + frameworks/materialUI.ts | 12 + frameworks/onsenUI.ts | 12 + frameworks/orbit.ts | 12 + frameworks/primeReact.ts | 12 + frameworks/quasar.ts | 12 + frameworks/reactBootstrap.ts | 12 + frameworks/reactMD.ts | 20 +- frameworks/reactToolbox.ts | 12 + frameworks/ringUI.ts | 12 + frameworks/semanticUI.ts | 12 + frameworks/smoothUI.ts | 12 + frameworks/zendesk.ts | 12 + markdown/generate-readme.ts | 3 +- package.json | 60 +- tsconfig.json | 5 +- utils.ts | 37 +- website/App.tsx | 3 + website/FrameworkFeatures.tsx | 51 +- website/FrameworkStatistics.tsx | 6 +- website/TableOfContents.tsx | 68 + website/theme.ts | 11 +- yarn.lock | 3845 ++++++++++------------- 51 files changed, 2755 insertions(+), 2670 deletions(-) create mode 100644 components/alert.ts create mode 100644 components/avatar.ts create mode 100644 components/avatarGroup.ts create mode 100644 components/button.ts create mode 100644 components/checkbox.ts create mode 100644 components/datePicker.ts create mode 100644 components/errorBoundary.tsx create mode 100644 components/select.ts create mode 100644 components/stepper.ts create mode 100644 components/switch.ts create mode 100644 components/tabs.ts create mode 100644 copy.ts rename frameworks/index.ts => frameworks.ts (53%) rename frameworks/{uiFabric.ts => fluentUI.ts} (88%) create mode 100644 website/TableOfContents.tsx diff --git a/.eslintrc.js b/.eslintrc.js index f80e911..7980a31 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,6 +7,7 @@ module.exports = { '@typescript-eslint/no-unsafe-member-access': 'off', '@typescript-eslint/no-unsafe-return': 'off', 'object-curly-newline': 'off', + 'react/react-in-jsx-scope': 'off', 'simple-import-sort/exports': 'error', 'simple-import-sort/imports': 'error', }, diff --git a/README.md b/README.md index d4ef4e0..47111a7 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ THIS FILE ENTIRE FILE IS AUTOGENERATED!!! PLEASE SEE `markdown/generate-readme.ts` and the files in the `frameworks` directory if you would like to make changes :) ******************************************************************************** --> -Are you a frontend developer or designer? Do you wish you had a one-stop-shop you could go to see the various implementations of common components? If so - React UI Roundup is for you! +Are you a frontend developer or designer? Do you wish you had a one-stop-shop where you could check out the various implementations of common components? If so - React UI Roundup is for you! | Name | Homepage | Repository | Stars | Forks | Issues | License | | --- | --- | --- | --- | --- | --- | --- | -| Ant Design | [ant.design](https://ant.design) | [ant-design/ant-design](https://github.com/ant-design/ant-design) | 5,611 | 27,416 | 617 | MIT | +| Ant Design | [ant.design](https://ant.design) | [ant-design/ant-design](https://github.com/ant-design/ant-design) | 73,294 | 29,234 | 678 | MIT | | Atlaskit | [atlassian.design](https://atlassian.design) | [bitbucket.org/atlassian/atlaskit-mk-2](https://bitbucket.org/atlassian/atlaskit-mk-2) | -- | -- | -- | -- | -| Blueprint | [blueprintjs.com](https://blueprintjs.com) | [palantir/blueprint](https://github.com/palantir/blueprint) | 17,574 | 1,840 | 555 | Apache 2.0 | -| Carbon Design | [react.carbondesignsystem.com](http://react.carbondesignsystem.com) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) | 4,157 | 950 | 436 | Apache 2.0 | -| Chakra UI | [chakra-ui.com](https://chakra-ui.com) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) | 16,807 | 1,327 | 75 | MIT | -| Elastic UI | [elastic.github.io/eui](https://elastic.github.io/eui) | [elastic/eui](https://github.com/elastic/eui) | 2,686 | 482 | 352 | Apache 2.0 | -| Element | [element.eleme.io](https://element.eleme.io) | [ElemeFE/element](https://github.com/ElemeFE/element) | 49,724 | 12,508 | 1,848 | MIT | -| Elemental UI | [elemental-ui.com](http://elemental-ui.com) | [elementalui/elemental](https://github.com/elementalui/elemental) | 4,322 | 242 | 49 | MIT | -| Evergreen | [evergreen.segment.com](https://evergreen.segment.com) | [segmentio/evergreen](https://github.com/segmentio/evergreen) | 10,619 | 640 | 77 | MIT | -| Gestalt | [gestalt.netlify.app](https://gestalt.netlify.app) | [pinterest/gestalt](https://github.com/pinterest/gestalt) | 3,761 | 290 | 12 | Apache 2.0 | -| Grommet | [v2.grommet.io](https://v2.grommet.io) | [grommet/grommet](https://github.com/grommet/grommet) | 7,157 | 870 | 210 | Apache 2.0 | -| Material UI | [material-ui.com](https://material-ui.com) | [mui-org/material-ui](https://github.com/mui-org/material-ui) | 67,410 | 21,338 | 501 | MIT | -| Onsen UI | [onsen.io](https://onsen.io) | [OnsenUI/OnsenUI](https://github.com/OnsenUI/OnsenUI) | 8,304 | 954 | 154 | Apache 2.0 | -| Orbit | [orbit.kiwi](https://orbit.kiwi) | [kiwicom/orbit](https://github.com/kiwicom/orbit) | 786 | 84 | 41 | MIT | -| Prime React | [primefaces.org/primereact](https://primefaces.org/primereact) | [primefaces/primereact](https://github.com/primefaces/primereact) | 1,944 | 425 | 176 | MIT | -| Quasar | [quasar.dev](https://quasar.dev) | [quasarframework/quasar](https://github.com/quasarframework/quasar) | 18,208 | 2,162 | 336 | MIT | -| React Bootstrap | [react-bootstrap.github.io](https://react-bootstrap.github.io) | [react-bootstrap/react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | 19,229 | 3,076 | 141 | MIT | -| React Toolbox | [react-toolbox.io](http://react-toolbox.io) | [react-toolbox/react-toolbox](https://github.com/react-toolbox/react-toolbox) | 8,684 | 1,044 | 264 | MIT | -| react-md | [react-md.mlaursen.com](https://react-md.mlaursen.com) | [mlaursen/react-md](https://github.com/mlaursen/react-md) | 2,221 | 309 | 47 | MIT | -| Ring UI | [jetbrains.github.io/ring-ui](https://jetbrains.github.io/ring-ui) | [JetBrains/ring-ui](https://github.com/JetBrains/ring-ui) | 2,624 | 138 | 8 | Apache 2.0 | -| Semantic UI | [semantic-ui.com](https://semantic-ui.com) | [Semantic-Org/Semantic-UI](https://github.com/Semantic-Org/Semantic-UI) | 49,148 | 5,114 | 1,044 | MIT | -| Smooth UI | [smooth-code.com/open-source/smooth-ui](https://smooth-code.com/open-source/smooth-ui) | [smooth-code/smooth-ui](https://github.com/smooth-code/smooth-ui) | 1,566 | 114 | 12 | MIT | -| UI Fabric | [developer.microsoft.com/en-us/fluentui](https://developer.microsoft.com/en-us/fluentui) | [microsoft/fluentui](https://github.com/microsoft/fluentui) | 11,205 | 1,888 | 1,283 | Other | -| Zendesk Garden | [garden.zendesk.com](https://garden.zendesk.com) | [zendeskgarden/react-components](https://github.com/zendeskgarden/react-components) | 861 | 63 | 1 | Apache 2.0 | +| Blueprint | [blueprintjs.com](https://blueprintjs.com) | [palantir/blueprint](https://github.com/palantir/blueprint) | 17,984 | 1,886 | 595 | Apache 2.0 | +| Carbon Design | [react.carbondesignsystem.com](http://react.carbondesignsystem.com) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) | 4,480 | 1,060 | 464 | Apache 2.0 | +| Chakra UI | [chakra-ui.com](https://chakra-ui.com) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) | 19,469 | 1,594 | 121 | MIT | +| Elastic UI | [elastic.github.io/eui](https://elastic.github.io/eui) | [elastic/eui](https://github.com/elastic/eui) | 2,937 | 533 | 390 | Other | +| Element | [element.eleme.io](https://element.eleme.io) | [ElemeFE/element](https://github.com/ElemeFE/element) | 50,469 | 12,933 | 1,881 | MIT | +| Elemental UI | [elemental-ui.com](http://elemental-ui.com) | [elementalui/elemental](https://github.com/elementalui/elemental) | 4,323 | 243 | 49 | MIT | +| Evergreen | [evergreen.segment.com](https://evergreen.segment.com) | [segmentio/evergreen](https://github.com/segmentio/evergreen) | 10,902 | 677 | 24 | MIT | +| Fluent UI | [developer.microsoft.com/en-us/fluentui](https://developer.microsoft.com/en-us/fluentui) | [microsoft/fluentui](https://github.com/microsoft/fluentui) | 11,789 | 1,951 | 914 | Other | +| Gestalt | [gestalt.netlify.app](https://gestalt.netlify.app) | [pinterest/gestalt](https://github.com/pinterest/gestalt) | 3,849 | 298 | 7 | Apache 2.0 | +| Grommet | [v2.grommet.io](https://v2.grommet.io) | [grommet/grommet](https://github.com/grommet/grommet) | 7,378 | 900 | 204 | Apache 2.0 | +| Material UI | [material-ui.com](https://material-ui.com) | [mui-org/material-ui](https://github.com/mui-org/material-ui) | 69,842 | 23,063 | 552 | MIT | +| Onsen UI | [onsen.io](https://onsen.io) | [OnsenUI/OnsenUI](https://github.com/OnsenUI/OnsenUI) | 8,408 | 972 | 161 | Apache 2.0 | +| Orbit | [orbit.kiwi](https://orbit.kiwi) | [kiwicom/orbit](https://github.com/kiwicom/orbit) | 955 | 96 | 38 | MIT | +| Prime React | [primefaces.org/primereact](https://primefaces.org/primereact) | [primefaces/primereact](https://github.com/primefaces/primereact) | 2,133 | 466 | 195 | MIT | +| Quasar | [quasar.dev](https://quasar.dev) | [quasarframework/quasar](https://github.com/quasarframework/quasar) | 19,052 | 2,330 | 403 | MIT | +| React Bootstrap | [react-bootstrap.github.io](https://react-bootstrap.github.io) | [react-bootstrap/react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | 19,679 | 3,130 | 149 | MIT | +| React Toolbox | [react-toolbox.io](http://react-toolbox.io) | [react-toolbox/react-toolbox](https://github.com/react-toolbox/react-toolbox) | 8,702 | 1,040 | 264 | MIT | +| react-md | [react-md.dev](https://react-md.dev) | [mlaursen/react-md](https://github.com/mlaursen/react-md) | 2,249 | 309 | 41 | MIT | +| Ring UI | [jetbrains.github.io/ring-ui](https://jetbrains.github.io/ring-ui) | [JetBrains/ring-ui](https://github.com/JetBrains/ring-ui) | 2,676 | 143 | 3 | Apache 2.0 | +| Semantic UI | [semantic-ui.com](https://semantic-ui.com) | [Semantic-Org/Semantic-UI](https://github.com/Semantic-Org/Semantic-UI) | 49,426 | 5,128 | 1,047 | MIT | +| Smooth UI | [smooth-code.com/open-source/smooth-ui](https://smooth-code.com/open-source/smooth-ui) | [smooth-code/smooth-ui](https://github.com/smooth-code/smooth-ui) | 1,574 | 116 | 12 | MIT | +| Zendesk Garden | [garden.zendesk.com](https://garden.zendesk.com) | [zendeskgarden/react-components](https://github.com/zendeskgarden/react-components) | 901 | 72 | 4 | Apache 2.0 | -> all of the above statistics were last updated Fri, 09 Apr 2021 15:56:32 GMT. For real-time data, [see the website](http://react-ui-roundup.dimitrimitropoulos.com). +> all of the above statistics were last updated Thu, 22 Jul 2021 20:31:23 GMT. For real-time data, [see the website](http://react-ui-roundup.dimitrimitropoulos.com). -> [Atlaskit](https://bitbucket.org/atlassian/atlaskit-mk-2), [Blueprint](https://github.com/palantir/blueprint), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Element](https://github.com/ElemeFE/element), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Material UI](https://github.com/mui-org/material-ui), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [Quasar](https://github.com/quasarframework/quasar), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Ring UI](https://github.com/JetBrains/ring-ui), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), [Smooth UI](https://github.com/smooth-code/smooth-ui), [UI Fabric](https://github.com/microsoft/fluentui), and [Zendesk Garden](https://github.com/zendeskgarden/react-components) appear to be missing an ErrorBoundary component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists. +> [Atlaskit](https://bitbucket.org/atlassian/atlaskit-mk-2), [Blueprint](https://github.com/palantir/blueprint), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Element](https://github.com/ElemeFE/element), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Fluent UI](https://github.com/microsoft/fluentui), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Material UI](https://github.com/mui-org/material-ui), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [Prime React](https://github.com/primefaces/primereact), [Quasar](https://github.com/quasarframework/quasar), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Ring UI](https://github.com/JetBrains/ring-ui), [Semantic UI](https://github.com/Semantic-Org/Semantic-UI), [Smooth UI](https://github.com/smooth-code/smooth-ui), and [Zendesk Garden](https://github.com/zendeskgarden/react-components) appear to be missing an ErrorBoundary component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists. + + + +## Select + + +A Select allows a user to select a value from a series of options. Much more advanced than the native HTML select. + + +#### Criteria + +- `Async`: Has support fo async-loaded lists (for example, a loading state). +- `Disabled`: The whole select be disabled with a built-in prop. +- `Disabled Options`: Individual options can be easily disabled with a prop. +- `Filterable`: Filter the options of the select with keyboard input. +- `Groupable`: Can group the options into sub sections within the options list. + + +| Framework | Name | Async | Disabled | Disabled Options | Filterable | Groupable | +| --- | --- | --- | --- | --- | --- | --- | +| Ant Design | [Select](https://ant.design/components/select) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| Atlaskit | [Select](https://atlassian.design/components/select) | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | :heavy_check_mark: | +| Blueprint | [Select](https://blueprintjs.com/docs/#select/select-component) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| Carbon Design | [Select](http://react.carbondesignsystem.com/?path=/story/components-select--default) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | +| Chakra UI | [Select](https://chakra-ui.com/docs/form/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | +| Elastic UI | [SuperSelect](https://elastic.github.io/eui/#/forms/super-select) | :heavy_check_mark: | :x: | :heavy_check_mark: | :x: | :x: | +| Element | [Select](https://element.eleme.io/#/en-US/component/select) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| Elemental UI | [Dropdown](http://elemental-ui.com/components/dropdown) | :x: | :x: | :x: | :x: | :heavy_check_mark: | +| Evergreen | [SelectMenu](https://evergreen.segment.com/components/select-menu) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| Fluent UI | [Dropdown](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| Gestalt | [SelectList](https://gestalt.netlify.app/SelectList) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | +| Grommet | [Select](https://v2.grommet.io/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | +| Material UI | [Select](https://material-ui.com/docs/#select/select-component) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | +| Onsen UI | [Select](https://onsen.io/v2/api/react/Select.html) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | +| Orbit | [Select](https://orbit.kiwi/docs/#select/select-component) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | +| Prime React | [Dropdown](https://primefaces.org/primereact/showcase/#/dropdown) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| Quasar | [Select](https://quasar.dev/vue-components/select) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | +| React Bootstrap | [Dropdown](https://react-bootstrap.github.io/components/dropdowns) | :x: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | +| React Toolbox | [Dropdown](http://react-toolbox.io/#/components/dropdown) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | +| react-md | [Dropdown](https://react-md.dev/packages/dropdown/demos) | :x: | :x: | :x: | :x: | :x: | +| Ring UI | [Select](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-select--with-a-filter-and-tags) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | +| Semantic UI | [Dropdown](https://semantic-ui.com/modules/dropdown.html) | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | +| Smooth UI | [Select](https://smooth-code.com/open-source/smooth-ui/docs/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | +| Zendesk Garden | [Select](https://garden.zendesk.com/components/select) | :x: | :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | -> [Blueprint](https://github.com/palantir/blueprint), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Ring UI](https://github.com/JetBrains/ring-ui), [Smooth UI](https://github.com/smooth-code/smooth-ui), and [UI Fabric](https://github.com/microsoft/fluentui) appear to be missing a Stepper component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists. +> [Blueprint](https://github.com/palantir/blueprint), [Chakra UI](https://github.com/chakra-ui/chakra-ui), [Elemental UI](https://github.com/elementalui/elemental), [Evergreen](https://github.com/segmentio/evergreen), [Fluent UI](https://github.com/microsoft/fluentui), [Gestalt](https://github.com/pinterest/gestalt), [Grommet](https://github.com/grommet/grommet), [Onsen UI](https://github.com/OnsenUI/OnsenUI), [Orbit](https://github.com/kiwicom/orbit), [React Bootstrap](https://github.com/react-bootstrap/react-bootstrap), [React Toolbox](https://github.com/react-toolbox/react-toolbox), [react-md](https://github.com/mlaursen/react-md), [Ring UI](https://github.com/JetBrains/ring-ui), and [Smooth UI](https://github.com/smooth-code/smooth-ui) appear to be missing a Stepper component. [Please file an issue](https://github.com/dimitropoulos/react-ui-roundup/issues/new) if one now exists.