feat(showcase): adding zod type for showcases with default values (#978)

lyonjs · May 3, 2024 · 266a4be · 266a4be
1 parent 93737b9
commit 266a4be
Show file tree

Hide file tree

Showing 19 changed files with 77 additions and 32 deletions.
diff --git a/remotion/compositions/showcases/alpescraft/AlpesCraft.composition.tsx b/remotion/compositions/showcases/alpescraft/AlpesCraft.composition.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Composition, Folder} from 'remotion';
 
 import {defaultTalkValues} from '../../../../src/data/defaultValues';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {AlpesCraft} from './AlpesCraft';
 
@@ -15,6 +16,7 @@ export const AlpesCraftComposition: React.FC = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 		</Folder>

diff --git a/remotion/compositions/showcases/alpescraft/AlpesCraft.tsx b/remotion/compositions/showcases/alpescraft/AlpesCraft.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import {AbsoluteFill, Sequence} from 'remotion';
+import {z} from 'zod';
 
 import {Speaker} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Details} from './Details';
 import {Logo} from './Logo';
@@ -18,13 +20,13 @@ export type AlpesCraftProps = {
 	speakers?: Speaker[];
 };
 
-export const AlpesCraft: React.FC<AlpesCraftProps> = ({
+export const AlpesCraft = ({
 	title,
 	date,
 	time,
 	location,
 	speakers,
-}) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	return (
 		<AbsoluteFill
 			style={{

diff --git a/remotion/compositions/showcases/devfestLille/DevfestLille.composition.tsx b/remotion/compositions/showcases/devfestLille/DevfestLille.composition.tsx
@@ -1,8 +1,10 @@
+import React from 'react';
 import {Composition, Folder} from 'remotion';
 
-import {DevfestLille} from './DevfestLille';
 import {defaultTalkValues} from '../../../../src/data/defaultValues';
-import React from 'react';
+import {ShowcaseSchema} from '../showcases.types';
+
+import {DevfestLille} from './DevfestLille';
 
 export const DevfestLilleComposition: React.FC = () => {
 	return (
@@ -14,6 +16,7 @@ export const DevfestLilleComposition: React.FC = () => {
 				fps={60}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 		</Folder>

diff --git a/remotion/compositions/showcases/devfestLille/DevfestLille.tsx b/remotion/compositions/showcases/devfestLille/DevfestLille.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import {loadFont} from '@remotion/google-fonts/CrimsonText';
 import {AbsoluteFill, Sequence} from 'remotion';
+import {z} from 'zod';
 
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
+import {Background} from './Background';
 import {Details} from './Details';
+import {Logo} from './Logo';
 import {Speakers} from './Speakers';
 import {TalkTitle} from './TalkTitle';
-import {Background} from './Background';
-import {Logo} from './Logo';
 
 const {fontFamily} = loadFont();
 export const DevfestLille = ({
@@ -17,7 +18,7 @@ export const DevfestLille = ({
 	date,
 	time,
 	location,
-}: DefaultProps) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	return (
 		<AbsoluteFill
 			style={{

diff --git a/remotion/compositions/showcases/devfestNantes/DevfestNantes.composition.tsx b/remotion/compositions/showcases/devfestNantes/DevfestNantes.composition.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Composition, Folder} from 'remotion';
 
 import {defaultTalkValues} from '../../../../src/data/defaultValues';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {DevfestNantes} from './DevfestNantes';
 import {DevfestNantesLoop} from './DevfestNantesLoop';
@@ -18,6 +19,7 @@ export const DevfestNantesComposition = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 			<Composition
@@ -27,6 +29,7 @@ export const DevfestNantesComposition = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 			<Composition
@@ -36,6 +39,7 @@ export const DevfestNantesComposition = () => {
 				fps={30}
 				width={720}
 				height={1280}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 			<Composition

diff --git a/remotion/compositions/showcases/devfestNantes/DevfestNantes.tsx b/remotion/compositions/showcases/devfestNantes/DevfestNantes.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import {loadFont} from '@remotion/google-fonts/CrimsonText';
 import {AbsoluteFill, Sequence, staticFile} from 'remotion';
+import {z} from 'zod';
 
 import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Android} from './Android';
 import {Details} from './Details';
@@ -19,7 +20,7 @@ export const DevfestNantes = ({
 	date,
 	time,
 	location,
-}: DefaultProps) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	return (
 		<AbsoluteFill
 			style={{

diff --git a/remotion/compositions/showcases/devfestNantes/DevfestNantesLoop.tsx b/remotion/compositions/showcases/devfestNantes/DevfestNantesLoop.tsx
@@ -8,9 +8,10 @@ import {
 	staticFile,
 	useCurrentFrame,
 } from 'remotion';
+import {z} from 'zod';
 
 import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Android} from './Android';
 import {Details} from './Details';
@@ -26,7 +27,7 @@ export const DevfestNantesLoop = ({
 	date,
 	time,
 	location,
-}: DefaultProps) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	const frame = useCurrentFrame();
 
 	const SlideDown = interpolate(frame, [300, 330], [0, 650], {

diff --git a/remotion/compositions/showcases/devfestNantes/DevfestNantesLoopTotem.tsx b/remotion/compositions/showcases/devfestNantes/DevfestNantesLoopTotem.tsx
@@ -8,9 +8,10 @@ import {
 	staticFile,
 	useCurrentFrame,
 } from 'remotion';
+import {z} from 'zod';
 
 import {BackgroundFiller} from '../../../design/atoms/BackgroundFiller';
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Android} from './Android';
 import {Details} from './Details';
@@ -27,7 +28,7 @@ export const DevfestNantesLoopTotem = ({
 	date,
 	time,
 	location,
-}: DefaultProps) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	const frame = useCurrentFrame();
 
 	const SlideDown = interpolate(frame, [300, 330], [0, 1300], {

diff --git a/remotion/compositions/showcases/devoxx/Devoxx.composition.tsx b/remotion/compositions/showcases/devoxx/Devoxx.composition.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Composition, Folder} from 'remotion';
 
 import {defaultTalkValues} from '../../../../src/data/defaultValues';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Devoxx2023} from './Devoxx2023';
 import {Devoxx2024} from './Devoxx2024';
@@ -16,6 +17,7 @@ export const DevoxxComposition: React.FC = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 			<Composition
@@ -25,6 +27,7 @@ export const DevoxxComposition: React.FC = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 		</Folder>

diff --git a/remotion/compositions/showcases/devoxx/Devoxx2023.tsx b/remotion/compositions/showcases/devoxx/Devoxx2023.tsx
@@ -8,22 +8,23 @@ import {
 	useCurrentFrame,
 	useVideoConfig,
 } from 'remotion';
+import {z} from 'zod';
 
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import Balloons from './Balloons';
 import {Details} from './Details';
 import {Logo} from './Logo';
 import {Speakers} from './Speakers';
 import {TalkTitle} from './TalkTitle';
 
-export const Devoxx2023: React.FC<DefaultProps> = ({
+export const Devoxx2023 = ({
 	title,
 	speakers,
 	date,
 	time,
 	location,
-}) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	const frame = useCurrentFrame();
 	const {fps} = useVideoConfig();
 	const ANIMATION_DELAY = 50;

diff --git a/remotion/compositions/showcases/devoxx/Devoxx2024.tsx b/remotion/compositions/showcases/devoxx/Devoxx2024.tsx
@@ -8,22 +8,23 @@ import {
 	useCurrentFrame,
 	useVideoConfig,
 } from 'remotion';
+import {z} from 'zod';
 
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Details} from './2024/Details';
 import {Logo} from './2024/Logo';
 import {RobotRun} from './2024/RobotRun';
 import {Speakers} from './2024/Speakers';
 import {TalkTitle} from './2024/TalkTitle';
 
-export const Devoxx2024: React.FC<DefaultProps> = ({
+export const Devoxx2024 = ({
 	title,
 	speakers,
 	date,
 	time,
 	location,
-}) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	const frame = useCurrentFrame();
 	const {fps} = useVideoConfig();
 	const ANIMATION_DELAY = 50;

diff --git a/remotion/compositions/showcases/mixit/Mixit.composition.tsx b/remotion/compositions/showcases/mixit/Mixit.composition.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Composition, Folder} from 'remotion';
 
 import {defaultTalkValues} from '../../../../src/data/defaultValues';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Mixit} from './Mixit';
 import {MixitIntro} from './MixitIntro';
@@ -18,6 +19,7 @@ export const MixitComposition: React.FC = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 			<Composition
@@ -35,6 +37,7 @@ export const MixitComposition: React.FC = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 			<Composition

diff --git a/remotion/compositions/showcases/mixit/Mixit.tsx b/remotion/compositions/showcases/mixit/Mixit.tsx
@@ -1,20 +1,21 @@
 import {AbsoluteFill} from 'remotion';
+import {z} from 'zod';
 
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Details} from './Details';
 import {Logo} from './Logo';
 import {LyonSkyline} from './LyonSkyline';
 import {Speakers} from './Speakers';
 import {TalkTitle} from './TalkTitle';
 
-export const Mixit: React.FC<DefaultProps> = ({
+export const Mixit = ({
 	title,
 	speakers,
 	date,
 	time,
 	location,
-}) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	return (
 		<AbsoluteFill
 			style={{

diff --git a/remotion/compositions/showcases/mixit/MixitIntroTalk.tsx b/remotion/compositions/showcases/mixit/MixitIntroTalk.tsx
@@ -1,17 +1,18 @@
 import {AbsoluteFill} from 'remotion';
+import {z} from 'zod';
 
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Mixit} from './Mixit';
 import {MixitIntro} from './MixitIntro';
 
-export const MixitIntroTalk: React.FC<DefaultProps> = ({
+export const MixitIntroTalk = ({
 	title,
 	speakers,
 	date,
 	time,
 	location,
-}) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	return (
 		<AbsoluteFill>
 			<MixitIntro />

diff --git a/remotion/compositions/showcases/showcases.types.ts b/remotion/compositions/showcases/showcases.types.ts
@@ -0,0 +1,14 @@
+import {z} from 'zod';
+
+const SpeakerSchema = z.object({
+	name: z.string(),
+	picture: z.string(),
+});
+
+export const ShowcaseSchema = z.object({
+	title: z.string(),
+	speakers: z.array(SpeakerSchema),
+	date: z.string(),
+	time: z.string(),
+	location: z.string(),
+});
diff --git a/remotion/compositions/showcases/snowcamp/Snowcamp.composition.tsx b/remotion/compositions/showcases/snowcamp/Snowcamp.composition.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Composition, Folder} from 'remotion';
 
 import {defaultTalkValues} from '../../../../src/data/defaultValues';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Snowcamp} from './Snowcamp';
 
@@ -15,6 +16,7 @@ export const SnowcampComposition: React.FC = () => {
 				fps={30}
 				width={1280}
 				height={720}
+				schema={ShowcaseSchema}
 				defaultProps={defaultTalkValues}
 			/>
 		</Folder>

diff --git a/remotion/compositions/showcases/snowcamp/Snowcamp.tsx b/remotion/compositions/showcases/snowcamp/Snowcamp.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {AbsoluteFill, Sequence} from 'remotion';
+import {z} from 'zod';
 
-import {DefaultProps} from '../../../types/defaultProps.types';
+import {ShowcaseSchema} from '../showcases.types';
 
 import {Details} from './Details';
 import {Logo} from './Logo';
@@ -10,13 +11,13 @@ import {Speakers} from './Speakers';
 import {TalkBackground} from './TalkBackground';
 import {TalkTitle} from './TalkTitle';
 
-export const Snowcamp: React.FC<DefaultProps> = ({
+export const Snowcamp = ({
 	title,
 	speakers,
 	date,
 	time,
 	location,
-}) => {
+}: z.infer<typeof ShowcaseSchema>) => {
 	return (
 		<AbsoluteFill style={{backgroundColor: 'white', overflow: 'hidden'}}>
 			<Sequence>