Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move react toast

Browse Source
This commit is contained in:
Jackson Harper
2024-08-26 13:26:32 +08:00
parent 441b22d4ab
commit 35341d2a73
22 changed files with 36 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/nav-containers/HomeContainer.tsx
View File

@ -33,7 +33,6 @@ import {
useGetSubscriptionsQuery,
} from '../../lib/networking/queries/useGetSubscriptionsQuery'
import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
import { Toaster } from 'react-hot-toast'
import useLibraryItemActions from '../../lib/hooks/useLibraryItemActions'
import { SyncLoader } from 'react-spinners'
import { useGetLibraryItems } from '../../lib/networking/library_items/useLibraryItems'
@ -423,7 +422,6 @@ export function HomeContainer(): JSX.Element {
},
}}
>
<Toaster />
<VStack
distribution="start"
css={{

258
packages/web/components/templates/OnboardingLayout.tsx
View File

@ -1,258 +0,0 @@
import React, { ReactNode } from 'react'
import { PageMetaData } from '../patterns/PageMetaData'
import { VStack, HStack, Box } from '../elements/LayoutPrimitives'
import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
import { StyledText } from '../elements/StyledText'
import { Button } from '../elements/Button'
import { useRouter } from 'next/router'
import { Toaster } from 'react-hot-toast'
const TOTAL_ONBOARDING_PAGES = 6
type OnboardingLayoutProps = {
pageNumber: number
title: string
subTitle: string
description?: string
children: ReactNode
image?: ReactNode
nextPage?: string
reduceSpace?: boolean
onNext?: () => void | Promise<void>
}
export const OnboardingLayout = ({
pageNumber,
title,
subTitle,
description,
image,
children,
nextPage,
reduceSpace,
onNext,
}: OnboardingLayoutProps) => {
const router = useRouter()
const NextButton = () => {
const handleNext = async () => {
onNext && (await onNext())
router.push(nextPage ?? `/onboarding/0${pageNumber + 1}`)
}
return (
<Button
style="ctaDarkYellow"
css={{
width: '111px',
height: '44px',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
textDecoration: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
onClick={handleNext}
>
Next
</Button>
)
}
return (
<>
<PageMetaData
path={`/onboarding/0${pageNumber}`}
title={`Onboarding - ${pageNumber}`}
/>
<Toaster />
<Box
css={{
display: 'grid',
gridTemplateColumns: '1fr',
minHeight: '100vh',
'@lgDown': {
gridTemplateRows: reduceSpace ? 0 : 'initial',
},
'@lg': {
gridTemplateColumns: '1fr 2fr',
},
}}
>
<VStack
css={{
background: '#FFFFFF',
padding: '21px 19px 0 19px',
position: 'relative',
'@lg': {
padding: '116px 32px 14px 48px',
},
}}
distribution="between"
>
<Box
css={{
backgroundColor: '#FFD234',
width: `${Math.floor(
(pageNumber * 100) / TOTAL_ONBOARDING_PAGES
)}%`,
height: '4px',
position: 'absolute',
top: '0',
left: '0',
'@lg': {
top: '$1',
},
borderRadius: '8px',
}}
/>
<Box
css={{
width: '100%',
'@sm': { textAlign: 'center' },
'@lg': { textAlign: 'left' },
}}
>
<HStack
distribution="start"
css={{
justifyContent: 'center',
'@lg': { justifyContent: 'flex-start' },
}}
alignment="center"
>
<OmnivoreNameLogo href="/login" />
<StyledText
style="logoTitle"
css={{ color: '#0A080666', paddingLeft: '9px', fontSize: 15 }}
>
Omnivore
</StyledText>
</HStack>
<Box
css={{
marginTop: '24px',
fontWeight: '700',
fontSize: 32,
'@lgDown': {
marginTop: '5px',
fontSize: 28,
},
lineHeight: '125%',
color: 'rgba(10, 8, 6, 0.8)',
}}
>
{title}
</Box>
<Box
css={{
marginTop: '24px',
fontWeight: '400',
fontSize: 16,
lineHeight: '125%',
color: 'rgba(10, 8, 6, 0.8)',
}}
>
{subTitle}
</Box>
{image && (
<Box
css={{
height: '295px',
position: 'relative',
marginTop: '24px',
display: 'none',
'@lg': { display: 'block' },
}}
>
{image}
</Box>
)}
</Box>
<HStack
distribution="end"
css={{
width: '100%',
justifyContent: 'end',
'@lgDown': { display: 'none' },
}}
>
<Button
style="ctaSecondary"
css={{
width: '111px',
height: '44px',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
}}
>
Skip
</Button>
<NextButton />
</HStack>
</VStack>
<VStack
css={{
background: 'White',
'@sm': { alignItems: 'center' },
padding: '2vw 2vw 0 2vw',
'@lg': {
background: '#F5F5F4',
padding: '30px 71px 0 30px',
alignItems: 'flex-start',
},
'@xl': {
padding: '58px 71px 0 58px',
},
}}
distribution="start"
>
{description && (
<Box
css={{
position: 'relative',
fontWeight: 600,
fontSize: 16,
color: 'rgba(10, 8, 6, 0.8)',
'@lgDown': { paddingLeft: '11px' },
}}
>
{description}
</Box>
)}
{children}
</VStack>
</Box>
<HStack
css={{
position: 'fixed',
bottom: '0',
width: '100%',
padding: '20px',
justifyContent: 'space-between',
backgroundColor: '#ffffff',
'@lg': { display: 'none' },
}}
>
<Button
style="ctaSecondary"
css={{
width: '111px',
height: '44px',
textAlign: 'left',
color: 'rgba(10, 8, 6, 0.8)',
fontWeight: 600,
fontSize: '16px',
}}
>
Skip
</Button>
<NextButton />
</HStack>
</>
)
}

14
packages/web/components/templates/discoverFeed/DiscoverFeed/DiscoverFeed.tsx
View File

@ -1,13 +1,12 @@
import { HStack, VStack } from "../../../elements/LayoutPrimitives"
import { Toaster } from 'react-hot-toast'
import { HStack, VStack } from '../../../elements/LayoutPrimitives'
import { LayoutType } from '../../homeFeed/HomeFeedContainer'
import { UserBasicData } from '../../../../lib/networking/queries/useGetViewerQuery'
import { DiscoverItems } from '../DiscoverItems/DiscoverItems'
import { SaveDiscoverArticleOutput } from "../../../../lib/networking/mutations/saveDiscoverArticle"
import { HeaderText } from "../DiscoverHeader/HeaderText"
import React from "react"
import { TopicTabData } from "../DiscoverContainer"
import { DiscoverFeedItem } from "../../../../lib/networking/queries/useGetDiscoverFeedItems"
import { SaveDiscoverArticleOutput } from '../../../../lib/networking/mutations/saveDiscoverArticle'
import { HeaderText } from '../DiscoverHeader/HeaderText'
import React from 'react'
import { TopicTabData } from '../DiscoverContainer'
import { DiscoverFeedItem } from '../../../../lib/networking/queries/useGetDiscoverFeedItems'
type DiscoverItemFeedProps = {
items: DiscoverFeedItem[]
@ -33,7 +32,6 @@ export const DiscoverItemFeed = (props: DiscoverItemFeedProps) => {
minHeight: '100vh',
}}
>
<Toaster />
<HStack
alignment="center"
distribution={'start'}

2
packages/web/components/templates/homeFeed/HighlightsLayout.tsx
View File

@ -1,7 +1,6 @@
import { useRouter } from 'next/router'
import { HighlighterCircle } from '@phosphor-icons/react'
import { useCallback, useEffect, useReducer, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
import {
LibraryItem,
@ -128,7 +127,6 @@ export function HighlightItemsLayout(
distribution="start"
alignment="start"
>
<Toaster />
<HStack
css={{
flexGrow: '0',

3
packages/web/components/templates/library/LibraryContainer.tsx
View File

@ -2,7 +2,6 @@ import { Action, createAction, useKBar, useRegisterActions } from 'kbar'
import debounce from 'lodash/debounce'
import { useRouter } from 'next/router'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import TopBarProgress from 'react-topbar-progress-indicator'
import { useFetchMore } from '../../../lib/hooks/useFetchMoreScroll'
import { usePersistedState } from '../../../lib/hooks/usePersistedState'
@ -1044,8 +1043,6 @@ export function LibraryItemsLayout(
},
}}
>
<Toaster />
<SpanBox
css={{
alignSelf: 'flex-start',

6
packages/web/components/templates/settings/SettingsTable.tsx
View File

@ -1,5 +1,4 @@
import { Pencil, Trash } from '@phosphor-icons/react'
import { Toaster } from 'react-hot-toast'
import { Button } from '../../elements/Button'
import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
@ -282,11 +281,6 @@ const CreateButton = (props: CreateButtonProps): JSX.Element => {
export const SettingsTable = (props: SettingsTableProps): JSX.Element => {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<HStack css={{ width: '100%' }} alignment="center">
<VStack
alignment="start"

1
packages/web/lib/keyboardShortcuts/navigationShortcuts.ts
View File

@ -1,7 +1,6 @@
import { Action } from 'kbar'
import type { KeyboardCommand } from './useKeyboardShortcuts'
import type { NextRouter } from 'next/router'
import { DEFAULT_HOME_PATH } from '../navigations'
export function navigationCommands(router: NextRouter | undefined): Action[] {
return [

9
packages/web/pages/[username]/[slug]/index.tsx
View File

@ -1,16 +1,11 @@
import { PrimaryLayout } from '../../../components/templates/PrimaryLayout'
import { LoadingView } from '../../../components/patterns/LoadingView'
import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
import { useRouter } from 'next/router'
import { VStack } from './../../../components/elements/LayoutPrimitives'
import {
ArticleContainer,
UpdateTitleEvent,
} from './../../../components/templates/article/ArticleContainer'
import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
import { useCallback, useEffect, useState } from 'react'
import dynamic from 'next/dynamic'
import { Toaster } from 'react-hot-toast'
import Script from 'next/script'
import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
import { Label } from '../../../lib/networking/fragments/labelFragment'
@ -505,8 +500,6 @@ export default function Reader(): JSX.Element {
id="MathJax-script"
src="/static/mathjax/tex-mml-chtml.js"
/>
<Toaster />
<ReaderHeader
hideDisplaySettings={false}
showDisplaySettingsModal={

2
packages/web/pages/_app.tsx
View File

@ -29,6 +29,7 @@ import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
import React from 'react'
import { Toaster } from 'react-hot-toast'
const queryClient = new QueryClient({
defaultOptions: {
@ -107,6 +108,7 @@ export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
return (
<ConditionalCaptchaProvider>
<Toaster />
<PersistQueryClientProvider
client={queryClient}
persistOptions={{ persister: asyncStoragePersister }}

1
packages/web/pages/_document.tsx
View File

@ -2,6 +2,7 @@
/* eslint-disable functional/no-class */
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import { getCssText, globalStyles } from '../components/tokens/stitches.config'
import { Toaster } from 'react-hot-toast'
export default class Document extends NextDocument {
render() {

6
packages/web/pages/auth/forgot-password.tsx
View File

@ -1,7 +1,6 @@
import { PageMetaData } from '../../components/patterns/PageMetaData'
import { AuthLayout } from '../../components/templates/AuthLayout'
import { EmailForgotPassword } from '../../components/templates/auth/EmailForgotPassword'
import { Toaster } from 'react-hot-toast'
export default function ForgotPassword(): JSX.Element {
return (
@ -10,11 +9,6 @@ export default function ForgotPassword(): JSX.Element {
title="Reset your password - Omnivore"
path="/auth-forgot-password"
/>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<EmailForgotPassword />
<div data-testid="auth-forgot-password-page-tag" />
</AuthLayout>

7
packages/web/pages/settings/account.tsx
View File

@ -1,5 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import { Button } from '../../components/elements/Button'
import {
Box,
@ -224,12 +223,6 @@ export default function Account(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<VStack
css={{ width: '100%', height: '100%' }}
distribution="start"

6
packages/web/pages/settings/delete-my-account.tsx
View File

@ -1,6 +1,5 @@
import { useState } from 'react'
import { useRouter } from 'next/router'
import { Toaster } from 'react-hot-toast'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { applyStoredTheme } from '../../lib/themeUpdater'
@ -48,11 +47,6 @@ export default function DeleteMyAccount(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<VStack
css={{ width: '100%', height: '100%' }}
distribution="start"

24
packages/web/pages/settings/features/beta.tsx
View File

@ -1,34 +1,12 @@
import { Spinner } from '@phosphor-icons/react'
import { useCallback, useMemo, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import { Button } from '../../../components/elements/Button'
import { HStack, VStack } from '../../../components/elements/LayoutPrimitives'
import { StyledText } from '../../../components/elements/StyledText'
import { VStack } from '../../../components/elements/LayoutPrimitives'
import { SettingsLayout } from '../../../components/templates/SettingsLayout'
import { styled } from '../../../components/tokens/stitches.config'
import { userHasFeature } from '../../../lib/featureFlag'
import { optInFeature } from '../../../lib/networking/mutations/optIntoFeatureMutation'
import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
import { applyStoredTheme } from '../../../lib/themeUpdater'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
const StyledLabel = styled('label', {
fontWeight: 600,
fontSize: '16px',
marginBottom: '5px',
})
export default function BetaFeatures(): JSX.Element {
applyStoredTheme()
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<VStack
css={{ width: '100%', height: '100%', mt: '80px' }}
distribution="start"

9
packages/web/pages/settings/integrations.tsx
View File

@ -3,7 +3,6 @@ import Image from 'next/image'
import { useRouter } from 'next/router'
import { DownloadSimple, Link, Spinner } from '@phosphor-icons/react'
import { useCallback, useEffect, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import { Button } from '../../components/elements/Button'
import {
Dropdown,
@ -27,9 +26,7 @@ import {
Integration,
useGetIntegrationsQuery,
} from '../../lib/networking/queries/useGetIntegrationsQuery'
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { useGetViewer } from '../../lib/networking/viewer/useGetViewer'
// Styles
const Header = styled(Box, {
color: '$utilityTextDefault',
@ -327,12 +324,6 @@ export default function Integrations(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<VStack css={{ width: '100%', height: '100%' }}>
<Header css={{ textAlign: 'center', width: '100%' }}>
Integrations

11
packages/web/pages/settings/labels.tsx
View File

@ -8,7 +8,6 @@ import {
HStack,
VStack,
} from '../../components/elements/LayoutPrimitives'
import { Toaster } from 'react-hot-toast'
import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { Label, LabelColor } from '../../lib/networking/fragments/labelFragment'
@ -156,9 +155,8 @@ export default function LabelsPage(): JSX.Element {
const [descriptionInputText, setDescriptionInputText] = useState<string>('')
const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
const [windowWidth, setWindowWidth] = useState<number>(0)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState<
string | null
>(null)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] =
useState<string | null>(null)
const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState<boolean>({
key: `--settings-labels-show-help`,
initialValue: true,
@ -262,11 +260,6 @@ export default function LabelsPage(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<HStack css={{ width: '100%', height: '100%' }}>
<VStack
css={{

6
packages/web/pages/settings/pinned-searches.tsx
View File

@ -5,7 +5,6 @@ import React, {
useMemo,
useReducer,
} from 'react'
import { Toaster } from 'react-hot-toast'
import {
Box,
HStack,
@ -144,11 +143,6 @@ export default function PinnedSearches(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<VStack
css={{ width: '100%', height: '100%' }}
distribution="start"

17
packages/web/pages/settings/rules.tsx
View File

@ -1,7 +1,6 @@
import { Button, Form, Input, Modal, Select, Space, Table, Tag } from 'antd'
import 'antd/dist/antd.compact.css'
import { useCallback, useMemo, useState } from 'react'
import { Toaster } from 'react-hot-toast'
import { Box, HStack } from '../../components/elements/LayoutPrimitives'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Label } from '../../lib/networking/fragments/labelFragment'
@ -181,9 +180,8 @@ const CreateActionModal = (props: CreateActionModalProps): JSX.Element => {
}
}
const [actionType, setActionType] = useState<RuleActionType | undefined>(
undefined
)
const [actionType, setActionType] =
useState<RuleActionType | undefined>(undefined)
return (
<Modal
@ -304,9 +302,8 @@ export default function Rules(): JSX.Element {
const { rules, revalidate } = useGetRulesQuery()
const { data: labels } = useGetLabels()
const [isCreateRuleModalOpen, setIsCreateRuleModalOpen] = useState(false)
const [createActionRule, setCreateActionRule] = useState<Rule | undefined>(
undefined
)
const [createActionRule, setCreateActionRule] =
useState<Rule | undefined>(undefined)
const dataSource = useMemo(() => {
return rules.map((rule: Rule) => {
@ -435,12 +432,6 @@ export default function Rules(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<CreateRuleModal
revalidate={revalidate}
isModalOpen={isCreateRuleModalOpen}

37
packages/web/pages/settings/saved-searches.tsx
View File

@ -15,7 +15,6 @@ import {
HStack,
VStack,
} from '../../components/elements/LayoutPrimitives'
import { Toaster } from 'react-hot-toast'
import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
import { StyledText } from '../../components/elements/StyledText'
@ -162,14 +161,14 @@ export default function SavedSearchesPage(): JSX.Element {
const [editingId, setEditingId] = useState<string | null>(null)
const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
const [windowWidth, setWindowWidth] = useState<number>(0)
const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] = useState<
string | null
>(null)
const [confirmRemoveSavedSearchId, setConfirmRemoveSavedSearchId] =
useState<string | null>(null)
const [draggedElementId, setDraggedElementId] = useState<string | null>(null)
const [draggedElementPosition, setDraggedElementPosition] = useState<{
x: number
y: number
} | null>(null)
const [draggedElementPosition, setDraggedElementPosition] =
useState<{
x: number
y: number
} | null>(null)
const [sortedSavedSearch, setSortedSavedSearch] = useState<SavedSearch[]>([])
// Some theming stuff here.
@ -330,11 +329,6 @@ export default function SavedSearchesPage(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<HStack css={{ width: '100%', height: '100%' }}>
<VStack
css={{
@ -592,14 +586,15 @@ function GenericTableCard(
const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
const DEFAULT_STYLE = { position: null }
const updateSavedSearchFunc = useUpdateSavedSearch()
const [style, setStyle] = useState<
Partial<{
position: string | null
top: string
left: string
maxWidth: string
}>
>(DEFAULT_STYLE)
const [style, setStyle] =
useState<
Partial<{
position: string | null
top: string
left: string
maxWidth: string
}>
>(DEFAULT_STYLE)
const handleEdit = () => {
editingId && updateSavedSearch(editingId)
setEditingId(null)

23
packages/web/pages/settings/shortcuts.tsx
View File

@ -7,12 +7,7 @@ import {
useRef,
useState,
} from 'react'
import { applyStoredTheme } from '../../lib/themeUpdater'
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { NavigationLayout } from '../../components/templates/NavigationLayout'
import { Toaster } from 'react-hot-toast'
import {
Box,
VStack,
@ -20,36 +15,24 @@ import {
SpanBox,
Separator,
} from '../../components/elements/LayoutPrimitives'
import { LabelChip } from '../../components/elements/LabelChip'
import { StyledText } from '../../components/elements/StyledText'
import {
Subscription,
SubscriptionType,
useGetSubscriptionsQuery,
} from '../../lib/networking/queries/useGetSubscriptionsQuery'
import { DragIcon } from '../../components/elements/icons/DragIcon'
import { SubscriptionType } from '../../lib/networking/queries/useGetSubscriptionsQuery'
import { CoverImage } from '../../components/elements/CoverImage'
import { Label } from '../../lib/networking/fragments/labelFragment'
import { usePersistedState } from '../../lib/hooks/usePersistedState'
import { CheckSquare, Square, Tag } from '@phosphor-icons/react'
import { Button } from '../../components/elements/Button'
import { styled } from '@stitches/react'
import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment'
import { escapeQuotes } from '../../utils/helper'
import { useGetLabels } from '../../lib/networking/labels/useLabels'
import { useGetSavedSearches } from '../../lib/networking/savedsearches/useSavedSearches'
import {
Shortcut,
ShortcutType,
useGetShortcuts,
useResetShortcuts,
useSetShortcuts,
} from '../../lib/networking/shortcuts/useShortcuts'
import * as Switch from '@radix-ui/react-switch'
import { useGetSubscriptions } from '../../lib/networking/subscriptions/useGetSubscriptions'
import { NewsletterIcon } from '../../components/elements/icons/NewsletterIcon'
import { FollowingIcon } from '../../components/elements/icons/FollowingIcon'
import { LIBRARY_LEFT_MENU_WIDTH } from '../../components/templates/navMenu/NavigationMenu'
import { escapeQuotes } from '../../utils/helper'
import { Tag } from '@phosphor-icons/react'
function flattenShortcuts(shortcuts: Shortcut[]): string[] {
let result: string[] = []

6
packages/web/pages/settings/webhooks.tsx
View File

@ -1,5 +1,4 @@
import { SettingsLayout } from '../../components/templates/SettingsLayout'
import { Toaster } from 'react-hot-toast'
import { VStack } from '../../components/elements/LayoutPrimitives'
import Link from 'next/link'
import { StyledText } from '../../components/elements/StyledText'
@ -7,11 +6,6 @@ import { StyledText } from '../../components/elements/StyledText'
export default function Webhooks(): JSX.Element {
return (
<SettingsLayout>
<Toaster
containerStyle={{
top: '5rem',
}}
/>
<VStack
css={{ width: '100%', height: '100%' }}
distribution="start"

53
packages/web/stories/Snackbar.stories.tsx
View File

@ -1,53 +0,0 @@
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { Toaster, ToastPosition } from 'react-hot-toast'
import { showErrorToast, showSuccessToast } from '../lib/toastHelpers'
import { Button } from '../components/elements/Button'
export default {
title: 'Components/Snackbar',
component: Toaster,
argTypes: {
position: {
description: 'The position of the snackbar',
options: [
'top-left',
'top-center',
'top-right',
'bottom-right',
'bottom-center',
'bottom-left',
],
control: { type: 'select' },
},
},
} as ComponentMeta<typeof Toaster>
const Template = ({ showToast, position }: { showToast: () => void; position?: ToastPosition }) => (
<div>
<Toaster position={position} />
<div
style={{
height: '15rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Button style='ctaGray' onClick={showToast}>
Show Toast
</Button>
</div>
</div>
)
export const SuccessSnackbar: ComponentStory<typeof Toaster> = (args: any) => {
return (
<Template {...args} showToast={() => showSuccessToast('Success Message')} />
)
}
export const ErrorSnackbar: ComponentStory<typeof Toaster> = (args: any) => {
return (
<Template {...args} showToast={() => showErrorToast('Error Message!')} />
)
}