From 0c113ceb3f145e445ebcec0e68171c92c81713ea Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 28 Jun 2024 17:12:44 +0200 Subject: [PATCH 1/4] Add icons for dev/test/doc to the onboarding splash screen --- .../SplashScreen/SplashScreen.stories.tsx | 6 ++ .../features/SplashScreen/SplashScreen.tsx | 74 +++++++++++++++++-- 2 files changed, 73 insertions(+), 7 deletions(-) diff --git a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx index 02fc3c3bd919..fffa7ce4d3a9 100644 --- a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx +++ b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.stories.tsx @@ -13,3 +13,9 @@ export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const Static: Story = { + args: { + duration: 0, + }, +}; diff --git a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx index a4309f34eeef..209aaf7d436b 100644 --- a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx +++ b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx @@ -1,4 +1,4 @@ -import { ArrowRightIcon } from '@storybook/icons'; +import { ArrowRightIcon, BeakerIcon, BookIcon, MarkupIcon } from '@storybook/icons'; import { styled, keyframes } from '@storybook/theming'; import React, { useCallback, useEffect, useState } from 'react'; @@ -91,7 +91,9 @@ const Content = styled.div<{ visible: boolean }>(({ visible }) => ({ transform: 'translate(-50%, -50%)', color: 'white', textAlign: 'center', - maxWidth: 400, + width: '90vw', + minWidth: 290, + maxWidth: 410, opacity: visible ? 1 : 0, transition: 'opacity 0.5s', @@ -102,6 +104,30 @@ const Content = styled.div<{ visible: boolean }>(({ visible }) => ({ }, })); +const Features = styled.div({ + display: 'flex', + marginTop: 40, + div: { + display: 'flex', + flexBasis: '33.33%', + flexDirection: 'column', + alignItems: 'center', + animation: `${slideIn} 1s backwards`, + '&:nth-child(1)': { + animationDelay: '2s', + }, + '&:nth-child(2)': { + animationDelay: '2.5s', + }, + '&:nth-child(3)': { + animationDelay: '3s', + }, + }, + svg: { + marginBottom: 10, + }, +}); + const RadialButton = styled.button({ display: 'inline-flex', position: 'relative', @@ -117,7 +143,7 @@ const RadialButton = styled.button({ background: 'rgba(255, 255, 255, 0.3)', cursor: 'pointer', transition: 'background 0.2s', - animation: `${scaleIn} 1.5s 1.5s backwards`, + animation: `${scaleIn} 1.5s 4s backwards`, '&:hover, &:focus': { background: 'rgba(255, 255, 255, 0.4)', @@ -151,10 +177,11 @@ const ProgressCircle = styled.svg<{ progress?: boolean; spinner?: boolean }>(({ interface SplashScreenProps { onDismiss: () => void; + duration?: number; } -export const SplashScreen = ({ onDismiss }: SplashScreenProps) => { - const [progress, setProgress] = useState(-30); +export const SplashScreen = ({ onDismiss, duration = 6000 }: SplashScreenProps) => { + const [progress, setProgress] = useState((-4000 * 100) / duration); // 4 seconds delay const [visible, setVisible] = useState(true); const ready = progress >= 100; @@ -165,9 +192,12 @@ export const SplashScreen = ({ onDismiss }: SplashScreenProps) => { }, [onDismiss]); useEffect(() => { - const interval = setInterval(() => setProgress((prev) => prev + 0.5), 30); + if (!duration) return; + const framelength = 1000 / 50; // 50 frames per second + const increment = 100 / (duration / framelength); // 0-100% at 20ms intervals + const interval = setInterval(() => setProgress((prev) => prev + increment), framelength); return () => clearInterval(interval); - }, []); + }, [duration]); useEffect(() => { if (ready) dismiss(); @@ -178,6 +208,36 @@ export const SplashScreen = ({ onDismiss }: SplashScreenProps) => {

Meet your new frontend workshop

+ +
+ + + + Development +
+
+ + + + Testing +
+
+ + + + Documentation +
+ From 13819cae8f5d02a12bcc96fb7586a68aee57dd01 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Sat, 29 Jun 2024 19:45:22 +0200 Subject: [PATCH 2/4] Slide up rather than down --- .../onboarding/src/features/SplashScreen/SplashScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx index 209aaf7d436b..12b8fc4b499c 100644 --- a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx +++ b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx @@ -13,7 +13,7 @@ const fadeIn = keyframes({ const slideIn = keyframes({ from: { - transform: 'translate(0, -20px)', + transform: 'translate(0, 20px)', opacity: 0, }, to: { From 64ce7d22e8a2382b0c633f13442fb98ad92c765b Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 1 Jul 2024 09:03:04 +0200 Subject: [PATCH 3/4] Remove unused imports --- .../onboarding/src/features/SplashScreen/SplashScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx index 12b8fc4b499c..ab667edda70f 100644 --- a/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx +++ b/code/addons/onboarding/src/features/SplashScreen/SplashScreen.tsx @@ -1,4 +1,4 @@ -import { ArrowRightIcon, BeakerIcon, BookIcon, MarkupIcon } from '@storybook/icons'; +import { ArrowRightIcon } from '@storybook/icons'; import { styled, keyframes } from '@storybook/theming'; import React, { useCallback, useEffect, useState } from 'react'; From e36432f348d143dbbd2be3ae2942f6fb8fea20fc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 1 Jul 2024 11:50:25 +0200 Subject: [PATCH 4/4] remove the packageManager field because we do not use corepack --- code/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/package.json b/code/package.json index f2dadf392dcc..bc630a36660e 100644 --- a/code/package.json +++ b/code/package.json @@ -293,6 +293,5 @@ "Dependency Upgrades" ] ] - }, - "packageManager": "yarn@4.3.1" + } }