Release fixes (adobe#6902)

alecmev · Aug 19, 2024 · e17c7f4 · e17c7f4
1 parent 86eb91f
commit e17c7f4
Show file tree

Hide file tree

Showing 16 changed files with 121 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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) {
     <AriaTabPanel
       {...props}
       style={props.UNSAFE_style}
-      className={(props.UNSAFE_className || '') + tabPanel(null , props.styles)} />
+      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />
   );
 }
 
@@ -191,13 +191,13 @@ export function TabList<T extends object>(props: TabListProps<T>) {
       style={props.UNSAFE_style}
       className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>
       {orientation === 'vertical' &&
-        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density}/>}
+        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
       <RACTabList
         {...props}
         ref={tablistRef}
         className={renderProps => tablist({...renderProps, density})} />
       {orientation === 'horizontal' &&
-        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density}/>}
+        <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
   );
 }
@@ -214,7 +214,7 @@ function isAllTabsDisabled<T>(collection: Collection<Node<T>> | 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,16 +329,14 @@ const tabs = style({
   }
 }, getAllowedOverrides({height: true}));
 
-const TabsInternalContext = createContext<TabsProps>({});
-
 function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
   let {
     density = 'regular',
     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
@@ -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
@@ -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
@@ -223,3 +223,14 @@ let props = {validationState: 'invalid'};
   </ComboBox>
 </div>"
 `;
+
+exports[`handles sections 1`] = `
+"import { ComboBoxSection, ComboBoxItem, ComboBox } from "@react-spectrum/s2";
+import { Section, Item } from '@adobe/react-spectrum';
+<ComboBox>
+  <ComboBoxSection><Header>Section title</Header>
+    <ComboBoxItem>Item one</ComboBoxItem>
+    <ComboBoxItem>Item two</ComboBoxItem>
+  </ComboBoxSection>
+</ComboBox>"
+`;
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
@@ -63,7 +63,7 @@ import { Section, Item, ListBox } from '@adobe/react-spectrum';
 
 <div>
   <Menu aria-label="Text">
-    <MenuSection title="Styles">
+    <MenuSection><Header>Styles</Header>
       <MenuItem id="bold">Bold</MenuItem>
       <MenuItem id="underline">Underline</MenuItem>
     </MenuSection>

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
@@ -180,10 +180,7 @@ import { Item, Section } from '@adobe/react-spectrum';
           <MenuItem>Email</MenuItem>
         </Menu>
       </SubmenuTrigger>
-      <MenuSection>
-        <Header>
-          <Heading>Section heading</Heading>
-        </Header>
+      <MenuSection><Header>Section heading</Header>
         <MenuItem>Save</MenuItem>
       </MenuSection>
     </Menu>
@@ -218,10 +215,7 @@ import { Item, Section } from '@adobe/react-spectrum';
           <MenuItem id="email">Email</MenuItem>
         </Menu>
       </SubmenuTrigger>
-      <MenuSection>
-        <Header>
-          <Heading>Section heading</Heading>
-        </Header>
+      <MenuSection><Header>Section heading</Header>
         <MenuItem id="save">Save</MenuItem>
       </MenuSection>
     </Menu>

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
@@ -144,3 +144,14 @@ let props = {validationState: 'invalid'};
   </Picker>
 </div>"
 `;
+
+exports[`handles sections 1`] = `
+"import { PickerSection, PickerItem, Picker } from "@react-spectrum/s2";
+import { Section, Item } from '@adobe/react-spectrum';
+<Picker>
+  <PickerSection><Header>Section title</Header>
+    <PickerItem>Item one</PickerItem>
+    <PickerItem>Item two</PickerItem>
+  </PickerSection>
+</Picker>"
+`;
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
@@ -213,3 +213,13 @@ let props = {validationState: 'invalid'};
   </ComboBox>
 </div>
 `);
+
+test('handles sections', `
+import {ComboBox, Section, Item} from '@adobe/react-spectrum';
+<ComboBox>
+  <Section title="Section title">
+    <Item>Item one</Item>
+    <Item>Item two</Item>
+  </Section>
+</ComboBox>
+`);
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
@@ -22,10 +22,7 @@ import {Menu, MenuTrigger, Item, SubmenuTrigger, Button, Section, Header, Headin
           <Item>Email</Item>
         </Menu>
       </SubmenuTrigger>
-      <Section>
-        <Header>
-          <Heading>Section heading</Heading>
-        </Header>
+      <Section title="Section heading">
         <Item>Save</Item>
       </Section>
     </Menu>
@@ -49,10 +46,7 @@ import {Menu, MenuTrigger, Item, SubmenuTrigger, Button, Section, Header, Headin
           <Item key="email">Email</Item>
         </Menu>
       </SubmenuTrigger>
-      <Section>
-        <Header>
-          <Heading>Section heading</Heading>
-        </Header>
+      <Section title="Section heading">
         <Item key="save">Save</Item>
       </Section>
     </Menu>

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
@@ -138,3 +138,13 @@ let props = {validationState: 'invalid'};
   </Picker>
 </div>
 `);
+
+test('handles sections', `
+import {Picker, Section, Item} from '@adobe/react-spectrum';
+<Picker>
+  <Section title="Section title">
+    <Item>Item one</Item>
+    <Item>Item two</Item>
+  </Section>
+</Picker>
+`);
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
@@ -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
@@ -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
@@ -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 <Collection> 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
@@ -7,7 +7,7 @@ export function getComponents(): Set<string> {
   // Determine list of available components in S2 from index.ts
   let availableComponents = new Set<string>();
   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) {