updates all dependencies

z

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc.js

@@ -2,10 +2,12 @@ module.exports = {
   extends: 'eslint-config-intense',
   rules: {
     '@typescript-eslint/consistent-indexed-object-style': ['error', 'index-signature'], // index-signature is better because it allows you to provide a variable name for the key which serves as a sort of documentation of the author's intent
-    '@typescript-eslint/no-unsafe-member-access': 'off',
     '@typescript-eslint/no-unsafe-assignment': 'off',
     '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    'object-curly-newline': 'off',
     'simple-import-sort/exports': 'error',
     'simple-import-sort/imports': 'error',
-  }
-};
+  },
+};

.gitignore

@@ -2,4 +2,5 @@ node_modules
 dist
 .cache
 .env.local
-yarn-error.log
+yarn-error.log
+.parcel-cache

.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+  }
+}

entities.ts

@@ -1,7 +1,7 @@
 import { Endpoints } from '@octokit/types';
 import { ReactNode } from 'react';
 
-export type RepoInfo = Endpoints['GET /repos/:owner/:repo']['response']['data'];
+export type RepoInfo = Endpoints['GET /repos/{owner}/{repo}']['response']['data'];
 
 type OptionId = string;
 
@@ -29,7 +29,7 @@ export interface ComponentInfo {
   cannonicalName: string;
 
   /** The English indefinte article to be used to refer to this Component */
-  indefiniteArticle: 'an' | 'a';
+  indefiniteArticle: 'a' | 'an';
   description: SuperString;
   optionsById: OptionsById;
 }
@@ -57,7 +57,7 @@ export interface Avatar extends BaseComponent {
   componentId: 'avatar';
   options: {
     badge: boolean;
-    shapes: ('circle' | 'square' | 'rounded-square')[] | null;
+    shapes: ('circle' | 'rounded-square' | 'square')[] | null;
     sizes: string[] | null;
     types: ('icon' | 'image' | 'text')[] | null;
   };
@@ -76,7 +76,7 @@ export interface Button extends BaseComponent {
   options: {
     disabled: boolean;
     groupable: boolean;
-    icon: ('left' | 'right' | 'only')[] | null;
+    icon: ('left' | 'only' | 'right')[] | null;
     loading: boolean;
     sizes: string[] | null;
   };
@@ -89,7 +89,7 @@ export interface Checkbox extends BaseComponent {
     disabled: boolean;
     indeterminate: boolean;
     invalid: boolean;
-    labelPlacement: ('above' | 'right' | 'left' | 'below')[];
+    labelPlacement: ('above' | 'below' | 'left' | 'right')[];
   };
 }
 
@@ -120,7 +120,7 @@ export interface Switch extends BaseComponent {
     indeterminate: boolean;
     internalIcons: boolean;
     internalText: boolean;
-    labelPlacement: ('above' | 'right' | 'left' | 'below')[];
+    labelPlacement: ('above' | 'below' | 'left' | 'right')[];
     loading: boolean;
     sizes: string[];
   };
@@ -145,7 +145,7 @@ export type Component =
   | Tabs;
 
 export interface DesignKit {
-  type: 'Sketch' | 'Figma' | 'Abstract' | 'Axure' | 'Framer X' | 'Adobe XD' | 'Custom';
+  type: 'Abstract' | 'Adobe XD' | 'Axure' | 'Custom' | 'Figma' | 'Framer X' | 'Sketch';
   href: URL;
 }
 

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
+  setupFilesAfterEnv: ['jest-extended'],
   testEnvironment: 'node',
-  setupFilesAfterEnv: ['jest-extended']
-};
+};

markdown/generate-readme.ts

@@ -121,15 +121,16 @@ const frameworksMarkdown = (repoInfoByHtmlUrl: RepoInfoByHtmlUrl) => [
   frameworkFeaturesSectionMarkdown,
 ];
 
-type EnhancedComponent = Component & Pick<Framework, 'frameworkName' | 'frameworkId'>;
+type EnhancedComponent = Component & Pick<Framework, 'frameworkId' | 'frameworkName'>;
 
 const componentsMarkdown = [
   h1('Components'),
   ...chain(({ componentId, cannonicalName, description, indefiniteArticle, optionsById }) => {
     const optionsArray = pipe(
+      () => optionsById,
       values,
       sortBy(prop('name')),
-    )(optionsById);
+    )();
 
     const headers = [
       'Framework',
@@ -157,15 +158,16 @@ const componentsMarkdown = [
     const filteredMissingFrameworks = filter(whereEq({ componentId }), enhancedComponents);
     const missingFrameworkIds = pluck('frameworkId', filteredMissingFrameworks);
     const missingFrameworks: ContentGroup = pipe(
-      (frameworkIds: string[]) => reject(
+      () => missingFrameworkIds,
+      frameworkIds => reject(
         framework => includes(framework.frameworkId, frameworkIds),
         frameworks,
       ),
       map(({ frameworkName, repoURL }) => (
         link({ href: repoURL, text: frameworkName })
       )),
       intersperse(', '),
-      (elements: string[]) => {
+      elements => {
         switch (elements.length) {
           case 0:
             return [];
@@ -180,13 +182,13 @@ const componentsMarkdown = [
             return update(elements.length - 2, ', and ', elements);
         }
       },
-      (elements: string[]) => (elements.length > 0 ? append(
+      elements => (elements.length > 0 ? append(
         ` appear${elements.length === 1 ? 's' : ''} to be missing ${indefiniteArticle} ${cannonicalName} component. ${pleaseFileIssue} if one now exists.\n`,
         elements,
       ) : []),
       concatAll,
       line => [typeof line === 'string' && line.length > 0 ? quote(line) : ''],
-    )(missingFrameworkIds);
+    )();
 
     return [
       h2(cannonicalName),

markdown/utils.ts

@@ -3,7 +3,7 @@ import { join, length, map, pipe, prop, repeat, sortBy } from 'ramda';
 import { DesignKit, FrameworkFeaturesById, URL } from '../entities';
 
 // eslint-disable-next-line @typescript-eslint/no-use-before-define -- don't see another way to do this without the circular hoist
-const line = (line: string | ContentGroup): string => (typeof line === 'string' ? `${line}\n` : lines(line));
+const line = (line: ContentGroup | string): string => (typeof line === 'string' ? `${line}\n` : lines(line));
 export const lines = (input: ContentGroup): string => map(line, input).join('');
 
 export const comment = (text: string) => `<!--${text}-->`;
@@ -54,7 +54,7 @@ export const table = ({ headers, rows }: { headers: string[]; rows: string[][] }
   ])
 );
 
-export const list = (character: '1.' | '-', indent = 0) => (data: ContentGroup): string => {
+export const list = (character: '-' | '1.', indent = 0) => (data: ContentGroup): string => {
   const indentation = '  '.repeat(indent);
   const before = `${indentation}${character} `;
   return map(datum => (Array.isArray(datum) ? (
@@ -68,7 +68,7 @@ export const unorderedList = list('-');
 export const orderedList = list('1.');
 
 export type ContentItem = string;
-export type ContentGroup = (ContentItem | ContentGroup)[];
+export type ContentGroup = (ContentGroup | ContentItem)[];
 
 export type LinkInfoGroup = (ContentItem | LinkInfo | LinkInfoGroup)[];
 

package.json

@@ -3,59 +3,63 @@
   "version": "1.0.0",
   "author": "Dimitri Mitropoulos <[email protected]>",
   "license": "MIT",
+  "browser": "dist/index.html",
   "engines": {
     "node": ">=14"
   },
   "scripts": {
-    "build": "yarn parcel build website/index.html --no-cache",
-    "lint": "yarn eslint --ext ts,tsx .",
+    "build": "yarn parcel build website/index.html",
+    "lint": "yarn eslint --ext js,ts,tsx .",
     "generate": "yarn ts-node markdown/generate-readme.ts",
     "generate:dev": "SHOULD_FETCH=false yarn ts-node markdown/generate-readme.ts",
-    "start": "yarn parcel website/index.html --no-cache",
+    "start": "yarn parcel serve website/index.html --no-cache",
     "start:dev": "SHOULD_FETCH=false yarn start",
     "test": "yarn jest --watch"
   },
   "dependencies": {
-    "@material-ui/core": "4.11.2",
-    "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "4.0.0-alpha.57",
-    "cross-fetch": "3.0.6",
+    "@emotion/react": "11.1.5",
+    "@emotion/styled": "11.3.0",
+    "@material-ui/core": "5.0.0-alpha.29",
+    "@material-ui/icons": "5.0.0-alpha.28",
+    "@material-ui/lab": "5.0.0-alpha.29",
+    "cross-fetch": "3.1.4",
     "node-fetch": "2.6.1",
     "ramda": "0.27.1",
-    "ramda-adjunct": "2.29.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "ramda-adjunct": "2.31.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@octokit/types": "5.5.0",
-    "@types/jest": "26.0.19",
-    "@types/mocha": "8.2.0",
-    "@types/node": "14.14.14",
-    "@types/node-fetch": "2.5.7",
-    "@types/ramda": "0.27.34",
-    "@types/react": "16.9.49",
-    "@types/react-dom": "16.9.8",
+    "@babel/preset-typescript": "7.13.0",
+    "@octokit/types": "6.13.0",
+    "@parcel/transformer-typescript-tsc": "2.0.0-beta.2",
+    "@types/mocha": "8.2.2",
+    "@types/node": "14.14.37",
+    "@types/node-fetch": "2.5.10",
+    "@types/ramda": "0.27.40",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.3",
     "@types/webpack-env": "1.16.0",
-    "@typescript-eslint/eslint-plugin": "4.10.0",
-    "@typescript-eslint/parser": "4.10.0",
-    "eslint": "7.16.0",
-    "eslint-config-intense": "0.7.2",
-    "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "24.1.3",
-    "eslint-plugin-jest-formatting": "2.0.0",
-    "eslint-plugin-no-secrets": "0.6.8",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-ramda": "2.5.1",
-    "eslint-plugin-react": "7.21.5",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "eslint-plugin-simple-import-sort": "7.0.0",
+    "@typescript-eslint/eslint-plugin": "~4.21.0",
+    "@typescript-eslint/parser": "~4.21.0",
+    "eslint": "~7.23.0",
+    "eslint-config-intense": "0.7.5",
+    "eslint-plugin-eslint-comments": "~3.2.0",
+    "eslint-plugin-import": "~2.22.1",
+    "eslint-plugin-jest": "~24.3.4",
+    "eslint-plugin-jest-formatting": "~2.0.1",
+    "eslint-plugin-no-secrets": "~0.8.9",
+    "eslint-plugin-node": "~11.1.0",
+    "eslint-plugin-ramda": "~2.5.1",
+    "eslint-plugin-react": "~7.23.1",
+    "eslint-plugin-react-hooks": "~4.2.0",
+    "eslint-plugin-simple-import-sort": "~7.0.0",
     "jest": "26.6.3",
     "jest-extended": "0.11.5",
-    "parcel": "1.12.4",
-    "ts-jest": "26.4.4",
+    "parcel": "2.0.0-beta.2",
+    "ts-jest": "26.5.4",
     "ts-node": "9.1.1",
-    "type-fest": "^0.20.2",
-    "typescript": "4.1.3"
+    "type-fest": "^1.0.1",
+    "typescript": "4.2.4"
   }
 }

tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "types": [
       "jest",
-      "mocha",
       "node",
       "webpack-env"
     ],
@@ -11,6 +10,8 @@
     "strict": true,
   },
   "include": [
+    ".eslintrc.js",
+    "**/*.js",
     "**/*.ts",
     "**/*.tsx"
   ]

utils.ts

@@ -43,9 +43,10 @@ export const pipeLog = <T>(input: T) => {
 
 export const toStablePairs = <T extends { [key: string]: any }>(input: T) => (
   pipe(
+    () => input,
     (input: T) => toPairs(input) as Entries<T>,
     entries => sortBy(head, entries) as Entries<T>,
-  )(input)
+  )()
 );
 
 // export const toStablePairs = pipe(

website/App.tsx

@@ -1,4 +1,4 @@
-import { Container as MuiContainer, ThemeProvider, withStyles } from '@material-ui/core';
+import { Container as MuiContainer, styled, ThemeProvider } from '@material-ui/core';
 import React, { FC, useEffect } from 'react';
 
 import { frameworkInfo, frameworkInfoByFeatureId, frameworks } from '../frameworks';
@@ -9,16 +9,14 @@ import { Header } from './Header';
 import { theme } from './theme';
 import { scrollIntoView } from './utils';
 
-const Container = withStyles(theme => ({
+const Container = styled(MuiContainer)({
   [theme.breakpoints.down('sm')]: {
-    root: {
-      marginLeft: 0,
-      marginRight: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-    },
+    marginLeft: 0,
+    marginRight: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
   },
-}))(MuiContainer);
+});
 
 export const App: FC = () => {
   useEffect(() => {