diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx new file mode 100644 index 00000000000..a695e930146 --- /dev/null +++ b/.storybook-s2/docs/Migrating.jsx @@ -0,0 +1,779 @@ +import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'}; +import {Link} from '@react-spectrum/s2'; +import {P, Code, Pre, H3, H2} from './typography'; + +export function Migrating() { + return ( +
An automated upgrade assistant is available by running the following command in the project you want to upgrade:
+npx @react-spectrum/codemods s1-to-s2+ +
For cases that the upgrade assistant doesn't handle automatically or where you'd rather upgrade some components manually, use the guide below.
+ +Note that [PENDING] indicates that future changes will occur before the final release, and the current solution should be considered temporary.
+ +@react-spectrum/s2
package instead of @adobe/react-spectrum
or individual packages like @react-spectrum/button
No updates needed.
+ +closeOnSelect
(it has not been implemented yet)trigger
(it has not been implemented yet)Item
to be a MenuItem
isDisabled
(it has not been implemented yet)size
and instead provide a size via the style macro (i.e. {`styles={style({size: 20})}`}
)showRoot
(it has not been implemented yet)isMultiline
(it has not been implemented yet)autoFocusCurrent
(it has not been implemented yet)size="S"
(Small is no longer a supported size in Spectrum 2)Item
to be a Breadcrumb
variant=“cta”
to variant="accent"
variant=“overBackground”
to variant=“primary” staticColor=“white”
style
to fillStyle
isPending
(it has not been implemented yet)isQuiet
(it is no longer supported in Spectrum 2)href
is present, the Button
should be converted to a LinkButton
elementType
(it is no longer supported in Spectrum 2)No updates needed.
+ +No updates needed.
+ +showErrorIcon
(it has been removed due to accessibility issues)size
and instead provide a size via the style macro (i.e. {`styles={style({size: 20})}`}
)isQuiet
(it is no longer supported in Spectrum 2)placeholder
(it has been removed due to accessibility issues)validationState=“invalid”
to isInvalid
validationState=“valid”
(it is no longer supported in Spectrum 2)showValueLabel
(it has been removed due to accessibility issues)No updates needed.
+ +size
and instead provide a size via the style macro (i.e. {`styles={style({size: 20})}`}
)menuWidth
value from a DimensionValue
to a pixel valueisQuiet
(it is no longer supported in Spectrum 2)loadingState
(it has not been implemented yet)placeholder
(it is no longer supported in Spectrum 2)validationState=“invalid”
to isInvalid
validationState=“valid”
(it is no longer supported in Spectrum 2)onLoadMore
(it has not been implemented yet)Item
to be a ComboBoxItem
DialogTrigger
to being a child of Dialog
onDismiss
and use onOpenChange
on the DialogTrigger
, or onDismiss
on the DialogContainer
insteadtype=“tray”
(Tray
has not been implemented yet)mobileType=“tray”
(Tray
has not been implemented yet)targetRef
(it is no longer supported in Spectrum 2)children
to remove render props usage, and note that the close
function was moved from DialogTrigger
to Dialog
Flex
to be a div
and apply flex styles using the style macro (i.e. {``}
)isQuiet
(it is no longer supported in Spectrum 2)isReadOnly
(it is no longer supported in Spectrum 2)validationState
(it is no longer supported in Spectrum 2)validationBehavior
(it is no longer supported in Spectrum 2)Grid
to be a div
and apply grid styles using the style macro (i.e. {``}
)No updates needed.
+ +variant=“info”
to variant=“informative”
Menu
: Update Item
to be a MenuItem
ActionMenu
: Update Item
to be a MenuItem
TagGroup
: Update Item
to be a Tag
Breadcrumbs
: Update Item
to be a Breadcrumb
Picker
: Update Item
to be a PickerItem
ComboBox
: Update Item
to be a ComboBoxItem
ListBox
: Update Item
to be a ListBoxItem
TabList
: Update Item
to be a Tab
TabPanels
: Update Item
to be a TabPanel
and remove surrounding TabPanels
key
to be id
(and keep key
if rendered inside array.map
)variant=“overBackground”
to staticColor=“white”
Item
to be a ListBoxItem
Item
to be a MenuItem
closeOnSelect
(it has not been implemented yet)menuWidth
value from a DimensionValue
to a pixel valueisQuiet
(it is no longer supported in Spectrum 2)validationState=“invalid”
to isInvalid
validationState=“valid”
(it is no longer supported in Spectrum 2)isLoading
(it has not been implemented yet)onLoadMore
(it has not been implemented yet)Item
to be a PickerItem
variant=“overBackground”
to staticColor=“white”
labelPosition
(it has not been implemented yet)showValueLabel
(it has not been implemented yet)variant=“overBackground”
to staticColor=“white”
No updates needed.
+ +validationState=“invalid”
to isInvalid
validationState=“valid”
(it is no longer supported in Spectrum 2)showErrorIcon
(it has been removed due to accessibility issues)showValueLabel
(it has been removed due to accessibility issues)getValueLabel
(it has not been implemented yet)orientation
(it has not been implemented yet)placeholder
(it has been removed due to accessibility issues)isQuiet
(it is no longer supported in Spectrum 2)validationState=“invalid”
to isInvalid
validationState=“valid”
(it is no longer supported in Spectrum 2)Menu
: Update Section
to be a MenuSection
Picker
: Update Section
to be a PickerSection
isFilled
(Slider is always filled in Spectrum 2)trackGradient
(Not supported in S2 design)showValueLabel
(it has been removed due to accessibility issues)getValueLabel
(it has not been implemented yet)orientation
(it has not been implemented yet)isDisabled
(it is no longer supported in Spectrum 2)variant=“info”
to variant="informative"
No updates needed.
+ +No updates needed.
+ +TabList
: Update Item
to be Tab
TabPanels
: Update Item
to be a TabPanel
and remove the surrounding TabPanels
actionLabel
(it has not been implemented yet)onAction
(it has not been implemented yet)maxRows
(it has not been implemented yet)errorMessage
(it has not been implemented yet)isInvalid
(it has not been implemented yet)validationState
(isInvalid
should be used when it becomes available)Item
to be Tag
icon
(it has not been implemented yet)isQuiet
(it is no longer supported in Spectrum 2)placeholder
(it has been removed due to accessibility issues)validationState=“invalid”
to isInvalid
validationState=“valid”
(it is no longer supported in Spectrum 2)icon
(it has not been implemented yet)isQuiet
(it is no longer supported in Spectrum 2)placeholder
(it has been removed due to accessibility issues)validationState=“invalid”
to isInvalid
validationState=“valid”
(it is no longer supported in Spectrum 2)No updates needed.
+ +variant
(it is no longer supported in Spectrum 2)placement
and add to the parent TooltipTrigger
insteadshowIcon
(it is no longer supported in Spectrum 2)isOpen
and add to the parent TooltipTrigger
insteadplacement="bottom left"
to be placement=“bottom”
)View
to be a div
and apply styles using the style macroReact Spectrum v3 supported a limited set of style props for layout and positioning using Spectrum-defined values. Usage of these should be updated to instead use the style macro.
+Example:
+++ +{`- import {ActionButton} from '@adobe/react-spectrum';`}+{`+ import {ActionButton} from '@react-spectrum/s2';`}+{`+ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};`}+{'\n'}+{`-+`} {`++`} {` Edit`}+{` `}+
Affected style props: borderWidth
, borderStartWidth
, borderEndWidth
, borderTopWidth
, borderBottomWidth
, borderXWidth
, borderYWidth
.
Example:
+++{`-+`} {`+ `}+
Border widths should be updated to use pixel values. Use the following mappings:
+Spectrum 1 | +Spectrum 2 | +
---|---|
'none' |
+ 0 |
+
'thin' |
+ 1 |
+
'thick' |
+ 2 |
+
'thicker' |
+ 4 |
+
'thickest' |
+ '[8px]' |
+
Affected style props: borderRadius
, borderTopStartRadius
, borderTopEndRadius
, borderBottomStartRadius
, borderBottomEndRadius
.
Example:
+++{`-+`} {`+ `}+
Border radius values should be updated to use pixel values. Use the following mappings:
+Spectrum 1 | +Spectrum 2 | +
---|---|
'xsmall' |
+ '[1px]' |
+
'small' |
+ 'sm' |
+
'regular' |
+ 'default' |
+
'medium' |
+ 'lg' |
+
'large' |
+ 'xl' |
+
Affected style props: width
, minWidth
, maxWidth
, height
, minHeight
, maxHeight
, margin
, marginStart
, marginEnd
, marginTop
, marginBottom
, marginX
, marginY
, top
, bottom
, left
, right
, start
, end
, flexBasis
, gap
, columnGap
, rowGap
, padding
, paddingX
, paddingY
, paddingStart
, paddingEnd
, paddingTop
, paddingBottom
.
Example:
+++{`-+`} {`++`} {` Edit`}+{` `}+
Dimension values should be converted to pixel values. Use the following mappings:
+Spectrum 1 | +Spectrum 2 | +
---|---|
'size-0' |
+ 0 |
+
'size-10' |
+ 1 |
+
'size-25' |
+ 2 |
+
'size-40' |
+ 3 |
+
'size-50' |
+ 4 |
+
'size-65' |
+ 5 |
+
'size-75' |
+ 6 |
+
'size-85' |
+ 7 |
+
'size-100' |
+ 8 |
+
'size-115' |
+ 9 |
+
'size-125' |
+ 10 |
+
'size-130' |
+ 11 |
+
'size-150' |
+ 12 |
+
'size-160' |
+ 13 |
+
'size-175' |
+ 14 |
+
'size-200' |
+ 16 |
+
'size-225' |
+ 18 |
+
'size-250' |
+ 20 |
+
'size-275' |
+ 22 |
+
'size-300' |
+ 24 |
+
'size-325' |
+ 26 |
+
'size-350' |
+ 28 |
+
'size-400' |
+ 32 |
+
'size-450' |
+ 36 |
+
'size-500' |
+ 40 |
+
'size-550' |
+ 44 |
+
'size-600' |
+ 48 |
+
'size-675' |
+ 54 |
+
'size-700' |
+ 56 |
+
'size-800' |
+ 64 |
+
'size-900' |
+ 72 |
+
'size-1000' |
+ 80 |
+
'size-1200' |
+ 96 |
+
'size-1250' |
+ 100 |
+
'size-1600' |
+ 128 |
+
'size-1700' |
+ 136 |
+
'size-2000' |
+ 160 |
+
'size-2400' |
+ 192 |
+
'size-3000' |
+ 240 |
+
'size-3400' |
+ 272 |
+
'size-3600' |
+ 288 |
+
'size-4600' |
+ 368 |
+
'size-5000' |
+ 400 |
+
'size-6000' |
+ 480 |
+
'static-size-0' |
+ 0 |
+
'static-size-10' |
+ 1 |
+
'static-size-25' |
+ 2 |
+
'static-size-40' |
+ 3 |
+
'static-size-50' |
+ 4 |
+
'static-size-65' |
+ 5 |
+
'static-size-100' |
+ 8 |
+
'static-size-115' |
+ 9 |
+
'static-size-125' |
+ 10 |
+
'static-size-130' |
+ 11 |
+
'static-size-150' |
+ 12 |
+
'static-size-160' |
+ 13 |
+
'static-size-175' |
+ 14 |
+
'static-size-200' |
+ 16 |
+
'static-size-225' |
+ 18 |
+
'static-size-250' |
+ 20 |
+
'static-size-300' |
+ 24 |
+
'static-size-400' |
+ 32 |
+
'static-size-450' |
+ 36 |
+
'static-size-500' |
+ 40 |
+
'static-size-550' |
+ 44 |
+
'static-size-600' |
+ 48 |
+
'static-size-700' |
+ 56 |
+
'static-size-800' |
+ 64 |
+
'static-size-900' |
+ 72 |
+
'static-size-1000' |
+ 80 |
+
'static-size-1200' |
+ 96 |
+
'static-size-1700' |
+ 136 |
+
'static-size-2400' |
+ 192 |
+
'static-size-2600' |
+ 208 |
+
'static-size-3400' |
+ 272 |
+
'static-size-3600' |
+ 288 |
+
'static-size-4600' |
+ 368 |
+
'static-size-5000' |
+ 400 |
+
'static-size-6000' |
+ 480 |
+
'single-line-height' |
+ 32 |
+
'single-line-width' |
+ 192 |
+
Break points previously used in style props can be used in the style macro with updated keys. Use the following mappings:
+Spectrum 1 | +Spectrum 2 | +
---|---|
base |
+ default |
+
S |
+ sm |
+
M |
+ md |
+
L |
+ lg |
+
Example:
+++{`-+`} {`+ `}+
{children}
;
+ return {children}
;
}
export function Strong({children}) {
diff --git a/packages/@react-spectrum/upgrade-cli/package.json b/packages/dev/codemods/package.json
similarity index 81%
rename from packages/@react-spectrum/upgrade-cli/package.json
rename to packages/dev/codemods/package.json
index e0a08448450..a15f67aa76c 100644
--- a/packages/@react-spectrum/upgrade-cli/package.json
+++ b/packages/dev/codemods/package.json
@@ -1,14 +1,16 @@
{
- "name": "@react-spectrum/upgrade-cli",
+ "name": "@react-spectrum/codemods",
"version": "0.0.1",
"private": true,
- "source": "src/index.ts",
"main": "dist/index.js",
- "bin": {
- "upgrade-react-spectrum": "./dist/index.js"
+ "source": "src/index.ts",
+ "bin": "dist/index.js",
+ "targets": {
+ "main": false
},
"scripts": {
- "start": "node --loader=ts-node/esm src/index.ts"
+ "build": "tsc",
+ "prepublishOnly": "yarn build"
},
"files": [
"dist"
@@ -23,12 +25,12 @@
"@babel/parser": "^7.24.5",
"@babel/traverse": "^7.24.5",
"@babel/types": "^7.24.5",
+ "@react-spectrum/s2": "^0.2.0",
"@react-types/shared": "^3.24.0",
"@types/node": "^20",
"boxen": "^5.1.2",
"build": "^0.1.4",
"chalk": "^4.0.0",
- "commander": "^12.0.0",
"execa": "^5.1.1",
"jscodeshift": "^0.15.2",
"ts-node": "^10.9.2",
diff --git a/packages/dev/codemods/src/index.ts b/packages/dev/codemods/src/index.ts
new file mode 100644
index 00000000000..f5397efbc2e
--- /dev/null
+++ b/packages/dev/codemods/src/index.ts
@@ -0,0 +1,100 @@
+const {parseArgs} = require('node:util');
+import {s1_to_s2} from './s1-to-s2/src';
+import {use_monopackages} from './use-monopackages/src';
+
+interface JSCodeshiftOptions {
+ /**
+ * The parser for jscodeshift to use for parsing the source files: https://github.com/facebook/jscodeshift?tab=readme-ov-file#parser.
+ *
+ * @default 'tsx'
+ */
+ parser?: 'babel' | 'babylon' | 'flow' | 'ts' |' tsx',
+ /**
+ * A glob pattern of files to ignore: https://github.com/facebook/jscodeshift?tab=readme-ov-file#ignoring-files-and-directories.
+ *
+ * @default '*\*\/node_modules/*\*\'
+ */
+ ignorePattern?: string,
+ /**
+ * Whether to run the codemod in dry mode, which will not write any changes to disk.
+ *
+ * @default false
+ */
+ dry?: boolean,
+ /**
+ * The path to the directory to run the codemod in.
+ *
+ * @default '.'
+ */
+ path?: string
+}
+
+export interface S1ToS2CodemodOptions extends JSCodeshiftOptions {
+ /**
+ * An optional subset of components to have the s1-to-s2 codemod apply to.
+ * Provide a comma-separated list of component names.
+ */
+ components?: string
+}
+
+export interface UseMonopackagesCodemodOptions extends JSCodeshiftOptions {
+ /**
+ * The packages to apply the use-monopackages codemod to.
+ */
+ packages?: string
+}
+
+const codemods: Record