From ae056886590163dd6d97ef755110c3593903a411 Mon Sep 17 00:00:00 2001 From: Vincenzo Scamporlino Date: Mon, 3 Feb 2025 12:44:11 +0100 Subject: [PATCH] sync branch after merge from upstream Signed-off-by: Vincenzo Scamporlino --- package.json | 3 +- src/ReleaseProvider.tsx | 4 +- src/SettingsProvider.tsx | 2 +- src/__tests__/utils.spec.js | 44 - src/__tests__/utils.spec.ts | 8 +- src/components/common/Diff/Diff.js | 260 ----- src/components/common/Diff/Diff.tsx | 6 +- src/components/common/Diff/DiffComment.js | 160 --- src/components/common/Diff/DiffComment.tsx | 5 +- src/components/common/Select.tsx | 6 +- src/components/common/Settings.tsx | 97 +- src/components/common/UsefulContentSection.js | 262 ----- .../common/UsefulContentSection.tsx | 11 +- src/components/common/VersionSelector.tsx | 132 ++- src/components/pages/Home.js | 174 --- src/components/pages/Home.tsx | 56 +- src/hooks/fetch-diff.ts | 13 +- src/hooks/fetch-release-versions.ts | 4 +- src/releases/react-native/0.69.tsx | 2 + src/utils.js | 129 --- src/utils.ts | 13 +- src/utils/update-url.js | 43 - src/utils/update-url.ts | 45 +- yarn.lock | 1006 +++++++++++------ 24 files changed, 911 insertions(+), 1574 deletions(-) delete mode 100644 src/__tests__/utils.spec.js delete mode 100644 src/components/common/Diff/Diff.js delete mode 100644 src/components/common/Diff/DiffComment.js delete mode 100644 src/components/common/UsefulContentSection.js delete mode 100644 src/components/pages/Home.js delete mode 100644 src/utils.js delete mode 100644 src/utils/update-url.js diff --git a/package.json b/package.json index 81eed697..fc05d055 100644 --- a/package.json +++ b/package.json @@ -87,5 +87,6 @@ "pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx|ts|tsx)\"", "pre-push": "yarn run lint" } - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/ReleaseProvider.tsx b/src/ReleaseProvider.tsx index 79ffe5e8..1176332a 100644 --- a/src/ReleaseProvider.tsx +++ b/src/ReleaseProvider.tsx @@ -1,8 +1,8 @@ import React, { useContext, useState } from 'react' -import { useFetchReleases } from './hooks/fetch-release-versions' import { USE_YARN_PLUGIN } from './utils' import { useSettings } from './SettingsProvider' import { ReleaseT } from './releases/types' +import { useFetchReleaseVersions } from './hooks/fetch-release-versions' export const ReleasesContext = React.createContext<{ isDone: boolean @@ -29,7 +29,7 @@ export const ReleasesProvider = React.memo(function ({ settings: { [USE_YARN_PLUGIN]: useYarnPlugin }, } = useSettings() - const value = useFetchReleases({ packageName, useYarnPlugin }) + const value = useFetchReleaseVersions({ packageName, useYarnPlugin }) const [selectedVersions, setSelectedVersions] = useState<{ from?: ReleaseT to?: ReleaseT diff --git a/src/SettingsProvider.tsx b/src/SettingsProvider.tsx index 07718147..d127cd15 100644 --- a/src/SettingsProvider.tsx +++ b/src/SettingsProvider.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useCallback, useContext } from 'react' +import React, { ReactNode, useContext } from 'react' import useLocalStorage from 'react-use/lib/useLocalStorage' import useSearchParam from 'react-use/lib/useSearchParam' diff --git a/src/__tests__/utils.spec.js b/src/__tests__/utils.spec.js deleted file mode 100644 index d6475f87..00000000 --- a/src/__tests__/utils.spec.js +++ /dev/null @@ -1,44 +0,0 @@ -import { PACKAGE_NAMES } from '../constants' -import { getVersionsContentInDiff } from '../utils' - -const fixtureVersions = ['0.59', '0.58', '0.57', '0.56'].map(version => ({ - version -})) -describe('getVersionsContentInDiff', () => { - it('returns the versions in the provided range', () => { - const versions = getVersionsContentInDiff({ - packageName: PACKAGE_NAMES.RN, - fromVersion: '0.57.0', - toVersion: '0.59.0', - versions: fixtureVersions - }) - - expect(versions).toEqual([{ version: '0.59' }, { version: '0.58' }]) - }) - - it('returns the versions in the provided range with release candidates', () => { - const versions = getVersionsContentInDiff({ - packageName: PACKAGE_NAMES.RN, - fromVersion: '0.56.0', - toVersion: '0.59.0-rc.1', - versions: fixtureVersions - }) - - expect(versions).toEqual([ - { version: '0.59' }, - { version: '0.58' }, - { version: '0.57' } - ]) - }) - - it('returns the versions in the provided range with patches specified', () => { - const versions = getVersionsContentInDiff({ - packageName: PACKAGE_NAMES.RN, - fromVersion: '0.57.2', - toVersion: '0.59.9', - versions: fixtureVersions - }) - - expect(versions).toEqual([{ version: '0.59' }, { version: '0.58' }]) - }) -}) diff --git a/src/__tests__/utils.spec.ts b/src/__tests__/utils.spec.ts index 7404ef3a..4e987c5c 100644 --- a/src/__tests__/utils.spec.ts +++ b/src/__tests__/utils.spec.ts @@ -4,11 +4,13 @@ import { getVersionsContentInDiff, getChangelogURL } from '../utils' const fixtureVersions = ['0.59', '0.58', '0.57', '0.56'].map((version) => ({ version, + createApp: '', })) + describe('getVersionsContentInDiff', () => { it('returns the versions in the provided range', () => { const versions = getVersionsContentInDiff({ - packageName: PACKAGE_NAMES.RN, + // packageName: PACKAGE_NAMES.RN, fromVersion: '0.57.0', toVersion: '0.59.0', versions: fixtureVersions, @@ -19,7 +21,7 @@ describe('getVersionsContentInDiff', () => { it('returns the versions in the provided range with release candidates', () => { const versions = getVersionsContentInDiff({ - packageName: PACKAGE_NAMES.RN, + // packageName: PACKAGE_NAMES.RN, fromVersion: '0.56.0', toVersion: '0.59.0-rc.1', versions: fixtureVersions, @@ -34,7 +36,7 @@ describe('getVersionsContentInDiff', () => { it('returns the versions in the provided range with patches specified', () => { const versions = getVersionsContentInDiff({ - packageName: PACKAGE_NAMES.RN, + // packageName: PACKAGE_NAMES.RN, fromVersion: '0.57.2', toVersion: '0.59.9', versions: fixtureVersions, diff --git a/src/components/common/Diff/Diff.js b/src/components/common/Diff/Diff.js deleted file mode 100644 index aaabde18..00000000 --- a/src/components/common/Diff/Diff.js +++ /dev/null @@ -1,260 +0,0 @@ -import React, { useState, useCallback, useEffect } from 'react' -import styled from '@emotion/styled' -import { - Diff as RDiff, - Hunk, - markEdits, - tokenize, - Decoration as DiffDecoration -} from 'react-diff-view' -import { Button, Card, Typography } from 'antd' -import DiffHeader from './DiffHeader' -import { getComments } from './DiffComment' -import { replaceWithProvidedAppName } from '../../../utils' -import { useReleases } from '../../../ReleaseProvider' - -const copyPathPopoverContentOpts = { - default: 'Click to copy file path', - copied: 'File path copied!' -} - -const Container = styled.div` - border: 1px solid #e8e8e8; - border-radius: 3px; - margin-bottom: 16px; - margin-top: 16px; -` - -const More = styled.div` - background-color: #f1f8ff; - margin-left: 30px; - padding-left: 4px; - color: '#1b1f23b3'; -` - -const Decoration = styled(DiffDecoration)` - background-color: #dbedff; -` - -const DiffView = styled(RDiff)` - .diff-gutter-col { - width: 30px; - } - - tr.diff-line { - font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, - monospace; - } - - td.diff-gutter { - color: rgba(27, 31, 35, 0.3); - padding: 0; - text-align: center; - font-size: 12px; - cursor: auto; - } - - td.diff-gutter .diff-line-normal { - background-color: #cdffd8; - border-color: #bef5cb; - } - - td.diff-gutter:hover { - cursor: pointer; - color: rgba(27, 31, 35, 0.6); - } - - td.diff-code { - font-size: 12px; - color: #24292e; - } - - td.diff-code-insert .diff-code-edit { - background-color: #acf2bd; - } - - td.diff-gutter-omit:before { - width: 0; - background-color: transparent; - } - - td.diff-widget-content { - padding: 0; - } -` - -// Diff will be collapsed by default if the file has been deleted or has more than 5 hunks -const isDiffCollapsedByDefault = ({ type, hunks }) => - type === 'delete' || hunks.length > 5 ? true : undefined - -const Placeholder = ({ newPath, children }) => { - const [showDiff, setShowDiff] = useState(false) - - if (!showDiff && newPath === '.yarn/plugins/@yarnpkg/plugin-backstage.cjs') { - return ( - - - - The diff for the Backstage yarn plugin is hidden by default. - - - ) - } - - return children -} - -const Diff = ({ - packageName, - oldPath, - newPath, - type, - hunks, - fromVersion, - toVersion, - diffKey, - isDiffCompleted, - onCompleteDiff, - selectedChanges, - onToggleChangeSelection, - areAllCollapsed, - setAllCollapsed, - diffViewStyle, - appName -}) => { - const [isDiffCollapsed, setIsDiffCollapsed] = useState( - isDiffCollapsedByDefault({ type, hunks }) - ) - - const [copyPathPopoverContent, setCopyPathPopoverContent] = useState( - copyPathPopoverContentOpts.default - ) - - const handleCopyPathToClipboard = () => { - setCopyPathPopoverContent(copyPathPopoverContentOpts.copied) - } - - const handleResetCopyPathPopoverContent = () => { - if (copyPathPopoverContent === copyPathPopoverContentOpts.copied) { - setCopyPathPopoverContent(copyPathPopoverContentOpts.default) - } - } - - const getHunksWithAppName = useCallback( - originalHunks => { - if (!appName) { - return originalHunks - } - - return originalHunks.map(hunk => ({ - ...hunk, - changes: hunk.changes.map(change => ({ - ...change, - content: replaceWithProvidedAppName(change.content, appName) - })) - })) - }, - [appName] - ) - - useEffect(() => { - if (areAllCollapsed !== undefined && areAllCollapsed !== isDiffCollapsed) { - setIsDiffCollapsed(areAllCollapsed) - } else if (isDiffCompleted && isDiffCollapsed === undefined) { - setIsDiffCollapsed(true) - } - }, [areAllCollapsed, isDiffCollapsed, isDiffCompleted]) - - const { releases } = useReleases() - const diffComments = getComments({ - versions: releases, - newPath, - fromVersion, - toVersion, - appName - }) - - return ( - - 0} - isDiffCollapsed={isDiffCollapsed} - setIsDiffCollapsed={(collapse, altKey) => { - if (altKey) { - return setAllCollapsed(collapse) - } - - setAllCollapsed(undefined) - setIsDiffCollapsed(collapse) - }} - isDiffCompleted={isDiffCompleted} - onCopyPathToClipboard={handleCopyPathToClipboard} - copyPathPopoverContent={copyPathPopoverContent} - resetCopyPathPopoverContent={handleResetCopyPathPopoverContent} - onCompleteDiff={onCompleteDiff} - appName={appName} - diffComments={diffComments} - packageName={packageName} - /> - - {!isDiffCollapsed && ( - - - {originalHunks => { - const updatedHunks = getHunksWithAppName(originalHunks) - - const options = { - enhancers: [markEdits(updatedHunks)] - } - - const tokens = tokenize(updatedHunks, options) - - return updatedHunks.map(hunk => [ - - {hunk.content} - , - - ]) - }} - - - )} - - ) -} - -/* - Return true if passing `nextProps` to render would return - the same result as passing prevProps to render, otherwise return false -*/ -const arePropsEqual = (prevProps, nextProps) => - prevProps.isDiffCompleted === nextProps.isDiffCompleted && - prevProps.areAllCollapsed === nextProps.areAllCollapsed && - prevProps.diffViewStyle === nextProps.diffViewStyle && - prevProps.appName === nextProps.appName - -export default React.memo(Diff, arePropsEqual) diff --git a/src/components/common/Diff/Diff.tsx b/src/components/common/Diff/Diff.tsx index 5af9599f..163202c5 100644 --- a/src/components/common/Diff/Diff.tsx +++ b/src/components/common/Diff/Diff.tsx @@ -26,6 +26,8 @@ import { replaceAppDetails } from '../../../utils' import type { Theme } from '../../../theme' import type { ChangeEventArgs } from 'react-diff-view' import type { DefaultRenderToken } from 'react-diff-view/types/context' +import { Button, Card, Typography } from 'antd' +import { useReleases } from '../../../ReleaseProvider' const copyPathPopoverContentOpts = { default: 'Copy file path', @@ -272,11 +274,13 @@ const Diff = ({ setIsDiffCollapsed(true) } + const { releases } = useReleases() const diffComments = getComments({ - packageName, + // packageName, newPath, fromVersion, toVersion, + versions: releases, }) const updatedHunks: HunkData[] = React.useMemo( diff --git a/src/components/common/Diff/DiffComment.js b/src/components/common/Diff/DiffComment.js deleted file mode 100644 index aeb3800d..00000000 --- a/src/components/common/Diff/DiffComment.js +++ /dev/null @@ -1,160 +0,0 @@ -import React, { useState, Fragment } from 'react' -import styled from '@emotion/styled' -import { motion } from 'framer-motion' -import { removeAppPathPrefix, getVersionsContentInDiff } from '../../../utils' -import Markdown from '../Markdown' - -const lineColors = { - add: '#d6fedb', - delete: '#fdeff0', - neutral: '#ffffff' -} - -const Container = styled(({ isCommentVisible, children, ...props }) => ( - -
- -))` - overflow: hidden; - - & > div { - display: flex; - flex-direction: row; - background-color: ${({ lineChangeType }) => lineColors[lineChangeType]}; - cursor: pointer; - } -` - -const ContentContainer = styled.div` - flex: 1; - position: relative; - padding: 16px; - color: #000; - background-color: #fffbe6; - user-select: none; -` - -const ShowButton = styled(({ isCommentVisible, ...props }) => ( - -))` - background-color: #ffe58f; - margin-left: 20px; - width: 10px; - cursor: pointer; -` - -const Content = styled(Markdown)` - opacity: 1; - ${({ isCommentVisible }) => - !isCommentVisible && - ` - opacity: 0; - `} - transition: opacity 0.25s ease-out; -` - -const LINE_CHANGE_TYPES = { - ADD: 'I', - DELETE: 'D', - NEUTRAL: 'N' -} - -const getLineNumberWithType = ({ lineChangeType, lineNumber }) => - `${LINE_CHANGE_TYPES[lineChangeType.toUpperCase()]}${lineNumber}` - -const getComments = ({ versions, newPath, fromVersion, toVersion }) => { - const newPathSanitized = removeAppPathPrefix(newPath) - - const versionsInDiff = getVersionsContentInDiff({ - versions, - fromVersion, - toVersion - }).filter( - ({ comments }) => - comments && - comments.length > 0 && - comments.some(({ fileName }) => fileName === newPathSanitized) - ) - - return versionsInDiff.reduce((allComments, version) => { - const comments = version.comments.reduce( - (versionComments, { fileName, lineChangeType, lineNumber, content }) => { - if (fileName !== newPathSanitized) { - return versionComments - } - - return { - ...versionComments, - [getLineNumberWithType({ lineChangeType, lineNumber })]: ( - {content}} - lineChangeType={lineChangeType} - /> - ) - } - }, - {} - ) - - return { - ...allComments, - ...comments - } - }, {}) -} - -const DiffComment = ({ content, lineChangeType }) => { - const [isCommentVisible, setIsCommentVisible] = useState(true) - - return ( - setIsCommentVisible(!isCommentVisible)} - > - setIsCommentVisible(!isCommentVisible)} - /> - - - - {content.props.children} - - - - ) -} - -export { getComments } -export default DiffComment diff --git a/src/components/common/Diff/DiffComment.tsx b/src/components/common/Diff/DiffComment.tsx index 09baacb7..3db0eb57 100644 --- a/src/components/common/Diff/DiffComment.tsx +++ b/src/components/common/Diff/DiffComment.tsx @@ -130,10 +130,10 @@ const getLineNumberWithType = ({ }${lineNumber}` const getComments = ({ - packageName, newPath, fromVersion, toVersion, + versions, }: { versions: ReleaseT[] newPath: string @@ -143,7 +143,8 @@ const getComments = ({ const newPathSanitized = removeAppPathPrefix(newPath) const versionsInDiff = getVersionsContentInDiff({ - packageName, + // packageName, + versions, fromVersion, toVersion, }).filter( diff --git a/src/components/common/Select.tsx b/src/components/common/Select.tsx index 008804d1..5ef99053 100644 --- a/src/components/common/Select.tsx +++ b/src/components/common/Select.tsx @@ -23,9 +23,9 @@ const Select = ({ title, options, ...props }: SelectProps) => ( {title} - {options.map((option) => ( - ))} diff --git a/src/components/common/Settings.tsx b/src/components/common/Settings.tsx index 242b18b9..c6119bf5 100644 --- a/src/components/common/Settings.tsx +++ b/src/components/common/Settings.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react' -import { Popover, Button, Checkbox, CheckboxChangeEvent } from 'antd' +import { Popover, Button, Checkbox } from 'antd' import { SHOW_LATEST_RCS, USE_YARN_PLUGIN } from '../../utils' import styled from '@emotion/styled' -import { WindowsFilled } from '@ant-design/icons' -import { PACKAGE_NAMES, LANGUAGE_NAMES } from '../../constants' -import { CheckboxValueType } from 'antd/es/checkbox/Group' +// import { WindowsFilled } from '@ant-design/icons' +// import { PACKAGE_NAMES, LANGUAGE_NAMES } from '../../constants' +// import { CheckboxValueType } from 'antd/es/checkbox/Group' +import { useSettings } from '../../SettingsProvider' const SettingsButton = styled(Button)` color: initial; @@ -16,81 +17,87 @@ const SettingsIcon = styled((props: React.HTMLAttributes) => ( font-family: initial; ` -const PlatformsContainer = styled.div` - display: flex; - flex-direction: column; - align-items: start; - margin-top: 12px; -` +// const PlatformsContainer = styled.div` +// display: flex; +// flex-direction: column; +// align-items: start; +// margin-top: 12px; +// ` -const PackagesGroupContainer = styled.div` - display: flex; - flex-direction: column; - align-items: start; -` +// const PackagesGroupContainer = styled.div` +// display: flex; +// flex-direction: column; +// align-items: start; +// ` const Settings = ({ handleSettingsChange, - packageName, - language, - onChangePackageNameAndLanguage, }: { - handleSettingsChange: (checkboxValues: CheckboxValueType[]) => void - packageName: string - language: string - onChangePackageNameAndLanguage: (params: { + handleSettingsChange?: (checkboxValues: string[]) => void + packageName?: string + language?: string + onChangePackageNameAndLanguage?: (params: { newPackageName?: string newLanguage: string }) => void }) => { + const { settings, setSettings } = useSettings() const [popoverVisibility, setVisibility] = useState(false) - const [newPackageName, setNewPackageName] = useState(packageName) - const [newLanguage, setNewLanguage] = useState(language) + // const [newPackageName, setNewPackageName] = useState(packageName) + // const [newLanguage, setNewLanguage] = useState(language) const handleClickChange = (visibility: boolean) => { setVisibility(visibility) - const processedNewLanguage = - newLanguage !== language && newPackageName === PACKAGE_NAMES.RNW - ? newLanguage - : LANGUAGE_NAMES.CPP + // const processedNewLanguage = + // newLanguage !== language && newPackageName === PACKAGE_NAMES.RNW + // ? newLanguage + // : LANGUAGE_NAMES.CPP - if ( - !visibility && - (newPackageName !== packageName || processedNewLanguage !== language) - ) { - onChangePackageNameAndLanguage({ - newPackageName: - newPackageName !== packageName ? newPackageName : undefined, - newLanguage: processedNewLanguage, - }) - } + // if ( + // !visibility && + // (newPackageName !== packageName || processedNewLanguage !== language) + // ) { + // onChangePackageNameAndLanguage({ + // newPackageName: + // newPackageName !== packageName ? newPackageName : undefined, + // newLanguage: processedNewLanguage, + // }) + // } } - const toggleShowLatestRCs = (e: CheckboxChangeEvent) => + const toggleShowLatestRCs = ([checked]: string[]) => setSettings({ ...settings, - [SHOW_LATEST_RCS]: e.target.checked, + [SHOW_LATEST_RCS]: !!checked, }) - const toggleUseYarnPlugin = (e: CheckboxChangeEvent) => { + const toggleUseYarnPlugin = ([checked]: string[]) => { setSettings({ ...settings, - [USE_YARN_PLUGIN]: e.target.checked, + [USE_YARN_PLUGIN]: !!checked, }) } + // const updateCheckboxValues = (checkboxValues: CheckboxValueType[]) => + // handleSettingsChange?.(checkboxValues) + return ( - +
{SHOW_LATEST_RCS}
- + +
+ {USE_YARN_PLUGIN} +
+ + {/*
Upgrading another platform?
react-native-macos - + */} } trigger="click" diff --git a/src/components/common/UsefulContentSection.js b/src/components/common/UsefulContentSection.js deleted file mode 100644 index 4717e085..00000000 --- a/src/components/common/UsefulContentSection.js +++ /dev/null @@ -1,262 +0,0 @@ -import React, { Component, Fragment } from 'react' -import styled from '@emotion/styled' -import { UpOutlined, DownOutlined } from '@ant-design/icons' -import { Button } from 'antd' -import { - getVersionsContentInDiff, - getChangelogURL, - getTransitionDuration -} from '../../utils' -import { Link } from './Markdown' -import UpgradeSupportAlert from './UpgradeSupportAlert' -// import AppNameWarning from './AppNameWarning' -import { motion } from 'framer-motion' -import { PACKAGE_NAMES } from '../../constants' -import { ReleasesContext } from '../../ReleaseProvider' - -const Container = styled.div` - position: relative; - margin-top: 16px; - color: rgba(0, 0, 0, 0.65); - overflow: hidden; -` - -const InnerContainer = styled.div` - color: rgba(0, 0, 0, 0.65); - background-color: #fffbe6; - border-width: 1px; - border-left-width: 7px; - border-color: #ffe58f; - border-style: solid; - border-radius: 3px; - transition: padding 0.25s ease-out; -` - -const Title = styled(({ isContentVisible, ...props }) => ( - -))` - font-size: 17px; - cursor: pointer; - margin: 0px; - padding: 18px 0px 0px 14px; -` - -const ContentContainer = styled(({ isContentVisible, children, ...props }) => ( - -
- -))` - & > div { - padding: 15px 24px 19px; - } -` - -const Icon = styled(props => ( - - 📣 - -))` - margin: 0px 10px; -` - -const HideContentButton = styled( - ({ toggleContentVisibility, isContentVisible, ...props }) => ( -