From f9d8024b87857480cfc169216b77921496772c2f Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Sat, 21 Dec 2019 16:27:07 -0500 Subject: [PATCH] Initial commit --- .gitignore | 3 + .vscode/launch.json | 23 + App.tsx | 31 + Components.tsx | 94 + FrameworkFeatures.tsx | 52 + FrameworkStats.tsx | 91 + Header.tsx | 12 + README.md | 133 + common.tsx | 55 + components.ts | 60 + entities.ts | 107 + frameworks/antDesign.ts | 53 + frameworks/atlaskit.ts | 58 + frameworks/blueprint.ts | 40 + frameworks/carbonDesign.ts | 35 + frameworks/chakraUI.ts | 44 + frameworks/elasticUI.ts | 40 + frameworks/elementalUI.ts | 36 + frameworks/evergreen.ts | 49 + frameworks/gestalt.ts | 35 + frameworks/grommet.ts | 35 + frameworks/index.ts | 97 + frameworks/materialUI.ts | 44 + frameworks/onsenUI.ts | 35 + frameworks/orbit.ts | 45 + frameworks/primeReact.ts | 35 + frameworks/reactBootstrap.ts | 44 + frameworks/reactMD.ts | 35 + frameworks/reactToolbox.ts | 35 + frameworks/ringUI.ts | 44 + frameworks/semanticUI.ts | 40 + frameworks/uiFabric.ts | 53 + frameworks/zendesk.ts | 44 + generate-readme.ts | 122 + index.html | 152 + index.tsx | 19 + markdownUtils.ts | 50 + package.json | 30 + tsconfig.json | 14 + utils.ts | 36 + yarn.lock | 5503 ++++++++++++++++++++++++++++++++++ 41 files changed, 7563 insertions(+) create mode 100644 .gitignore create mode 100644 .vscode/launch.json create mode 100644 App.tsx create mode 100644 Components.tsx create mode 100644 FrameworkFeatures.tsx create mode 100644 FrameworkStats.tsx create mode 100644 Header.tsx create mode 100644 README.md create mode 100644 common.tsx create mode 100644 components.ts create mode 100644 entities.ts create mode 100644 frameworks/antDesign.ts create mode 100644 frameworks/atlaskit.ts create mode 100644 frameworks/blueprint.ts create mode 100644 frameworks/carbonDesign.ts create mode 100644 frameworks/chakraUI.ts create mode 100644 frameworks/elasticUI.ts create mode 100644 frameworks/elementalUI.ts create mode 100644 frameworks/evergreen.ts create mode 100644 frameworks/gestalt.ts create mode 100644 frameworks/grommet.ts create mode 100644 frameworks/index.ts create mode 100644 frameworks/materialUI.ts create mode 100644 frameworks/onsenUI.ts create mode 100644 frameworks/orbit.ts create mode 100644 frameworks/primeReact.ts create mode 100644 frameworks/reactBootstrap.ts create mode 100644 frameworks/reactMD.ts create mode 100644 frameworks/reactToolbox.ts create mode 100644 frameworks/ringUI.ts create mode 100644 frameworks/semanticUI.ts create mode 100644 frameworks/uiFabric.ts create mode 100644 frameworks/zendesk.ts create mode 100644 generate-readme.ts create mode 100644 index.html create mode 100644 index.tsx create mode 100644 markdownUtils.ts create mode 100644 package.json create mode 100644 tsconfig.json create mode 100644 utils.ts create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d4e94ac --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +.cache \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..26e310a --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,23 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Node Inspector", + "type": "node", + "request": "launch", + "args": [ + "${workspaceRoot}/generate-readme.ts" + ], + "runtimeArgs": [ + "-r", + "ts-node/register" + ], + "cwd": "${workspaceRoot}", + "protocol": "inspector", + "internalConsoleOptions": "openOnSessionStart", + "env": { + "TS_NODE_IGNORE": "false" + } + } + ] +} \ No newline at end of file diff --git a/App.tsx b/App.tsx new file mode 100644 index 0000000..5439389 --- /dev/null +++ b/App.tsx @@ -0,0 +1,31 @@ +import React, { FC } from 'react'; +import { ThemeProvider, createMuiTheme } from '@material-ui/core'; + +import { Components } from './Components'; +import { FrameworkStats } from './FrameworkStats'; +import { FrameworkFeatures } from './FrameworkFeatures'; +import { Header } from './Header'; + +export const reactBackground = '#282c34'; +export const reactLightBlue = '#61dafb'; + +const theme = createMuiTheme({ + // palette: { + // primary: { + // main: reactBackground, + // }, + // } +}); + +export const App: FC = () => { + + + return ( + +
+ + + + + ) +}; diff --git a/Components.tsx b/Components.tsx new file mode 100644 index 0000000..96ea15e --- /dev/null +++ b/Components.tsx @@ -0,0 +1,94 @@ +import React, { FC } from 'react'; +import { map, forEach, pipe, flatten, groupBy, prop } from 'ramda'; +import { noValue, toStablePairs, unwrapFrameworks } from './utils'; +import { frameworks, frameworksById } from './frameworks'; +import { Card as MuiCard, Typography, TableContainer, TableHead, TableRow, Table, TableCell, TableBody, Link, Button } from '@material-ui/core'; +import { UnwrapedComponent, Component } from './entities'; +import { componentInfoById } from './components'; +import { withStyles } from '@material-ui/styles'; +import { GroupTitle } from './common'; + +const Card = withStyles({ + root: { + margin: '2em', + } +})(MuiCard); + +const Component: FC = ({ + componentId, + componentName, + frameworkId, + componentURL, + options, +}) => { + const key = `${componentId}:${frameworkId}:${componentName}`; + const { frameworkName } = frameworksById[frameworkId]; + + return ( + + {frameworkName} + + + {componentName} + + + {map(([key, value]) => { + const formattedValue = componentInfoById[componentId].optionsById[key].toJsx(value) || noValue; + return ( + {formattedValue} + ); + }, toStablePairs(options))} + + ) +} + +const ComponentGroup: FC<[string, UnwrapedComponent[]]> = ([componentId, components]) => { + const { cannonicalName, optionsById } = componentInfoById[componentId]; + + const openAll = () => { + forEach(({ componentURL, }) => { + window.open(componentURL); + }, components); + }; + + return ( + + + {cannonicalName} + + + + + + + + Framework + + Name + + {map(([key, value]) => ( + {value.name} + ), toStablePairs(optionsById))} + + + + + {map(Component, components)} + +
+ + + ) +} + +export const Components: FC = () => { + const componentGroups = pipe( + unwrapFrameworks, + flatten, + groupBy(prop('componentId')), + toStablePairs, + map(ComponentGroup), + )(frameworks); + + return <>{componentGroups}; +} \ No newline at end of file diff --git a/FrameworkFeatures.tsx b/FrameworkFeatures.tsx new file mode 100644 index 0000000..5262bb3 --- /dev/null +++ b/FrameworkFeatures.tsx @@ -0,0 +1,52 @@ +import React, { FC } from 'react'; +import { frameworks, frameworkInfo, frameworkInfoById } from './frameworks'; +import { map } from 'ramda'; +import { Framework } from './entities'; +import { toStablePairs } from './utils'; +import { Card as MuiCard, TableContainer, TableBody, TableHead, Table, TableRow, TableCell, Typography } from '@material-ui/core'; +import { withStyles } from '@material-ui/styles'; +import { GroupTitle } from './common'; + +const Card = withStyles({ + root: { + margin: '2em', + }, +})(MuiCard); + +const Feature: FC = ({ frameworkFeaturesById, frameworkId, frameworkName }) => { + return ( + + {frameworkName} + {map(([featureId, value]) => ( + + {frameworkInfoById[featureId].toJsx(value)} + + ), toStablePairs(frameworkFeaturesById))} + + ) +}; + +export const FrameworkFeatures: FC = () => { + return ( + + + Framework Features + + + + + + Name + {map(({ featureId, name }) => ( + {name} + ), frameworkInfo)} + + + + {map(Feature, frameworks)} + +
+ + + ); +}; \ No newline at end of file diff --git a/FrameworkStats.tsx b/FrameworkStats.tsx new file mode 100644 index 0000000..c6f1636 --- /dev/null +++ b/FrameworkStats.tsx @@ -0,0 +1,91 @@ +import React, { FC, useState, useEffect } from 'react'; +import { frameworks } from './frameworks'; +import { map, forEach } from 'ramda'; +import { Framework } from './entities'; +import { getRepoInfo, removeProtocol, noValue } from './utils'; +import { Card as MuiCard, TableContainer, TableBody, TableHead, Table, TableRow, TableCell, Link, Typography, Button } from '@material-ui/core'; +import { withStyles } from '@material-ui/styles'; +import { GroupTitle } from './common'; + +const Card = withStyles({ + root: { + margin: '2em', + }, +})(MuiCard); + +const Framework: FC = ({ frameworkName: name, frameworkId, frameworkHomepage, repoURL }: Framework) => { + const [repoInfo, setRepoInfo] = useState(null) + + useEffect(() => { + const fetchData = async () => { + const repoInfo = await getRepoInfo(repoURL); + setRepoInfo(repoInfo); + } + fetchData(); + }, [repoURL]); + + return ( + + {name} + + + {removeProtocol(frameworkHomepage)} + + + + + {removeProtocol(repoURL)} + + + + {repoInfo?.stargazers_count?.toLocaleString() ?? noValue} + {repoInfo?.forks_count?.toLocaleString() ?? noValue} + {repoInfo?.open_issues_count?.toLocaleString() ?? noValue} + {repoInfo?.license?.name?.toLocaleString() ?? noValue} + + ) +}; + +export const FrameworkStats: FC = () => { + const openAll = (type: 'homepages' | 'repositories') => () => { + forEach(({ frameworkHomepage, repoURL }) => { + if (type === 'homepages') { + window.open(frameworkHomepage); + } + + if (type === 'repositories') { + window.open(repoURL); + } + }, frameworks); + }; + + return ( + + + Framework Stats +
+ + +
+ + + + + + Name + Homepage + Repository + Stars + Forks + Issues + License + + + + {map(Framework, frameworks)} + +
+ + + ); +}; \ No newline at end of file diff --git a/Header.tsx b/Header.tsx new file mode 100644 index 0000000..4955e93 --- /dev/null +++ b/Header.tsx @@ -0,0 +1,12 @@ +import React, { FC } from 'react'; +import { AppBar, Toolbar, Typography } from '@material-ui/core'; + +export const Header: FC = () => { + return ( + + + React UI Roundup + + + ); +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..47fce7d --- /dev/null +++ b/README.md @@ -0,0 +1,133 @@ + +# React UI Roundup + +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! + + +## Frameworks + + +### Framework Stats + +| Name | Homepage | Repository | Stars | Forks | Issues | License | +| --- | --- | --- | --- | --- | --- | --- | +| Ant Design | [ant.design](https://ant.design) | [github.com/ant-design/ant-design](https://github.com/ant-design/ant-design) | 54,668 | 19,778 | 492 | MIT License | +| Atlaskit | [atlaskit.atlassian.com](https://atlaskit.atlassian.com) | [bitbucket.org/atlassian/atlaskit-mk-2/src/master](https://bitbucket.org/atlassian/atlaskit-mk-2/src/master) | -- | -- | -- | -- | +| Atlaskit | [jetbrains.github.io/ring-ui](https://jetbrains.github.io/ring-ui) | [github.com/JetBrains/ring-ui](https://github.com/JetBrains/ring-ui) | 2,341 | 125 | 11 | Apache License 2.0 | +| Blueprint | [blueprintjs.com](https://blueprintjs.com) | [github.com/palantir/blueprint](https://github.com/palantir/blueprint) | 15,330 | 1,459 | 462 | Apache License 2.0 | +| Carbon Design | [react.carbondesignsystem.com](http://react.carbondesignsystem.com) | [github.com/carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) | 2,410 | 517 | 451 | Apache License 2.0 | +| Chakra UI | [chakra-ui.com](https://chakra-ui.com) | [github.com/chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) | 3,720 | 200 | 48 | MIT License | +| Elastic UI | [elastic.github.io/eui](https://elastic.github.io/eui) | [github.com/elastic/eui](https://github.com/elastic/eui) | 1,419 | 246 | 303 | Apache License 2.0 | +| Elemental UI | [elemental-ui.com](http://elemental-ui.com) | [github.com/elementalui/elemental](https://github.com/elementalui/elemental) | 4,283 | 239 | 50 | MIT License | +| Evergreen | [evergreen.segment.com](https://evergreen.segment.com) | [github.com/segmentio/evergreen](https://github.com/segmentio/evergreen) | 8,915 | 456 | 64 | MIT License | +| Gestalt | [pinterest.github.io/gestalt](https://pinterest.github.io/gestalt) | [github.com/pinterest/gestalt](https://github.com/pinterest/gestalt) | 3,328 | 218 | 7 | Apache License 2.0 | +| Material UI | [material-ui.com](https://material-ui.com) | [github.com/mui-org/material-ui](https://github.com/mui-org/material-ui) | 53,126 | 13,627 | 294 | MIT License | +| Onsen UI | [onsen.io](https://onsen.io) | [github.com/OnsenUI/OnsenUI](https://github.com/OnsenUI/OnsenUI) | 7,768 | 893 | 117 | Apache License 2.0 | +| Orbit | [orbit.kiwi](https://orbit.kiwi) | [github.com/kiwicom/orbit-components](https://github.com/kiwicom/orbit-components) | 371 | 40 | 42 | MIT License | +| Prime React | [primefaces.org/primereact](https://primefaces.org/primereact) | [github.com/primefaces/primereact](https://github.com/primefaces/primereact) | 1,173 | 286 | 120 | MIT License | +| React Bootstrap | [react-bootstrap.github.io](https://react-bootstrap.github.io) | [github.com/react-bootstrap/react-bootstrap](https://github.com/react-bootstrap/react-bootstrap) | 16,796 | 2,730 | 118 | MIT License | +| React Toolbox | [react-toolbox.io](http://react-toolbox.io) | [github.com/react-toolbox/react-toolbox](https://github.com/react-toolbox/react-toolbox) | 8,540 | 1,052 | 259 | MIT License | +| Semantic UI | [semantic-ui.com](https://semantic-ui.com) | [github.com/Semantic-Org/Semantic-UI](https://github.com/Semantic-Org/Semantic-UI) | 47,035 | 4,964 | 964 | MIT License | +| UI Fabric | [developer.microsoft.com/en-us/fabric](https://developer.microsoft.com/en-us/fabric) | [github.com/OfficeDev/office-ui-fabric-react](https://github.com/OfficeDev/office-ui-fabric-react) | 6,468 | 1,328 | 592 | Other | +| Zendesk Garden | [garden.zendesk.com](https://garden.zendesk.com) | [github.com/zendeskgarden/react-components](https://github.com/zendeskgarden/react-components) | 709 | 48 | 13 | Apache License 2.0 | +| grommet | [v2.grommet.io](https://v2.grommet.io) | [github.com/grommet/grommet](https://github.com/grommet/grommet) | 5,719 | 680 | 173 | Apache License 2.0 | +| react-md | [react-md.mlaursen.com](https://react-md.mlaursen.com) | [github.com/mlaursen/react-md](https://github.com/mlaursen/react-md) | 2,049 | 301 | 114 | MIT License | + + +### Framework Features + +| Name | Native Dark Mode | Design Kits | RTL Support | Themer | Native TypeScript | +| --- | --- | --- | --- | --- | --- | +| Ant Design | :x: | [Figma](https://ant.design/docs/spec/download), [Sketch](https://ant.design/docs/spec/download) | :x: | :x: | :heavy_check_mark: | +| Atlaskit | :x: | [Sketch](https://atlassian.design/guidelines/product/resources/web-product-gui-pack) | :x: | :x: | :x: | +| Atlaskit | :x: | :x: | :x: | :x: | :x: | +| Blueprint | :heavy_check_mark: | [Sketch](https://blueprintjs.com/docs/#resources) | :heavy_check_mark: | :x: | :heavy_check_mark: | +| Carbon Design | :x: | :x: | :heavy_check_mark: | :x: | :x: | +| Chakra UI | :heavy_check_mark: | :x: | :x: | :x: | :x: | +| Elastic UI | :heavy_check_mark: | [Sketch](https://elastic.github.io/eui) | :x: | :x: | :heavy_check_mark: | +| Elemental UI | :x: | :x: | :x: | :x: | :x: | +| Evergreen | :x: | [Sketch](https://evergreen.segment.com/for-designers) | :x: | :x: | :x: | +| Gestalt | :x: | :x: | :heavy_check_mark: | :x: | :x: | +| Material UI | :heavy_check_mark: | [Figma](https://material-ui.com/discover-more/related-projects/#design-resources), [Sketch](https://material-ui.com/discover-more/related-projects/#design-resources) | :heavy_check_mark: | [True](https://material-ui.com/discover-more/related-projects/#design-resources) | :heavy_check_mark: | +| Onsen UI | :heavy_check_mark: | :x: | :x: | :x: | :heavy_check_mark: | +| Orbit | :x: | [Abstract](https://orbit.kiwi/getting-started/for-designers), [Sketch](https://orbit.kiwi/getting-started/for-designers) | :heavy_check_mark: | [True](https://themer.orbit.kiwi/) | :x: | +| Prime React | :heavy_check_mark: | :x: | :x: | :x: | :x: | +| React Bootstrap | :x: | :x: | :x: | :x: | :heavy_check_mark: | +| React Toolbox | :x: | :x: | :x: | :x: | :heavy_check_mark: | +| Semantic UI | :x: | [Sketch](https://semantic-ui.com/introduction/advanced-usage.html#sketch-files) | :heavy_check_mark: | :x: | :x: | +| UI Fabric | :x: | [Figma](https://developer.microsoft.com/en-us/fabric#/resources), [Sketch](https://developer.microsoft.com/en-us/fabric#/resources) | :x: | :x: | :heavy_check_mark: | +| Zendesk Garden | :x: | :x: | :x: | :x: | :heavy_check_mark: | +| grommet | :x: | :x: | :x: | :x: | :heavy_check_mark: | +| react-md | :heavy_check_mark: | :x: | :x: | :x: | :heavy_check_mark: | + + +## Components + + +### Alert + +| Framework | Name | Closable | Types | +| --- | --- | --- | --- | +| Ant Design | [Alert](https://ant.design/components/alert/) | :heavy_check_mark: | `error`, `info`, `success`, `warning` | +| Atlaskit | [SectionMessage](https://atlaskit.atlassian.com/packages/core/section-message) | :x: | `change`, `confirmation`, `error`, `info`, `warning` | +| Atlaskit | [Flag](https://atlaskit.atlassian.com/pakages/core/flag) | :x: | `change`, `confirmation`, `error`, `info`, `warning` | +| Atlaskit | [Alert](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-alert--simple) | :heavy_check_mark: | `error`, `loading`, `message`, `success`, `warning` | +| Chakra UI | [Alert](https://chakra-ui.com/alert) | :heavy_check_mark: | `error`, `info`, `success`, `warning` | +| Elemental UI | [Alert](http://elemental-ui.com/misc) | :x: | `danger`, `info`, `primary`, `success`, `warning` | +| Evergreen | [Alert](https://evergreen.segment.com/components/alert) | :heavy_check_mark: | `danger`, `none`, `success`, `warning` | +| Orbit | [Alert](https://orbit.kiwi/components/alert-message/) | :heavy_check_mark: | `critical`, `info`, `success`, `warning` | +| React Bootstrap | [Alert](https://react-bootstrap.github.io/components/alerts) | :heavy_check_mark: | `danger`, `dark`, `info`, `light`, `primary`, `secondary`, `success`, `warning` | +| UI Fabric | [MessageBar](https://developer.microsoft.com/en-us/fabric#/controls/web/messagebar) | :heavy_check_mark: | `blocked`, `error`, `info`, `remove`, `severeWarning`, `success`, `warning` | +| Zendesk Garden | [Notification](https://garden.zendesk.com/react-components/notifications/) | :heavy_check_mark: | `error`, `info`, `success`, `warning` | + + +### Button + +| Framework | Name | Sizes | +| --- | --- | --- | +| Ant Design | [Button](https://ant.design/components/button/) | `default`, `large`, `small` | +| Atlaskit | [Button](https://atlaskit.atlassian.com/packages/core/button) | | +| Atlaskit | [Button](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-button--basic) | | +| Blueprint | [Button](https://blueprintjs.com/docs/#core/components/button) | `default`, `large` | +| Carbon Design | [Button](http://react.carbondesignsystem.com/?path=/story/buttons--default) | `default`, `field`, `small` | +| Chakra UI | [Button](https://chakra-ui.com/button) | `lg`, `md`, `sm`, `xs` | +| Elastic UI | [Button](https://elastic.github.io/eui/#/navigation/button) | | +| Elemental UI | [Button](http://elemental-ui.com/buttons) | `default`, `extra small`, `large`, `small` | +| Evergreen | [Button](https://evergreen.segment.com/components/button) | `arbitrary pixel sizes` | +| Gestalt | [Button](https://pinterest.github.io/gestalt/#/Button) | `lg`, `md`, `sm` | +| Material UI | [Button](https://material-ui.com/components/buttons/) | `large`, `medium`, `small` | +| Onsen UI | [Button](https://onsen.io/v2/api/react/Button.html) | `default`, `large` | +| Orbit | [Button](https://orbit.kiwi/components/button/) | `large`, `normal`, `small` | +| Prime React | [Button](https://primefaces.org/primereact/#/button) | | +| React Bootstrap | [Button](https://react-bootstrap.github.io/components/buttons) | `lg`, `sm` | +| React Toolbox | [Button](http://react-toolbox.io/#/components/button) | | +| Semantic UI | [Button](https://semantic-ui.com/elements/button.html) | `big`, `huge`, `large`, `massive`, `medium`, `mini`, `small`, `tiny` | +| UI Fabric | [Button](https://developer.microsoft.com/en-us/fabric#/controls/web/button) | | +| Zendesk Garden | [Button](https://garden.zendesk.com/react-components/buttons/) | `default`, `large`, `small` | +| grommet | [Button](https://v2.grommet.io/button) | | +| react-md | [Button](https://react-md.mlaursen.com/components/buttons) | | + + +### Tabs + +| Framework | Name | Can Be Vertical | +| --- | --- | --- | +| Ant Design | [Tabs](https://ant.design/components/tabs/) | :heavy_check_mark: | +| Atlaskit | [Tabs](https://atlaskit.atlassian.com/packages/core/tabs) | :x: | +| Atlaskit | [Tabs](https://jetbrains.github.io/ring-ui/master/index.html?path=/docs/components-tabs--basic) | :x: | +| Blueprint | [Tabs](https://blueprintjs.com/docs/#core/components/tabs) | :heavy_check_mark: | +| Carbon Design | [Tabs](http://react.carbondesignsystem.com/?path=/story/tabs--default) | :x: | +| Chakra UI | [Tabs](https://chakra-ui.com/tabs) | :heavy_check_mark: | +| Elastic UI | [Tabs](https://elastic.github.io/eui/#/navigation/tabs) | :x: | +| Evergreen | [Tablist](https://evergreen.segment.com/components/tab) | :heavy_check_mark: | +| Gestalt | [Tabs](https://pinterest.github.io/gestalt/#/Tabs) | :x: | +| Material UI | [Tabs](https://material-ui.com/components/tabs/) | :heavy_check_mark: | +| Onsen UI | [Tabbar](https://onsen.io/v2/api/react/Tabbar.html) | :x: | +| Prime React | [TabView](https://primefaces.org/primereact/#/tabview) | :x: | +| React Bootstrap | [Tabs](https://react-bootstrap.github.io/components/tabs) | :x: | +| React Toolbox | [Tabs](http://react-toolbox.io/#/components/tabs) | :x: | +| Semantic UI | [Tabs](https://semantic-ui.com/modules/tab.html) | :x: | +| UI Fabric | [Pivot](https://developer.microsoft.com/en-us/fabric#/controls/web/pivot) | :x: | +| Zendesk Garden | [Tabs](https://garden.zendesk.com/react-components/tabs/) | :heavy_check_mark: | +| grommet | [Tabs](https://v2.grommet.io/tabs) | :x: | +| react-md | [Tabs](https://react-md.mlaursen.com/components/tabs) | :x: | diff --git a/common.tsx b/common.tsx new file mode 100644 index 0000000..0b1d903 --- /dev/null +++ b/common.tsx @@ -0,0 +1,55 @@ +import React, { ReactNode } from 'react'; +import { withStyles, Box, Link } from "@material-ui/core"; +import { HelpOutline, Check as MuiCheck, Close as MuiClose } from '@material-ui/icons'; +import { pipe, sortBy, prop, map } from 'ramda'; +import { DesignKit, FrameworkFeaturesById } from './entities'; +import { noValue } from './utils'; + +export const GroupTitle = withStyles(theme => ({ + root: { + display: 'flex', + justifyContent: 'space-between', + padding: '1em', + background: theme.palette.background.default, + }, +}))(Box); + +export const Check = withStyles({ + root: { + fill: 'green', + } +})(MuiCheck); + +export const Close = withStyles({ + root: { + fill: 'red', + } +})(MuiClose); + +export const checkmark = (value: boolean | undefined) => { + if (value === undefined) { + return ; + } + + if (value) { + return ; + } + return noValue; + // return null; +}; + +export const stringArray = (sizes: string[] | null) => sizes ? sizes.sort().join(', ') : noValue; + +export const designKits = (designKits: FrameworkFeaturesById['designKits']) => designKits !== false ? ( + pipe( + sortBy(prop('type')), + map(({ href, type }) => ( + {type} + )), + kits => <>{kits}, + )(designKits) +) : checkmark(false); + +export const themer = (themer: FrameworkFeaturesById['themer']) => themer !== false ? ( + Link +) : checkmark(themer); diff --git a/components.ts b/components.ts new file mode 100644 index 0000000..108ff9f --- /dev/null +++ b/components.ts @@ -0,0 +1,60 @@ +import { indexBy, prop, sortBy } from 'ramda'; +import { ComponentInfo, Option } from './entities'; +import { + stringArray as markdownStringArray, + checkmark as markdownCheckmark, +} from './markdownUtils'; +import { + checkmark as jsxCheckmark, + stringArray as jsxStringArray, +} from './common'; + +const indexByOptionId = indexBy