Merge branch 'jeppe/react-prerelease-sandboxes' of github.com:storybo…

…okjs/storybook into jeppe/temp-gen-react-prerelease-sandboxes
storybookjs · May 6, 2024 · 6cc6b09 · 6cc6b09
2 parents 1ad7579 + 74afbb1
commit 6cc6b09
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 102 deletions.
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
@@ -200,6 +200,11 @@ test.describe('addon-docs', () => {
       expectedReactVersionRange = /^17/;
     } else if (templateName.includes('react16')) {
       expectedReactVersionRange = /^16/;
+    } else if (
+      templateName.includes('react-vite/prerelease') ||
+      templateName.includes('react-webpack/prerelease')
+    ) {
+      expectedReactVersionRange = /^19/;
     }
 
     // Arrange - Get the actual versions

diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
@@ -246,8 +246,17 @@ const baseTemplates = {
   },
   'react-webpack/prerelease-ts': {
     name: 'React Prerelease (Webpack | TypeScript)',
-    script:
-      'yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta"',
+    /**
+     * 1. Create a Webpack project with React beta versions
+     * 3. Add resolutions for @types/react and @types/react-dom, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing
+     * 4. Add @types/react and @types/react-dom pointing to the beta packages
+     */
+    script: `
+      yarn create webpack5-react {{beforeDir}} --version-react="beta" --version-react-dom="beta" && \
+      cd {{beforeDir}} && \
+      jq '.resolutions += {"@types/react": "npm:types-react@beta", "@types/react-dom": "npm:types-react-dom@beta"}' package.json > tmp.json && mv tmp.json package.json && \
+      yarn add --dev @types/react@npm:types-react@beta @types/react-dom@npm:types-react-dom@beta
+      `,
     expected: {
       framework: '@storybook/react-webpack5',
       renderer: '@storybook/react',

diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx
@@ -98,7 +98,7 @@ const Source: FunctionComponent<SourceProps> = ({
   language,
   code,
   dark,
-  format,
+  format = false,
   ...rest
 }) => {
   const { typography } = useTheme();
@@ -138,7 +138,4 @@ const Source: FunctionComponent<SourceProps> = ({
   );
 };
 
-Source.defaultProps = {
-  format: false,
-};
 export { Source, StyledSyntaxHighlighter };
diff --git a/code/ui/components/src/components/form/field/field.tsx b/code/ui/components/src/components/form/field/field.tsx
@@ -38,7 +38,3 @@ export const Field = ({ label, children, ...props }: FieldProps) => (
     {children}
   </Wrapper>
 );
-
-Field.defaultProps = {
-  label: undefined,
-};
diff --git a/code/ui/components/src/components/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx
@@ -134,14 +134,14 @@ export interface TabsProps {
 export const Tabs: FC<TabsProps> = memo(
   ({
     children,
-    selected,
+    selected = null,
     actions,
-    absolute,
-    bordered,
-    tools,
+    absolute = false,
+    bordered = false,
+    tools = null,
     backgroundColor,
-    id: htmlId,
-    menuName,
+    id: htmlId = null,
+    menuName = 'Tabs',
     emptyState,
     showToolsWhenEmpty,
   }) => {
@@ -206,15 +206,6 @@ export const Tabs: FC<TabsProps> = memo(
   }
 );
 Tabs.displayName = 'Tabs';
-Tabs.defaultProps = {
-  id: null,
-  children: null,
-  tools: null,
-  selected: null,
-  absolute: false,
-  bordered: false,
-  menuName: 'Tabs',
-};
 
 export interface TabsStateProps {
   children: TabsProps['children'];

diff --git a/code/ui/components/src/components/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx
@@ -186,17 +186,18 @@ export interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href'
 }
 
 const ListItem = ({
-  loading,
-  title,
-  center,
-  right,
-  icon,
-  active,
-  disabled,
+  loading = false,
+  title = <span>Loading state</span>,
+  center = null,
+  right = null,
+
+  active = false,
+  disabled = false,
   isIndented,
-  href,
-  onClick,
-  LinkWrapper,
+  href = null,
+  onClick = null,
+  icon,
+  LinkWrapper = null,
   ...rest
 }: ListItemProps) => {
   const itemProps = getItemProps(onClick, href, LinkWrapper);
@@ -220,16 +221,4 @@ const ListItem = ({
   );
 };
 
-ListItem.defaultProps = {
-  loading: false,
-  title: <span>Loading state</span>,
-  center: null,
-  right: null,
-  active: false,
-  disabled: false,
-  href: null,
-  LinkWrapper: null,
-  onClick: null,
-};
-
 export default ListItem;
diff --git a/code/ui/components/src/components/tooltip/Tooltip.tsx b/code/ui/components/src/components/tooltip/Tooltip.tsx
@@ -126,7 +126,16 @@ export interface TooltipProps {
 
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
-    { placement, hasChrome, children, arrowProps, tooltipRef, color, withArrows, ...props },
+    {
+      placement = 'top',
+      hasChrome = true,
+      children,
+      arrowProps = {},
+      tooltipRef,
+      color,
+      withArrows,
+      ...props
+    },
     ref
   ) => {
     return (
@@ -139,10 +148,3 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 );
 
 Tooltip.displayName = 'Tooltip';
-Tooltip.defaultProps = {
-  color: undefined,
-  tooltipRef: undefined,
-  hasChrome: true,
-  placement: 'top',
-  arrowProps: {},
-};
diff --git a/code/ui/components/src/components/tooltip/TooltipLinkList.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
@@ -58,7 +58,7 @@ export interface TooltipLinkListProps {
   LinkWrapper?: LinkWrapperType;
 }
 
-export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) => {
+export const TooltipLinkList = ({ links, LinkWrapper = null }: TooltipLinkListProps) => {
   const hasIcon = links.some((link) => link.icon);
   return (
     <List>
@@ -68,7 +68,3 @@ export const TooltipLinkList = ({ links, LinkWrapper }: TooltipLinkListProps) =>
     </List>
   );
 };
-
-TooltipLinkList.defaultProps = {
-  LinkWrapper: ListItem.defaultProps.LinkWrapper,
-};
diff --git a/code/ui/components/src/components/tooltip/TooltipMessage.tsx b/code/ui/components/src/components/tooltip/TooltipMessage.tsx
@@ -60,9 +60,3 @@ export const TooltipMessage = ({ title, desc, links }: TooltipMessageProps) => {
     </MessageWrapper>
   );
 };
-
-TooltipMessage.defaultProps = {
-  title: null,
-  desc: null,
-  links: null,
-};
diff --git a/code/ui/components/src/components/tooltip/WithTooltip.tsx b/code/ui/components/src/components/tooltip/WithTooltip.tsx
@@ -45,23 +45,42 @@ export interface WithTooltipPureProps
 
 // Pure, does not bind to the body
 const WithTooltipPure = ({
-  svg,
-  trigger,
-  closeOnOutsideClick,
-  placement,
-  hasChrome,
+  svg = false,
+  trigger = 'click',
+  closeOnOutsideClick = false,
+  placement = 'top',
+  modifiers = [
+    {
+      name: 'preventOverflow',
+      options: {
+        padding: 8,
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [8, 8],
+      },
+    },
+    {
+      name: 'arrow',
+      options: {
+        padding: 8,
+      },
+    },
+  ],
+  hasChrome = true,
+  defaultVisible = false,
   withArrows,
   offset,
   tooltip,
   children,
   closeOnTriggerHidden,
   mutationObserverOptions,
-  defaultVisible,
   delayHide,
   visible,
   interactive,
   delayShow,
-  modifiers,
   strategy,
   followCursor,
   onVisibleChange,
@@ -120,35 +139,6 @@ const WithTooltipPure = ({
   );
 };
 
-WithTooltipPure.defaultProps = {
-  svg: false,
-  trigger: 'click',
-  closeOnOutsideClick: false,
-  placement: 'top',
-  modifiers: [
-    {
-      name: 'preventOverflow',
-      options: {
-        padding: 8,
-      },
-    },
-    {
-      name: 'offset',
-      options: {
-        offset: [8, 8],
-      },
-    },
-    {
-      name: 'arrow',
-      options: {
-        padding: 8,
-      },
-    },
-  ],
-  hasChrome: true,
-  defaultVisible: false,
-};
-
 export interface WithTooltipStateProps extends Omit<WithTooltipPureProps, 'onVisibleChange'> {
   startOpen?: boolean;
   onVisibleChange?: (visible: boolean) => void | boolean;