Skip to content

Commit a705d4d

Browse files
Gabry848Gabry848
committed
feat: Add Welcome Carousel with illustrations and navigation
- Implemented MyTasklyLogo component for branding. - Created AIChatIllustration, CalendarIllustration, and TaskManagementIllustration components for the carousel. - Developed CarouselSlide and DotsIndicator components for carousel functionality. - Added WelcomeCarouselScreen to manage carousel display and navigation. - Integrated AsyncStorage to track if the user has completed the welcome carousel. - Updated navigation to include WelcomeCarousel as a route. - Added translations for welcome carousel slides in English and Italian. - Enhanced styling for various components to improve UI consistency.
1 parent 9343ae0 commit a705d4d

21 files changed

Lines changed: 888 additions & 128 deletions

‎.claude/settings.local.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@
3939
"Bash(npm run docs:generate:*)",
4040
"Bash(powershell -Command \"Get-ChildItem -Path . -Recurse | Select-Object -ExpandProperty FullName | Sort-Object\")",
4141
"Bash(git log:*)",
42-
"Bash(grep:*)"
42+
"Bash(grep:*)",
43+
"Bash(powershell -Command \"Get-Content ''e:\\\\MyTaskly\\\\MyTaskly-app\\\\src\\\\locales\\\\en.json'' | Select-Object -Last 20\")",
44+
"Bash(powershell -Command \"Get-Content ''e:\\\\MyTaskly\\\\MyTaskly-app\\\\src\\\\locales\\\\it.json'' | Select-Object -Last 20\")"
4345
],
4446
"deny": [],
4547
"defaultMode": "acceptEdits"

‎reset-welcome.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Script per resettare il Welcome Carousel
3+
* Esegui: node reset-welcome.js
4+
*
5+
* OPPURE usa direttamente nell'app React Native DevTools:
6+
* AsyncStorage.removeItem('@mytaskly:welcome_carousel_completed')
7+
*/
8+
9+
console.log('📝 Per resettare il Welcome Carousel:');
10+
console.log('');
11+
console.log('1. Apri l\'app in Expo');
12+
console.log('2. Shake il dispositivo (o Cmd+D su iOS, Cmd+M su Android)');
13+
console.log('3. Apri "Debug Remote JS"');
14+
console.log('4. Nella console del browser, esegui:');
15+
console.log('');
16+
console.log(' AsyncStorage.removeItem(\'@mytaskly:welcome_carousel_completed\').then(() => {');
17+
console.log(' console.log(\'✅ Welcome carousel resetted! Riavvia l\'app.\');');
18+
console.log(' });');
19+
console.log('');
20+
console.log('5. Chiudi e riapri l\'app per vedere il carousel');
21+
console.log('');
22+
console.log('OPPURE:');
23+
console.log('');
24+
console.log('Disinstalla e reinstalla l\'app per vedere il flusso first-time completo.');

‎src/components/Branding/MyTasklyLogo.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import Svg, { Rect, Path } from 'react-native-svg';
3+
4+
interface MyTasklyLogoProps {
5+
width?: number;
6+
height?: number;
7+
darkMode?: boolean;
8+
}
9+
10+
export const MyTasklyLogo: React.FC<MyTasklyLogoProps> = ({
11+
width = 120,
12+
height = 120,
13+
darkMode = false
14+
}) => {
15+
const fillColor = darkMode ? '#FFFFFF' : '#000000';
16+
const strokeColor = darkMode ? '#000000' : '#FFFFFF';
17+
18+
return (
19+
<Svg width={width} height={height} viewBox="0 0 120 120">
20+
<Rect x={10} y={10} width={100} height={100} rx={24} fill={fillColor} />
21+
<Path
22+
d="M35,60 L50,75 L85,40"
23+
stroke={strokeColor}
24+
strokeWidth={8}
25+
strokeLinecap="round"
26+
strokeLinejoin="round"
27+
fill="none"
28+
/>
29+
</Svg>
30+
);
31+
};

‎src/components/Branding/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { MyTasklyLogo } from './MyTasklyLogo';

‎src/components/Illustrations/AIChatIllustration.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import Svg, { Circle, Rect, Path, G } from 'react-native-svg';
3+
import { View, StyleSheet } from 'react-native';
4+
5+
export const AIChatIllustration: React.FC = () => {
6+
return (
7+
<View style={styles.container}>
8+
<Svg width="300" height="300" viewBox="0 0 300 300">
9+
{/* AI Chat Bubble (Black) - Left */}
10+
<G>
11+
<Rect
12+
x={20}
13+
y={80}
14+
width={180}
15+
height={80}
16+
rx={20}
17+
fill="#000000"
18+
/>
19+
<Path
20+
d="M 40 160 L 30 175 L 55 160 Z"
21+
fill="#000000"
22+
/>
23+
{/* White text lines */}
24+
<Rect x={40} y={100} width={140} height={8} rx={4} fill="#FFFFFF" opacity={0.9} />
25+
<Rect x={40} y={120} width={100} height={8} rx={4} fill="#FFFFFF" opacity={0.7} />
26+
</G>
27+
28+
{/* User Chat Bubble (White with border) - Right */}
29+
<G>
30+
<Rect
31+
x={100}
32+
y={180}
33+
width={180}
34+
height={60}
35+
rx={20}
36+
fill="#FFFFFF"
37+
stroke="#E1E5E9"
38+
strokeWidth={2}
39+
/>
40+
<Path
41+
d="M 260 240 L 270 255 L 245 240 Z"
42+
fill="#FFFFFF"
43+
stroke="#E1E5E9"
44+
strokeWidth={2}
45+
/>
46+
{/* Black text lines */}
47+
<Rect x={120} y={200} width={120} height={6} rx={3} fill="#000000" opacity={0.8} />
48+
<Rect x={120} y={215} width={80} height={6} rx={3} fill="#000000" opacity={0.6} />
49+
</G>
50+
51+
{/* AI Sparkle Icon */}
52+
<Circle cx={250} cy={60} r={30} fill="#007AFF" opacity={0.2} />
53+
<Path
54+
d="M 250 35 L 253 48 L 265 50 L 253 52 L 250 65 L 247 52 L 235 50 L 247 48 Z"
55+
fill="#007AFF"
56+
/>
57+
58+
{/* Microphone Icon (bottom right hint) */}
59+
<Circle cx={270} cy={270} r={15} fill="#F8F9FA" />
60+
<Rect x={265} y={260} width={10} height={15} rx={5} fill="#666666" />
61+
<Rect x={263} y={275} width={14} height={3} rx={1.5} fill="#666666" />
62+
</Svg>
63+
</View>
64+
);
65+
};
66+
67+
const styles = StyleSheet.create({
68+
container: {
69+
alignItems: 'center',
70+
justifyContent: 'center',
71+
},
72+
});

‎src/components/Illustrations/CalendarIllustration.tsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import React from 'react';
2+
import Svg, { Rect, Circle, Text as SvgText, G, Path } from 'react-native-svg';
3+
import { View, StyleSheet } from 'react-native';
4+
5+
export const CalendarIllustration: React.FC = () => {
6+
return (
7+
<View style={styles.container}>
8+
<Svg width="300" height="300" viewBox="0 0 300 300">
9+
{/* Calendar Container */}
10+
<Rect
11+
x={40}
12+
y={60}
13+
width={220}
14+
height={200}
15+
rx={16}
16+
fill="#FFFFFF"
17+
stroke="#E1E5E9"
18+
strokeWidth={2}
19+
/>
20+
21+
{/* Calendar Header */}
22+
<Rect
23+
x={40}
24+
y={60}
25+
width={220}
26+
height={45}
27+
rx={16}
28+
fill="#F8F9FA"
29+
/>
30+
<Rect
31+
x={40}
32+
y={85}
33+
width={220}
34+
height={20}
35+
fill="#F8F9FA"
36+
/>
37+
38+
{/* Month Title */}
39+
<Rect x={60} y={73} width={80} height={12} rx={6} fill="#000000" opacity={0.8} />
40+
41+
{/* Day Labels (Mon-Sun) */}
42+
{[0, 1, 2, 3, 4, 5, 6].map((day) => (
43+
<Rect
44+
key={`day-${day}`}
45+
x={52 + day * 30}
46+
y={115}
47+
width={18}
48+
height={6}
49+
rx={3}
50+
fill="#666666"
51+
opacity={0.5}
52+
/>
53+
))}
54+
55+
{/* Calendar Grid - Days */}
56+
{[0, 1, 2, 3, 4].map((row) =>
57+
[0, 1, 2, 3, 4, 5, 6].map((col) => {
58+
const hasEvent = (row === 1 && col === 2) || (row === 2 && col === 4) || (row === 3 && col === 1);
59+
const isToday = row === 2 && col === 2;
60+
61+
return (
62+
<G key={`day-${row}-${col}`}>
63+
{isToday && (
64+
<Circle
65+
cx={60 + col * 30}
66+
cy={143 + row * 28}
67+
r={12}
68+
stroke="#007AFF"
69+
strokeWidth={2}
70+
fill="none"
71+
/>
72+
)}
73+
<Rect
74+
x={54 + col * 30}
75+
y={137 + row * 28}
76+
width={12}
77+
height={12}
78+
rx={2}
79+
fill={isToday ? "#007AFF" : "#000000"}
80+
opacity={isToday ? 0.9 : 0.3}
81+
/>
82+
{hasEvent && (
83+
<Circle
84+
cx={60 + col * 30}
85+
cy={155 + row * 28}
86+
r={3}
87+
fill="#4CAF50"
88+
/>
89+
)}
90+
</G>
91+
);
92+
})
93+
)}
94+
95+
{/* Google Calendar Badge */}
96+
<G>
97+
<Circle cx={240} cy={45} r={20} fill="#FFFFFF" stroke="#E1E5E9" strokeWidth={2} />
98+
<Rect x={232} y={37} width={16} height={16} rx={3} fill="#4285F4" />
99+
<Rect x={234} y={39} width={12} height={4} rx={1} fill="#FFFFFF" />
100+
<Rect x={234} y={45} width={7} height={2} rx={1} fill="#FFFFFF" opacity={0.7} />
101+
<Rect x={234} y={49} width={9} height={2} rx={1} fill="#FFFFFF" opacity={0.7} />
102+
</G>
103+
104+
{/* "Coming Soon" badges */}
105+
<G opacity={0.5}>
106+
{/* Outlook badge */}
107+
<Rect x={185} y={270} width={50} height={20} rx={10} fill="#F8F9FA" stroke="#E1E5E9" strokeWidth={1} />
108+
<Rect x={192} y={276} width={36} height={4} rx={2} fill="#666666" opacity={0.5} />
109+
<Rect x={192} y={282} width={20} height={3} rx={1.5} fill="#666666" opacity={0.3} />
110+
111+
{/* Apple Calendar badge */}
112+
<Rect x={120} y={270} width={55} height={20} rx={10} fill="#F8F9FA" stroke="#E1E5E9" strokeWidth={1} />
113+
<Rect x={127} y={276} width={41} height={4} rx={2} fill="#666666" opacity={0.5} />
114+
<Rect x={127} y={282} width={25} height={3} rx={1.5} fill="#666666" opacity={0.3} />
115+
</G>
116+
</Svg>
117+
</View>
118+
);
119+
};
120+
121+
const styles = StyleSheet.create({
122+
container: {
123+
alignItems: 'center',
124+
justifyContent: 'center',
125+
},
126+
});

‎src/components/Illustrations/TaskManagementIllustration.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
import Svg, { Rect, Circle, Path, G } from 'react-native-svg';
3+
import { View, StyleSheet } from 'react-native';
4+
5+
export const TaskManagementIllustration: React.FC = () => {
6+
return (
7+
<View style={styles.container}>
8+
<Svg width="300" height="300" viewBox="0 0 300 300">
9+
{/* Category Card 1 - Purple (Top Left) */}
10+
<G>
11+
<Rect
12+
x={30}
13+
y={50}
14+
width={120}
15+
height={100}
16+
rx={16}
17+
fill="#8B5CF6"
18+
opacity={0.9}
19+
/>
20+
<Rect x={45} y={65} width={60} height={8} rx={4} fill="#FFFFFF" opacity={0.9} />
21+
<Circle cx={52} cy={90} r={6} fill="#FFFFFF" opacity={0.7} />
22+
<Rect x={65} y={86} width={50} height={4} rx={2} fill="#FFFFFF" opacity={0.7} />
23+
<Circle cx={52} cy={105} r={6} fill="#FFFFFF" opacity={0.7} />
24+
<Rect x={65} y={101} width={40} height={4} rx={2} fill="#FFFFFF" opacity={0.7} />
25+
</G>
26+
27+
{/* Category Card 2 - Orange (Top Right) */}
28+
<G>
29+
<Rect
30+
x={165}
31+
y={50}
32+
width={120}
33+
height={100}
34+
rx={16}
35+
fill="#FB923C"
36+
opacity={0.9}
37+
/>
38+
<Rect x={180} y={65} width={70} height={8} rx={4} fill="#FFFFFF" opacity={0.9} />
39+
<Circle cx={187} cy={90} r={6} fill="#FFFFFF" opacity={0.7} />
40+
<Rect x={200} y={86} width={60} height={4} rx={2} fill="#FFFFFF" opacity={0.7} />
41+
</G>
42+
43+
{/* Category Card 3 - Green (Bottom Left) */}
44+
<G>
45+
<Rect
46+
x={30}
47+
y={165}
48+
width={120}
49+
height={100}
50+
rx={16}
51+
fill="#10B981"
52+
opacity={0.9}
53+
/>
54+
<Rect x={45} y={180} width={50} height={8} rx={4} fill="#FFFFFF" opacity={0.9} />
55+
<Circle cx={52} cy={205} r={6} fill="#FFFFFF" opacity={0.7} />
56+
<Rect x={65} y={201} width={55} height={4} rx={2} fill="#FFFFFF" opacity={0.7} />
57+
<Circle cx={52} cy={220} r={6} fill="#FFFFFF" opacity={0.7} />
58+
<Rect x={65} y={216} width={45} height={4} rx={2} fill="#FFFFFF" opacity={0.7} />
59+
</G>
60+
61+
{/* Category Card 4 - Blue (Bottom Right) */}
62+
<G>
63+
<Rect
64+
x={165}
65+
y={165}
66+
width={120}
67+
height={100}
68+
rx={16}
69+
fill="#007AFF"
70+
opacity={0.9}
71+
/>
72+
<Rect x={180} y={180} width={65} height={8} rx={4} fill="#FFFFFF" opacity={0.9} />
73+
<Circle cx={187} cy={205} r={6} fill="#FFFFFF" opacity={0.7} />
74+
<Rect x={200} y={201} width={50} height={4} rx={2} fill="#FFFFFF" opacity={0.7} />
75+
</G>
76+
77+
{/* Floating Checkmarks */}
78+
<Circle cx={150} cy={35} r={18} fill="#4CAF50" opacity={0.3} />
79+
<Path
80+
d="M 142 35 L 148 41 L 158 31"
81+
stroke="#4CAF50"
82+
strokeWidth={3}
83+
strokeLinecap="round"
84+
strokeLinejoin="round"
85+
fill="none"
86+
/>
87+
88+
{/* Sync Icon (top right) */}
89+
<Circle cx={280} cy={30} r={15} fill="#F8F9FA" />
90+
<Path
91+
d="M 275 25 Q 280 20 285 25 L 285 30 M 285 35 Q 280 40 275 35 L 275 30"
92+
stroke="#666666"
93+
strokeWidth={2}
94+
strokeLinecap="round"
95+
fill="none"
96+
/>
97+
</Svg>
98+
</View>
99+
);
100+
};
101+
102+
const styles = StyleSheet.create({
103+
container: {
104+
alignItems: 'center',
105+
justifyContent: 'center',
106+
},
107+
});

‎src/components/Illustrations/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { AIChatIllustration } from './AIChatIllustration';
2+
export { TaskManagementIllustration } from './TaskManagementIllustration';
3+
export { CalendarIllustration } from './CalendarIllustration';

0 commit comments

Comments
 (0)