Skip to content

Commit

Permalink
fix(build): now works
Browse files Browse the repository at this point in the history
  • Loading branch information
tomjeannesson committed Oct 5, 2023
1 parent 4b983ed commit a7869f5
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 157 deletions.
2 changes: 1 addition & 1 deletion desktop-app/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./desktop-app/tsconfig.json"
"project": "./tsconfig.json"
},
"plugins": [
"react"
Expand Down
34 changes: 17 additions & 17 deletions desktop-app/renderer/components/ui/toast.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"
import * as React from 'react'
import * as ToastPrimitives from '@radix-ui/react-toast'
import { cva, type VariantProps } from 'class-variance-authority'
import { X } from 'lucide-react'

import { cn } from "@/lib/utils"
import { cn } from '@/lib/utils'

const ToastProvider = ToastPrimitives.Provider

Expand All @@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
className
)}
{...props}
Expand All @@ -23,18 +23,18 @@ const ToastViewport = React.forwardRef<
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
{
variants: {
variant: {
default: "border bg-background text-foreground",
default: 'border bg-background text-foreground',
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
'destructive group border-destructive bg-destructive text-destructive-foreground'
}
},
defaultVariants: {
variant: "default",
},
variant: 'default'
}
}
)

Expand All @@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
<ToastPrimitives.Action
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
'ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
className
)}
{...props}
Expand All @@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
<ToastPrimitives.Close
ref={ref}
className={cn(
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
'text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
className
)}
toast-close=""
Expand All @@ -92,7 +92,7 @@ const ToastTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<ToastPrimitives.Title
ref={ref}
className={cn("text-sm font-semibold", className)}
className={cn('text-sm font-semibold', className)}
{...props}
/>
))
Expand All @@ -104,7 +104,7 @@ const ToastDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<ToastPrimitives.Description
ref={ref}
className={cn("text-sm opacity-90", className)}
className={cn('text-sm opacity-90', className)}
{...props}
/>
))
Expand All @@ -123,5 +123,5 @@ export {
ToastTitle,
ToastDescription,
ToastClose,
ToastAction,
ToastAction
}
8 changes: 4 additions & 4 deletions desktop-app/renderer/components/ui/toaster.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
"use client"
'use client'

import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@/components/ui/toast"
import { useToast } from "@/components/ui/use-toast"
ToastViewport
} from '@/components/ui/toast'
import { useToast } from '@/components/ui/use-toast'

export function Toaster() {
const { toasts } = useToast()
Expand Down
71 changes: 34 additions & 37 deletions desktop-app/renderer/components/ui/use-toast.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
// Inspired by react-hot-toast library
import * as React from "react"
import * as React from 'react'

import type {
ToastActionElement,
ToastProps,
} from "@/components/ui/toast"
import type { ToastActionElement, ToastProps } from '@/components/ui/toast'

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000
Expand All @@ -17,10 +14,10 @@ type ToasterToast = ToastProps & {
}

const actionTypes = {
ADD_TOAST: "ADD_TOAST",
UPDATE_TOAST: "UPDATE_TOAST",
DISMISS_TOAST: "DISMISS_TOAST",
REMOVE_TOAST: "REMOVE_TOAST",
ADD_TOAST: 'ADD_TOAST',
UPDATE_TOAST: 'UPDATE_TOAST',
DISMISS_TOAST: 'DISMISS_TOAST',
REMOVE_TOAST: 'REMOVE_TOAST'
} as const

let count = 0
Expand All @@ -34,20 +31,20 @@ type ActionType = typeof actionTypes

type Action =
| {
type: ActionType["ADD_TOAST"]
type: ActionType['ADD_TOAST']
toast: ToasterToast
}
| {
type: ActionType["UPDATE_TOAST"]
type: ActionType['UPDATE_TOAST']
toast: Partial<ToasterToast>
}
| {
type: ActionType["DISMISS_TOAST"]
toastId?: ToasterToast["id"]
type: ActionType['DISMISS_TOAST']
toastId?: ToasterToast['id']
}
| {
type: ActionType["REMOVE_TOAST"]
toastId?: ToasterToast["id"]
type: ActionType['REMOVE_TOAST']
toastId?: ToasterToast['id']
}

interface State {
Expand All @@ -64,8 +61,8 @@ const addToRemoveQueue = (toastId: string) => {
const timeout = setTimeout(() => {
toastTimeouts.delete(toastId)
dispatch({
type: "REMOVE_TOAST",
toastId: toastId,
type: 'REMOVE_TOAST',
toastId: toastId
})
}, TOAST_REMOVE_DELAY)

Expand All @@ -74,21 +71,21 @@ const addToRemoveQueue = (toastId: string) => {

export const reducer = (state: State, action: Action): State => {
switch (action.type) {
case "ADD_TOAST":
case 'ADD_TOAST':
return {
...state,
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
}

case "UPDATE_TOAST":
case 'UPDATE_TOAST':
return {
...state,
toasts: state.toasts.map((t) =>
t.id === action.toast.id ? { ...t, ...action.toast } : t
),
)
}

case "DISMISS_TOAST": {
case 'DISMISS_TOAST': {
const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
Expand All @@ -107,22 +104,22 @@ export const reducer = (state: State, action: Action): State => {
t.id === toastId || toastId === undefined
? {
...t,
open: false,
open: false
}
: t
),
)
}
}
case "REMOVE_TOAST":
case 'REMOVE_TOAST':
if (action.toastId === undefined) {
return {
...state,
toasts: [],
toasts: []
}
}
return {
...state,
toasts: state.toasts.filter((t) => t.id !== action.toastId),
toasts: state.toasts.filter((t) => t.id !== action.toastId)
}
}
}
Expand All @@ -138,34 +135,34 @@ function dispatch(action: Action) {
})
}

type Toast = Omit<ToasterToast, "id">
type Toast = Omit<ToasterToast, 'id'>

function toast({ ...props }: Toast) {
const id = genId()

const update = (props: ToasterToast) =>
dispatch({
type: "UPDATE_TOAST",
toast: { ...props, id },
type: 'UPDATE_TOAST',
toast: { ...props, id }
})
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })

dispatch({
type: "ADD_TOAST",
type: 'ADD_TOAST',
toast: {
...props,
id,
open: true,
onOpenChange: (open) => {
if (!open) dismiss()
},
},
}
}
})

return {
id: id,
dismiss,
update,
update
}
}

Expand All @@ -185,8 +182,8 @@ function useToast() {
return {
...state,
toast,
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId })
}
}

export { useToast, toast }
export { toast, useToast }
77 changes: 61 additions & 16 deletions desktop-app/renderer/pages/bots/index.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,73 @@
import React from 'react'
import ContextHeader from '@/components/layout/contextHeader'

import { Button } from '@/components/ui/button'
import { ToastAction } from '@/components/ui/toast'
import { useToast } from '@/components/ui/use-toast'

import {
Card,
Metric,
Text,
Flex,
BadgeDelta,
DeltaType,
Grid
} from '@tremor/react'
const categories: {
title: string
metric: string
metricPrev: string
delta: string
deltaType: DeltaType
}[] = [
{
title: 'Sales',
metric: '$ 12,699',
metricPrev: '$ 9,456',
delta: '34.3%',
deltaType: 'moderateIncrease'
},
{
title: 'Profit',
metric: '$ 40,598',
metricPrev: '$ 45,564',
delta: '10.9%',
deltaType: 'moderateDecrease'
},
{
title: 'Customers',
metric: '1,072',
metricPrev: '856',
delta: '25.3%',
deltaType: 'moderateIncrease'
}
]
export default function Bots(): JSX.Element {
const { toast } = useToast()
return (
<ContextHeader isBot>
<Button
variant="outline"
onClick={() => {
toast({
title: 'Scheduled: Catch up ',
description: 'Friday, February 10, 2023 at 5:57 PM',
action: (
<ToastAction altText="Goto schedule to undo">Undo</ToastAction>
)
})
}}
>
Add to calendar
</Button>
<Grid numItemsSm={2} numItemsLg={3} className="gap-6">
{categories.map((item) => (
<Card key={item.title}>
<Flex alignItems="start">
<Text>{item.title}</Text>
<BadgeDelta
className=" rounded-tremor-small"
deltaType={item.deltaType}
>
{item.delta}
</BadgeDelta>
</Flex>
<Flex
justifyContent="start"
alignItems="baseline"
className="space-x-3 truncate"
>
<Metric>{item.metric}</Metric>
<Text className="truncate">from {item.metricPrev}</Text>
</Flex>
</Card>
))}
</Grid>
</ContextHeader>
)
}
Loading

0 comments on commit a7869f5

Please sign in to comment.