Initial commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.cache

.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"
+      }
+    }
+  ]
+}

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 (
+    <ThemeProvider theme={theme}>
+      <Header />
+      <FrameworkStats />
+      <FrameworkFeatures />
+      <Components />
+    </ThemeProvider>
+  )
+};

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<UnwrapedComponent> = ({
+  componentId,
+  componentName,
+  frameworkId,
+  componentURL,
+  options,
+}) => {
+  const key = `${componentId}:${frameworkId}:${componentName}`;
+  const { frameworkName } = frameworksById[frameworkId];
+
+  return (
+    <TableRow key={key} hover>
+      <TableCell>{frameworkName}</TableCell>
+
+      <TableCell>
+        <Link href={componentURL}>{componentName}</Link>
+      </TableCell>
+
+      {map(([key, value]) => {
+        const formattedValue = componentInfoById[componentId].optionsById[key].toJsx(value) || noValue;
+        return (
+          <TableCell key={key}>{formattedValue}</TableCell>
+        );
+      }, toStablePairs(options))}
+    </TableRow>
+  )
+}
+
+const ComponentGroup: FC<[string, UnwrapedComponent[]]> = ([componentId, components]) => {
+  const { cannonicalName, optionsById } = componentInfoById[componentId];
+
+  const openAll = () => {
+    forEach(({ componentURL, }) => {
+      window.open(componentURL);
+    }, components);
+  };
+
+  return (
+    <Card key={componentId}>
+      <GroupTitle>
+        <Typography variant="h5">{cannonicalName}</Typography>
+        <Button onClick={openAll}>Open All In New Tabs</Button>
+      </GroupTitle>
+
+      <TableContainer>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Framework</TableCell>
+
+              <TableCell>Name</TableCell>
+
+              {map(([key, value]) => (
+                <TableCell key={key}>{value.name}</TableCell>
+              ), toStablePairs(optionsById))}
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {map(Component, components)}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Card>
+  )
+}
+
+export const Components: FC = () => {
+  const componentGroups = pipe(
+    unwrapFrameworks,
+    flatten,
+    groupBy(prop('componentId')),
+    toStablePairs,
+    map(ComponentGroup),
+  )(frameworks);
+
+  return <>{componentGroups}</>;
+}

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<Framework> = ({ frameworkFeaturesById, frameworkId, frameworkName }) => {
+  return (
+    <TableRow key={frameworkId} hover>
+      <TableCell>{frameworkName}</TableCell>
+      {map(([featureId, value]) => (
+        <TableCell key={featureId}>
+          {frameworkInfoById[featureId].toJsx(value)}
+        </TableCell>
+      ), toStablePairs(frameworkFeaturesById))}
+    </TableRow>
+  )
+};
+
+export const FrameworkFeatures: FC = () => {
+  return (
+    <Card>
+      <GroupTitle>
+        <Typography variant="h5">Framework Features</Typography>
+      </GroupTitle>
+      <TableContainer>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              {map(({ featureId, name }) => (
+                <TableCell key={featureId}>{name}</TableCell>
+              ), frameworkInfo)}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {map(Feature, frameworks)}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Card>
+  );
+};

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<Framework> = ({ frameworkName: name, frameworkId, frameworkHomepage, repoURL }: Framework) => {
+  const [repoInfo, setRepoInfo] = useState<any | null>(null)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const repoInfo = await getRepoInfo(repoURL);
+      setRepoInfo(repoInfo);
+    }
+    fetchData();
+  }, [repoURL]);
+
+  return (
+    <TableRow key={frameworkId} hover>
+      <TableCell>{name}</TableCell>
+
+      <TableCell>
+        <Link href={frameworkHomepage}>{removeProtocol(frameworkHomepage)}</Link>
+      </TableCell>
+
+      <TableCell>
+        <Link href={repoURL}>
+          {removeProtocol(repoURL)}
+        </Link>
+      </TableCell>
+
+      <TableCell>{repoInfo?.stargazers_count?.toLocaleString() ?? noValue}</TableCell>
+      <TableCell>{repoInfo?.forks_count?.toLocaleString() ?? noValue}</TableCell>
+      <TableCell>{repoInfo?.open_issues_count?.toLocaleString() ?? noValue}</TableCell>
+      <TableCell>{repoInfo?.license?.name?.toLocaleString() ?? noValue}</TableCell>
+    </TableRow>
+  )
+};
+
+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 (
+    <Card>
+      <GroupTitle>
+        <Typography variant="h5">Framework Stats</Typography>
+        <div>
+          <Button onClick={openAll('homepages')}>Open All Homepages</Button>
+          <Button onClick={openAll('repositories')}>Open All Repositories</Button>
+        </div>
+      </GroupTitle>
+      <TableContainer>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Homepage</TableCell>
+              <TableCell>Repository</TableCell>
+              <TableCell>Stars</TableCell>
+              <TableCell>Forks</TableCell>
+              <TableCell>Issues</TableCell>
+              <TableCell>License</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {map(Framework, frameworks)}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Card>
+  );
+};

Header.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { AppBar, Toolbar, Typography } from '@material-ui/core';
+
+export const Header: FC = () => {
+  return (
+    <AppBar position="static">
+      <Toolbar>
+        <Typography variant="h6">React UI Roundup</Typography>
+      </Toolbar>
+    </AppBar>
+  );
+}