🧑💻 Improve env variables type safety and management (#718)
Closes #679
This commit is contained in:
@@ -3,14 +3,14 @@ import { GiphyFetch } from '@giphy/js-fetch-api'
|
||||
import { Grid } from '@giphy/react-components'
|
||||
import { GiphyLogo } from '../logos/GiphyLogo'
|
||||
import React, { useState } from 'react'
|
||||
import { env, isEmpty } from '@typebot.io/lib'
|
||||
import { TextInput } from '../inputs'
|
||||
import { env } from '@typebot.io/env'
|
||||
|
||||
type GiphySearchFormProps = {
|
||||
onSubmit: (url: string) => void
|
||||
}
|
||||
|
||||
const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
|
||||
const giphyFetch = new GiphyFetch(env.NEXT_PUBLIC_GIPHY_API_KEY ?? '')
|
||||
|
||||
export const GiphyPicker = ({ onSubmit }: GiphySearchFormProps) => {
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
@@ -21,7 +21,7 @@ export const GiphyPicker = ({ onSubmit }: GiphySearchFormProps) => {
|
||||
const fetchGifsTrending = (offset: number) =>
|
||||
giphyFetch.trending({ offset, limit: 10 })
|
||||
|
||||
return isEmpty(env('GIPHY_API_KEY')) ? (
|
||||
return !env.NEXT_PUBLIC_GIPHY_API_KEY ? (
|
||||
<Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
|
||||
) : (
|
||||
<Stack spacing={4} pt="2">
|
||||
|
||||
@@ -14,16 +14,17 @@ import {
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react'
|
||||
import { env, isDefined, isEmpty } from '@typebot.io/lib'
|
||||
import { isDefined } from '@typebot.io/lib'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { createApi } from 'unsplash-js'
|
||||
import { Basic as UnsplashImage } from 'unsplash-js/dist/methods/photos/types'
|
||||
import { TextInput } from '../inputs'
|
||||
import { UnsplashLogo } from '../logos/UnsplashLogo'
|
||||
import { TextLink } from '../TextLink'
|
||||
import { env } from '@typebot.io/env'
|
||||
|
||||
const api = createApi({
|
||||
accessKey: env('UNSPLASH_ACCESS_KEY') ?? '',
|
||||
accessKey: env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY ?? '',
|
||||
})
|
||||
|
||||
type Props = {
|
||||
@@ -124,7 +125,7 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
|
||||
searchRandomImages()
|
||||
}, [])
|
||||
|
||||
if (isEmpty(env('UNSPLASH_ACCESS_KEY')))
|
||||
if (!env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY)
|
||||
return (
|
||||
<Text>NEXT_PUBLIC_UNSPLASH_ACCESS_KEY is missing in environment</Text>
|
||||
)
|
||||
@@ -143,9 +144,7 @@ export const UnsplashPicker = ({ imageSize, onImageSelect }: Props) => {
|
||||
/>
|
||||
<Link
|
||||
isExternal
|
||||
href={`https://unsplash.com/?utm_source=${env(
|
||||
'UNSPLASH_APP_NAME'
|
||||
)}&utm_medium=referral`}
|
||||
href={`https://unsplash.com/?utm_source=${env.NEXT_PUBLIC_UNSPLASH_APP_NAME}&utm_medium=referral`}
|
||||
>
|
||||
<UnsplashLogo width="80px" fill={unsplashLogoFillColor} />
|
||||
</Link>
|
||||
@@ -224,9 +223,7 @@ const UnsplashImage = ({ image, onClick }: UnsplashImageProps) => {
|
||||
<TextLink
|
||||
fontSize="xs"
|
||||
isExternal
|
||||
href={`https://unsplash.com/@${user.username}?utm_source=${env(
|
||||
'UNSPLASH_APP_NAME'
|
||||
)}&utm_medium=referral`}
|
||||
href={`https://unsplash.com/@${user.username}?utm_source=${env.NEXT_PUBLIC_UNSPLASH_APP_NAME}&utm_medium=referral`}
|
||||
noOfLines={1}
|
||||
color="white"
|
||||
>
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
} from '@chakra-ui/react'
|
||||
import { useState, useRef, useEffect, ReactNode } from 'react'
|
||||
import { useDebouncedCallback } from 'use-debounce'
|
||||
import { env, isDefined } from '@typebot.io/lib'
|
||||
import { isDefined } from '@typebot.io/lib'
|
||||
import { useOutsideClick } from '@/hooks/useOutsideClick'
|
||||
import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
|
||||
import { VariablesButton } from '@/features/variables/components/VariablesButton'
|
||||
@@ -21,6 +21,7 @@ import { Variable } from '@typebot.io/schemas'
|
||||
import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
|
||||
import { focusInput } from '@/helpers/focusInput'
|
||||
import { MoreInfoTooltip } from '../MoreInfoTooltip'
|
||||
import { env } from '@typebot.io/env'
|
||||
|
||||
type Props = {
|
||||
items: string[]
|
||||
@@ -57,7 +58,7 @@ export const AutocompleteInput = ({
|
||||
|
||||
const onChange = useDebouncedCallback(
|
||||
_onChange,
|
||||
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
|
||||
env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from 'react'
|
||||
import { useDebouncedCallback } from 'use-debounce'
|
||||
import { VariablesButton } from '@/features/variables/components/VariablesButton'
|
||||
import { Variable } from '@typebot.io/schemas'
|
||||
import { env } from '@typebot.io/lib'
|
||||
import { env } from '@typebot.io/env'
|
||||
import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
|
||||
import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night'
|
||||
import { githubLight } from '@uiw/codemirror-theme-github'
|
||||
@@ -53,7 +53,7 @@ export const CodeEditor = ({
|
||||
_setValue(value)
|
||||
onChange && onChange(value)
|
||||
},
|
||||
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
|
||||
env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
|
||||
)
|
||||
|
||||
const handleVariableSelected = (variable?: Pick<Variable, 'id' | 'name'>) => {
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
import { Variable, VariableString } from '@typebot.io/schemas'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useDebouncedCallback } from 'use-debounce'
|
||||
import { env } from '@typebot.io/lib'
|
||||
import { env } from '@typebot.io/env'
|
||||
import { MoreInfoTooltip } from '../MoreInfoTooltip'
|
||||
|
||||
type Value<HasVariable> = HasVariable extends true | undefined
|
||||
@@ -47,7 +47,7 @@ export const NumberInput = <HasVariable extends boolean>({
|
||||
|
||||
const onValueChangeDebounced = useDebouncedCallback(
|
||||
onValueChange,
|
||||
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
|
||||
env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
|
||||
)
|
||||
|
||||
useEffect(
|
||||
|
||||
@@ -19,7 +19,7 @@ import React, {
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useDebouncedCallback } from 'use-debounce'
|
||||
import { env } from '@typebot.io/lib'
|
||||
import { env } from '@typebot.io/env'
|
||||
import { MoreInfoTooltip } from '../MoreInfoTooltip'
|
||||
|
||||
export type TextInputProps = {
|
||||
@@ -69,7 +69,7 @@ export const TextInput = forwardRef(function TextInput(
|
||||
const onChange = useDebouncedCallback(
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||
_onChange ?? (() => {}),
|
||||
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
|
||||
env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
import { Variable } from '@typebot.io/schemas'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { useDebouncedCallback } from 'use-debounce'
|
||||
import { env } from '@typebot.io/lib'
|
||||
import { env } from '@typebot.io/env'
|
||||
import { MoreInfoTooltip } from '../MoreInfoTooltip'
|
||||
|
||||
type Props = {
|
||||
@@ -46,7 +46,7 @@ export const Textarea = ({
|
||||
)
|
||||
const onChange = useDebouncedCallback(
|
||||
_onChange,
|
||||
env('E2E_TEST') === 'true' ? 0 : debounceTimeout
|
||||
env.NEXT_PUBLIC_E2E_TEST ? 0 : debounceTimeout
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user