Core: Onboarding guide

code/core/src/cli/globalSettings.ts

@@ -15,7 +15,13 @@ const userSettingSchema = z.object({
   // (we can remove keys once they are deprecated)
   userSince: z.number().optional(),
   init: z.object({ skipOnboarding: z.boolean().optional() }).optional(),
-  checklist: z.object({ completed: z.array(z.string()), skipped: z.array(z.string()) }).optional(),
+  checklist: z
+    .object({
+      muted: z.union([z.boolean(), z.array(z.string())]).optional(),
+      accepted: z.array(z.string()),
+      skipped: z.array(z.string()),
+    })
+    .optional(),
 });
 
 let settings: Settings | undefined;

code/core/src/components/components/Button/Button.tsx

@@ -1,18 +1,18 @@
-import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
+import type { ButtonHTMLAttributes, ComponentProps } from 'react';
 import React, { forwardRef, useEffect, useState } from 'react';
 
 import { Slot } from '@radix-ui/react-slot';
 import { darken, lighten, rgba, transparentize } from 'polished';
 import { isPropValid, styled } from 'storybook/theming';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: 'button' | 'a' | 'label' | typeof Slot;
+  as?: 'a' | 'button' | 'div' | 'label' | typeof Slot;
   asChild?: boolean;
   size?: 'small' | 'medium';
   padding?: 'small' | 'medium' | 'none';
   variant?: 'outline' | 'solid' | 'ghost';
-  onClick?: (event: SyntheticEvent) => void;
   disabled?: boolean;
+  readOnly?: boolean;
   active?: boolean;
   animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
 }
@@ -27,6 +27,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       variant = 'outline',
       padding = 'medium',
       disabled = false,
+      readOnly = false,
       active = false,
       onClick,
       ...props
@@ -37,7 +38,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const [isAnimating, setIsAnimating] = useState(false);
 
-    const handleClick = (event: SyntheticEvent) => {
+    const handleClick: ButtonProps['onClick'] = (event) => {
       if (onClick) {
         onClick(event);
       }
@@ -65,6 +66,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         size={size}
         padding={padding}
         disabled={disabled}
+        readOnly={readOnly}
         active={active}
         animating={isAnimating}
         animation={animation}
@@ -84,165 +86,181 @@ const StyledButton = styled('button', {
     animating: boolean;
     animation: ButtonProps['animation'];
   }
->(({ theme, variant, size, disabled, active, animating, animation = 'none', padding }) => ({
-  border: 0,
-  cursor: disabled ? 'not-allowed' : 'pointer',
-  display: 'inline-flex',
-  gap: '6px',
-  alignItems: 'center',
-  justifyContent: 'center',
-  overflow: 'hidden',
-  padding: (() => {
-    if (padding === 'none') {
-      return 0;
-    }
-    if (padding === 'small' && size === 'small') {
-      return '0 7px';
-    }
-    if (padding === 'small' && size === 'medium') {
-      return '0 9px';
-    }
-    if (size === 'small') {
-      return '0 10px';
-    }
-    if (size === 'medium') {
-      return '0 12px';
-    }
-    return 0;
-  })(),
-  height: size === 'small' ? '28px' : '32px',
-  position: 'relative',
-  textAlign: 'center',
-  textDecoration: 'none',
-  transitionProperty: 'background, box-shadow',
-  transitionDuration: '150ms',
-  transitionTimingFunction: 'ease-out',
-  verticalAlign: 'top',
-  whiteSpace: 'nowrap',
-  userSelect: 'none',
-  opacity: disabled ? 0.5 : 1,
-  margin: 0,
-  fontSize: `${theme.typography.size.s1}px`,
-  fontWeight: theme.typography.weight.bold,
-  lineHeight: '1',
-  background: (() => {
-    if (variant === 'solid') {
-      return theme.color.secondary;
-    }
-
-    if (variant === 'outline') {
-      return theme.button.background;
-    }
-
-    if (variant === 'ghost' && active) {
-      return theme.background.hoverable;
-    }
-    return 'transparent';
-  })(),
-  ...(variant === 'ghost'
-    ? {
-        // This is a hack to apply bar styles to the button as soon as it is part of a bar
-        // It is a temporary solution until we have implemented Theming 2.0.
-        '.sb-bar &': {
-          background: (() => {
-            if (active) {
-              return transparentize(0.9, theme.barTextColor);
-            }
-            return 'transparent';
-          })(),
-          color: (() => {
-            if (active) {
-              return theme.barSelectedColor;
-            }
-            return theme.barTextColor;
-          })(),
-          '&:hover': {
-            color: theme.barHoverColor,
-            background: transparentize(0.86, theme.barHoverColor),
-          },
-
-          '&:active': {
-            color: theme.barSelectedColor,
-            background: transparentize(0.9, theme.barSelectedColor),
-          },
-
-          '&:focus': {
-            boxShadow: `${rgba(theme.barHoverColor, 1)} 0 0 0 1px inset`,
-            outline: 'none',
-          },
-        },
+>(
+  ({
+    theme,
+    variant,
+    size,
+    disabled,
+    readOnly,
+    active,
+    animating,
+    animation = 'none',
+    padding,
+  }) => ({
+    border: 0,
+    cursor: readOnly ? 'inherit' : disabled ? 'not-allowed' : 'pointer',
+    display: 'inline-flex',
+    gap: '6px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    padding: (() => {
+      if (padding === 'none') {
+        return 0;
       }
-    : {}),
-  color: (() => {
-    if (variant === 'solid') {
-      return theme.color.lightest;
-    }
-
-    if (variant === 'outline') {
-      return theme.input.color;
-    }
-
-    if (variant === 'ghost' && active) {
-      return theme.color.secondary;
-    }
-
-    if (variant === 'ghost') {
-      return theme.color.mediumdark;
-    }
-    return theme.input.color;
-  })(),
-  boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
-  borderRadius: theme.input.borderRadius,
-  // Making sure that the button never shrinks below its minimum size
-  flexShrink: 0,
-
-  '&:hover': {
-    color: variant === 'ghost' ? theme.color.secondary : undefined,
+      if (padding === 'small' && size === 'small') {
+        return '0 7px';
+      }
+      if (padding === 'small' && size === 'medium') {
+        return '0 9px';
+      }
+      if (size === 'small') {
+        return '0 10px';
+      }
+      if (size === 'medium') {
+        return '0 12px';
+      }
+      return 0;
+    })(),
+    height: size === 'small' ? '28px' : '32px',
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    transitionProperty: 'background, box-shadow',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease-out',
+    verticalAlign: 'top',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    opacity: disabled && !readOnly ? 0.5 : 1,
+    margin: 0,
+    fontSize: `${theme.typography.size.s1}px`,
+    fontWeight: theme.typography.weight.bold,
+    lineHeight: '1',
     background: (() => {
-      let bgColor = theme.color.secondary;
-
       if (variant === 'solid') {
-        bgColor = theme.color.secondary;
+        return theme.color.secondary;
       }
 
       if (variant === 'outline') {
-        bgColor = theme.button.background;
+        return theme.button.background;
       }
 
-      if (variant === 'ghost') {
-        return transparentize(0.86, theme.color.secondary);
+      if (variant === 'ghost' && active) {
+        return theme.background.hoverable;
       }
-      return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+      return 'transparent';
     })(),
-  },
+    ...(variant === 'ghost'
+      ? {
+          // This is a hack to apply bar styles to the button as soon as it is part of a bar
+          // It is a temporary solution until we have implemented Theming 2.0.
+          '.sb-bar &': {
+            background: (() => {
+              if (active) {
+                return transparentize(0.9, theme.barTextColor);
+              }
+              return 'transparent';
+            })(),
+            color: (() => {
+              if (active) {
+                return theme.barSelectedColor;
+              }
+              return theme.barTextColor;
+            })(),
+            ...(!readOnly && {
+              '&:hover': {
+                color: theme.barHoverColor,
+                background: transparentize(0.86, theme.barHoverColor),
+              },
 
-  '&:active': {
-    color: variant === 'ghost' ? theme.color.secondary : undefined,
-    background: (() => {
-      let bgColor = theme.color.secondary;
+              '&:active': {
+                color: theme.barSelectedColor,
+                background: transparentize(0.9, theme.barSelectedColor),
+              },
 
+              '&:focus': {
+                boxShadow: `${rgba(theme.barHoverColor, 1)} 0 0 0 1px inset`,
+                outline: 'none',
+              },
+            }),
+          },
+        }
+      : {}),
+    color: (() => {
       if (variant === 'solid') {
-        bgColor = theme.color.secondary;
+        return theme.color.lightest;
       }
 
       if (variant === 'outline') {
-        bgColor = theme.button.background;
+        return theme.input.color;
+      }
+
+      if (variant === 'ghost' && active) {
+        return theme.color.secondary;
       }
 
       if (variant === 'ghost') {
-        return theme.background.hoverable;
+        return theme.color.mediumdark;
       }
-      return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+      return theme.input.color;
     })(),
-  },
-
-  '&:focus': {
-    boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
-    outline: 'none',
-  },
-
-  '> svg': {
-    animation:
-      animating && animation !== 'none' ? `${theme.animation[animation]} 1000ms ease-out` : '',
-  },
-}));
+    boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
+    borderRadius: theme.input.borderRadius,
+    // Making sure that the button never shrinks below its minimum size
+    flexShrink: 0,
+
+    ...(!readOnly && {
+      '&:hover': {
+        color: variant === 'ghost' ? theme.color.secondary : undefined,
+        background: (() => {
+          let bgColor = theme.color.secondary;
+
+          if (variant === 'solid') {
+            bgColor = theme.color.secondary;
+          }
+
+          if (variant === 'outline') {
+            bgColor = theme.button.background;
+          }
+
+          if (variant === 'ghost') {
+            return transparentize(0.86, theme.color.secondary);
+          }
+          return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+        })(),
+      },
+
+      '&:active': {
+        color: variant === 'ghost' ? theme.color.secondary : undefined,
+        background: (() => {
+          let bgColor = theme.color.secondary;
+
+          if (variant === 'solid') {
+            bgColor = theme.color.secondary;
+          }
+
+          if (variant === 'outline') {
+            bgColor = theme.button.background;
+          }
+
+          if (variant === 'ghost') {
+            return theme.background.hoverable;
+          }
+          return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+        })(),
+      },
+
+      '&:focus': {
+        boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
+        outline: 'none',
+      },
+    }),
+
+    '> svg': {
+      animation:
+        animating && animation !== 'none' ? `${theme.animation[animation]} 1000ms ease-out` : '',
+    },
+  })
+);