diff --git a/packages/example/src/GoogleFontsPicker/index.tsx b/packages/example/src/GoogleFontsPicker/index.tsx new file mode 100644 index 00000000000..2e8488de9cc --- /dev/null +++ b/packages/example/src/GoogleFontsPicker/index.tsx @@ -0,0 +1,26 @@ +import {zGoogleFont} from '@remotion/zod-types'; +import React from 'react'; +import {AbsoluteFill} from 'remotion'; +import {z} from 'zod'; + +export const googleFontsPickerSchema = z.object({ + font: zGoogleFont().optional(), +}); + +const GoogleFontsPicker: React.FC> = ({ + font, +}) => { + return ( + +

+ Text +

+ + ); +}; + +export default GoogleFontsPicker; diff --git a/packages/example/src/Root.d.tsx b/packages/example/src/Root.d.tsx new file mode 100644 index 00000000000..518b6937660 --- /dev/null +++ b/packages/example/src/Root.d.tsx @@ -0,0 +1,4 @@ +declare module '*.module.scss' { + const value: Record; + export default value; +} diff --git a/packages/example/src/Root.tsx b/packages/example/src/Root.tsx index d1efc87e5fc..69ad6d8a9b2 100644 --- a/packages/example/src/Root.tsx +++ b/packages/example/src/Root.tsx @@ -108,7 +108,7 @@ if (alias !== 'alias') { const INCLUDE_COMP_BREAKING_GET_COMPOSITIONS = false; -// @ts-expect-error no types +import GoogleFontsPicker, {googleFontsPickerSchema} from './GoogleFontsPicker'; import styles from './styles.module.scss'; class Vector2 { @@ -1448,6 +1448,16 @@ export const Index: React.FC = () => { width={1024} /> + ); }; diff --git a/packages/zod-types/package.json b/packages/zod-types/package.json index 41858acb623..d949ca7d006 100644 --- a/packages/zod-types/package.json +++ b/packages/zod-types/package.json @@ -21,7 +21,8 @@ "url": "https://github.com/remotion-dev/remotion/issues" }, "dependencies": { - "remotion": "workspace:*" + "remotion": "workspace:*", + "@remotion/google-fonts": "workspace:*" }, "peerDependencies": { "zod": "3.22.3" diff --git a/packages/zod-types/src/index.ts b/packages/zod-types/src/index.ts index 64d37609352..6a6a771d99c 100644 --- a/packages/zod-types/src/index.ts +++ b/packages/zod-types/src/index.ts @@ -2,6 +2,7 @@ import {parseColor, REMOTION_COLOR_BRAND} from './z-color.js'; import {REMOTION_TEXTAREA_BRAND} from './z-textarea'; export {zColor} from './z-color.js'; +export {zGoogleFont} from './z-google-font.js'; export {zTextarea} from './z-textarea.js'; export const ZodZypesInternals = { diff --git a/packages/zod-types/src/z-google-font.ts b/packages/zod-types/src/z-google-font.ts new file mode 100644 index 00000000000..0196311d49e --- /dev/null +++ b/packages/zod-types/src/z-google-font.ts @@ -0,0 +1,9 @@ +import {getAvailableFonts} from '@remotion/google-fonts'; +import {z} from 'zod'; + +const fonts = getAvailableFonts(); +const fontImportNames = fonts.map(({importName}) => importName); + +// z.enum requires const arrays for compile time +// below is a trick to set default to Roboto and add other fonts dynamically +export const zGoogleFont = () => z.enum(['Roboto', ...fontImportNames]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1c82af076f5..9b9f916259e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1699,6 +1699,9 @@ importers: packages/zod-types: dependencies: + '@remotion/google-fonts': + specifier: workspace:* + version: link:../google-fonts remotion: specifier: workspace:* version: link:../core @@ -3183,7 +3186,6 @@ packages: dependencies: '@babel/highlight': 7.24.2 picocolors: 1.0.1 - dev: false /@babel/code-frame@7.24.7: resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==} @@ -3483,7 +3485,7 @@ packages: '@babel/helper-compilation-targets': 7.19.1(@babel/core@7.15.5) '@babel/helper-module-imports': 7.18.6 '@babel/helper-plugin-utils': 7.19.0 - '@babel/traverse': 7.19.1(supports-color@5.5.0) + '@babel/traverse': 7.24.8 debug: 4.3.6(supports-color@5.5.0) lodash.debounce: 4.0.8 resolve: 1.22.2 @@ -3535,7 +3537,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/helper-get-function-arity': 7.15.4 - '@babel/template': 7.18.10 + '@babel/template': 7.24.7 '@babel/types': 7.24.0 dev: false @@ -3757,7 +3759,7 @@ packages: dependencies: '@babel/helper-member-expression-to-functions': 7.15.4 '@babel/helper-optimise-call-expression': 7.15.4 - '@babel/traverse': 7.19.1(supports-color@5.5.0) + '@babel/traverse': 7.24.8 '@babel/types': 7.24.0 transitivePeerDependencies: - supports-color @@ -3891,9 +3893,9 @@ packages: resolution: {integrity: sha512-Y2o+H/hRV5W8QhIfTpRIBwl57y8PrZt6JM3V8FOo5qarjshHItyH5lXlpMfBfmBefOqSCpKZs/6Dxqp0E/U+uw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-function-name': 7.19.0 - '@babel/template': 7.18.10 - '@babel/traverse': 7.19.1(supports-color@5.5.0) + '@babel/helper-function-name': 7.24.7 + '@babel/template': 7.24.7 + '@babel/traverse': 7.24.8 '@babel/types': 7.24.0 transitivePeerDependencies: - supports-color @@ -3968,7 +3970,6 @@ packages: chalk: 2.4.2 js-tokens: 4.0.0 picocolors: 1.0.1 - dev: false /@babel/highlight@7.24.7: resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==} @@ -6096,7 +6097,7 @@ packages: resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.24.7 + '@babel/code-frame': 7.24.2 '@babel/parser': 7.24.1 '@babel/types': 7.24.0 @@ -6113,7 +6114,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.18.6 - '@babel/generator': 7.19.0 + '@babel/generator': 7.24.10 '@babel/helper-function-name': 7.15.4 '@babel/helper-hoist-variables': 7.15.4 '@babel/helper-split-export-declaration': 7.15.4 @@ -10735,7 +10736,7 @@ packages: /@ts-morph/common@0.11.1: resolution: {integrity: sha512-7hWZS0NRpEsNV8vWJzg7FEz6V8MaLNeJOmwmghqUXTpzk16V1LLZhdo+4QvE/+zv4cVci0OviuJFnqhEfoV3+g==} dependencies: - fast-glob: 3.3.2 + fast-glob: 3.2.12 minimatch: 3.1.2 mkdirp: 1.0.4 path-browserify: 1.0.1 @@ -11445,7 +11446,7 @@ packages: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) '@typescript-eslint/visitor-keys': 6.21.0 - debug: 4.3.6(supports-color@5.5.0) + debug: 4.3.4 eslint: 8.56.0 typescript: 5.3.3 transitivePeerDependencies: @@ -13686,7 +13687,7 @@ packages: peerDependencies: webpack: ^5.1.0 dependencies: - fast-glob: 3.3.2 + fast-glob: 3.2.12 glob-parent: 6.0.2 globby: 13.1.2 normalize-path: 3.0.0 @@ -15690,7 +15691,6 @@ packages: glob-parent: 5.1.2 merge2: 1.4.1 micromatch: 4.0.5 - dev: false /fast-glob@3.3.2: resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} @@ -15982,7 +15982,7 @@ packages: vue-template-compiler: optional: true dependencies: - '@babel/code-frame': 7.24.7 + '@babel/code-frame': 7.24.2 '@types/json-schema': 7.0.13 chalk: 4.1.2 chokidar: 3.5.3 @@ -16287,6 +16287,7 @@ packages: /glob@7.1.6: resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 @@ -16354,7 +16355,7 @@ packages: dependencies: array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.3.2 + fast-glob: 3.2.12 ignore: 5.2.4 merge2: 1.4.1 slash: 3.0.0 @@ -16366,7 +16367,7 @@ packages: dependencies: array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.3.2 + fast-glob: 3.2.12 ignore: 5.2.4 merge2: 1.4.1 slash: 3.0.0 @@ -16376,7 +16377,7 @@ packages: engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dependencies: dir-glob: 3.0.1 - fast-glob: 3.3.2 + fast-glob: 3.2.12 ignore: 5.2.4 merge2: 1.4.1 slash: 4.0.0 @@ -17056,7 +17057,7 @@ packages: dependencies: '@tootallnate/once': 2.0.0 agent-base: 6.0.2 - debug: 4.3.4 + debug: 4.3.6(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -17110,7 +17111,7 @@ packages: engines: {node: '>= 6'} dependencies: agent-base: 6.0.2 - debug: 4.3.4 + debug: 4.3.6(supports-color@5.5.0) transitivePeerDependencies: - supports-color @@ -17374,13 +17375,6 @@ packages: dependencies: hasown: 2.0.2 - /is-core-module@2.15.1: - resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==} - engines: {node: '>= 0.4'} - dependencies: - hasown: 2.0.2 - dev: true - /is-data-descriptor@0.1.4: resolution: {integrity: sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==} engines: {node: '>=0.10.0'} @@ -22652,15 +22646,6 @@ packages: path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - /resolve@1.22.8: - resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} - hasBin: true - dependencies: - is-core-module: 2.15.1 - path-parse: 1.0.7 - supports-preserve-symlinks-flag: 1.0.0 - dev: true - /resolve@2.0.0-next.5: resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==} hasBin: true @@ -25289,8 +25274,8 @@ packages: optional: true dependencies: esbuild: 0.15.18 - postcss: 8.4.45 - resolve: 1.22.8 + postcss: 8.4.39 + resolve: 1.22.2 rollup: 2.79.1 optionalDependencies: fsevents: 2.3.3