From e17c7f4a45883b403574fb948ff74d2e4f7b32a3 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Mon, 19 Aug 2024 11:47:42 -0700 Subject: [PATCH] Release fixes (#6902) --- .parcelrc-build | 4 ++ .../@react-spectrum/s2/src/NumberField.tsx | 3 +- packages/@react-spectrum/s2/src/Tabs.tsx | 18 +++---- packages/dev/codemods/package.json | 3 ++ packages/dev/codemods/src/index.ts | 1 + .../__snapshots__/combobox.test.ts.snap | 11 ++++ .../__snapshots__/imports.test.ts.snap | 2 +- .../__tests__/__snapshots__/menu.test.ts.snap | 10 +--- .../__snapshots__/picker.test.ts.snap | 11 ++++ .../src/s1-to-s2/__tests__/combobox.test.ts | 10 ++++ .../src/s1-to-s2/__tests__/menu.test.ts | 10 +--- .../src/s1-to-s2/__tests__/picker.test.ts | 10 ++++ .../src/s1-to-s2/src/codemods/changes.ts | 52 ++++++++++++++++++- .../src/s1-to-s2/src/codemods/codemod.ts | 1 + .../src/s1-to-s2/src/codemods/transforms.ts | 5 +- .../src/s1-to-s2/src/getComponents.ts | 2 +- 16 files changed, 121 insertions(+), 32 deletions(-) diff --git a/.parcelrc-build b/.parcelrc-build index d5e200369ac..e3051340e9e 100644 --- a/.parcelrc-build +++ b/.parcelrc-build @@ -7,6 +7,10 @@ "packages/**/intl/*.json": ["parcel-transformer-intl"], "bundle-text:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"], "illustration:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], + "illustrations-module:*svg": ["@react-spectrum/parcel-transformer-s2-icon"], + "illustrations-main:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], + "illustrations-module:*": ["..."], + "illustrations-main:*": ["..."], "packages/@react-spectrum/s2/s2wf-icons/**/*.svg": ["@react-spectrum/parcel-transformer-s2-icon"], // Disable PostCSS from running over style macro output "packages/@react-spectrum/s2/**/*.css": ["@parcel/transformer-css"], diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx index c01fb7cd0ef..95abf57a9a7 100644 --- a/packages/@react-spectrum/s2/src/NumberField.tsx +++ b/packages/@react-spectrum/s2/src/NumberField.tsx @@ -126,7 +126,8 @@ const inputButton = style({ forcedColors: { default: 'ButtonFace' } - } + }, + cursor: 'default' }); const iconStyles = style({ diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx index b7a3c2feb87..4df8654256a 100644 --- a/packages/@react-spectrum/s2/src/Tabs.tsx +++ b/packages/@react-spectrum/s2/src/Tabs.tsx @@ -16,17 +16,17 @@ import { TabPanelProps as AriaTabPanelProps, TabProps as AriaTabProps, TabsProps as AriaTabsProps, + ContextValue, Provider, Tab as RACTab, TabList as RACTabList, Tabs as RACTabs, TabListStateContext, - ContextValue, useSlottedContext} from 'react-aria-components'; import {centerBaseline} from './CenterBaseline'; import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared'; import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react'; -import {focusRing, getAllowedOverrides, UnsafeStyles, StylesPropWithHeight, StyleProps} from './style-utils' with {type: 'macro'}; +import {focusRing, getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'}; import {IconContext} from './Icon'; import {style} from '../style/spectrum-theme' with {type: 'macro'}; import {Text, TextContext} from './Content'; @@ -77,7 +77,7 @@ export function TabPanel(props: TabPanelProps) { + className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} /> ); } @@ -191,13 +191,13 @@ export function TabList(props: TabListProps) { style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}> {orientation === 'vertical' && - } + } tablist({...renderProps, density})} /> {orientation === 'horizontal' && - } + } ); } @@ -214,7 +214,7 @@ function isAllTabsDisabled(collection: Collection> | null, disabledKe return false; } - testKey = collection.getKeyAfter(testKey) + testKey = collection.getKeyAfter(testKey); index++; } return true; @@ -258,7 +258,7 @@ const selectedIndicator = style({ borderStyle: 'none', borderRadius: 'full', transitionDuration: 130, - transitionTimingFunction: 'in-out', + transitionTimingFunction: 'in-out' }); function TabLine(props: TabLineProps) { @@ -329,8 +329,6 @@ const tabs = style({ } }, getAllowedOverrides({height: true})); -const TabsInternalContext = createContext({}); - function Tabs(props: TabsProps, ref: DOMRef) { [props, ref] = useSpectrumContextProps(props, ref, TabsContext); let { @@ -338,7 +336,7 @@ function Tabs(props: TabsProps, ref: DOMRef) { isDisabled, disabledKeys, orientation = 'horizontal' - } = props + } = props; let domRef = useDOMRef(ref); return ( diff --git a/packages/dev/codemods/package.json b/packages/dev/codemods/package.json index 36bd00779e3..8a9024c03ac 100644 --- a/packages/dev/codemods/package.json +++ b/packages/dev/codemods/package.json @@ -43,5 +43,8 @@ }, "rsp": { "type": "cli" + }, + "publishConfig": { + "access": "public" } } diff --git a/packages/dev/codemods/src/index.ts b/packages/dev/codemods/src/index.ts index f5397efbc2e..3bb350ba739 100644 --- a/packages/dev/codemods/src/index.ts +++ b/packages/dev/codemods/src/index.ts @@ -1,3 +1,4 @@ +#!/usr/bin/env node const {parseArgs} = require('node:util'); import {s1_to_s2} from './s1-to-s2/src'; import {use_monopackages} from './use-monopackages/src'; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap index 580806b80eb..27125e3b4e9 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/combobox.test.ts.snap @@ -223,3 +223,14 @@ let props = {validationState: 'invalid'}; " `; + +exports[`handles sections 1`] = ` +"import { ComboBoxSection, ComboBoxItem, ComboBox } from "@react-spectrum/s2"; +import { Section, Item } from '@adobe/react-spectrum'; + +
Section title
+ Item one + Item two + +" +`; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap index 1d59090a85a..bf01f164749 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap @@ -63,7 +63,7 @@ import { Section, Item, ListBox } from '@adobe/react-spectrum';
- +
Styles
Bold Underline diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap index 5b5f2a6b94e..9b5149b26e1 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/menu.test.ts.snap @@ -180,10 +180,7 @@ import { Item, Section } from '@adobe/react-spectrum'; Email - -
- Section heading -
+
Section heading
Save @@ -218,10 +215,7 @@ import { Item, Section } from '@adobe/react-spectrum'; Email - -
- Section heading -
+
Section heading
Save diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap index a0bd01c085d..9c0a3335955 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/picker.test.ts.snap @@ -144,3 +144,14 @@ let props = {validationState: 'invalid'};
" `; + +exports[`handles sections 1`] = ` +"import { PickerSection, PickerItem, Picker } from "@react-spectrum/s2"; +import { Section, Item } from '@adobe/react-spectrum'; + +
Section title
+ Item one + Item two + +" +`; diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts index ad7d82423fb..ffbe0936a72 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/combobox.test.ts @@ -213,3 +213,13 @@ let props = {validationState: 'invalid'}; `); + +test('handles sections', ` +import {ComboBox, Section, Item} from '@adobe/react-spectrum'; + +
+ Item one + Item two +
+ +`); diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts index adadbc8f10d..4c34fb025ba 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/menu.test.ts @@ -22,10 +22,7 @@ import {Menu, MenuTrigger, Item, SubmenuTrigger, Button, Section, Header, Headin Email -
-
- Section heading -
+
Save
@@ -49,10 +46,7 @@ import {Menu, MenuTrigger, Item, SubmenuTrigger, Button, Section, Header, Headin Email -
-
- Section heading -
+
Save
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts index d1849321a1a..9e844dd5aa2 100644 --- a/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts +++ b/packages/dev/codemods/src/s1-to-s2/__tests__/picker.test.ts @@ -138,3 +138,13 @@ let props = {validationState: 'invalid'}; `); + +test('handles sections', ` +import {Picker, Section, Item} from '@adobe/react-spectrum'; + +
+ Item one + Item two +
+ +`); diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts index 8c92726c5b8..f7786e9bba4 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts @@ -860,6 +860,28 @@ export const changes: ChangesJSON = { } } }, + { + description: 'If within Picker, update Section to be a PickerSection', + reason: 'Updated component structure', + function: { + name: 'updateComponentWithinCollection', + args: { + parentComponent: 'Picker', + newComponent: 'PickerSection' + } + } + }, + { + description: 'If within ComboBox, update Section to be a ComboBoxSection', + reason: 'Updated component structure', + function: { + name: 'updateComponentWithinCollection', + args: { + parentComponent: 'ComboBox', + newComponent: 'ComboBoxSection' + } + } + }, { description: 'Move title prop string to be a child of new Heading within a Header', @@ -868,7 +890,35 @@ export const changes: ChangesJSON = { name: 'movePropToNewChildComponent', args: { parentComponent: 'Menu', - childComponent: 'Section', + childComponent: 'MenuSection', + propToMove: 'title', + newChildComponent: 'Header' + } + } + }, + { + description: + 'Move title prop string to be a child of new Heading within a Header', + reason: 'Updated API', + function: { + name: 'movePropToNewChildComponent', + args: { + parentComponent: 'Picker', + childComponent: 'PickerSection', + propToMove: 'title', + newChildComponent: 'Header' + } + } + }, + { + description: + 'Move title prop string to be a child of new Heading within a Header', + reason: 'Updated API', + function: { + name: 'movePropToNewChildComponent', + args: { + parentComponent: 'ComboBox', + childComponent: 'ComboBoxSection', propToMove: 'title', newChildComponent: 'Header' } diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts index 6cf55f0fdc4..b53877eff39 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts @@ -204,6 +204,7 @@ export default function transformer(file: FileInfo, api: API, options: Options) (b.path.node.imported.name === 'Item' || b.path.node.imported.name === 'Section') ) { // Keep Item and Section imports + // TODO: remove if they are unused return; } b.path.remove(); diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts index 65776883fb8..9822bfaff89 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts @@ -645,7 +645,7 @@ function movePropToNewChildComponent( getName(path, path.node.openingElement.name) === childComponent && getName(path, path.parentPath.node.openingElement.name) === parentComponent ) { - let propValue; + let propValue: t.JSXAttribute['value'] | void; path.node.openingElement.attributes = path.node.openingElement.attributes.filter((attr) => { if (t.isJSXAttribute(attr) && attr.name.name === propToMove) { @@ -660,9 +660,10 @@ function movePropToNewChildComponent( t.jsxElement( t.jsxOpeningElement(t.jsxIdentifier(newChildComponent), []), t.jsxClosingElement(t.jsxIdentifier(newChildComponent)), - [t.jsxText(propValue)] + [t.isStringLiteral(propValue) ? t.jsxText(propValue.value) : propValue] ) ); + // TODO: handle dynamic collections. Need to wrap function child in and move `items` prop down. } } } diff --git a/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts b/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts index 6b677b58881..0f98c956c21 100644 --- a/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts +++ b/packages/dev/codemods/src/s1-to-s2/src/getComponents.ts @@ -7,7 +7,7 @@ export function getComponents(): Set { // Determine list of available components in S2 from index.ts let availableComponents = new Set(); const packagePath = require.resolve('@react-spectrum/s2'); - const indexPath = path.join(path.dirname(packagePath), process.env.NODE_ENV === 'test' ? 'src/index.ts' : '../src/index.js'); + const indexPath = path.join(path.dirname(packagePath), process.env.NODE_ENV === 'test' ? 'src/index.ts' : '../src/index.ts'); let index = parse(readFileSync(indexPath, 'utf8'), {sourceType: 'module', plugins: ['typescript']}); traverse(index, { ExportNamedDeclaration(path) {