From 569710f984c559ef86cd762015e61a5234f8588d Mon Sep 17 00:00:00 2001 From: rogermparent Date: Tue, 18 Jan 2022 17:20:45 -0500 Subject: [PATCH 01/10] Update all packages to latest --- .eslintrc.json | 18 +- content/docs/cml-with-dvc.md | 2 +- content/docs/start/github.md | 6 +- content/docs/start/gitlab.md | 16 +- content/docs/start/index.md | 2 +- content/docs/usage.md | 6 +- gatsby-config.js | 7 +- package.json | 183 +- .../atoms/LayoutWidthContainer/index.tsx | 2 +- src/components/atoms/ShowOnly/index.tsx | 2 +- src/components/layouts/MainLayout/index.tsx | 6 +- .../molecules/HamburgerIcon/index.tsx | 2 +- .../molecules/HamburgerMenu/index.tsx | 10 +- src/components/molecules/Paginator/index.tsx | 2 +- src/components/organisms/Page/utils.ts | 2 +- .../organisms/PageContent/index.tsx | 2 +- src/components/organisms/SiteHeader/index.tsx | 2 +- .../organisms/SubscribeSection/Form/index.tsx | 2 +- .../organisms/SubscribeSection/index.tsx | 2 +- src/components/organisms/Tabs/Core/index.js | 2 +- .../Documentation/Layout/SearchForm/index.tsx | 4 +- .../Layout/SidebarMenu/index.tsx | 7 +- .../pages/Documentation/Layout/index.tsx | 2 +- .../pages/Documentation/Markdown/index.tsx | 6 +- .../pages/Documentation/RightPanel/index.tsx | 4 +- .../Documentation/TutorialsLinks/index.tsx | 4 +- src/components/pages/NotFound/index.tsx | 2 +- src/gatsby/common.js | 8 - src/utils/front/plausible.ts | 2 +- svgo.config.js | 12 + yarn.lock | 15503 ++++++---------- 31 files changed, 6208 insertions(+), 9622 deletions(-) create mode 100644 svgo.config.js diff --git a/.eslintrc.json b/.eslintrc.json index 0e125fa0..023351c5 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,7 +2,7 @@ "extends": [ "plugin:react/recommended", "plugin:@typescript-eslint/recommended", - "prettier/@typescript-eslint", + "prettier", "plugin:prettier/recommended", "plugin:jsx-a11y/recommended", "plugin:json/recommended" @@ -23,9 +23,21 @@ } }, "rules": { - "@typescript-eslint/interface-name-prefix": [ + "@typescript-eslint/naming-convention": [ "error", - { "prefixWithI": "always" } + { + "selector": "interface", + "format": ["PascalCase"], + "custom": { + "regex": "^I[A-Z]", + "match": true + } + }, + { + "selector": ["variable", "function"], + "format": ["camelCase", "PascalCase"], + "leadingUnderscore": "allow" + } ], "no-tabs": "error", "react/prop-types": "off", diff --git a/content/docs/cml-with-dvc.md b/content/docs/cml-with-dvc.md index b8dfb949..0b31c980 100644 --- a/content/docs/cml-with-dvc.md +++ b/content/docs/cml-with-dvc.md @@ -5,7 +5,7 @@ downloaded from external sources. [DVC](https://dvc.org) is a common way to bring data to your CML runner. DVC also lets you run pipelines and plot changes in metrics for inclusion in CML reports. -![](/img/dvc_cml_long_report.png) +![](img/dvc_cml_long_report.png) The `.github/workflows/cml.yaml` file to create this report is: diff --git a/content/docs/start/github.md b/content/docs/start/github.md index f8900856..fdca6430 100644 --- a/content/docs/start/github.md +++ b/content/docs/start/github.md @@ -7,7 +7,7 @@ supported CI systems. 1. Fork our [example project repository](https://github.com/iterative/example_cml). - ![](/img/fork_cml_project.png) + ![](img/fork_cml_project.png) The following steps can all be done in the GitHub browser interface. However, to follow along the commands, we recommend cloning your fork to your local @@ -54,13 +54,13 @@ supported CI systems. 5. In GitHub, open up a Pull Request to compare the `experiment` branch to `master`. - ![](/img/make_pr.png) + ![](img/make_pr.png) Shortly, you should see a comment from `github-actions` appear in the Pull Request with your CML report. This is a result of the `cml send-comment` command in your workflow. - ![](/img/cml_first_report.png) + ![](img/cml_first_report.png) This is the gist of the CML workflow: when you push changes to your GitHub repository, the workflow in your `.github/workflows/cml.yaml` file gets run and diff --git a/content/docs/start/gitlab.md b/content/docs/start/gitlab.md index 290292f7..bccd6333 100644 --- a/content/docs/start/gitlab.md +++ b/content/docs/start/gitlab.md @@ -7,7 +7,7 @@ Here, we'll walk through a tutorial to start using CML on GitLab. Click on Fork and select the namespace where you would like to keep the project. - ![](/img/gitlab_fork_cml_project.png) + ![](img/gitlab_fork_cml_project.png) 2. ⚠️ In GitLab, to use CML, you must create a variable called a `REPO_TOKEN` whose value is a Personal Access Token. To do this: @@ -22,7 +22,7 @@ Here, we'll walk through a tutorial to start using CML on GitLab. d. Click on the "Create personal access token" button and copy the generated access token. - ![](/img/personal_access_token.png) + ![](img/personal_access_token.png) e. Head back to your fork by clicking the Projects tab next to the GitLab logo and select it. @@ -30,7 +30,7 @@ Here, we'll walk through a tutorial to start using CML on GitLab. f. On the left hand side Navigate to **Settings** ➡ **CI/CD** ➡ **Variables**. - ![](/img/ci_cd_navigation.png) + ![](img/ci_cd_navigation.png) f. Scroll to Variables and expand the field. Click "Add Variable". In the Key field, type `REPO_TOKEN`. In the Value field, paste your Personal Access @@ -45,7 +45,7 @@ Here, we'll walk through a tutorial to start using CML on GitLab. shown in the image below, and then in your terminal, type the following command, replacing `` with your own from GitLab. - ![](/img/gitlab_cml_clone.png) + ![](img/gitlab_cml_clone.png) ```bash git clone https://gitlab.com//example_cml.git @@ -87,17 +87,17 @@ Here, we'll walk through a tutorial to start using CML on GitLab. 8. Go back to GitLab in a Browser window and create a merge request. - ![](/img/create_merge_request.png) + ![](img/create_merge_request.png) 9. If you arrive at a New Merge Request screen that says it's merging into anything _other_ than your local repository, click on `Change branches` seen here. - ![](/img/new_merge_request.png) + ![](img/new_merge_request.png) 10. ⚠️ Change target branch to your local branch with your username. - ![](/img/change_user_name.png) + ![](img/change_user_name.png) 11. Click on the "Compare branches and continue" button. Enter any additional comments you would like to put in the description and click the "Submit @@ -105,7 +105,7 @@ Here, we'll walk through a tutorial to start using CML on GitLab. appear in the Pull Request with your CML report. This is a result of the `cml send-comment` command in your workflow. - ![](/img/cml_start_gitlab_end.png) + ![](img/cml_start_gitlab_end.png) ## Final Solution diff --git a/content/docs/start/index.md b/content/docs/start/index.md index 8849a7dd..3cd55bdb 100644 --- a/content/docs/start/index.md +++ b/content/docs/start/index.md @@ -6,7 +6,7 @@ projects. Use it to automate parts of your development workflow, including model training and evaluation, comparing ML experiments across your project history, and monitoring changing datasets. -![](/img/cml_neural_transfer.png) _On every pull request, CML helps you +![](img/cml_neural_transfer.png) _On every pull request, CML helps you automatically train and evaluate models, then generates a visual report with results and metrics. Above, an example report for a [neural style transfer model](https://rb.gy/ub5idx)._ diff --git a/content/docs/usage.md b/content/docs/usage.md index 1518a159..1783eda8 100644 --- a/content/docs/usage.md +++ b/content/docs/usage.md @@ -43,7 +43,7 @@ jobs: ``` The example above generates visual reports in pull requests: -[![](/img/cml_first_report.png)](https://github.com/iterative/cml_base_case/pull/2) +[![](img/cml_first_report.png)](https://github.com/iterative/cml_base_case/pull/2) We helpfully provide CML and other useful libraries pre-installed on our [custom Docker images](/doc/self-hosted-runners#docker-images). In the above @@ -85,7 +85,7 @@ create-CML-report: via a `REPO_TOKEN` variable. The example above generates visual reports in merge requests: -[![](/img/GitLab_CML_report.png '=400')](https://gitlab.com/iterative.ai/cml-base-case/-/merge_requests/3) +[![](img/GitLab_CML_report.png '=400')](https://gitlab.com/iterative.ai/cml-base-case/-/merge_requests/3) We helpfully provide CML and other useful libraries pre-installed on our [custom Docker images](/doc/self-hosted-runners#docker-images). In the above @@ -128,7 +128,7 @@ pipelines: `REPO_TOKEN` variable. The example above generates visual reports in pull requests: -[![](/img/bitbucket_cloud_pr.png '=600')](https://bitbucket.org/iterative-ai/cml-base-case/pull-requests/2) +[![](img/bitbucket_cloud_pr.png '=600')](https://bitbucket.org/iterative-ai/cml-base-case/pull-requests/2) ⚠️ CML works with Bitbucket Cloud, where you can use the [Bitbucket Pipelines](https://bitbucket.org/product/features/pipelines) CI/CD diff --git a/gatsby-config.js b/gatsby-config.js index 2ff8f089..f890f5dd 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -102,10 +102,7 @@ const plugins = [ { resolve: 'gatsby-plugin-svgr', options: { - ref: true, - svgoConfig: { - plugins: [{ removeViewBox: false }] - } + ref: true } }, 'gatsby-plugin-sharp', @@ -113,7 +110,6 @@ const plugins = [ { resolve: 'gatsby-plugin-manifest', options: { - /* eslint-disable @typescript-eslint/camelcase */ background_color: '#663399', display: 'minimal-ui', icon: 'static/favicon-512x512.png', @@ -168,7 +164,6 @@ const plugins = [ type: 'image/png' } ] - /* eslint-enable @typescript-eslint/camelcase */ } }, { diff --git a/package.json b/package.json index e6490a20..572c7e7e 100644 --- a/package.json +++ b/package.json @@ -35,130 +35,133 @@ "node": "<=14.x" }, "dependencies": { + "@emotion/react": "^11.7.1", + "@emotion/styled": "^11.6.0", "@hapi/wreck": "^17.0.0", + "@mdx-js/react": "^1.6.22", "@octokit/graphql": "^4.3.1", - "@reach/portal": "^0.10.0", + "@reach/portal": "^0.16.2", "@reach/router": "^1.3.3", - "@reach/tooltip": "^0.10.0", - "@theme-ui/color": "^0.9.1", - "@theme-ui/components": "^0.9.1", - "@theme-ui/presets": "^0.9.1", + "@reach/tooltip": "^0.16.2", + "@theme-ui/color": "^0.13.1", + "@theme-ui/components": "^0.13.1", + "@theme-ui/presets": "^0.13.1", "classnames": "^2.2.6", - "color": "^3.1.2", + "color": "^4.2.0", "compression": "^1.7.4", - "date-fns": "^2.11.1", + "date-fns": "^2.28.0", "docsearch.js": "^2.6.3", "ease-component": "^1.0.0", - "express": "^4.17.1", - "fs-extra": "^9.0.0", - "gatsby": "^2.20.13", - "gatsby-cli": "2.12.54", - "gatsby-image": "^2.3.1", - "gatsby-link": "^2.3.2", + "express": "^4.17.2", + "fs-extra": "^10.0.0", + "gatsby": "^4.5.3", + "gatsby-cli": "4.5.2", + "gatsby-image": "^3.11.0", + "gatsby-link": "^4.5.0", "gatsby-plugin-alias-imports": "^1.0.5", - "gatsby-plugin-image": "0.7.2", + "gatsby-plugin-image": "2.5.2", "gatsby-plugin-parent-resolvers": "^1.0.1", - "gatsby-plugin-robots-txt": "^1.6.2", - "gatsby-plugin-theme-ui": "^0.9.1", - "gatsby-source-github-api": "^0.2.1", - "github-markdown-css": "^4.0.0", - "iso-url": "^0.4.7", - "isomorphic-fetch": "^2.2.1", + "gatsby-plugin-robots-txt": "^1.7.0", + "gatsby-plugin-theme-ui": "^0.13.1", + "gatsby-source-github-api": "^1.0.0", + "github-markdown-css": "^5.1.0", + "iso-url": "^1.2.1", + "isomorphic-fetch": "^3.0.0", "lodash": "^4.17.21", "moment": "^2.25.3", - "nanoid": "^3.0.2", + "nanoid": "^3.2.0", "node-cache": "^5.1.0", - "perfect-scrollbar": "^1.5.0", - "pretty-quick": "^2.0.1", - "prismjs": "^1.25.0", - "promise-polyfill": "^8.1.3", - "prop-types": "^15.7.2", + "perfect-scrollbar": "^1.5.5", + "pretty-quick": "^3.1.3", + "prismjs": "^1.26.0", + "promise-polyfill": "^8.2.1", + "prop-types": "^15.8.1", "raf-polyfill": "^1.0.0", - "react": "^16.13.1", - "react-collapse": "^5.0.1", + "react": "^17.0.2", + "react-collapse": "^5.1.1", "react-collapsible": "^2.7.0", - "react-dom": "^16.13.1", - "react-ga": "^2.7.0", - "react-helmet": "^5.2.1", + "react-dom": "^17.0.2", + "react-ga": "^3.3.0", + "react-helmet": "^6.1.0", "react-popover": "^0.5.10", - "react-slick": "^0.25.2", - "react-use": "^14.0.0", - "rehype-react": "^5.0.1", - "remark-preset-lint-recommended": "^5.0.0", - "repo-link-check": "^0.7.1", + "react-slick": "^0.28.1", + "react-use": "^17.3.2", + "rehype-react": "^7.0.4", + "remark-preset-lint-recommended": "^6.1.2", + "repo-link-check": "^0.8.0", "s3-client": "^4.4.2", "scroll": "^3.0.1", "serve-handler": "^6.1.2", "slick-carousel": "^1.8.1", - "theme-ui": "^0.9.1", + "theme-ui": "^0.13.1", "title-case": "^3.0.2", - "upath": "^1.2.0" + "upath": "^2.0.1" }, "devDependencies": { - "@babel/core": "^7.9.0", - "@svgr/webpack": "^5.3.1", + "@babel/core": "^7.16.7", + "@svgr/webpack": "^6.2.0", "@types/classnames": "^2.2.10", "@types/isomorphic-fetch": "^0.0.35", "@types/promise-polyfill": "^6.0.3", - "@types/react": "^16.9.32", + "@types/react": "^17.0.38", "@types/react-collapse": "^5.0.0", - "@types/react-dom": "^16.9.6", - "@types/react-helmet": "^5.0.15", + "@types/react-dom": "^17.0.11", + "@types/react-helmet": "^6.1.5", "@types/react-popover": "^0.5.3", - "@types/react-slick": "^0.23.4", - "@types/rehype-react": "^4.0.0", - "@typescript-eslint/eslint-plugin": "^2.27.0", - "@typescript-eslint/parser": "^2.27.0", - "autoprefixer": "^9.7.6", + "@types/react-slick": "^0.23.8", + "@types/rehype-react": "^6.0.0", + "@typescript-eslint/eslint-plugin": "^5.10.0", + "@typescript-eslint/parser": "^5.10.0", + "autoprefixer": "^10.4.2", "babel-eslint": "^10.1.0", - "babel-jest": "^26.0.1", - "babel-plugin-transform-define": "^2.0.0", + "babel-jest": "^27.4.6", + "babel-plugin-transform-define": "^2.0.1", "babel-plugin-transform-object-assign": "^6.22.0", - "eslint": "^6.8.0", - "eslint-config-prettier": "^6.10.1", - "eslint-plugin-json": "^2.1.1", - "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-prettier": "^3.1.2", - "eslint-plugin-react": "^7.19.0", - "gatsby-plugin-catch-links": "^2.2.1", - "gatsby-plugin-manifest": "2.2.23", - "gatsby-plugin-postcss": "^2.2.1", - "gatsby-plugin-react-helmet": "^3.2.1", + "eslint": "^8.7.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-json": "^3.1.0", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.28.0", + "gatsby-plugin-catch-links": "^4.5.0", + "gatsby-plugin-manifest": "4.5.2", + "gatsby-plugin-postcss": "^5.5.0", + "gatsby-plugin-react-helmet": "^5.5.0", "gatsby-plugin-sentry": "^1.0.1", - "gatsby-plugin-sharp": "2.2.32", - "gatsby-plugin-sitemap": "^2.3.1", - "gatsby-plugin-svgr": "^2.0.2", - "gatsby-plugin-typescript": "^2.3.1", + "gatsby-plugin-sharp": "4.5.2", + "gatsby-plugin-sitemap": "^5.5.0", + "gatsby-plugin-svgr": "^3.0.0-beta.0", + "gatsby-plugin-typescript": "^4.5.2", "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5", - "gatsby-remark-autolink-headers": "^2.2.1", - "gatsby-remark-copy-linked-files": "^2.2.1", + "gatsby-remark-autolink-headers": "^5.5.0", + "gatsby-remark-copy-linked-files": "^5.5.0", "gatsby-remark-embed-gist": "^1.1.9", - "gatsby-remark-embedder": "^2.0.0", + "gatsby-remark-embedder": "^5.0.0", "gatsby-remark-external-links": "^0.0.4", - "gatsby-remark-images": "^3.2.2", - "gatsby-remark-prismjs": "^3.4.1", - "gatsby-remark-relative-images": "0.2.3", - "gatsby-remark-responsive-iframe": "^2.3.1", - "gatsby-remark-smartypants": "^2.2.1", - "gatsby-source-filesystem": "^2.2.2", - "gatsby-transformer-remark": "^2.7.1", - "hast-util-select": "^4.0.0", - "husky": "^4.2.3", - "jest": "^26.0.1", - "lint-staged": "^10.1.2", + "gatsby-remark-images": "^6.5.2", + "gatsby-remark-prismjs": "^6.5.0", + "gatsby-remark-relative-images": "2.0.2", + "gatsby-remark-responsive-iframe": "^5.5.0", + "gatsby-remark-smartypants": "^5.5.0", + "gatsby-source-filesystem": "^4.5.2", + "gatsby-transformer-remark": "^5.5.2", + "hast-util-select": "^5.0.1", + "husky": "4", + "jest": "^27.4.7", + "lint-staged": "^12.2.0", "postcss-color-mod-function": "^3.0.3", - "postcss-custom-media": "^7.0.8", - "postcss-custom-properties": "^9.1.1", - "postcss-mixins": "^6.2.3", - "postcss-nested": "^4.2.1", - "prettier": "^2.2.1", - "remark": "^12.0.0", - "remark-html": "^13.0.2", - "remark-parse": "^8.0.2", - "stylelint": "^13.3.0", - "stylelint-config-standard": "^20.0.0", - "typescript": "^3.8.3", - "unist-util-remove-position": "^2.0.1" + "postcss-custom-media": "^8.0.0", + "postcss-custom-properties": "^12.1.3", + "postcss-mixins": "^9.0.1", + "postcss-nested": "^5.0.6", + "prettier": "^2.5.1", + "remark": "^14.0.2", + "remark-html": "^15.0.1", + "remark-parse": "^10.0.1", + "stylelint": "^14.2.0", + "stylelint-config-standard": "^24.0.0", + "typescript": "^4.5.4", + "unist-util-remove-position": "^4.0.1" }, "husky": { "hooks": { diff --git a/src/components/atoms/LayoutWidthContainer/index.tsx b/src/components/atoms/LayoutWidthContainer/index.tsx index 1eb6b5df..e0cd73cb 100644 --- a/src/components/atoms/LayoutWidthContainer/index.tsx +++ b/src/components/atoms/LayoutWidthContainer/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import cn from 'classnames' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface ILayoutWidthContainerProps { className?: string diff --git a/src/components/atoms/ShowOnly/index.tsx b/src/components/atoms/ShowOnly/index.tsx index 4b36860c..b2bf6fff 100644 --- a/src/components/atoms/ShowOnly/index.tsx +++ b/src/components/atoms/ShowOnly/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import cn from 'classnames' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface IShowOnlyProps { on: 'mobile' | 'desktop' diff --git a/src/components/layouts/MainLayout/index.tsx b/src/components/layouts/MainLayout/index.tsx index 78c350d4..6f36ac74 100644 --- a/src/components/layouts/MainLayout/index.tsx +++ b/src/components/layouts/MainLayout/index.tsx @@ -3,7 +3,7 @@ import React, { useEffect } from 'react' import { IPageProps } from '../../organisms/Page' import { handleFirstTab } from '../../../utils/front/accessibility' -import styles from './styles.module.css' +import * as styles from './styles.module.css' export enum LayoutModifiers { Wide, @@ -45,9 +45,7 @@ const MainLayout: LayoutComponent = ({ className, children }) => { return ( <> -
- {children} -
+
{children}
) } diff --git a/src/components/molecules/HamburgerIcon/index.tsx b/src/components/molecules/HamburgerIcon/index.tsx index 96f35743..9782e207 100644 --- a/src/components/molecules/HamburgerIcon/index.tsx +++ b/src/components/molecules/HamburgerIcon/index.tsx @@ -1,7 +1,7 @@ import cn from 'classnames' import React from 'react' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface IHamburgerProps { opened?: boolean diff --git a/src/components/molecules/HamburgerMenu/index.tsx b/src/components/molecules/HamburgerMenu/index.tsx index 6c6db512..bc89a0ec 100644 --- a/src/components/molecules/HamburgerMenu/index.tsx +++ b/src/components/molecules/HamburgerMenu/index.tsx @@ -13,7 +13,7 @@ import { ReactComponent as GithubIcon } from '@media/icons/github.svg' import { ReactComponent as MailIcon } from '@media/icons/mail.svg' import { ReactComponent as DiscordIcon } from '@media/icons/discord.svg' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const docsPage = getFirstPage() @@ -209,13 +209,9 @@ export const HamburgerButton: React.FC<{ opened: boolean collapsed: boolean handleClick: (e: MouseEvent) => void -}> = ({ opened, collapsed, handleClick }) => ( +}> = ({ opened, handleClick }) => (