@@ -70,7 +70,7 @@ const { documentationData } = data as DocTabsProps
&:has(.border-b):last-of-type {
@apply border-b-0 border-b-transparent rounded-b-none;
}
- @apply sticky top-[80px] bg-[var(--grayA1)] overflow-hidden w-[327px] rounded-xl p-0;
+ @apply sticky top-[80px] bg-[var(--grayA1)] overflow-hidden rounded-xl p-0;
ol {
@apply py-1;
li {
@@ -82,6 +82,6 @@ const { documentationData } = data as DocTabsProps
}
.prodkt-docs-aside *[data-state='open'] > button {
- @apply bg-black !important;
+ @apply bg-[var(--ghost-aa11)] !important;
}
diff --git a/apps/marketing/src/components/download-resume.tsx b/apps/marketing/src/components/download-resume.tsx
new file mode 100644
index 0000000..f2c7bff
--- /dev/null
+++ b/apps/marketing/src/components/download-resume.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-returns */
+
+import { CloudDownload } from 'lucide-react'
+
+import BryanResume from '@prodkt/assets/resume/bryan-funk-resume-promo.webp'
+
+/**
+ *
+ */
+export default function ResumeSection() {
+ return (
+
+ )
+}
diff --git a/apps/marketing/src/components/login.tsx b/apps/marketing/src/components/login.tsx
new file mode 100644
index 0000000..93718c6
--- /dev/null
+++ b/apps/marketing/src/components/login.tsx
@@ -0,0 +1,73 @@
+import { Button } from '@prodkt/ui/primitives/button'
+import { Input } from '@prodkt/ui/primitives/input'
+import { Label } from '@prodkt/ui/primitives/label'
+
+/**
+ *
+ */
+export function LoginSection() {
+ return (
+
+
+
+
+
+
+
+ A portfolio platform from Bryan Funk
+
+
+
+
+
+ )
+}
diff --git a/apps/marketing/src/components/page-header.astro b/apps/marketing/src/components/page-header.astro
index 8378027..8c0016b 100644
--- a/apps/marketing/src/components/page-header.astro
+++ b/apps/marketing/src/components/page-header.astro
@@ -1,7 +1,7 @@
---
import { cva } from 'class-variance-authority'
-import { cn } from '@prodkt/ui/cn/cn'
+import { cn } from '@/utils/cn'
const pageHeaderVariants = cva('', {
variants: {
@@ -16,7 +16,7 @@ const pageHeaderVariants = cva('', {
cn(
!minimal ? 'justify-center' : '',
fullWidth ? 'w-full mx-0' : 'mx-auto',
- 'flex flex-col items-center justify-between gap-20 relative h-auto',
+ 'flex flex-col items-center justify-between relative h-auto p-6 pt-10 md:pt-0 md:p-0',
),
},
},
@@ -53,119 +53,118 @@ const {
{text}
{bullet1}
{bullet2}
{bullet3}
{bullet4}
@@ -179,7 +178,7 @@ const {
0px 4px 24px var(--gray1),
0px 1px 1px var(--gray6);
@apply bg-gradient-to-b from-[var(--gray12)] to-[var(--gray1)] brightness-[2] contrast-50 dark:brightness-[1.2] dark:contrast-100;
- @apply bg-clip-text text-transparent px-2 py-2;
+ @apply bg-clip-text text-transparent;
leading-trim: both;
text-edge: cap;
diff --git a/apps/marketing/src/components/plutio/plutio.astro b/apps/marketing/src/components/plutio/plutio.astro
new file mode 100644
index 0000000..f7003ee
--- /dev/null
+++ b/apps/marketing/src/components/plutio/plutio.astro
@@ -0,0 +1,34 @@
+---
+// @ts-nocheck
+---
+
+
diff --git a/apps/marketing/src/components/portfolio-slider.astro b/apps/marketing/src/components/portfolio-slider.astro
index b393aaf..1ab960c 100644
--- a/apps/marketing/src/components/portfolio-slider.astro
+++ b/apps/marketing/src/components/portfolio-slider.astro
@@ -22,10 +22,10 @@ const { template } = Astro.props
@@ -84,43 +84,42 @@ const { template } = Astro.props
swiper-container {
width: 100%;
height: 100%;
+ max-height: calc(100dvh - 100px);
}
.mySwiper swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
- @rounded-3xl overflow-hidden border flex shrink w-auto mx-auto border-[var(--grayA6)];
+ @apply rounded-3xl overflow-hidden mx-auto my-auto;
justify-content: center;
align-items: center;
- @apply rounded-[2rem] overflow-hidden;
}
.mySwiper swiper-slide:has(.swiper-slide-active) {
- @apply overflow-hidden w-auto scale-100 transition-all duration-500;
+ @apply w-auto scale-100 transition-all duration-500 opacity-100;
}
.mySwiper swiper-slide:not(.swiper-slide-active) img {
- @apply overflow-hidden w-auto scale-75 blur-sm relative transition-all duration-1000;
+ @apply overflow-hidden scale-75 blur-sm relative transition-all duration-1000 brightness-50;
}
.mySwiper swiper-slide img {
display: sw >
+ placeholder?: string
+ className?: string
+ characterLimit?: number
+ proseInvert?: boolean
+}) {
+ const editor = useEditor({
+ extensions: [
+ StarterKit as AnyExtension,
+ Highlight,
+ Typography,
+ Link.configure({
+ HTMLAttributes: {
+ class: 'cursor-pointer',
+ },
+ }),
+ Placeholder.configure({
+ placeholder: placeholder ?? 'Write something...',
+ }),
+ CharacterCount.configure({
+ limit: characterLimit ?? undefined,
+ }),
+ ],
+ content,
+ editorProps: {
+ attributes: {
+ class: `prose prose-sm dark:prose-invert focus:outline-none${proseInvert ? ' prose-invert' : ''}`,
+ },
+ },
+ onUpdate: ({ editor }) => {
+ setContent(editor.getHTML())
+ },
+ })
+
+ return (
+
+ )
+}
diff --git a/apps/marketing/src/components/signup.tsx b/apps/marketing/src/components/signup.tsx
new file mode 100644
index 0000000..e388245
--- /dev/null
+++ b/apps/marketing/src/components/signup.tsx
@@ -0,0 +1,71 @@
+import { Button } from '@prodkt/ui/primitives/button'
+import { Input } from '@prodkt/ui/primitives/input'
+import { Label } from '@prodkt/ui/primitives/label'
+
+/**
+ *
+ */
+export function RegisterSection() {
+ return (
+
+
+
+
+
+ {/* */}
+ {/* */}
+
+
Create Account
+
+ Register below to access exclusive content and downlaods
+
+
+
+
+
+
+
+
+
+
+
+ A portfolio platform from Bryan Funk
+
+
+
+
+
Error: {error.message}
+ }
+
+ return (
+
+ {workHistory.map((resume) => {
+ if (!Array.isArray(resume.work)) {
+ return null
+ }
+
+ // Sort work items by end_date in descending order
+ const sortedWork = resume.work.toSorted((a, b) => {
+ const dateA = new Date(formatDate(a.start_date))
+ const dateB = new Date(formatDate(b.end_date))
+ return dateB.getTime() - dateA.getTime()
+ })
+
+ return sortedWork.map((workItem, index) => (
+
+
+
+
+ {!workItem.logo ? (
+
+ {workItem.name}
+
+ ) : null}
+ {workItem.logo && workItem.name === 'Tovuti LMS' ? (
+
+ ) : null}
+ {workItem.logo && workItem.name === 'Design Boise' ? (
+
+ ) : null}
+ {workItem.logo &&
+ workItem.name === 'International Minute Press' ? (
+
+ ) : null}
+ {workItem.logo && workItem.name === 'Lumen Creative' ? (
+
+ ) : null}
+
+
+
+ {workItem.position}
+
+
+ {workItem.position_subheading}
+
+
+ {workItem.secondary_heading &&
+ workItem.secondary_heading.length > 0 ? (
+
+
+ {workItem.secondary_heading}
+
+ {workItem.secondary_subheading &&
+ workItem.secondary_subheading.length > 0 ? (
+
+ {workItem.secondary_subheading}
+
+ ) : null}
+
+ ) : null}
+
+
+
+
+ {formatDate(workItem.start_date)}
+
+
+
+
+
+ {formatDate(workItem.end_date)}
+
+
+
+
+
+
+
+
+
+
+
+ Highlights
+
+
+ Work
+
+
+
+
+ {workItem.highlights?.map((highlight, index) => {
+ const highlightKey = highlight.id
+ ? `highlight-${resume.id}-${highlight.id}`
+ : // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+ `highlight-${resume.id}-fallback-${index}`
+
+ return (
+
+
+
+
+ dangerouslySetInnerHTML={{
+ __html: highlight.highlight ?? '',
+ }}
+ />
+
+
+ )
+ })}
+
+
+
+
+
+ Work examples coming soon.
+
+
+
+
+
+
+ ))
+ })}
+
+ )
+}
diff --git a/apps/marketing/src/database.types.ts b/apps/marketing/src/database.types.ts
index 8eda098..4fdb001 100644
--- a/apps/marketing/src/database.types.ts
+++ b/apps/marketing/src/database.types.ts
@@ -537,10 +537,12 @@ export type Database = {
frontmatter: string | null
html: string | null
id: string
+ isStory: boolean | null
named_export: string | null
slug: string | null
sort: number | null
status: string
+ storybook_id: string | null
syntax: string | null
title: string | null
user_created: string | null
@@ -554,10 +556,12 @@ export type Database = {
frontmatter?: string | null
html?: string | null
id: string
+ isStory?: boolean | null
named_export?: string | null
slug?: string | null
sort?: number | null
status?: string
+ storybook_id?: string | null
syntax?: string | null
title?: string | null
user_created?: string | null
@@ -571,10 +575,12 @@ export type Database = {
frontmatter?: string | null
html?: string | null
id?: string
+ isStory?: boolean | null
named_export?: string | null
slug?: string | null
sort?: number | null
status?: string
+ storybook_id?: string | null
syntax?: string | null
title?: string | null
user_created?: string | null
@@ -2369,11 +2375,26 @@ export type Database = {
},
]
}
+ documentation_navigation: {
+ Row: {
+ id: string
+ }
+ Insert: {
+ id: string
+ }
+ Update: {
+ id?: string
+ }
+ Relationships: []
+ }
documentation_page: {
Row: {
date_created: string | null
date_updated: string | null
+ excerpt: string | null
id: string
+ image: string | null
+ order_id: string | null
slug: string | null
sort: number | null
status: string
@@ -2384,7 +2405,10 @@ export type Database = {
Insert: {
date_created?: string | null
date_updated?: string | null
+ excerpt?: string | null
id: string
+ image?: string | null
+ order_id?: string | null
slug?: string | null
sort?: number | null
status?: string
@@ -2395,7 +2419,10 @@ export type Database = {
Update: {
date_created?: string | null
date_updated?: string | null
+ excerpt?: string | null
id?: string
+ image?: string | null
+ order_id?: string | null
slug?: string | null
sort?: number | null
status?: string
@@ -2404,6 +2431,20 @@ export type Database = {
user_updated?: string | null
}
Relationships: [
+ {
+ foreignKeyName: 'documentation_page_image_foreign'
+ columns: ['image']
+ isOneToOne: false
+ referencedRelation: 'directus_files'
+ referencedColumns: ['id']
+ },
+ {
+ foreignKeyName: 'documentation_page_order_id_foreign'
+ columns: ['order_id']
+ isOneToOne: false
+ referencedRelation: 'documentation_navigation'
+ referencedColumns: ['id']
+ },
{
foreignKeyName: 'documentation_page_user_created_foreign'
columns: ['user_created']
@@ -3002,23 +3043,33 @@ export type Database = {
folder: {
Row: {
id: string
+ image: string | null
parent: string | null
project: string | null
title: string | null
}
Insert: {
id: string
+ image?: string | null
parent?: string | null
project?: string | null
title?: string | null
}
Update: {
id?: string
+ image?: string | null
parent?: string | null
project?: string | null
title?: string | null
}
Relationships: [
+ {
+ foreignKeyName: 'folder_image_foreign'
+ columns: ['image']
+ isOneToOne: false
+ referencedRelation: 'directus_files'
+ referencedColumns: ['id']
+ },
{
foreignKeyName: 'folder_parent_foreign'
columns: ['parent']
diff --git a/apps/marketing/src/layouts/PublicLayout.astro b/apps/marketing/src/layouts/PublicLayout.astro
index 7d398ca..46e37ea 100644
--- a/apps/marketing/src/layouts/PublicLayout.astro
+++ b/apps/marketing/src/layouts/PublicLayout.astro
@@ -5,11 +5,14 @@ import { ThemeProvider } from 'next-themes'
import { Footer } from '@prodkt/ui/prodkt-components/footer'
import { Header } from '@prodkt/ui/prodkt-components/header'
-import { PageFooter } from '@prodkt/ui/prodkt-components/page-footer'
+import PageFooter from '@prodkt/ui/prodkt-components/page-footer'
import BaseHead from '@/components/BaseHead.astro'
+import Plutio from '@/components/plutio/plutio.astro'
import PostHog from '@/components/posthog/PostHog.astro'
+type DataTheme = 'dark-theme' | 'light-theme'
+type Typography = 'prodkt' | 'trendy' | 'techy' | 'press' | 'giest' | 'steady'
type Appearance = 'inherit' | 'light' | 'dark'
type AccentColor =
| 'gray'
@@ -38,12 +41,14 @@ type AccentColor =
| 'lime'
| 'mint'
| 'sky'
-type GrayColor = 'auto' | 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand'
+type GrayColor = 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand'
interface ThemeOptions {
appearance: Appearance
accentColor: AccentColor
+ theme: DataTheme
grayColor: GrayColor
+ typography: Typography
}
interface Props {
@@ -51,12 +56,16 @@ interface Props {
React.RefAttributes
grayColor?: ThemeOptions['grayColor'] & React.RefAttributes
appearance?: ThemeOptions['appearance'] & React.RefAttributes
+ theme?: ThemeOptions['theme'] & React.RefAttributes
+ typography?: ThemeOptions['typography'] & React.RefAttributes
}
const {
accentColor = 'violet',
- grayColor = 'mauve',
- appearance = 'light',
+ grayColor = 'slate',
+ appearance = 'dark',
+ theme = 'dark-theme',
+ typography = 'prodkt',
} = Astro.props
---
@@ -67,16 +76,42 @@ const {
data-is-root-theme='true'
data-accent-color={accentColor}
data-gray-color={grayColor}
+ data-theme={theme}
+ data-typography={typography}
data-has-background='false'
data-panel-background='translucent'
data-radius='large'
data-scaling='100%'
+ transition:persist
+ transition:persist-props
>
+
+
+
+export type TeamMemberProps =
+ Database['public']['Tables']['profiles']['Row'] & {
+ joined_at: string
+ }
+
+export type NotificationProps =
+ Database['public']['Tables']['notifications']['Row'] & {
+ project: { title: string; slug: string; icon: string }
+ initiator: { full_name: string }
+ }
+
+export type ProjectInviteProps = Database['public']['Tables']['project_invites']
+
+export type ProjectApiKeyProps =
+ Database['public']['Tables']['project_api_keys']
+
+export type ProjectApiKeyWithoutTokenProps = Omit<
+ ProjectApiKeyProps['Row'],
+ 'token'
+>
+
+export type ExtendedInviteProps = ProjectInviteProps['Row'] & {
+ project: { name: string; slug: string; icon: string }
+ creator: { full_name: string }
+}
+
+export type AnalyticsProps = {
+ key: string
+ clicks: number
+ visitors: number
+}[]
+
+export type ChangelogProps = Database['public']['Tables']['changelogs']
+
+export type ChangelogWithAuthorProps =
+ Database['public']['Tables']['changelogs']['Row'] & {
+ author: ProfileProps['Row']
+ }
+
+export type ChangelogSubscriberProps =
+ Database['public']['Tables']['changelog_subscribers']
+
+export type FeedbackProps = Database['public']['Tables']['feedback']
+
+export type FeedbackTagProps = Database['public']['Tables']['feedback_tags']
+
+export type FeedbackWithUserProps =
+ Database['public']['Tables']['feedback']['Row'] & {
+ user: ProfileProps['Row'] & { isTeamMember: boolean }
+ tags: { name: string; color: string }[]
+ has_upvoted: boolean
+ }
+
+export type FeedbackWithUserInputProps =
+ Database['public']['Tables']['feedback']['Insert'] & {
+ tags?: string[]
+ user?: ProfileProps['Update']
+ }
+
+export type FeedbackCommentProps =
+ Database['public']['Tables']['feedback_comments']
+
+export type FeedbackCommentWithUserProps =
+ Database['public']['Tables']['feedback_comments']['Row'] & {
+ user: ProfileProps['Row'] & { isTeamMember: boolean }
+ has_upvoted: boolean
+ replies: FeedbackCommentWithUserProps[]
+ }
+
+export type ProfileProps = Database['public']['Tables']['profiles']
+
+// Helper Types
+export interface ErrorProps {
+ message: string
+ status: number
+}
+
+// Incase error is null, data won't be and vice versa
+export type ApiResponse<
+ T,
+ E extends ErrorProps | null = ErrorProps | null,
+> = Promise<
+ E extends null ? { data: T; error: null } : { data: null; error: E }
+>
+
+export interface NavbarTabProps {
+ name: string
+ icon: {
+ dark: Record
| string
+ light: Record | string
+ }
+ slug: string
+}
+
+export interface CategoryTabProps {
+ name: string
+ slug: string
+}
diff --git a/apps/marketing/src/middleware/index.ts b/apps/marketing/src/middleware/index.ts
index e4282e2..3dff071 100644
--- a/apps/marketing/src/middleware/index.ts
+++ b/apps/marketing/src/middleware/index.ts
@@ -1,62 +1,74 @@
+import type { APIContext } from 'astro'
+
import { defineMiddleware } from 'astro:middleware'
import micromatch from 'micromatch'
-import { supabase } from '@/supabase'
+import { GET as getSupabaseClient } from '@/supabase'
const protectedRoutes = ['/dashboard(|/)']
const redirectRoutes = ['/signin(|/)', '/register(|/)']
const proptectedAPIRoutes = ['/api/guestbook(|/)']
export const onRequest = defineMiddleware(
- async ({ locals, url, cookies, redirect }, next) => {
- if (micromatch.isMatch(url.pathname, protectedRoutes)) {
- const accessToken = cookies.get('sb-access-token')
- const refreshToken = cookies.get('sb-refresh-token')
+ async (context: APIContext, next: () => Promise) => {
+ const supabaseResponse = await getSupabaseClient(context)
+ if (!supabaseResponse?.supabase) {
+ return new Response('Unable to initialize Supabase client', {
+ status: 500,
+ })
+ }
+ if (micromatch.isMatch(context.url.pathname, protectedRoutes)) {
+ const accessToken = context.cookies.get('sb-access-token')
+ const refreshToken = context.cookies.get('sb-refresh-token')
if (!accessToken || !refreshToken) {
- return redirect('/signin')
+ return context.redirect('/login')
}
- const { data, error } = await supabase.auth.setSession({
+ const { data, error } = await supabaseResponse.supabase.auth.setSession({
refresh_token: refreshToken.value,
access_token: accessToken.value,
})
if (error) {
- cookies.delete('sb-access-token', {
+ context.cookies.delete('sb-access-token', {
path: '/',
})
- cookies.delete('sb-refresh-token', {
+ context.cookies.delete('sb-refresh-token', {
path: '/',
})
- return redirect('/signin')
+ return context.redirect('/login')
}
- locals.email = data.user?.email ?? ''
- cookies.set('sb-access-token', data?.session?.access_token ?? '', {
- sameSite: 'strict',
- path: '/',
- secure: true,
- })
- cookies.set('sb-refresh-token', data?.session?.refresh_token ?? '', {
+ context.locals.email = data.user?.email ?? ''
+ context.cookies.set('sb-access-token', data.session?.access_token ?? '', {
sameSite: 'strict',
path: '/',
secure: true,
})
+ context.cookies.set(
+ 'sb-refresh-token',
+ data.session?.refresh_token ?? '',
+ {
+ sameSite: 'strict',
+ path: '/',
+ secure: true,
+ },
+ )
}
- if (micromatch.isMatch(url.pathname, redirectRoutes)) {
- const accessToken = cookies.get('sb-access-token')
- const refreshToken = cookies.get('sb-refresh-token')
+ if (micromatch.isMatch(context.url.pathname, redirectRoutes)) {
+ const accessToken = context.cookies.get('sb-access-token')
+ const refreshToken = context.cookies.get('sb-refresh-token')
if (accessToken && refreshToken) {
- return redirect('/dashboard')
+ return context.redirect('/dashboard')
}
}
- if (micromatch.isMatch(url.pathname, proptectedAPIRoutes)) {
- const accessToken = cookies.get('sb-access-token')
- const refreshToken = cookies.get('sb-refresh-token')
+ if (micromatch.isMatch(context.url.pathname, proptectedAPIRoutes)) {
+ const accessToken = context.cookies.get('sb-access-token')
+ const refreshToken = context.cookies.get('sb-refresh-token')
// Check for tokens
if (!accessToken || !refreshToken) {
@@ -69,7 +81,7 @@ export const onRequest = defineMiddleware(
}
// Verify the tokens
- const { error } = await supabase.auth.setSession({
+ const { error } = await supabaseResponse.supabase.auth.setSession({
access_token: accessToken.value,
refresh_token: refreshToken.value,
})
diff --git a/apps/marketing/src/pages/404.astro b/apps/marketing/src/pages/404.astro
index eec4661..d52915a 100644
--- a/apps/marketing/src/pages/404.astro
+++ b/apps/marketing/src/pages/404.astro
@@ -6,7 +6,7 @@ import Layout from '@/layouts/PublicLayout.astro'
diff --git a/apps/marketing/src/pages/api/docs-toc.json.ts b/apps/marketing/src/pages/api/docs-toc.json.ts
index 9dd362a..b6a986f 100644
--- a/apps/marketing/src/pages/api/docs-toc.json.ts
+++ b/apps/marketing/src/pages/api/docs-toc.json.ts
@@ -1,9 +1,13 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/require-param-description */
+
import type { Database, Json } from '@/database.types'
import type { SupabaseClient } from '@supabase/supabase-js'
+import type { APIContext } from 'astro'
import { supabase } from '@/supabase'
-const supabaseClient: SupabaseClient = supabase
interface Page {
slug: string
title: string
@@ -73,11 +77,25 @@ async function fetchDocumentationData(
* Handle GET request.
* @param root0
* @param root0.params
+ * @param context
* @returns The response object.
*/
-export async function GET() {
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
try {
- const documentationData = await fetchDocumentationData(supabaseClient)
+ const documentationData = await fetchDocumentationData(
+ SupabaseClient as SupabaseClient,
+ )
if (!documentationData || documentationData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
diff --git a/apps/marketing/src/pages/api/route.ts b/apps/marketing/src/pages/api/route.ts
new file mode 100644
index 0000000..42a8a13
--- /dev/null
+++ b/apps/marketing/src/pages/api/route.ts
@@ -0,0 +1,31 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-param-description */
+
+import type { APIContext } from 'astro'
+
+import { createServerClient, parseCookieHeader } from '@supabase/ssr'
+
+/**
+ *
+ * @param context
+ */
+export function GET(context: APIContext) {
+ const supabase = createServerClient(
+ import.meta.env.PUBLIC_SUPABASE_URL,
+ import.meta.env.PUBLIC_SUPABASE_ANON_KEY,
+ {
+ cookies: {
+ getAll() {
+ return parseCookieHeader(context.request.headers.get('Cookie') ?? '')
+ },
+ setAll(cookiesToSet) {
+ cookiesToSet.forEach(({ name, value, options }) => {
+ context.cookies.set(name, value, options)
+ })
+ },
+ },
+ },
+ )
+
+ return supabase
+}
diff --git a/apps/marketing/src/pages/api/work-history.json.ts b/apps/marketing/src/pages/api/work-history.json.ts
new file mode 100644
index 0000000..8d433dc
--- /dev/null
+++ b/apps/marketing/src/pages/api/work-history.json.ts
@@ -0,0 +1,77 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/require-param-description */
+
+import type { Database } from '@/database.types'
+import type { SupabaseClient } from '@supabase/supabase-js'
+import type { APIContext } from 'astro'
+
+import { supabase } from '@/supabase'
+
+type Resumes = Database['public']['Tables']['resumes']['Row']
+/**
+ *
+ * @param supabase
+ */
+async function fetchWorkHistoryData(
+ supabase: SupabaseClient,
+): Promise {
+ const response = await supabase
+ .from('resumes')
+ .select('*, status,title,label,image,email,phone,url,summary,work,skills')
+ .eq('title', 'Bryan Funk')
+ .eq('status', 'published')
+
+ if (response.error) {
+ console.error(response.error)
+ return null
+ }
+
+ return response.data as Resumes[]
+}
+
+/**
+ * Handle GET request.
+ * @param root0
+ * @param root0.params
+ * @param context
+ * @returns The response object.
+ */
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+
+ const { supabase: SupabaseClient } = supabaseResult
+ try {
+ const WorkHistory = await fetchWorkHistoryData(
+ SupabaseClient as SupabaseClient,
+ )
+ if (!WorkHistory || WorkHistory.length === 0) {
+ console.error('Data is empty or undefined')
+ return new Response(JSON.stringify({ error: 'No data found.' }), {
+ status: 404,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ return new Response(
+ JSON.stringify({
+ WorkHistory,
+ status: 200,
+ }),
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ },
+ )
+ } catch (error) {
+ console.error('Error fetching changelog data:', error)
+ return new Response(JSON.stringify({ error: 'Internal Server Error.' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+}
diff --git a/apps/marketing/src/pages/auth/callback.ts b/apps/marketing/src/pages/auth/callback.ts
new file mode 100644
index 0000000..9a1a3f3
--- /dev/null
+++ b/apps/marketing/src/pages/auth/callback.ts
@@ -0,0 +1,33 @@
+import type { APIRoute } from 'astro'
+
+import { GET as getSupabaseClient } from '@/supabase'
+
+export const GET: APIRoute = async (context) => {
+ const supabaseResponse = await getSupabaseClient(context)
+ const authCode = context.url.searchParams.get('code')
+
+ if (!authCode) {
+ return new Response('No code provided', { status: 400 })
+ }
+
+ const { data, error } =
+ await supabaseResponse.supabase.auth.exchangeCodeForSession(authCode)
+
+ if (error) {
+ return new Response(error.message, { status: 500 })
+ }
+
+ const { access_token, refresh_token } = data.session
+
+ context.cookies.set('sb-access-token', access_token, {
+ path: '/',
+ secure: true,
+ httpOnly: true,
+ })
+ context.cookies.set('sb-refresh-token', refresh_token, {
+ path: '/',
+ secure: true,
+ httpOnly: true,
+ })
+ return context.redirect('/dashboard')
+}
diff --git a/apps/marketing/src/pages/auth/confirm.ts b/apps/marketing/src/pages/auth/confirm.ts
new file mode 100644
index 0000000..1ce803d
--- /dev/null
+++ b/apps/marketing/src/pages/auth/confirm.ts
@@ -0,0 +1,41 @@
+import { createServerClient, parseCookieHeader } from '@supabase/ssr'
+import { type EmailOtpType } from '@supabase/supabase-js'
+import { type APIRoute } from 'astro'
+
+export const GET: APIRoute = async ({ request, cookies, redirect }) => {
+ const requestUrl = new URL(request.url)
+ const token_hash = requestUrl.searchParams.get('token_hash')
+ const type = requestUrl.searchParams.get('type') as EmailOtpType | null
+ const next = requestUrl.searchParams.get('next') ?? '/'
+
+ if (token_hash && type) {
+ const supabase = createServerClient(
+ import.meta.env.PUBLIC_SUPABASE_URL,
+ import.meta.env.PUBLIC_SUPABASE_ANON_KEY,
+ {
+ cookies: {
+ getAll() {
+ return parseCookieHeader(request.headers.get('Cookie') ?? '')
+ },
+ setAll(cookiesToSet) {
+ cookiesToSet.forEach(({ name, value, options }) => {
+ cookies.set(name, value, options)
+ })
+ },
+ },
+ },
+ )
+
+ const { error } = await supabase.auth.verifyOtp({
+ type,
+ token_hash,
+ })
+
+ if (!error) {
+ return redirect(next)
+ }
+ }
+
+ // return the user to an error page with some instructions
+ return redirect('/auth/auth-code-error')
+}
diff --git a/apps/marketing/src/pages/auth/login.ts b/apps/marketing/src/pages/auth/login.ts
new file mode 100644
index 0000000..dc5a595
--- /dev/null
+++ b/apps/marketing/src/pages/auth/login.ts
@@ -0,0 +1,60 @@
+import type { Provider } from '@supabase/supabase-js'
+import type { APIRoute } from 'astro'
+
+import { GET as getSupabaseClient } from '@/supabase'
+
+export const POST: APIRoute = async (context) => {
+ const formData = await context.request.formData()
+ const email = formData.get('email')?.toString()
+ const password = formData.get('password')?.toString()
+ const provider = formData.get('provider')?.toString()
+
+ const supabaseResponse = await getSupabaseClient(context)
+
+ if (provider) {
+ const { data, error } =
+ await supabaseResponse.supabase.auth.signInWithOAuth({
+ provider: provider as Provider,
+ options: {
+ redirectTo:
+ import.meta.env['PUBLIC_VERCEL_ENV'] === 'development'
+ ? 'http://localhost:4321/auth/confirm'
+ : 'https://prodkt.cloud/auth/confirm',
+ },
+ })
+
+ if (error) {
+ return new Response(error.message, { status: 500 })
+ }
+
+ return context.redirect(data.url)
+ }
+
+ if (!email || !password) {
+ return new Response('Email and password are required', { status: 400 })
+ }
+
+ const { data, error } =
+ await supabaseResponse.supabase.auth.signInWithPassword({
+ email,
+ password,
+ })
+
+ if (error) {
+ return new Response(error.message, { status: 500 })
+ }
+
+ const { access_token, refresh_token } = data.session
+ context.cookies.set('sb-access-token', access_token, {
+ sameSite: 'strict',
+ path: '/',
+ secure: true,
+ })
+ context.cookies.set('sb-refresh-token', refresh_token, {
+ sameSite: 'strict',
+ path: '/',
+ secure: true,
+ })
+
+ return context.redirect('/dashboard')
+}
diff --git a/apps/marketing/src/pages/auth/register.ts b/apps/marketing/src/pages/auth/register.ts
new file mode 100644
index 0000000..1cbdb72
--- /dev/null
+++ b/apps/marketing/src/pages/auth/register.ts
@@ -0,0 +1,26 @@
+import type { APIRoute } from 'astro'
+
+import { GET as getSupabaseClient } from '@/supabase'
+
+export const POST: APIRoute = async (context) => {
+ const formData = await context.request.formData()
+ const email = formData.get('email')?.toString()
+ const password = formData.get('password')?.toString()
+
+ if (!email || !password) {
+ return new Response('Email and password are required', { status: 400 })
+ }
+
+ const { supabase } = await getSupabaseClient(context)
+
+ const { error } = await supabase.auth.signUp({
+ email,
+ password,
+ })
+
+ if (error) {
+ return new Response(error.message, { status: 500 })
+ }
+
+ return context.redirect('/login')
+}
diff --git a/apps/marketing/src/pages/auth/signout.ts b/apps/marketing/src/pages/auth/signout.ts
new file mode 100644
index 0000000..7a2241c
--- /dev/null
+++ b/apps/marketing/src/pages/auth/signout.ts
@@ -0,0 +1,11 @@
+import type { APIRoute } from 'astro'
+
+import { GET as getSupabaseClient } from '@/supabase'
+
+export const GET: APIRoute = async (context) => {
+ const initSupabase = await getSupabaseClient(context)
+ await initSupabase.supabase.auth.signOut({ scope: 'local' })
+ context.cookies.delete('sb-access-token', { path: '/' })
+ context.cookies.delete('sb-refresh-token', { path: '/' })
+ return context.redirect('/login')
+}
diff --git a/apps/marketing/src/pages/blog/[slug]/index.astro b/apps/marketing/src/pages/blog/[slug]/index.astro
index 6c49f0e..b6797ca 100644
--- a/apps/marketing/src/pages/blog/[slug]/index.astro
+++ b/apps/marketing/src/pages/blog/[slug]/index.astro
@@ -52,7 +52,7 @@ const blogCreated = data.blogData[0]?.date_created as string
const blogAlt = data.blogData[0]?.title as string
const blogContent = data.blogData[0]?.content_block
-const contentBlock = data.blogData[0]?.content_block
+const contentBlock = data.blogData[0]?.content_block ?? ''
// Load the content block into cheerio
// @ts-ignore
diff --git a/apps/marketing/src/pages/blog/[slug]/index.json.ts b/apps/marketing/src/pages/blog/[slug]/index.json.ts
index 055e8ab..da5ae21 100644
--- a/apps/marketing/src/pages/blog/[slug]/index.json.ts
+++ b/apps/marketing/src/pages/blog/[slug]/index.json.ts
@@ -1,38 +1,29 @@
-import type { Database } from '@/database.types'
import type { SupabaseClient } from '@supabase/supabase-js'
import type { APIContext } from 'astro'
-import { supabase } from '@/supabase'
+import { getSecret } from 'astro:env/server'
-const supabaseClient: SupabaseClient = supabase
-type Articles = Database['public']['Tables']['articles']['Row']
-type Authors = Database['public']['Tables']['authors']['Row']
-type Files = Database['public']['Tables']['directus_files']['Row']
+import { supabase } from '@/supabase'
-interface ArticlesWithRelations {
- id: Articles['id']
- status: Articles['status']
- sort: Articles['sort']
- date_created: Articles['date_created']
- date_updated: Articles['date_updated']
- title: Articles['title']
- excerpt: Articles['excerpt']
- slug: Articles['slug']
- author?:
- | (Pick & {
- avatar: Pick | null
- })
- | null
- image: Pick | null
-}
/**
*
* @param root0 The API context.
* @param root0.params The parameters object.
+ * @param context
* @returns The response object.
*/
-export async function GET({ params }: APIContext) {
- const { slug } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { slug } = context.params
if (typeof slug !== 'string') {
return new Response(
JSON.stringify({ error: 'Slug is required and must be a string.' }),
@@ -45,8 +36,9 @@ export async function GET({ params }: APIContext) {
)
}
+ const { supabase: SupabaseClient } = supabaseResult
try {
- const blogData = await fetchBlogData(supabaseClient, slug)
+ const blogData = await fetchBlogData(SupabaseClient, slug)
if (!blogData || blogData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -91,21 +83,32 @@ export async function GET({ params }: APIContext) {
async function fetchBlogData(
supabase: SupabaseClient,
slug: string,
-): Promise {
- const response = await supabase
+): Promise {
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // Start building the query
+ let query = supabase
.from('articles')
.select(
`
- *,slug,author(title,last_name,first_name,avatar(filename_disk)),image(filename_disk)
- )
- `,
+ *,slug,author(title,last_name,first_name,avatar(filename_disk)),image(filename_disk)
+ `,
)
- .neq('status', 'draft')
.eq('slug', slug)
- if (response.error === null && response.data !== null) {
- return response.data as unknown as ArticlesWithRelations[]
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
}
+
+ const response = await query
+
+ if (response.error === null) {
+ return response.data
+ }
+
console.error(response.error)
return null
}
diff --git a/apps/marketing/src/pages/blog/index.astro b/apps/marketing/src/pages/blog/index.astro
index 1be4489..b6b60a1 100644
--- a/apps/marketing/src/pages/blog/index.astro
+++ b/apps/marketing/src/pages/blog/index.astro
@@ -32,36 +32,43 @@ interface BlogData {
}[]
}
-const response = await GET()
+const response = await GET(Astro)
const data = (await response.json()) as BlogData
---
-
-
- {
- data ? (
- data.blogData.map((item: any) => (
-
- ))
- ) : (
-
Loading...
- )
- }
+
+
+
+ {
+ data ? (
+ data.blogData.map((item: any) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
diff --git a/apps/marketing/src/pages/blog/index.json.ts b/apps/marketing/src/pages/blog/index.json.ts
index c95e731..936e200 100644
--- a/apps/marketing/src/pages/blog/index.json.ts
+++ b/apps/marketing/src/pages/blog/index.json.ts
@@ -1,29 +1,12 @@
-import type { Database } from '@/database.types'
-import type { PostgrestResponse, SupabaseClient } from '@supabase/supabase-js'
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-param-description */
-import { supabase } from '@/supabase'
+import type { SupabaseClient } from '@supabase/supabase-js'
+import type { APIContext } from 'astro'
-type Articles = Database['public']['Tables']['articles']['Row']
-type Authors = Database['public']['Tables']['authors']['Row']
-type Files = Database['public']['Tables']['directus_files']['Row']
-
-interface ArticlesWithRelations {
- id: Articles['id']
- status: Articles['status']
- sort: Articles['sort']
- date_created: Articles['date_created']
- date_updated: Articles['date_updated']
- title: Articles['title']
- excerpt: Articles['excerpt']
- slug: Articles['slug']
- author?:
- | (Pick
& {
- avatar: Pick | null
- })
- | null
- image: Pick | null
-}
-const supabaseClient: SupabaseClient = supabase
+import { getSecret } from 'astro:env/server'
+
+import { supabase } from '@/supabase'
/**
* Fetch flow data from the database.
@@ -31,21 +14,36 @@ const supabaseClient: SupabaseClient = supabase
* @returns A promise that resolves to an array of Nodes or null.
*/
async function fetchBlogData(
- supabase: SupabaseClient,
-): Promise {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-expect-error
- const response: PostgrestResponse = await supabase
+ supabase: SupabaseClient,
+): Promise {
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ console.log('isDevMode:', isDevMode)
+
+ // Start building the query
+ let query = supabase
.from('articles')
.select(
- 'id,status,sort,date_created,date_updated,author(title,last_name,first_name,avatar(filename_disk)),title,excerpt,slug,image(filename_disk)',
+ 'id, status, sort, date_created, date_updated, title, excerpt, slug, image!inner(id,filename_disk), author!inner(id,title, first_name, last_name, avatar!inner(id,filename_disk))',
)
- .neq('status', 'draft')
+
.order('date_created', { ascending: false })
- // Type guard to check if response.error exists
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ // console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
+
+ // Log the response to see what is returned
+ // console.log('Response received:', response)
+
+ // Check for errors
if (response.error) {
- console.error(response.error)
+ console.error('Error fetching articles:', response.error)
return null
}
@@ -54,12 +52,26 @@ async function fetchBlogData(
/**
* Handle GET request.
+ * @param context
* @returns The response object.
*/
-export async function GET() {
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+
+ const { supabase: SupabaseClient } = supabaseResult
+
try {
- const blogData = await fetchBlogData(supabaseClient)
- if (!blogData || blogData.length === 0) {
+ const blogData = await fetchBlogData(SupabaseClient)
+ if (!blogData) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
status: 404,
diff --git a/apps/marketing/src/pages/changelog/index.astro b/apps/marketing/src/pages/changelog/index.astro
index 0e03379..b2f0a63 100644
--- a/apps/marketing/src/pages/changelog/index.astro
+++ b/apps/marketing/src/pages/changelog/index.astro
@@ -29,7 +29,7 @@ interface ChangelogData {
changelogData: Changelog[]
}
-const response = await GET()
+const response = await GET(Astro)
const data = (await response.json()) as ChangelogData
// Type guard to check if the value is an array of TagItem
@@ -78,108 +78,112 @@ const processTagsForItem = (item: Changelog): TagList => {
---
-
- {
- data ? (
- data.changelogData.map((item: any) => {
- const tagListData = processTagsForItem(item)
- return (
-
-
- {item.new ? (
-
- {item.new.map((item: any) => (
-
-
- {item.changeTo}
-
-
-
- ))}
-
- ) : null}
- {item.improvements ? (
-
- {item.improvements.map((improvement: any) => (
-
-
- {improvement.changeTo}
-
-
-
- ))}
-
- ) : null}
- {item.api ? (
-
- {item.api.map((item: any) => (
-
-
- {item.changeTo}
-
-
-
- ))}
-
- ) : null}
- {item.fixes ? (
-
- {item.fixes.map((fix: any) => (
-
-
- {fix.changeTo}
-
-
-
- ))}
-
- ) : null}
-
- )
- })
- ) : (
- Loading...
- )
- }
+
+
+ {
+ data ? (
+ data.changelogData.map((item: any) => {
+ const tagListData = processTagsForItem(item)
+ return (
+
+
+ {item.new ? (
+
+ {item.new.map((item: any) => (
+
+
+ {item.changeTo}
+
+
+
+ ))}
+
+ ) : null}
+ {item.improvements ? (
+
+ {item.improvements.map((improvement: any) => (
+
+
+ {improvement.changeTo}
+
+
+
+ ))}
+
+ ) : null}
+ {item.api ? (
+
+ {item.api.map((item: any) => (
+
+
+ {item.changeTo}
+
+
+
+ ))}
+
+ ) : null}
+ {item.fixes ? (
+
+ {item.fixes.map((fix: any) => (
+
+
+ {fix.changeTo}
+
+
+
+ ))}
+
+ ) : null}
+
+ )
+ })
+ ) : (
+
Loading...
+ )
+ }
+
- {
- data ? (
- data.groupedData.map((item: any) => (
-
- ))
- ) : (
-
Loading...
- )
- }
+
+
+
+ {
+ data ? (
+ data.groupedData.map((item: any) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
diff --git a/apps/marketing/src/pages/codeblocks/index.json.ts b/apps/marketing/src/pages/codeblocks/index.json.ts
index 0a05fc8..90a03e1 100644
--- a/apps/marketing/src/pages/codeblocks/index.json.ts
+++ b/apps/marketing/src/pages/codeblocks/index.json.ts
@@ -1,121 +1,158 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/require-param-description */
/* eslint-disable jsdoc/require-jsdoc */
import type { Database } from '@/database.types'
-import type { PostgrestResponse, SupabaseClient } from '@supabase/supabase-js'
+import type { SupabaseClient } from '@supabase/supabase-js'
+import type { APIContext } from 'astro'
-import { supabase } from '@/supabase'
+import { getSecret } from 'astro:env/server'
-type CodeblockThemes = Database['public']['Tables']['codeblocks_themes']['Row']
+import { supabase } from '@/supabase'
-async function fetchCodeblockData(
- supabase: SupabaseClient
,
- // biome-ignore lint/suspicious/noExplicitAny:
-): Promise {
- // biome-ignore lint/suspicious/noExplicitAny:
- const response: PostgrestResponse = await supabase
+// Function to fetch codeblock data
+/**
+ *
+ * @param supabase
+ */
+async function fetchCodeblockData(supabase: SupabaseClient) {
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // Build the query
+ let query = supabase
.from('codeblocks')
.select('id, title, slug, category(*), card_image(filename_disk)')
- .neq('status', 'draft')
+ .order('date_created', { ascending: false })
+
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
if (response.error) {
console.error('Error fetching codeblocks:', response.error)
return null
}
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- if (response.data) {
- // console.log('Fetched Codeblock data:', response.data) // Log the data
- return response.data
- }
-
- return null
+ return response.data
}
-async function fetchThemeData(
- supabase: SupabaseClient,
- // biome-ignore lint/suspicious/noExplicitAny:
-): Promise {
- // biome-ignore lint/suspicious/noExplicitAny:
- const response: PostgrestResponse = await supabase
+async function fetchThemeData(supabase: SupabaseClient) {
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // console.log('isDevMode:', isDevMode)
+
+ // Build the query
+ let query = supabase
.from('themes')
- .select('id, title, slug, build_template, logo(filename_disk), status')
- .neq('status', 'draft')
+ .select(
+ '*,logos!inner(logo_onDark!inner(filename_disk),logo!inner(filename_disk))',
+ )
+
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
if (response.error) {
console.error('Error fetching themes:', response.error)
return null
}
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- if (response.data) {
- // console.log('Fetched Theme data:', response.data) // Log the data
- return response.data
- }
-
- return null
+ return response.data
}
-async function fetchCodeblockThemeData(
- supabase: SupabaseClient,
-): Promise {
- const response: PostgrestResponse = await supabase
+async function fetchCodeblockThemeData(supabase: SupabaseClient) {
+ // console.log('isDevMode:', isDevMode)
+
+ // Build the query
+ const query = supabase
.from('codeblocks_themes')
.select('codeblocks_id, themes_id')
+ const response = await query
+
if (response.error) {
- console.error('Error fetching codeblocks_themes:', response.error)
+ console.error('Error fetching themes:', response.error)
return null
}
return response.data
}
-export async function GET() {
+// type Files = Database['public']['Tables']['codeblocks']['Row']
+type Codeblocks = Database['public']['Tables']['codeblocks']['Row']
+type CodeblockThemes = Database['public']['Tables']['codeblocks_themes']['Row']
+type Themes = Database['public']['Tables']['themes']['Row']
+
+interface GroupData {
+ id: Codeblocks['id'] | null
+ codeblockData: Codeblocks[] | null
+ themeData: Themes | null
+ codeblockThemeData: CodeblockThemes[] | null
+}
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
+
try {
- const codeblockData = await fetchCodeblockData(supabase)
- const themeData = await fetchThemeData(supabase)
- const codeblockThemeData = await fetchCodeblockThemeData(supabase)
+ const codeblockData = await fetchCodeblockData(
+ SupabaseClient as SupabaseClient,
+ )
+ const themeData = await fetchThemeData(
+ SupabaseClient as SupabaseClient,
+ )
+ const codeblockThemeData = await fetchCodeblockThemeData(
+ SupabaseClient as SupabaseClient,
+ )
if (!codeblockData || !themeData || !codeblockThemeData) {
- return new Response(JSON.stringify({ error: 'No data found.' }), {
- status: 404,
- headers: { 'Content-Type': 'application/json' },
- })
+ return new Response(
+ JSON.stringify({
+ error: 'No groupedData found.',
+ codeblockData,
+ themeData,
+ codeblockThemeData,
+ }),
+ {
+ status: 404,
+ headers: { 'Content-Type': 'application/json' },
+ },
+ )
}
-
- console.log('Mapping codeblocks to themes...')
-
+ // console.log('Mapping codeblocks to themes...')
// Manually map codeblocks to themes
const groupedData = codeblockData.map((codeblock) => {
const matchingThemes = codeblockThemeData
- .filter((ct) => {
- const isMatch = ct.codeblocks_id === codeblock.id
- if (isMatch) {
- console.log(
- `Found match for codeblock ID ${codeblock.id} with theme ID ${ct.themes_id}`,
- )
- }
- return isMatch
- })
- .map((ct) => {
- const theme = themeData.find((theme) => theme.id === ct.themes_id)
- if (theme) {
- console.log(`Theme found for theme ID ${ct.themes_id}:`, theme)
- } else {
- console.warn(`No theme found for theme ID ${ct.themes_id}`)
- }
- return theme
- })
+ .filter((ct) => ct.codeblocks_id === codeblock.id)
+ .map((ct) =>
+ themeData.find(
+ (theme: GroupData['themeData']) => theme?.id === ct.themes_id,
+ ),
+ )
return {
...codeblock,
themes: matchingThemes.filter(Boolean), // Filter out undefined if no match
}
})
-
- // console.log('Final grouped data:', groupedData)
+ // console.log(JSON.stringify(groupedData, null, 3))
return new Response(
JSON.stringify({
diff --git a/apps/marketing/src/pages/dashboard.astro b/apps/marketing/src/pages/dashboard.astro
new file mode 100644
index 0000000..b9e0764
--- /dev/null
+++ b/apps/marketing/src/pages/dashboard.astro
@@ -0,0 +1,9 @@
+---
+import Layout from '@/layouts/PublicLayout.astro'
+---
+
+
+
+
Dashboard
+
+
diff --git a/apps/marketing/src/pages/docs/[pageSlug]/[groupSlug]/index.astro b/apps/marketing/src/pages/docs/[pageSlug]/[groupSlug]/index.astro
index b7908e4..df29925 100644
--- a/apps/marketing/src/pages/docs/[pageSlug]/[groupSlug]/index.astro
+++ b/apps/marketing/src/pages/docs/[pageSlug]/[groupSlug]/index.astro
@@ -51,48 +51,54 @@ const { groupData } = data
---
-
-
-
-
+
- {
- groupData.map((item, index) => (
-
- {item.block?.map((block, contentIndex) => (
-
- ))}
-
- ))
- }
-
-
-
-
+
+
+
+
-
-
-
+
-
- {
- data.docData.map((item, index) => (
- <>
-
-
{item?.title}
-
-
- ))
- }
-
-
-
+
+
+
+
+
+
+
+
+ {
+ data.docData.map((item) => (
+ <>
+
+ {item?.title}
+
+
+ ))
+ }
+
+
+
+
+
-
- {
- sortedPages.length > 0 ? (
- sortedPages.map((item: DocumentationPage) => (
-
- | undefined
- }
- alt='test'
- link={`/docs/${item.slug}`}
- title={item.title || 'Untitled'}
- excerpt={item.title || 'No description available'}
- date={formatDate(item.date_created) || 'Date not available'}
- />
- ))
- ) : (
- Loading...
- )
- }
+
+
+
+ {
+ sortedPages.length > 0 ? (
+ sortedPages.map((item: DocumentationPage) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
-
-
= supabase
interface Page {
slug: string
title: string
@@ -79,7 +79,10 @@ async function fetchDocumentationPages(
`
*,slug,
title,
- status
+ status,
+ image!inner(filename_disk),excerpt,
+ order_id,
+ sort
`,
)
.neq('status', 'draft')
@@ -96,11 +99,25 @@ async function fetchDocumentationPages(
* Handle GET request.
* @param root0
* @param root0.params
+ * @param context
* @returns The response object.
*/
-export async function GET() {
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
try {
- const documentationData = await fetchDocumentationData(supabaseClient)
+ const documentationData = await fetchDocumentationData(
+ SupabaseClient as SupabaseClient,
+ )
if (!documentationData || documentationData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -110,7 +127,9 @@ export async function GET() {
},
})
}
- const documentationPages = await fetchDocumentationPages(supabaseClient)
+ const documentationPages = await fetchDocumentationPages(
+ SupabaseClient as SupabaseClient,
+ )
if (!documentationPages) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
diff --git a/apps/marketing/src/pages/files/index.astro b/apps/marketing/src/pages/files/index.astro
index 9a4d0b9..3ee064e 100644
--- a/apps/marketing/src/pages/files/index.astro
+++ b/apps/marketing/src/pages/files/index.astro
@@ -8,82 +8,49 @@ import Layout from '@/layouts/PublicLayout.astro'
import PageHeader from '../../components/page-header.astro'
import { GET } from './index.json'
-const response = await GET()
+const response = await GET(Astro)
const data = (await response.json()) as any
---
-
-
- {
- data ? (
- data.fileData.map((item: any) => (
-
- ))
- ) : (
-
Loading...
- )
- }
+
+
+ {
+ data ? (
+ data.fileData.map((item: any) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
- {
- data ? (
- data.flowData.map((item: any) => (
-
- ))
- ) : (
-
Loading...
- )
- }
+
+
+
+ {
+ data ? (
+ data.flowData.map((item: any) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
diff --git a/apps/marketing/src/pages/flows/index.json.ts b/apps/marketing/src/pages/flows/index.json.ts
index e36143a..69cce39 100644
--- a/apps/marketing/src/pages/flows/index.json.ts
+++ b/apps/marketing/src/pages/flows/index.json.ts
@@ -1,12 +1,11 @@
import type { Database } from '@/database.types'
import type { PostgrestResponse, SupabaseClient } from '@supabase/supabase-js'
+import type { APIContext } from 'astro'
import { supabase } from '@/supabase'
type Nodes = Database['public']['Tables']['flows']['Row']
-const supabaseClient: SupabaseClient
= supabase
-
/**
* Fetch flow data from the database.
* @param supabase The Supabase client.
@@ -31,11 +30,25 @@ async function fetchFlowData(
/**
* Handle GET request.
+ * @param context
* @returns The response object.
*/
-export async function GET() {
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
try {
- const flowData = await fetchFlowData(supabaseClient)
+ const flowData = await fetchFlowData(
+ SupabaseClient as SupabaseClient,
+ )
if (!flowData || flowData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index 2dc8957..004b04c 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -1,6 +1,7 @@
---
import { AboutProdkt } from '@prodkt/ui/prodkt-components/about-prodkt'
import { HeroHeader } from '@prodkt/ui/prodkt-components/hero-header'
+import FeatureSection1 from '@prodkt/ui/prodkt-components/prodkt-features'
import Layout from '@/layouts/PublicLayout.astro'
---
@@ -17,12 +18,15 @@ import Layout from '@/layouts/PublicLayout.astro'
>
-
+
+
+
+
diff --git a/apps/marketing/src/pages/login.astro b/apps/marketing/src/pages/login.astro
new file mode 100644
index 0000000..b5ffc79
--- /dev/null
+++ b/apps/marketing/src/pages/login.astro
@@ -0,0 +1,8 @@
+---
+import { LoginSection } from '@/components/login'
+import Layout from '@/layouts/PublicLayout.astro'
+---
+
+
+
+
diff --git a/apps/marketing/src/pages/projects/[projectSlug]/[workSlug]/index.json.ts b/apps/marketing/src/pages/projects/[projectSlug]/[workSlug]/index.json.ts
index c243622..7e3ea86 100644
--- a/apps/marketing/src/pages/projects/[projectSlug]/[workSlug]/index.json.ts
+++ b/apps/marketing/src/pages/projects/[projectSlug]/[workSlug]/index.json.ts
@@ -1,23 +1,32 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-param-description */
+/* eslint-disable jsdoc/check-param-names */
+
import type { Database } from '@/database.types'
import type { SupabaseClient } from '@supabase/supabase-js'
import type { APIContext } from 'astro'
+import { getSecret } from 'astro:env/server'
+
import { supabase } from '@/supabase'
-const supabaseClient: SupabaseClient = supabase
type Work = Database['public']['Tables']['work']['Row']
type Technology = Database['public']['Tables']['work_technology']['Row']
type Template = Database['public']['Tables']['work_showcase_templates']['Row']
-type TemplateFiles =
- Database['public']['Tables']['showcase_templates_files']['Row']
+// type TemplateFiles =
+// Database['public']['Tables']['showcase_templates_files']['Row']
/**
*
* @param root0 The API context.
* @param root0.params The parameters object.
+ * @param context
* @returns The response object.
*/
-export async function GET({ params }: APIContext) {
- const { projectSlug, workSlug } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+
+ const { supabase: SupabaseClient } = supabaseResult
+ const { projectSlug, workSlug } = context.params
if (typeof workSlug !== 'string') {
return new Response(
@@ -31,7 +40,10 @@ export async function GET({ params }: APIContext) {
)
}
- const workData = await fetchWorkData(supabaseClient, workSlug)
+ const workData = await fetchWorkData(
+ SupabaseClient as SupabaseClient
,
+ workSlug,
+ )
if (!workData || workData.length === 0) {
console.error('Data is empty or undefined')
@@ -45,15 +57,24 @@ export async function GET({ params }: APIContext) {
const workId = workData[0]?.id
- const technologyData = await fetchTechnologyData(supabaseClient, workId)
- const templateData = await fetchTemplateData(supabaseClient, workId)
+ const technologyData = await fetchTechnologyData(
+ SupabaseClient as SupabaseClient,
+ workId,
+ )
+ const templateData = await fetchTemplateData(
+ SupabaseClient as SupabaseClient,
+ workId,
+ )
// Extract all templateIds from templateData
const templateIds =
templateData?.map((template) => template.showcase_templates_id) ?? []
// Fetch template files using the extracted templateIds
- const templateFiles = await fetchTemplateFiles(supabaseClient, templateIds)
+ const templateFiles = await fetchTemplateFiles(
+ SupabaseClient as SupabaseClient,
+ templateIds,
+ )
return new Response(
JSON.stringify({
@@ -82,20 +103,31 @@ async function fetchWorkData(
supabase: SupabaseClient,
workSlug: string,
): Promise {
- const response = await supabase
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // Start building the query
+ let query = supabase
.from('work')
.select(
`
- *,project(logo(filename_disk),name,slug),primary_image(filename_disk)
- )
- `,
+ *,project(logo(filename_disk),name,slug),primary_image(filename_disk)
+ `,
)
- .neq('status', 'draft')
.eq('slug', workSlug)
- if (response.error === null && response.data !== null) {
- return response.data as unknown as Work[]
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ // console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
+
+ if (response.error === null) {
+ return response.data
}
+
console.error(response.error)
return null
}
@@ -111,19 +143,31 @@ async function fetchTechnologyData(
supabase: SupabaseClient,
workId: string | undefined,
): Promise {
- const response = await supabase
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // Start building the query
+ let query = supabase
.from('work_technology')
.select(
`
- *,work_id,technology_id(name,logo(filename_disk))
- )
- `,
+ *,work_id,technology_id(name,logo(filename_disk))
+ `,
)
.eq('work_id', workId)
- if (response.error === null && response.data !== null) {
- return response.data as unknown as Technology[]
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
+
+ if (response.error === null) {
+ return response.data
}
+
console.error(response.error)
return null
}
@@ -138,19 +182,31 @@ async function fetchTemplateData(
supabase: SupabaseClient,
workId: string | undefined,
): Promise {
- const response = await supabase
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // Start building the query
+ let query = supabase
.from('work_showcase_templates')
.select(
`
- *
- )
- `,
+ *
+ `,
)
.eq('work_id', workId)
- if (response.error === null && response.data !== null) {
- return response.data as unknown as Template[]
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
+
+ if (response.error === null) {
+ return response.data
}
+
console.error(response.error)
return null
}
@@ -164,28 +220,33 @@ async function fetchTemplateData(
async function fetchTemplateFiles(
supabase: SupabaseClient,
templateIds: (string | null | undefined)[],
-): Promise {
- // Filter out null or undefined IDs
+): Promise {
const validTemplateIds = templateIds.filter((id): id is string => !!id)
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
- if (validTemplateIds.length === 0) {
- console.error('No valid templateIds provided')
- return null
- }
-
- const response = await supabase
+ // Start building the query
+ let query = supabase
.from('showcase_templates_files')
.select(
`
- template:showcase_templates_id(title,type),directus_files_id(filename_disk)
- )
- `,
+ template:showcase_templates_id(title,type),directus_files_id(filename_disk)
+ `,
)
.in('showcase_templates_id', validTemplateIds)
- if (response.error === null && response.data !== null) {
- return response.data as unknown as TemplateFiles[]
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
}
+
+ const response = await query
+
+ if (response.error === null) {
+ return response.data
+ }
+
console.error(response.error)
return null
}
diff --git a/apps/marketing/src/pages/projects/[projectSlug]/index.astro b/apps/marketing/src/pages/projects/[projectSlug]/index.astro
index 18f6886..c3132ca 100644
--- a/apps/marketing/src/pages/projects/[projectSlug]/index.astro
+++ b/apps/marketing/src/pages/projects/[projectSlug]/index.astro
@@ -13,21 +13,18 @@ import { GET } from './index.json'
type Roadmap = Database['public']['Tables']['roadmaps']['Row']
type Project = Database['public']['Tables']['projects']['Row']
type Files = Database['public']['Tables']['directus_files']['Row']
-type Issue = Database['public']['Tables']['issues']['Row']
-type Status = Database['public']['Tables']['status']['Row'] & { tasks: Issue[] } // Ensure Status includes tasks
-type Column = {
- id: string
- color: string
- label: string
- value: string
- tasks: Issue[]
+type Issue = Database['public']['Tables']['issues']['Row'] & {
+ status: Status
}
+type Status = Database['public']['Tables']['status']['Row'] & { tasks: Issue[] } // Ensure Status includes tasks
+
interface ProjectData {
projectSlug?: string
roadmapSlug?: string
roadmapData?: Roadmap[]
projectData: Project[]
issueData: Issue[]
+ tasks: Issue[]
projectListing: ProjectList[]
projectTitle: string | null
logo: Files['filename_disk']
@@ -38,36 +35,36 @@ interface ProjectData {
const response = await GET(Astro)
const data = (await response.json()) as ProjectData
-// Group tasks by their status label
-const columnsData = data.issueData.reduce>(
- (acc, task) => {
- const status = task.status // Ensure status is correctly typed
- // @ts-ignore
- const columnKey = status.label || 'Unknown' // Group by status label
-
- if (!acc[columnKey]) {
- acc[columnKey] = []
- }
+const issueData = data.issueData // Access your issue data from the data object
- acc[columnKey].push(task)
- return acc
- },
- {},
-)
+// Group issues by their status label
+const columnsData = issueData.reduce>((acc, issue) => {
+ const statusLabel = issue.status?.label ?? 'Unknown' // Use the status label for grouping, default to 'Unknown'
+ if (!acc[statusLabel]) {
+ acc[statusLabel] = []
+ }
+ acc[statusLabel].push(issue)
+ return acc
+}, {})
// Transform grouped tasks into the format for BoardColumn
-const columns: Column[] = Object.entries(columnsData).map(([label, tasks]) => {
- // @ts-ignore
- const exampleStatus = tasks[0]?.status as Status
-
+const columns = Object.entries(columnsData).map(([label, tasks]) => {
return {
- id: exampleStatus?.id || `unknown-${label}`,
- color: exampleStatus?.color || 'default-color',
- label: exampleStatus?.label || 'No Label',
- value: exampleStatus?.value || 'no-value',
+ id: tasks[0]?.status.id || `unknown-${label}`, // Use the first task's status id
+ color: tasks[0]?.status.color ?? 'default-color', // Use the first task's status color
+ label, // The label is the status label (e.g., "Backlog", "Todo")
tasks, // Pass the tasks to the column object
+ value: label,
}
})
+
+// Define the desired order of the columns
+const desiredOrder = ['Backlog', 'Todo', 'In Progress', 'Done']
+
+// Sort the columns based on the desired order
+const orderedColumns = columns.sort((a, b) => {
+ return desiredOrder.indexOf(a.value) - desiredOrder.indexOf(b.value)
+})
---
@@ -88,10 +85,10 @@ const columns: Column[] = Object.entries(columnsData).map(([label, tasks]) => {
client:only='react'
>
{
- columns.map((column) => (
+ orderedColumns.map((column) => (
diff --git a/apps/marketing/src/pages/projects/[projectSlug]/index.json.ts b/apps/marketing/src/pages/projects/[projectSlug]/index.json.ts
index c81de70..28ef359 100644
--- a/apps/marketing/src/pages/projects/[projectSlug]/index.json.ts
+++ b/apps/marketing/src/pages/projects/[projectSlug]/index.json.ts
@@ -4,17 +4,20 @@ import type { APIContext } from 'astro'
import { supabase } from '@/supabase'
-const supabaseClient: SupabaseClient = supabase
type Project = Database['public']['Tables']['projects']['Row']
type ProjectIssues = Database['public']['Tables']['issues']['Row']
/**
*
* @param root0 The API context.
* @param root0.params The parameters object.
+ * @param context
* @returns The response object.
*/
-export async function GET({ params }: APIContext) {
- const { projectSlug } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+
+ const { supabase: SupabaseClient } = supabaseResult
+ const { projectSlug } = context.params
if (typeof projectSlug !== 'string') {
return new Response(
@@ -28,7 +31,7 @@ export async function GET({ params }: APIContext) {
)
}
- const projectData = await fetchProjectData(supabaseClient, projectSlug)
+ const projectData = await fetchProjectData(SupabaseClient, projectSlug)
if (!projectData || projectData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -41,24 +44,13 @@ export async function GET({ params }: APIContext) {
const projectId = projectData[0]?.id
- // const roadmapData = await fetchRoadmapData(supabaseClient, projectId)
-
- const projectListing = await fetchAllProjects(supabaseClient)
- const issueData = await fetchIssueData(supabaseClient, projectId)
-
- // if (!roadmapData || roadmapData.length === 0) {
- // // console.error('Data is empty or undefined')
- // return new Response(JSON.stringify({ error: 'No data found.' }), {
- // status: 200,
- // headers: {
- // 'Content-Type': 'application/json',
- // },
- // })
- // }
+ const projectListing = await fetchAllProjects(SupabaseClient)
+ const issueData = await fetchIssueData(SupabaseClient, projectId)
return new Response(
JSON.stringify({
- params,
+ context,
+ projectSlug,
projectData,
issueData,
projectListing,
@@ -129,29 +121,6 @@ async function fetchIssueData(
return null
}
-/**
- *
- * @param supabase The Supabase client.
- * @param projectId The project ID.
- * @returns The flow data.
- */
-// async function fetchRoadmapData(
-// supabase: SupabaseClient,
-// projectId: string | undefined,
-// ): Promise {
-// const response = await supabase
-// .from('roadmaps')
-// .select('*,projects_id,slug,title,status')
-// .neq('status', 'draft')
-// .eq('projects_id', projectId)
-
-// if (response.error === null) {
-// return response.data as unknown as Roadmap[]
-// }
-// console.error(response.error)
-// return null
-// }
-
/**
*
* @param supabase The Supabase client.
diff --git a/apps/marketing/src/pages/projects/index.astro b/apps/marketing/src/pages/projects/index.astro
index 457f7d8..9abf487 100644
--- a/apps/marketing/src/pages/projects/index.astro
+++ b/apps/marketing/src/pages/projects/index.astro
@@ -16,37 +16,44 @@ interface ProjectData {
projectData: Project[]
}
-const response = await GET()
+const response = await GET(Astro)
const data = (await response.json()) as ProjectData
---
-
-
- {
- data ? (
- data.projectData.map((item: any) => (
-
- ))
- ) : (
-
Loading...
- )
- }
+
+
+
+ {
+ data ? (
+ data.projectData.map((item: any) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
diff --git a/apps/marketing/src/pages/projects/index.json.ts b/apps/marketing/src/pages/projects/index.json.ts
index 5b285a5..746b3e0 100644
--- a/apps/marketing/src/pages/projects/index.json.ts
+++ b/apps/marketing/src/pages/projects/index.json.ts
@@ -1,12 +1,13 @@
import type { Database } from '@/database.types'
-import type { PostgrestResponse, SupabaseClient } from '@supabase/supabase-js'
+import type { SupabaseClient } from '@supabase/supabase-js'
+import type { APIContext } from 'astro'
+
+import { getSecret } from 'astro:env/server'
import { supabase } from '@/supabase'
type Project = Database['public']['Tables']['projects']['Row']
-const supabaseClient: SupabaseClient
= supabase
-
/**
* Fetch flow data from the database.
* @param supabase The Supabase client.
@@ -15,16 +16,32 @@ const supabaseClient: SupabaseClient = supabase
async function fetchProjectData(
supabase: SupabaseClient,
): Promise {
- const response: PostgrestResponse = await supabase
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // console.log('isDevMode:', isDevMode)
+
+ // Start building the query
+ let query = supabase
.from('projects')
.select(
- '*,primary_image(filename_disk),slug,workspace(*),brand_color_primary',
+ '*,primary_image(filename_disk),slug,workspace(*),brand_color_primary,icon:logos!inner(logomark_backgroundFill!inner(filename_disk))',
)
- .neq('status', 'draft')
- // Type guard to check if response.error exists
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ // console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
+
+ // Log the response to see what is returned
+ // console.log('Response received:', response)
+
+ // Check for errors
if (response.error) {
- console.error(response.error)
+ console.error('Error fetching articles:', response.error)
return null
}
@@ -33,11 +50,25 @@ async function fetchProjectData(
/**
* Handle GET request.
+ * @param context
* @returns The response object.
*/
-export async function GET() {
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
try {
- const projectData = await fetchProjectData(supabaseClient)
+ const projectData = await fetchProjectData(
+ SupabaseClient as SupabaseClient,
+ )
if (!projectData || projectData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
diff --git a/apps/marketing/src/pages/repos/[namespace]/[path]/index.astro b/apps/marketing/src/pages/repos/[namespace]/[path]/index.astro
index dc16d6d..a83bd27 100644
--- a/apps/marketing/src/pages/repos/[namespace]/[path]/index.astro
+++ b/apps/marketing/src/pages/repos/[namespace]/[path]/index.astro
@@ -25,7 +25,9 @@ const data = (await response.json()) as RepoData
bullet3='Visuals'
bullet4='Concepts'
/>
-
+
{data.repo.repoData[0]?.title}
diff --git a/apps/marketing/src/pages/repos/[namespace]/[path]/index.json.ts b/apps/marketing/src/pages/repos/[namespace]/[path]/index.json.ts
index 1860083..8e67a22 100644
--- a/apps/marketing/src/pages/repos/[namespace]/[path]/index.json.ts
+++ b/apps/marketing/src/pages/repos/[namespace]/[path]/index.json.ts
@@ -6,19 +6,31 @@ import { supabase } from '@/supabase'
type Repos = Database['public']['Tables']['repos']['Row']
-const supabaseClient: SupabaseClient
= supabase
-
/**
*
* @param root0
* @param root0.params
+ * @param context
*/
-export async function GET({ params }: APIContext) {
- const { namespace, path } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
+ const { namespace, path } = context.params
try {
// Fetch all repos from Supabase
- const repoData = await fetchRepoData(supabaseClient)
+ const repoData = await fetchRepoData(
+ SupabaseClient as SupabaseClient,
+ )
if (!repoData || repoData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -42,7 +54,7 @@ export async function GET({ params }: APIContext) {
// Return the matched repo along with the GitLab data
return new Response(
JSON.stringify({
- params,
+ params: context.params,
repo: { gitLabRepo, repoData },
status: 200,
}),
diff --git a/apps/marketing/src/pages/repos/[namespace]/index.astro b/apps/marketing/src/pages/repos/[namespace]/index.astro
index 234e735..3aa6b70 100644
--- a/apps/marketing/src/pages/repos/[namespace]/index.astro
+++ b/apps/marketing/src/pages/repos/[namespace]/index.astro
@@ -26,7 +26,9 @@ const data = (await response.json()) as RepoData
bullet3='Visuals'
bullet4='Concepts'
/>
-
+
{
data ? (
data.repos.map((repo: any) => (
diff --git a/apps/marketing/src/pages/repos/[namespace]/index.json.ts b/apps/marketing/src/pages/repos/[namespace]/index.json.ts
index 2a9449e..0e382a9 100644
--- a/apps/marketing/src/pages/repos/[namespace]/index.json.ts
+++ b/apps/marketing/src/pages/repos/[namespace]/index.json.ts
@@ -1,3 +1,8 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/check-param-names */
+/* eslint-disable jsdoc/require-param-description */
+
import type { Database } from '@/database.types'
import type { PostgrestResponse, SupabaseClient } from '@supabase/supabase-js'
import type { APIContext } from 'astro'
@@ -6,18 +11,22 @@ import { supabase } from '@/supabase'
type Repos = Database['public']['Tables']['repos']['Row']
-const supabaseClient: SupabaseClient
= supabase
-
/**
*
* @param root0
* @param root0.params
+ * @param context
*/
-export async function GET({ params }: APIContext) {
- // const { namespace } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+
+ const { supabase: SupabaseClient } = supabaseResult
+ // const { namespace } = context.params
try {
- const repoData = await fetchRepoData(supabaseClient)
+ const repoData = await fetchRepoData(
+ SupabaseClient as SupabaseClient,
+ )
if (!repoData || repoData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -44,7 +53,7 @@ export async function GET({ params }: APIContext) {
return new Response(
JSON.stringify({
- params,
+ params: context.params,
repos,
status: 200,
}),
diff --git a/apps/marketing/src/pages/repos/index.astro b/apps/marketing/src/pages/repos/index.astro
index 0469225..23065ff 100644
--- a/apps/marketing/src/pages/repos/index.astro
+++ b/apps/marketing/src/pages/repos/index.astro
@@ -19,32 +19,39 @@ const data = (await response.json()) as RepoData
---
-
-
- {
- data ? (
- data.repos.map((repo: any) => (
-
- ))
- ) : (
-
Loading...
- )
- }
+
+
+
+ {
+ data ? (
+ data.repos.map((repo: any) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
diff --git a/apps/marketing/src/pages/repos/index.json.ts b/apps/marketing/src/pages/repos/index.json.ts
index 17fb9ca..98282a8 100644
--- a/apps/marketing/src/pages/repos/index.json.ts
+++ b/apps/marketing/src/pages/repos/index.json.ts
@@ -6,16 +6,28 @@ import { supabase } from '@/supabase'
type Repos = Database['public']['Tables']['repos']['Row']
-const supabaseClient: SupabaseClient
= supabase
-
/**
*
* @param root0
* @param root0.params
+ * @param context
*/
-export async function GET({ params }: APIContext) {
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
try {
- const repoData = await fetchRepoData(supabaseClient)
+ const repoData = await fetchRepoData(
+ SupabaseClient as SupabaseClient,
+ )
if (!repoData || repoData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -40,7 +52,7 @@ export async function GET({ params }: APIContext) {
}
})
- const { namespace } = params
+ const { namespace } = context.params
return new Response(
JSON.stringify({
diff --git a/apps/marketing/src/pages/signup.astro b/apps/marketing/src/pages/signup.astro
new file mode 100644
index 0000000..fb4c9e3
--- /dev/null
+++ b/apps/marketing/src/pages/signup.astro
@@ -0,0 +1,8 @@
+---
+import { RegisterSection } from '@/components/signup'
+import Layout from '@/layouts/PublicLayout.astro'
+---
+
+
+
+
diff --git a/apps/marketing/src/pages/work-history/index.astro b/apps/marketing/src/pages/work-history/index.astro
new file mode 100644
index 0000000..1ecc8ab
--- /dev/null
+++ b/apps/marketing/src/pages/work-history/index.astro
@@ -0,0 +1,13 @@
+---
+import { BryanFunkSection } from '@prodkt/ui/prodkt-components/about-bryan'
+
+import ResumeSection from '@/components/download-resume'
+import { WorkHistory } from '@/components/work-history'
+import Layout from '@/layouts/PublicLayout.astro'
+---
+
+
+
+
+
+
diff --git a/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.astro b/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.astro
index 608be82..9b9a86e 100644
--- a/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.astro
+++ b/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.astro
@@ -16,10 +16,6 @@ import Layout from '@/layouts/PublicLayout.astro'
import { GET } from './index.json'
-// type DiskFiles = {
-// filename_disk?: string
-// }
-
type TechnologyTypes = Database['public']['Tables']['technology']['Row'] & {
logo: {
filename_disk: string
@@ -34,338 +30,249 @@ type TechnologyTypes = Database['public']['Tables']['technology']['Row'] & {
// other properties...
id: string
name: string | undefined
- 'client:only'?: string // Optional if applicable
+ // 'client:only'?: string // Optional if applicable
}
id: string | undefined
name: string
}
}
-// interface LogoTypes {
-// date_created: string | null
-// date_updated: string | null
-// id: string
-// logo: TechnologyTypes['logo']
-// logo_onDark: TechnologyTypes['logo']
-// logomark: string | null
-// logomark_3dWireframe: string | null
-// logomark_3dWireframe_onDark: string | null
-// logomark_backgroundFill: string | null
-// logomark_backgroundFill_onDark: string | null
-// logomark_onDark: string | null
-// logotype: string | null
-// logotype_onDark: string | null
-// sort: number | null
-// title: string | null
-// user_created: string | null
-// user_updated: string | null
-// }
-
-// interface ProjectTypes {
-// base_type: string | null
-// base_type_sample: DiskFiles
-// brand_color_primary: string | null
-// code_type: string | null
-// code_type_sample: DiskFiles
-// component_animatedLogo_stroked: string | null
-// componentPath_animatedLogo_stroked: string | null
-// content_block: string | null
-// date_created: string | null
-// date_updated: string | null
-// excerpt: string | null
-// expressive_type: string | null
-// expressive_type_sample: DiskFiles
-// icon_radius: string | null
-// id: string
-// link_behance: string | null
-// link_dribbble: string | null
-// link_github: string | null
-// link_gitlab: string | null
-// link_instagram: string | null
-// logo: DiskFiles
-// logo_3d: DiskFiles
-// logo_creative: DiskFiles
-// logo_type: string | null
-// logo_type_sample: DiskFiles
-// logo_wireframe: DiskFiles
-// og_image: string | null
-// primary_image: string | null
-// public: boolean | null
-// slug: string
-// sort: number | null
-// status: string | null
-// title: string | null
-// user_created: string | null
-// user_updated: string | null
-// workspace: string | null
-// logos: LogoTypes
-// }
-// type Work = Database['public']['Tables']['work']['Row']
-// interface Project {
-// project: ProjectTypes
-// }
-// type TemplateFiles =
-// Database['public']['Tables']['showcase_templates_files']['Row']
-// // type WorkWithProjects = QueryData
-
-// interface WorkData {
-// projectSlug: string
-// workSlug: string
-// link_behance: ProjectTypes[]
-// link_dribbble: ProjectTypes[]
-// link_instagram: ProjectTypes[]
-// logos: ProjectTypes['logos']
-// workData: Work[] & Project[]
-// technologyData: TechnologyTypes[]
-// templateFiles: TemplateFiles
-// projectData: Project
-// ProjectDesignTokens: Token[]
-// is_brand_showcase?: boolean
-// }
-// ;[]
const response = await GET(Astro)
-const data = await response.json()
-const workWithProjects = data as unknown as any
-console.log(workWithProjects)
-const ProjectLogo =
- workWithProjects.workData[0]?.project?.logos.logo?.filename_disk
-const ProjectLogoOnDark =
- workWithProjects.workData[0]?.project?.logos.logo_onDark?.filename_disk
+// biome-ignore lint/suspicious/noExplicitAny:
+const workData = (await response.json()) as any
+
+// const ProjectLogo = workData.project?.logos?.logo.filename_disk
+// const ProjectLogoOnDark = workData.project?.logo_onDark?.filename_disk
// console.log(ProjectLogo)
-const link_behance = workWithProjects.workData[0]?.link_behance
-const link_dribbble = workWithProjects.workData[0]?.link_dribbble
-const link_instagram = workWithProjects.workData[0]?.link_instagram
+const link_behance = workData?.link_behance
+const link_dribbble = workData?.link_dribbble
+const link_instagram = workData?.link_instagram
-const brandingShowcase =
- workWithProjects.workData[0]?.is_brand_showcase === true
+const brandingShowcase = workData?.workData[0].is_brand_showcase === true
-const WorkProject = workWithProjects.workData[0]?.project.title
-// const ProjectLogo = workWithProjects.workData?.logo?.filename_disk
+const WorkProject = workData?.workData[0].project?.title
const ProjectLogoWireframe =
- workWithProjects.workData[0]?.project.logo_wireframe?.filename_disk
-const ProjectLogo3d =
- workWithProjects.workData[0]?.project.logo_3d?.filename_disk
+ workData?.workData[0].project?.logo_wireframe?.filename_disk
+const ProjectLogo3d = workData?.workData[0].project?.logo_3d?.filename_disk
const ProjectLogoCreative =
- workWithProjects.workData[0]?.project.logo_creative?.filename_disk
+ workData?.workData[0].project?.logo_creative?.filename_disk
const ProjectAnimatedLogo =
- workWithProjects.workData[0]?.project.component_animatedLogo_stroked
-const ProjectLogoType = workWithProjects.workData[0]?.project.logo_type
-const ProjectBaseType = workWithProjects.workData[0]?.project.base_type
-const ProjectExpressiveType =
- workWithProjects.workData[0]?.project.expressive_type
-const ProjectCodeType = workWithProjects.workData[0]?.project.code_type
+ workData?.workData[0].project?.component_animatedLogo_stroked
+const ProjectLogoType = workData?.workData[0].project?.logo_type
+const ProjectBaseType = workData?.workData[0].project?.base_type
+const ProjectExpressiveType = workData?.workData[0].project?.expressive_type
+const ProjectCodeType = workData?.workData[0].project?.code_type
const ProjectLogoTypeSample =
- workWithProjects.workData[0]?.project.logo_type_sample?.filename_disk
+ workData?.workData[0].project?.logo_type_sample?.filename_disk
const ProjectBaseTypeSample =
- workWithProjects.workData[0]?.project.base_type_sample?.filename_disk
+ workData?.workData[0].project?.base_type_sample?.filename_disk
const ProjectExpressiveTypeSample =
- workWithProjects.workData[0]?.project.expressive_type_sample?.filename_disk
+ workData?.workData[0].project?.expressive_type_sample?.filename_disk
const ProjectCodeTypeSample =
- workWithProjects.workData[0]?.project.code_type_sample?.filename_disk
+ workData?.workData[0].project?.code_type_sample?.filename_disk
---
-
- {
- brandingShowcase ? (
- <>
- {/* @ts-ignore */}
-
-
-
-
- ) : null
- }
- {
- workWithProjects.templateFiles && brandingShowcase === false ? (
- <>
- {/* @ts-ignore */}
-
-
- ) : null
- }
-
+
+
+ {
+ brandingShowcase ? (
+ <>
+ {/* @ts-ignore */}
+
+
+
+
+ ) : null
+ }
+ {
+ workData?.templateFiles && brandingShowcase === false ? (
+ <>
+ {/* @ts-ignore */}
+
+
+ ) : null
+ }
-
-
-
-
-
-
- {workWithProjects.workData[0]?.title}
-
-
-
-
-
- Technology
-
-
- {
- workWithProjects.technologyData.map(
- (techItem: TechnologyTypes) => {
- // const logo = techItem.technology_id?.logo
- // const logo = techItem.technology_id;
- if (techItem) {
- return (
-
- )
- } else {
- console.warn(
- 'Missing technology or logo in item:',
- techItem,
- )
- return null
- }
- },
- )
- }
+
+
+ {workData?.workData[0].title}
+
-
-
- {
- (link_behance ?? link_dribbble ?? link_instagram) ? (
- <>
-
- External Showcase
-
-
-
-
- {link_dribbble ? (
-
-
-
- ) : null}
- {link_behance ? (
-
-
-
- ) : null}
- {link_instagram ? (
-
-
-
- ) : null}
+
+
+
+
+ Technology
+
+
+ {
+ workData?.technologyData?.map(
+ (techItem: TechnologyTypes) => {
+ if (techItem) {
+ return (
+
+ )
+ } else {
+ console.warn(
+ 'Missing technology or logo in item:',
+ techItem,
+ )
+ return null
+ }
+ },
+ )
+ }
+
+
+
+ {
+ (link_behance ?? link_dribbble ?? link_instagram) ? (
+ <>
+
+ External Showcase
+
+
+
+
+ {link_dribbble ? (
+
+
+
+ ) : null}
+ {link_behance ? (
+
+
+
+ ) : null}
+ {link_instagram ? (
+
+
+
+ ) : null}
+
+
-
-
-
- ) : null
- }
-
-
-
+ ) : null
+ }
+
+
+
- Description
-
-
-
+
+ Description
+
+
+
+
diff --git a/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.json.ts b/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.json.ts
index 241997c..2a480f9 100644
--- a/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.json.ts
+++ b/apps/marketing/src/pages/work/[projectSlug]/[workSlug]/index.json.ts
@@ -1,27 +1,36 @@
+/* eslint-disable jsdoc/check-param-names */
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
/* eslint-disable jsdoc/require-param-description */
import type { Database } from '@/database.types'
-import type { QueryData, SupabaseClient } from '@supabase/supabase-js'
+import type { SupabaseClient } from '@supabase/supabase-js'
import type { APIContext } from 'astro'
-import { supabase } from '@/supabase'
+import { getSecret } from 'astro:env/server'
-// import { type WorkShowcaseProps } from '@/types.d'
+import { supabase } from '@/supabase'
-const supabaseClient: SupabaseClient = supabase
-type Work = Database['public']['Tables']['work']['Row']
-type Technology = Database['public']['Tables']['work_technology']['Row']
-type Template = Database['public']['Tables']['work_showcase_templates']['Row']
-type TemplateFiles =
- Database['public']['Tables']['showcase_templates_files']['Row']
/**
*
* @param root0 The API context.
* @param root0.params The parameters object.
+ * @param context
* @returns The response object.
*/
-export async function GET({ params }: APIContext) {
- const { projectSlug, workSlug } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
+ const { projectSlug, workSlug } = context.params
if (typeof workSlug !== 'string') {
return new Response(
@@ -35,7 +44,10 @@ export async function GET({ params }: APIContext) {
)
}
- const workData = await fetchWorkData(supabaseClient, workSlug)
+ const workData = await fetchWorkData(
+ SupabaseClient as SupabaseClient
,
+ workSlug,
+ )
if (!workData || workData.length === 0) {
console.error('Data is empty or undefined')
@@ -46,37 +58,32 @@ export async function GET({ params }: APIContext) {
},
})
}
-
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
const workId = workData[0]?.id
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const ProjectId = workData[0]?.project?.id
- // const tokenData = await fetchTokenData(supabaseClient)
- // if (!tokenData || tokenData.length === 0) {
- // console.error('Design Tokens are empty or undefined')
- // return new Response(JSON.stringify({ error: 'No design tokens found.' }), {
- // status: 404,
- // headers: {
- // 'Content-Type': 'application/json',
- // },
- // })
- // }
-
- const technologyData = await fetchTechnologyData(supabaseClient, workId)
- const templateData = await fetchTemplateData(supabaseClient, workId)
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+ const technologyData = await fetchTechnologyData(SupabaseClient, workId)
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+ const templateData = await fetchTemplateData(SupabaseClient, workId)
// Extract all templateIds from templateData
const templateIds =
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
templateData?.map((template) => template.showcase_templates_id) ?? []
// Fetch template files using the extracted templateIds
- const templateFiles = await fetchTemplateFiles(supabaseClient, templateIds)
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+ const templateFiles = await fetchTemplateFiles(SupabaseClient, templateIds)
- const { data: FilteredTokens, error: tokensError } = await supabase
- .from('projects_design_tokens')
- .select('projects_id,design_tokens_id!inner(*,id,title,palettes_json)')
- .eq('projects_id', ProjectId)
+ const { data: FilteredTokens, error: tokensError } =
+ await SupabaseClient.from('projects_design_tokens')
+ .select('projects_id,design_tokens_id!inner(*,id,title,palettes_json)')
+ .eq('projects_id', ProjectId)
// type ProjectDesignTokenTypes = QueryData['design_tokens_id'];
// type DesignTokenTypes = QueryData['palettes_json'];
@@ -86,7 +93,7 @@ export async function GET({ params }: APIContext) {
)
}
- console.log(FilteredTokens)
+ // console.log(FilteredTokens)
const ProjectDesignTokens = FilteredTokens.map(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -113,30 +120,44 @@ export async function GET({ params }: APIContext) {
/**
*
- * @param supabase The Supabase client.
- * @param workSlug The work slug.
- * @returns A promise that resolves to an array of work data or null.
+ * @param supabaseClient
+ * @param workSlug
*/
async function fetchWorkData(
- supabase: SupabaseClient,
+ supabaseClient: SupabaseClient,
workSlug: string,
-): Promise {
- const response = await supabase
+) {
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ let query = supabaseClient
.from('work')
.select(
`
- *,content_block,project(*,id,logos(logo(filename_disk),logo_onDark(filename_disk)),logo_3d(filename_disk),logo_wireframe(filename_disk),logo_creative(filename_disk),base_type,base_type_sample(filename_disk),code_type,code_type_sample(filename_disk),logo_type,logo_type_sample(filename_disk),expressive_type,expressive_type_sample(filename_disk))
- )
- `,
+*,content_block,project(*,id,logos(logo(filename_disk),logo_onDark(filename_disk)),logo_3d(filename_disk),logo_wireframe(filename_disk),logo_creative(filename_disk),base_type,base_type_sample(filename_disk),code_type,code_type_sample(filename_disk),logo_type,logo_type_sample(filename_disk),expressive_type,expressive_type_sample(filename_disk))
+)
+`,
)
- .neq('status', 'draft')
.eq('slug', workSlug)
- type WorkTypes = QueryData
- if (response.error === null) {
- return response.data as unknown as WorkTypes[]
+
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ // console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
}
- console.error(response.error)
- return null
+
+ const response = await query
+
+ // Log the response to see what is returned
+ // console.log('Response received:', response)
+
+ // Check for errors
+ if (response.error) {
+ console.error('Error fetching articles:', response.error)
+ return null
+ }
+
+ return response.data
}
/**
@@ -148,8 +169,8 @@ async function fetchWorkData(
*/
async function fetchTechnologyData(
supabase: SupabaseClient,
- workId: string | undefined,
-): Promise {
+ workId: string | null,
+) {
const response = await supabase
.from('work_technology')
.select(
@@ -159,10 +180,9 @@ async function fetchTechnologyData(
`,
)
.eq('work_id', workId)
- type TechnologyTypes = QueryData
if (response.error === null) {
- return response.data as TechnologyTypes[]
+ return response.data
}
console.error(response.error)
return null
@@ -177,7 +197,7 @@ async function fetchTechnologyData(
async function fetchTemplateData(
supabase: SupabaseClient,
workId: string | undefined,
-): Promise {
+) {
const response = await supabase
.from('work_showcase_templates')
.select(
@@ -187,10 +207,9 @@ async function fetchTemplateData(
`,
)
.eq('work_id', workId)
- type TemplateTypes = QueryData
if (response.error === null) {
- return response.data as unknown as TemplateTypes[]
+ return response.data
}
console.error(response.error)
return null
@@ -205,7 +224,7 @@ async function fetchTemplateData(
async function fetchTemplateFiles(
supabase: SupabaseClient,
templateIds: (string | null | undefined)[],
-): Promise {
+) {
// Filter out null or undefined IDs
const validTemplateIds = templateIds.filter((id): id is string => !!id)
@@ -223,43 +242,10 @@ async function fetchTemplateFiles(
`,
)
.in('showcase_templates_id', validTemplateIds)
- type TemplateFileTypes = QueryData
if (response.error === null) {
- return response.data as unknown as TemplateFileTypes[]
+ return response.data
}
console.error(response.error)
return null
}
-
-/* START DESIGN TOKENS */
-/**
- *
- * @param supabase
- */
-// async function fetchTokenData(supabase: SupabaseClient) {
-// const response = await supabase.from('design_tokens').select(`
-// *, title, palettes_json
-// `)
-// type TokenTypes = QueryData
-
-// if (response.error === null) {
-// return response.data as unknown as TokenTypes
-// } else {
-// console.error(response.error)
-// return null
-// }
-// }
-
-/**
- *
- * @param supabase
- */
-// async function useTokenData(supabase: SupabaseClient) {
-// const tokenData = await fetchTokenData(supabase)
-// if (tokenData) {
-// console.log(tokenData)
-// } else {
-// console.log('Failed to fetch token data')
-// }
-// }
diff --git a/apps/marketing/src/pages/work/[projectSlug]/index.json.ts b/apps/marketing/src/pages/work/[projectSlug]/index.json.ts
index 7024cff..2bfa736 100644
--- a/apps/marketing/src/pages/work/[projectSlug]/index.json.ts
+++ b/apps/marketing/src/pages/work/[projectSlug]/index.json.ts
@@ -4,17 +4,28 @@ import type { APIContext } from 'astro'
import { supabase } from '@/supabase'
-const supabaseClient: SupabaseClient = supabase
type Work = Database['public']['Tables']['work']['Row']
type Project = Database['public']['Tables']['projects']['Row']
/**
*
* @param root0 The API context.
* @param root0.params The parameters object.
+ * @param context
* @returns The response object.
*/
-export async function GET({ params }: APIContext) {
- const { projectSlug, workSlug } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+ const { supabase: SupabaseClient } = supabaseResult
+ const { projectSlug } = context.params
if (typeof projectSlug !== 'string') {
return new Response(
@@ -28,7 +39,7 @@ export async function GET({ params }: APIContext) {
)
}
- const projectData = await fetchProjectData(supabaseClient, projectSlug)
+ const projectData = await fetchProjectData(SupabaseClient, projectSlug)
if (!projectData || projectData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -41,7 +52,10 @@ export async function GET({ params }: APIContext) {
const projectId = projectData[0]?.id
- const workData = await fetchWorkData(supabaseClient, projectId)
+ const workData = await fetchWorkData(
+ SupabaseClient as SupabaseClient,
+ projectId,
+ )
if (!workData || workData.length === 0) {
console.error('Data is empty or undefined')
@@ -56,7 +70,6 @@ export async function GET({ params }: APIContext) {
return new Response(
JSON.stringify({
projectSlug,
- workSlug,
projectData,
workData,
status: 200,
diff --git a/apps/marketing/src/pages/work/index.astro b/apps/marketing/src/pages/work/index.astro
index d81abae..4e54163 100644
--- a/apps/marketing/src/pages/work/index.astro
+++ b/apps/marketing/src/pages/work/index.astro
@@ -19,37 +19,44 @@ interface WorkData {
projectData: Project[]
}
-const response = await GET()
+const response = await GET(Astro)
const data = (await response.json()) as WorkData
---
-
-
- {
- data ? (
- data.workData.map((item: any) => (
-
- ))
- ) : (
-
Loading...
- )
- }
+
+
+
+ {
+ data ? (
+ data.workData.map((item: any) => (
+
+ ))
+ ) : (
+
Loading...
+ )
+ }
+
diff --git a/apps/marketing/src/pages/work/index.json.ts b/apps/marketing/src/pages/work/index.json.ts
index 56b4ad5..5953b59 100644
--- a/apps/marketing/src/pages/work/index.json.ts
+++ b/apps/marketing/src/pages/work/index.json.ts
@@ -1,12 +1,13 @@
import type { Database } from '@/database.types'
-import type { PostgrestResponse, SupabaseClient } from '@supabase/supabase-js'
+import type { SupabaseClient } from '@supabase/supabase-js'
+import type { APIContext } from 'astro'
+
+import { getSecret } from 'astro:env/server'
import { supabase } from '@/supabase'
type Work = Database['public']['Tables']['work']['Row']
-const supabaseClient: SupabaseClient = supabase
-
/**
* Fetch flow data from the database.
* @param supabase The Supabase client.
@@ -14,18 +15,32 @@ const supabaseClient: SupabaseClient = supabase
* @returns A promise that resolves to an array of Nodes or null.
*/
async function fetchWorkData(supabase: SupabaseClient): Promise
{
- const response: PostgrestResponse = await supabase
- .from('work')
- .select(
- `
- *,primary_image(filename_disk),project(slug)
- `,
- )
- .neq('status', 'draft')
+ const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+ const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+ // console.log('isDevMode:', isDevMode)
+
+ // Start building the query
+ let query = supabase.from('work').select(
+ `
+ *,primary_image(filename_disk),project(slug)
+`,
+ )
+
+ // Conditionally apply the filter based on isDevMode
+ if (!isDevMode) {
+ // console.log('Excluding drafts from query.')
+ query = query.neq('status', 'draft')
+ }
+
+ const response = await query
- // Type guard to check if response.error exists
+ // Log the response to see what is returned
+ // console.log('Response received:', response)
+
+ // Check for errors
if (response.error) {
- console.error(response.error)
+ console.error('Error fetching articles:', response.error)
return null
}
@@ -34,11 +49,24 @@ async function fetchWorkData(supabase: SupabaseClient): Promise {
/**
* Handle GET request.
+ * @param context
* @returns The response object.
*/
-export async function GET() {
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+
+ const { supabase: SupabaseClient } = supabaseResult
try {
- const workData = await fetchWorkData(supabaseClient)
+ const workData = await fetchWorkData(SupabaseClient)
if (!workData || workData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
diff --git a/apps/marketing/src/pages/workspace/[slug]/index.json.ts b/apps/marketing/src/pages/workspace/[slug]/index.json.ts
index 9ebbceb..44d0d06 100644
--- a/apps/marketing/src/pages/workspace/[slug]/index.json.ts
+++ b/apps/marketing/src/pages/workspace/[slug]/index.json.ts
@@ -7,16 +7,28 @@ import type { APIContext } from 'astro'
import { supabase } from '@/supabase'
-const supabaseClient: SupabaseClient = supabase
type Workspace = Database['public']['Tables']['workspaces']['Row']
/**
*
* @param root0 The API context.
* @param root0.params The parameters object.
+ * @param context
* @returns The response object.
*/
-export async function GET({ params }: APIContext) {
- const { slug } = params
+export async function GET(context: APIContext) {
+ const supabaseResult = await supabase(context)
+ if (!supabaseResult?.supabase) {
+ console.error('Failed to initialize Supabase client')
+ return new Response(JSON.stringify({ error: 'Internal server error' }), {
+ status: 500,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ }
+
+ const { supabase: SupabaseClient } = supabaseResult
+ const { slug } = context.params
if (typeof slug !== 'string') {
return new Response(
@@ -30,7 +42,7 @@ export async function GET({ params }: APIContext) {
)
}
- const workspaceData = await fetchWorkspaceData(supabaseClient, slug)
+ const workspaceData = await fetchWorkspaceData(SupabaseClient, slug)
if (!workspaceData || workspaceData.length === 0) {
console.error('Data is empty or undefined')
return new Response(JSON.stringify({ error: 'No data found.' }), {
@@ -43,7 +55,7 @@ export async function GET({ params }: APIContext) {
return new Response(
JSON.stringify({
- params,
+ params: context.params,
workspaceData,
// roadmapData,
status: 200,
diff --git a/apps/marketing/src/styles/codeblock.scss b/apps/marketing/src/styles/codeblock.scss
index 4953e56..985aadb 100644
--- a/apps/marketing/src/styles/codeblock.scss
+++ b/apps/marketing/src/styles/codeblock.scss
@@ -46,101 +46,6 @@
--sp-syntax-color-string: #977cdc;
}
-/* :root {
- --sp-space-1: 4px;
- --sp-space-2: 8px;
- --sp-space-3: 12px;
- --sp-space-4: 16px;
- --sp-space-5: 20px;
- --sp-space-6: 24px;
- --sp-space-7: 28px;
- --sp-space-8: 32px;
- --sp-space-9: 36px;
- --sp-space-10: 40px;
- --sp-space-11: 44px;
- --sp-border-radius: 12px;
- --sp-layout-height: 300px;
- --sp-layout-headerHeight: 28px;
- --sp-transitions-default: 150ms ease;
- --sp-zIndices-base: 1;
- --sp-zIndices-overlay: 2;
- --sp-zIndices-top: 3;
- --sp-colors-surface1: var(--grayA1);
- --sp-colors-surface2: var(--grayA1);
- --sp-colors-surface3: var(--grayA1);
- --sp-colors-disabled: var(--grayA1);
- --sp-colors-base: var(--grayA1);
- --sp-colors-clickable: var(--gray7);
- --sp-colors-hover: var(--gray8);
- --sp-colors-accent: var(--gray10);
- --sp-colors-error: #FFB4A6;
- --sp-colors-errorSurface: #690000;
- --sp-colors-warning: #E7C400;
- --sp-colors-warningSurface: #3A3000;
- --sp-font-body: 'Labil Grotesk Variable';
- --sp-font-mono: 'IBM Plex Mono';
- --sp-font-size: 12px;
- --sp-font-lineHeight: 20px;
- --sp-syntax-color-plain: var(--gray10);
- --sp-syntax-color-comment: #757575;
- --sp-syntax-fontStyle-comment: italic;
- --sp-syntax-color-keyword: #77B7D7;
- --sp-syntax-color-tag: #DFAB5C;
- --sp-syntax-color-punctuation: var(--gray10);
- --sp-syntax-color-definition: #86D9CA;
- --sp-syntax-color-property: #77B7D7;
- --sp-syntax-color-static: #C64640;
- --sp-syntax-color-string: #977CDC;
-
-
- .dark, .dark-theme {
- --sp-space-1: 4px;
- --sp-space-2: 8px;
- --sp-space-3: 12px;
- --sp-space-4: 16px;
- --sp-space-5: 20px;
- --sp-space-6: 24px;
- --sp-space-7: 28px;
- --sp-space-8: 32px;
- --sp-space-9: 36px;
- --sp-space-10: 40px;
- --sp-space-11: 44px;
- --sp-border-radius: 12px;
- --sp-layout-height: 300px;
- --sp-layout-headerHeight: 28px;
- --sp-transitions-default: 150ms ease;
- --sp-zIndices-base: 1;
- --sp-zIndices-overlay: 2;
- --sp-zIndices-top: 3;
- --sp-colors-surface1: var(--grayA1);
- --sp-colors-surface2: var(--grayA1);
- --sp-colors-surface3: var(--grayA1);
- --sp-colors-disabled: var(--grayA1);
- --sp-colors-base: var(--grayA1);
- --sp-colors-clickable: var(--gray7);
- --sp-colors-hover: var(--gray8);
- --sp-colors-accent: var(--gray10);
- --sp-colors-error: #FFB4A6;
- --sp-colors-errorSurface: #690000;
- --sp-colors-warning: #E7C400;
- --sp-colors-warningSurface: #3A3000;
- --sp-font-body: 'Labil Grotesk Variable';
- --sp-font-mono: 'IBM Plex Mono';
- --sp-font-size: 12px;
- --sp-font-lineHeight: 20px;
- --sp-syntax-color-plain: var(--gray10);
- --sp-syntax-color-comment: #757575;
- --sp-syntax-fontStyle-comment: italic;
- --sp-syntax-color-keyword: #77B7D7;
- --sp-syntax-color-tag: #DFAB5C;
- --sp-syntax-color-punctuation: var(--gray10);
- --sp-syntax-color-definition: #86D9CA;
- --sp-syntax-color-property: #77B7D7;
- --sp-syntax-color-static: #C64640;
- --sp-syntax-color-string: #977CDC;
- }
-} */
-
@tailwind base;
@layer {
.prodkt-codeblock-wrapper,
@@ -170,15 +75,6 @@ a.prodkt-codepreview-actions {
max-height: calc(100dvh - 110px);
}
-/* sp-editor */
-// .prodkt-codeblock-editor,
-// .sp-editor {
-// --sp-layout-height: calc(100dvh - 32px - 57px - 16px);
-// overflow-y: auto;
-// @apply bg-transparent;
-// }
-/* sp-tabs */
-/* sp-tab */
.prodkt-codeblock-tab-button,
.sp-tab-button,
.prodkt-codeblock-tab-button,
@@ -188,7 +84,7 @@ a.prodkt-codepreview-actions {
aria-selected:prodkt-codeblock-tab-button,
aria-selected:sp-tab-button,
aria-selected:prodkt-codeblock-tab-button {
- @apply rounded-lg shadow-none border border-transparent outline-0 ring-0 border-none ring-transparent pt-1 pb-0.5 text-xs bg-transparent !important;
+ @apply shadow-none border border-transparent outline-0 ring-0 border-none ring-transparent pt-1 pb-0.5 text-xs bg-transparent !important;
min-height: auto !important;
padding-left: 12px !important;
padding-right: 12px !important;
@@ -205,9 +101,6 @@ aria-selected:prodkt-codeblock-tab-button {
.prodkt-codeblock-tab-button[data-active='true'],
data-active:prodkt-codeblock-tab-button,
.sp-tab-button .prodkt-codeblock-tab-button[data-active='true'] {
- /* @apply bg-transparent border-transparent ring-[var(--gray10)] !important; */
- // @apply bg-[var(--grayA4)] dark:bg-[var(--gray12)] !important;
- @apply rounded-lg !important;
@apply outline-none outline-0 aria-selected:border-none ring-0 border-none !important;
}
@@ -229,56 +122,17 @@ aria-selected:prodkt-codeblock-tab-container {
@apply border-none ring-0 outline-none !important;
@apply outline-none aria-selected:outline-none aria-selected:outline-[var(--grayA1)] aria-selected:ring-[var(--grayA1)] aria-selected:border-[var(--grayA1)] !important;
}
-/* cm-editor */
-// .prodkt-codemirror-editor {
-// --codeblocksPageHeight: calc(100dvh - 32px - 57px - 16px);
-// max-height: var(--codeblocksPageHeight);
-// width: 100%;
-// @apply bg-transparent;
-// }
-/* cm-scroller */
-// .prodkt-codemirror-scroller,
-// .cm-scroller {
-// --codeblocksPageHeight: calc(100dvh - 32px - 57px - 57px);
-// max-height: var(--codeblocksPageHeight);
-// width: 100%;
-// overflow-y: auto;
-// }
-/* sp-pre-placeholder */
+
.sp-pre-placeholder,
.prodkt-codeblock-pre-placeholder {
- // --codeblocksPageHeight: calc(100dvh - 32px - 57px);
width: 100%;
- // max-height: var(--codeblocksPageHeight);
@apply bg-transparent;
}
-// .cm-editor {
-// padding: 0 0 0 0 !important;
-// margin: 0 0 0 0 !important;
-// }
-/* cm-gutters */
.prodkt-codemirror-gutters,
.cm-gutters {
@apply pr-1 rounded-lg bg-transparent !important;
}
-.sp-tabs-scrollable-container,
-.prodkt-tabs-scrollable-container {
- // @apply pt-2 pb-2 !important;
- // @apply border-none border-transparent dark:border-transparent !important;
-}
-
-.sp-tabs,
-.prodkt-codeblock-tabs,
-.sp-tabs-scrollable-container,
-.prodkt-tabs-scrollable-container {
- // @apply h-auto !important;
- // min-height: auto !important;
- // @apply bg-transparent !important;
- // @apply text-xs !important;
-}
-/* cm-content */
-/* sp-read-only */
.prodkt-codeblock-read-only {
@apply bg-transparent;
}
@@ -346,10 +200,6 @@ div.cm-comment {
@apply text-xs !important;
}
-// .sp-syntax-definition {
-// @apply text-[var(--green-10)] dark:text-[var(--green-7)] !important;
-// }
-
.prodkt-codeblock-tabs {
@apply absolute px-1.5 pt-1 pb-1 top-0 bottom-auto mt-0 z-10 min-h-[48px] w-full flex flex-row items-center !justify-start !gap-0 !bg-[var(--gray1)] ring-inset ring-1 ring-[var(--grayA4)] text-xs overflow-hidden rounded-2xl border-none !border-b-0;
}
@@ -375,8 +225,9 @@ div.cm-comment {
padding: 0 0 0 0 !important;
margin: 0;
}
-.prodkt-codeblock-tab-container button {
- @apply bg-[var(--grayA1)] mx-0 mr-[-20px] text-[var(--gray12)] hover:text-[var(--accent11)] pl-3 pr-3 py-2 rounded-2xl border border-[var(--grayA3)] !important;
+.prodkt-codeblock-tab-container button,
+.prodkt-codeblock-tabs-scrollable-container button[data-active='false'] {
+ @apply bg-[var(--grayA1)] mx-0 mr-[-20px] text-[var(--gray12)] hover:text-[var(--accent11)] font-sans pl-3 pr-3 py-2 rounded-xl border border-[var(--grayA3)] !important;
}
.prodkt-codeblock-tabs-scrollable-container button[data-active='true'] {
@@ -384,7 +235,7 @@ div.cm-comment {
}
.prodkt-codeblock-tab-container button[data-active='true'] {
- @apply bg-[var(--gray5)] border border-[var(--grayA1)] ring-1 ring-[var(--gray6)] ring-inset dark:ring-[var(--gray6)] rounded-xl !important;
+ @apply bg-[var(--gray5)] border border-[var(--grayA1)] ring-1 ring-[var(--gray6)] ring-inset dark:ring-[var(--gray6)] !important;
}
.prodkt-codeblock-tabs-scrollable-container::-webkit-resizer {
@@ -426,19 +277,9 @@ div.cm-comment {
border-radius: 9999px;
}
-// .cm-focused {
-// top: 0px;
-// overflow: hidden;
-// bottom: 0;
-// height: 100%;
-// position: relative;
-// border: 0 solid transparent;
-// }
-
.prodkt-codeblock-editor {
@apply rounded-lg h-full shadow-none border border-transparent outline-0 ring-0 border-none ring-transparent pt-1 mb-0 pb-0 text-xs bg-transparent !important;
}
-// .sp-editor,
.sp-stack {
@apply flex flex-col h-full flex-nowrap border-none mt-auto mb-0 bottom-0 top-auto overflow-hidden;
}
diff --git a/apps/marketing/src/styles/flow-board.css b/apps/marketing/src/styles/flow-board.css
index 1e701fc..6ac648d 100644
--- a/apps/marketing/src/styles/flow-board.css
+++ b/apps/marketing/src/styles/flow-board.css
@@ -29,16 +29,11 @@
--controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
-.react-flow__attribution {
- visibility: hidden;
- display: none;
-}
/* The outermost container */
.react-flow {
}
/* The inner container */
.react-flow__renderer {
- @apply bg-gradient-to-br from-[var(--grayA1)] to-[var(--gray1)];
}
/* Zoom & pan pane */
.react-flow__zoompane {
@@ -55,18 +50,24 @@
/* Applied to each Edge in the flow */
.react-flow__edge {
}
-/* .selected Added to an Edge when selected */
-.react-flow__edge {
-}
-/* .animated Added to an Edge when its animated prop is true */
-.react-flow__edge {
-}
-/* .updating Added to an Edge while it gets updated via onReconnect */
-.react-flow__edge {
-}
+
/* The SVG element of an Edge */
.react-flow__edge-path {
- @apply stroke-[var(--grayA9)] stroke-1 ease-in-out;
+ stroke: url(#edge-gradient);
+ stroke-linecap: round;
+ stroke-width: 1.5;
+ stroke-dasharray: 1 3;
+ stroke-linejoin: round;
+ marker-end: none;
+}
+
+.react-flow__edge .react-flow__edge-path {
+ stroke-opacity: 0.75;
+}
+
+.react-flow__edgelabel-renderer button {
+ @apply size-6 flex items-center content-center place-content-center place-items-center pb-0.5 justify-center leading-[100%] rounded-full bg-radial-gradient from-[var(--grayA6)] backdrop-blur-[2px] to-[var(--grayA1)] text-lg text-[var(--ghost-a12)];
+ border: 0px solid transparent;
}
/* The SVG element of an Edge label */
.react-flow__edge-text {
@@ -76,6 +77,7 @@
}
/* Applied to the current connection line */
.react-flow__connection {
+ /* @apply bg-gradient-to-t from-[var(--gray12)] to-[var(--gray1)]; */
}
/* The SVG of a connection line */
.react-flow__connection-path {
@@ -85,7 +87,7 @@
}
/* Applied to each Node in the flow */
.react-flow__node {
- @apply bg-[var(--grayA4)] backdrop-blur border-[var(--grayA4)] rounded-2xl px-8 py-4;
+ @apply bg-[var(--gray1)] backdrop-blur border-[var(--grayA4)] rounded-2xl px-8 py-4;
@apply drop-shadow-2xl shadow-[var(--grayA2)];
& .selected {
@@ -93,7 +95,7 @@
}
/* .selected Added to a Node when selected. */
.react-flow__node {
- @apply after:bg-gradient-to-br after:from-[var(--grayA1)] after:to-[var(--grayA1)] after:blur-3xl after:w-full after:h-full after:top-0 after:bottom-0 after:left-0 after:right-0 after:z-[10] after:absolute;
+ @apply after:bg-gradient-to-br after:from-[var(--grayA1)] after:to-[var(--ghost-aa4)] after:blur-3xl after:w-full after:h-full after:top-0 after:bottom-0 after:left-0 after:right-0 after:z-[10] after:absolute;
}
/* Added when Node type is "default" */
.react-flow__node-default {
@@ -112,50 +114,53 @@
}
/* Applied to each component */
.react-flow__handle {
+ @apply size-4 bg-[var(--grayA9)] border border-[var(--grayA12)] rounded-full shadow-[var(--ghost-aa12)] shadow-xl ring-1 ring-inset ring-[var(--grayA9)];
+ @apply transition-all ease-in-out duration-500;
+}
+
+.react-flow__handle.source {
+ right: -20px;
+}
+
+.react-flow__handle.target {
+ left: -20px;
+}
+
+.react-flow__node:focus {
}
+
/* Applied when a handle's Position is set to "top" */
.react-flow__handle-top {
}
/* Applied when a handle's Position is set to "right" */
.react-flow__handle-right {
+ /* @apply right-[-12px]; */
}
/* Applied when a handle's Position is set to "bottom" */
.react-flow__handle-bottom {
}
/* Applied when a handle's Position is set to "left" */
.react-flow__handle-left {
+ /* @apply left-[-12px]; */
}
/* Added to a Handle when a connection line is above a handle. */
.connectingfrom {
+ @apply size-8 transition-all ease-in-out duration-1000;
}
/* Added to a Handle when a connection line is above a handle. */
.connectingto {
+ @apply size-8 transition-all ease-in-out duration-1000;
}
/* */
-.valid
- Added
- to
- a
- Handle
- when
- a
- connection
- line
- is
- above
- and
- the
- connection
- is
- valid {
+.valid {
}
/* Applied to the component */
.react-flow__background {
- @apply bg-[var(--gray2)];
+ @apply bg-gradient-to-br from-[var(--gray6)] to-[var(--gray5)] dark:from-[var(--gray2)] dark:to-[var(--gray1)];
}
/* Applied to the component */
.react-flow__minimap {
- @apply bg-[var(--grayA1)] rounded-2xl border overflow-clip backdrop-blur before:opacity-0 after:opacity-0;
+ @apply bg-[var(--ghost-aa7)] rounded-2xl border border-[var(--grayA3)] overflow-clip backdrop-blur before:opacity-0 after:opacity-0;
}
/* Applied to the component */
.react-flow__controls {
@@ -163,7 +168,12 @@
}
.react-flow__panel {
- @apply bg-[var(--grayA1)] backdrop-blur;
+ @apply bg-[var(--ghost-aa8)] dark:bg-[var(--grayA3)] ring-1 ring-[var(--grayA2)] backdrop-blur border-none;
+}
+
+.react-flow__attribution {
+ visibility: hidden;
+ display: none;
}
.react-flow__minimap::before {
diff --git a/apps/marketing/src/styles/globals.css b/apps/marketing/src/styles/globals.css
index 02a8679..24eb830 100644
--- a/apps/marketing/src/styles/globals.css
+++ b/apps/marketing/src/styles/globals.css
@@ -1,825 +1,31 @@
@import './codeblock.scss';
+/* @import '@prodkt/tailwind/color'; */
@import '@prodkt/tailwind/color';
+@import '@prodkt/tailwind/typography';
+@import '@prodkt/assets/fonts/index.css';
@import './flow-board.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-body[data-scroll-locked] {
- @apply !p-4;
-}
-
-[data-accent-color='amber'] {
- --accent1: var(--amber1);
- --accent2: var(--amber2);
- --accent3: var(--amber3);
- --accent4: var(--amber4);
- --accent5: var(--amber5);
- --accent6: var(--amber6);
- --accent7: var(--amber7);
- --accent8: var(--amber8);
- --accent9: var(--amber9);
- --accent10: var(--amber10);
- --accent11: var(--amber11);
- --accent12: var(--amber12);
- --accentA1: var(--amberA1);
- --accentA2: var(--amberA2);
- --accentA3: var(--amberA3);
- --accentA4: var(--amberA4);
- --accentA5: var(--amberA5);
- --accentA6: var(--amberA6);
- --accentA7: var(--amberA7);
- --accentA8: var(--amberA8);
- --accentA9: var(--amberA9);
- --accentA10: var(--amberA10);
- --accentA11: var(--amberA11);
- --accentA12: var(--amberA12);
-}
-[data-accent-color='blue'] {
- --accent1: var(--blue1);
- --accent2: var(--blue2);
- --accent3: var(--blue3);
- --accent4: var(--blue4);
- --accent5: var(--blue5);
- --accent6: var(--blue6);
- --accent7: var(--blue7);
- --accent8: var(--blue8);
- --accent9: var(--blue9);
- --accent10: var(--blue10);
- --accent11: var(--blue11);
- --accent12: var(--blue12);
- --accentA1: var(--blueA1);
- --accentA2: var(--blueA2);
- --accentA3: var(--blueA3);
- --accentA4: var(--blueA4);
- --accentA5: var(--blueA5);
- --accentA6: var(--blueA6);
- --accentA7: var(--blueA7);
- --accentA8: var(--blueA8);
- --accentA9: var(--blueA9);
- --accentA10: var(--blueA10);
- --accentA11: var(--blueA11);
- --accentA12: var(--blueA12);
-}
-[data-accent-color='bronze'] {
- --accent1: var(--bronze1);
- --accent2: var(--bronze2);
- --accent3: var(--bronze3);
- --accent4: var(--bronze4);
- --accent5: var(--bronze5);
- --accent6: var(--bronze6);
- --accent7: var(--bronze7);
- --accent8: var(--bronze8);
- --accent9: var(--bronze9);
- --accent10: var(--bronze10);
- --accent11: var(--bronze11);
- --accent12: var(--bronze12);
- --accentA1: var(--bronzeA1);
- --accentA2: var(--bronzeA2);
- --accentA3: var(--bronzeA3);
- --accentA4: var(--bronzeA4);
- --accentA5: var(--bronzeA5);
- --accentA6: var(--bronzeA6);
- --accentA7: var(--bronzeA7);
- --accentA8: var(--bronzeA8);
- --accentA9: var(--bronzeA9);
- --accentA10: var(--bronzeA10);
- --accentA11: var(--bronzeA11);
- --accentA12: var(--bronzeA12);
-}
-[data-accent-color='brown'] {
- --accent1: var(--brown1);
- --accent2: var(--brown2);
- --accent3: var(--brown3);
- --accent4: var(--brown4);
- --accent5: var(--brown5);
- --accent6: var(--brown6);
- --accent7: var(--brown7);
- --accent8: var(--brown8);
- --accent9: var(--brown9);
- --accent10: var(--brown10);
- --accent11: var(--brown11);
- --accent12: var(--brown12);
- --accentA1: var(--brownA1);
- --accentA2: var(--brownA2);
- --accentA3: var(--brownA3);
- --accentA4: var(--brownA4);
- --accentA5: var(--brownA5);
- --accentA6: var(--brownA6);
- --accentA7: var(--brownA7);
- --accentA8: var(--brownA8);
- --accentA9: var(--brownA9);
- --accentA10: var(--brownA10);
- --accentA11: var(--brownA11);
- --accentA12: var(--brownA12);
-}
-[data-accent-color='crimson'] {
- --accent1: var(--crimson1);
- --accent2: var(--crimson2);
- --accent3: var(--crimson3);
- --accent4: var(--crimson4);
- --accent5: var(--crimson5);
- --accent6: var(--crimson6);
- --accent7: var(--crimson7);
- --accent8: var(--crimson8);
- --accent9: var(--crimson9);
- --accent10: var(--crimson10);
- --accent11: var(--crimson11);
- --accent12: var(--crimson12);
- --accentA1: var(--crimsonA1);
- --accentA2: var(--crimsonA2);
- --accentA3: var(--crimsonA3);
- --accentA4: var(--crimsonA4);
- --accentA5: var(--crimsonA5);
- --accentA6: var(--crimsonA6);
- --accentA7: var(--crimsonA7);
- --accentA8: var(--crimsonA8);
- --accentA9: var(--crimsonA9);
- --accentA10: var(--crimsonA10);
- --accentA11: var(--crimsonA11);
- --accentA12: var(--crimsonA12);
-}
-[data-accent-color='cyan'] {
- --accent1: var(--cyan1);
- --accent2: var(--cyan2);
- --accent3: var(--cyan3);
- --accent4: var(--cyan4);
- --accent5: var(--cyan5);
- --accent6: var(--cyan6);
- --accent7: var(--cyan7);
- --accent8: var(--cyan8);
- --accent9: var(--cyan9);
- --accent10: var(--cyan10);
- --accent11: var(--cyan11);
- --accent12: var(--cyan12);
- --accentA1: var(--cyanA1);
- --accentA2: var(--cyanA2);
- --accentA3: var(--cyanA3);
- --accentA4: var(--cyanA4);
- --accentA5: var(--cyanA5);
- --accentA6: var(--cyanA6);
- --accentA7: var(--cyanA7);
- --accentA8: var(--cyanA8);
- --accentA9: var(--cyanA9);
- --accentA10: var(--cyanA10);
- --accentA11: var(--cyanA11);
- --accentA12: var(--cyanA12);
-}
-[data-accent-color='gold'] {
- --accent1: var(--gold1);
- --accent2: var(--gold2);
- --accent3: var(--gold3);
- --accent4: var(--gold4);
- --accent5: var(--gold5);
- --accent6: var(--gold6);
- --accent7: var(--gold7);
- --accent8: var(--gold8);
- --accent9: var(--gold9);
- --accent10: var(--gold10);
- --accent11: var(--gold11);
- --accent12: var(--gold12);
- --accentA1: var(--goldA1);
- --accentA2: var(--goldA2);
- --accentA3: var(--goldA3);
- --accentA4: var(--goldA4);
- --accentA5: var(--goldA5);
- --accentA6: var(--goldA6);
- --accentA7: var(--goldA7);
- --accentA8: var(--goldA8);
- --accentA9: var(--goldA9);
- --accentA10: var(--goldA10);
- --accentA11: var(--goldA11);
- --accentA12: var(--goldA12);
-}
-[data-accent-color='grass'] {
- --accent1: var(--grass1);
- --accent2: var(--grass2);
- --accent3: var(--grass3);
- --accent4: var(--grass4);
- --accent5: var(--grass5);
- --accent6: var(--grass6);
- --accent7: var(--grass7);
- --accent8: var(--grass8);
- --accent9: var(--grass9);
- --accent10: var(--grass10);
- --accent11: var(--grass11);
- --accent12: var(--grass12);
- --accentA1: var(--grassA1);
- --accentA2: var(--grassA2);
- --accentA3: var(--grassA3);
- --accentA4: var(--grassA4);
- --accentA5: var(--grassA5);
- --accentA6: var(--grassA6);
- --accentA7: var(--grassA7);
- --accentA8: var(--grassA8);
- --accentA9: var(--grassA9);
- --accentA10: var(--grassA10);
- --accentA11: var(--grassA11);
- --accentA12: var(--grassA12);
-}
-[data-accent-color='gray'] {
- --accent1: var(--gray1);
- --accent2: var(--gray2);
- --accent3: var(--gray3);
- --accent4: var(--gray4);
- --accent5: var(--gray5);
- --accent6: var(--gray6);
- --accent7: var(--gray7);
- --accent8: var(--gray8);
- --accent9: var(--gray9);
- --accent10: var(--gray10);
- --accent11: var(--gray11);
- --accent12: var(--gray12);
- --accentA1: var(--grayA1);
- --accentA2: var(--grayA2);
- --accentA3: var(--grayA3);
- --accentA4: var(--grayA4);
- --accentA5: var(--grayA5);
- --accentA6: var(--grayA6);
- --accentA7: var(--grayA7);
- --accentA8: var(--grayA8);
- --accentA9: var(--grayA9);
- --accentA10: var(--grayA10);
- --accentA11: var(--grayA11);
- --accentA12: var(--grayA12);
-}
-[data-accent-color='green'] {
- --accent1: var(--green1);
- --accent2: var(--green2);
- --accent3: var(--green3);
- --accent4: var(--green4);
- --accent5: var(--green5);
- --accent6: var(--green6);
- --accent7: var(--green7);
- --accent8: var(--green8);
- --accent9: var(--green9);
- --accent10: var(--green10);
- --accent11: var(--green11);
- --accent12: var(--green12);
- --accentA1: var(--greenA1);
- --accentA2: var(--greenA2);
- --accentA3: var(--greenA3);
- --accentA4: var(--greenA4);
- --accentA5: var(--greenA5);
- --accentA6: var(--greenA6);
- --accentA7: var(--greenA7);
- --accentA8: var(--greenA8);
- --accentA9: var(--greenA9);
- --accentA10: var(--greenA10);
- --accentA11: var(--greenA11);
- --accentA12: var(--greenA12);
-}
-[data-accent-color='indigo'] {
- --accent1: var(--indigo1);
- --accent2: var(--indigo2);
- --accent3: var(--indigo3);
- --accent4: var(--indigo4);
- --accent5: var(--indigo5);
- --accent6: var(--indigo6);
- --accent7: var(--indigo7);
- --accent8: var(--indigo8);
- --accent9: var(--indigo9);
- --accent10: var(--indigo10);
- --accent11: var(--indigo11);
- --accent12: var(--indigo12);
- --accentA1: var(--indigoA1);
- --accentA2: var(--indigoA2);
- --accentA3: var(--indigoA3);
- --accentA4: var(--indigoA4);
- --accentA5: var(--indigoA5);
- --accentA6: var(--indigoA6);
- --accentA7: var(--indigoA7);
- --accentA8: var(--indigoA8);
- --accentA9: var(--indigoA9);
- --accentA10: var(--indigoA10);
- --accentA11: var(--indigoA11);
- --accentA12: var(--indigoA12);
-}
-[data-accent-color='iris'] {
- --accent1: var(--iris1);
- --accent2: var(--iris2);
- --accent3: var(--iris3);
- --accent4: var(--iris4);
- --accent5: var(--iris5);
- --accent6: var(--iris6);
- --accent7: var(--iris7);
- --accent8: var(--iris8);
- --accent9: var(--iris9);
- --accent10: var(--iris10);
- --accent11: var(--iris11);
- --accent12: var(--iris12);
- --accentA1: var(--irisA1);
- --accentA2: var(--irisA2);
- --accentA3: var(--irisA3);
- --accentA4: var(--irisA4);
- --accentA5: var(--irisA5);
- --accentA6: var(--irisA6);
- --accentA7: var(--irisA7);
- --accentA8: var(--irisA8);
- --accentA9: var(--irisA9);
- --accentA10: var(--irisA10);
- --accentA11: var(--irisA11);
- --accentA12: var(--irisA12);
-}
-[data-accent-color='jade'] {
- --accent1: var(--jade1);
- --accent2: var(--jade2);
- --accent3: var(--jade3);
- --accent4: var(--jade4);
- --accent5: var(--jade5);
- --accent6: var(--jade6);
- --accent7: var(--jade7);
- --accent8: var(--jade8);
- --accent9: var(--jade9);
- --accent10: var(--jade10);
- --accent11: var(--jade11);
- --accent12: var(--jade12);
- --accentA1: var(--jadeA1);
- --accentA2: var(--jadeA2);
- --accentA3: var(--jadeA3);
- --accentA4: var(--jadeA4);
- --accentA5: var(--jadeA5);
- --accentA6: var(--jadeA6);
- --accentA7: var(--jadeA7);
- --accentA8: var(--jadeA8);
- --accentA9: var(--jadeA9);
- --accentA10: var(--jadeA10);
- --accentA11: var(--jadeA11);
- --accentA12: var(--jadeA12);
-}
-[data-accent-color='lime'] {
- --accent1: var(--lime1);
- --accent2: var(--lime2);
- --accent3: var(--lime3);
- --accent4: var(--lime4);
- --accent5: var(--lime5);
- --accent6: var(--lime6);
- --accent7: var(--lime7);
- --accent8: var(--lime8);
- --accent9: var(--lime9);
- --accent10: var(--lime10);
- --accent11: var(--lime11);
- --accent12: var(--lime12);
- --accentA1: var(--limeA1);
- --accentA2: var(--limeA2);
- --accentA3: var(--limeA3);
- --accentA4: var(--limeA4);
- --accentA5: var(--limeA5);
- --accentA6: var(--limeA6);
- --accentA7: var(--limeA7);
- --accentA8: var(--limeA8);
- --accentA9: var(--limeA9);
- --accentA10: var(--limeA10);
- --accentA11: var(--limeA11);
- --accentA12: var(--limeA12);
-}
-[data-accent-color='mint'] {
- --accent1: var(--mint1);
- --accent2: var(--mint2);
- --accent3: var(--mint3);
- --accent4: var(--mint4);
- --accent5: var(--mint5);
- --accent6: var(--mint6);
- --accent7: var(--mint7);
- --accent8: var(--mint8);
- --accent9: var(--mint9);
- --accent10: var(--mint10);
- --accent11: var(--mint11);
- --accent12: var(--mint12);
- --accentA1: var(--mintA1);
- --accentA2: var(--mintA2);
- --accentA3: var(--mintA3);
- --accentA4: var(--mintA4);
- --accentA5: var(--mintA5);
- --accentA6: var(--mintA6);
- --accentA7: var(--mintA7);
- --accentA8: var(--mintA8);
- --accentA9: var(--mintA9);
- --accentA10: var(--mintA10);
- --accentA11: var(--mintA11);
- --accentA12: var(--mintA12);
+body {
+ @apply transition-all duration-500 will-change-auto;
}
-[data-accent-color='orange'] {
- --accent1: var(--orange1);
- --accent2: var(--orange2);
- --accent3: var(--orange3);
- --accent4: var(--orange4);
- --accent5: var(--orange5);
- --accent6: var(--orange6);
- --accent7: var(--orange7);
- --accent8: var(--orange8);
- --accent9: var(--orange9);
- --accent10: var(--orange10);
- --accent11: var(--orange11);
- --accent12: var(--orange12);
- --accentA1: var(--orangeA1);
- --accentA2: var(--orangeA2);
- --accentA3: var(--orangeA3);
- --accentA4: var(--orangeA4);
- --accentA5: var(--orangeA5);
- --accentA6: var(--orangeA6);
- --accentA7: var(--orangeA7);
- --accentA8: var(--orangeA8);
- --accentA9: var(--orangeA9);
- --accentA10: var(--orangeA10);
- --accentA11: var(--orangeA11);
- --accentA12: var(--orangeA12);
-}
-[data-accent-color='pink'] {
- --accent1: var(--pink1);
- --accent2: var(--pink2);
- --accent3: var(--pink3);
- --accent4: var(--pink4);
- --accent5: var(--pink5);
- --accent6: var(--pink6);
- --accent7: var(--pink7);
- --accent8: var(--pink8);
- --accent9: var(--pink9);
- --accent10: var(--pink10);
- --accent11: var(--pink11);
- --accent12: var(--pink12);
- --accentA1: var(--pinkA1);
- --accentA2: var(--pinkA2);
- --accentA3: var(--pinkA3);
- --accentA4: var(--pinkA4);
- --accentA5: var(--pinkA5);
- --accentA6: var(--pinkA6);
- --accentA7: var(--pinkA7);
- --accentA8: var(--pinkA8);
- --accentA9: var(--pinkA9);
- --accentA10: var(--pinkA10);
- --accentA11: var(--pinkA11);
- --accentA12: var(--pinkA12);
-}
-[data-accent-color='plum'] {
- --accent1: var(--plum1);
- --accent2: var(--plum2);
- --accent3: var(--plum3);
- --accent4: var(--plum4);
- --accent5: var(--plum5);
- --accent6: var(--plum6);
- --accent7: var(--plum7);
- --accent8: var(--plum8);
- --accent9: var(--plum9);
- --accent10: var(--plum10);
- --accent11: var(--plum11);
- --accent12: var(--plum12);
- --accentA1: var(--plumA1);
- --accentA2: var(--plumA2);
- --accentA3: var(--plumA3);
- --accentA4: var(--plumA4);
- --accentA5: var(--plumA5);
- --accentA6: var(--plumA6);
- --accentA7: var(--plumA7);
- --accentA8: var(--plumA8);
- --accentA9: var(--plumA9);
- --accentA10: var(--plumA10);
- --accentA11: var(--plumA11);
- --accentA12: var(--plumA12);
-}
-[data-accent-color='purple'] {
- --accent1: var(--purple1);
- --accent2: var(--purple2);
- --accent3: var(--purple3);
- --accent4: var(--purple4);
- --accent5: var(--purple5);
- --accent6: var(--purple6);
- --accent7: var(--purple7);
- --accent8: var(--purple8);
- --accent9: var(--purple9);
- --accent10: var(--purple10);
- --accent11: var(--purple11);
- --accent12: var(--purple12);
- --accentA1: var(--purpleA1);
- --accentA2: var(--purpleA2);
- --accentA3: var(--purpleA3);
- --accentA4: var(--purpleA4);
- --accentA5: var(--purpleA5);
- --accentA6: var(--purpleA6);
- --accentA7: var(--purpleA7);
- --accentA8: var(--purpleA8);
- --accentA9: var(--purpleA9);
- --accentA10: var(--purpleA10);
- --accentA11: var(--purpleA11);
- --accentA12: var(--purpleA12);
-}
-[data-accent-color='red'] {
- --accent1: var(--red1);
- --accent2: var(--red2);
- --accent3: var(--red3);
- --accent4: var(--red4);
- --accent5: var(--red5);
- --accent6: var(--red6);
- --accent7: var(--red7);
- --accent8: var(--red8);
- --accent9: var(--red9);
- --accent10: var(--red10);
- --accent11: var(--red11);
- --accent12: var(--red12);
- --accentA1: var(--redA1);
- --accentA2: var(--redA2);
- --accentA3: var(--redA3);
- --accentA4: var(--redA4);
- --accentA5: var(--redA5);
- --accentA6: var(--redA6);
- --accentA7: var(--redA7);
- --accentA8: var(--redA8);
- --accentA9: var(--redA9);
- --accentA10: var(--redA10);
- --accentA11: var(--redA11);
- --accentA12: var(--redA12);
-}
-[data-accent-color='ruby'] {
- --accent1: var(--ruby1);
- --accent2: var(--ruby2);
- --accent3: var(--ruby3);
- --accent4: var(--ruby4);
- --accent5: var(--ruby5);
- --accent6: var(--ruby6);
- --accent7: var(--ruby7);
- --accent8: var(--ruby8);
- --accent9: var(--ruby9);
- --accent10: var(--ruby10);
- --accent11: var(--ruby11);
- --accent12: var(--ruby12);
- --accentA1: var(--rubyA1);
- --accentA2: var(--rubyA2);
- --accentA3: var(--rubyA3);
- --accentA4: var(--rubyA4);
- --accentA5: var(--rubyA5);
- --accentA6: var(--rubyA6);
- --accentA7: var(--rubyA7);
- --accentA8: var(--rubyA8);
- --accentA9: var(--rubyA9);
- --accentA10: var(--rubyA10);
- --accentA11: var(--rubyA11);
- --accentA12: var(--rubyA12);
-}
-[data-accent-color='sky'] {
- --accent1: var(--sky1);
- --accent2: var(--sky2);
- --accent3: var(--sky3);
- --accent4: var(--sky4);
- --accent5: var(--sky5);
- --accent6: var(--sky6);
- --accent7: var(--sky7);
- --accent8: var(--sky8);
- --accent9: var(--sky9);
- --accent10: var(--sky10);
- --accent11: var(--sky11);
- --accent12: var(--sky12);
- --accentA1: var(--skyA1);
- --accentA2: var(--skyA2);
- --accentA3: var(--skyA3);
- --accentA4: var(--skyA4);
- --accentA5: var(--skyA5);
- --accentA6: var(--skyA6);
- --accentA7: var(--skyA7);
- --accentA8: var(--skyA8);
- --accentA9: var(--skyA9);
- --accentA10: var(--skyA10);
- --accentA11: var(--skyA11);
- --accentA12: var(--skyA12);
-}
-[data-accent-color='teal'] {
- --accent1: var(--teal1);
- --accent2: var(--teal2);
- --accent3: var(--teal3);
- --accent4: var(--teal4);
- --accent5: var(--teal5);
- --accent6: var(--teal6);
- --accent7: var(--teal7);
- --accent8: var(--teal8);
- --accent9: var(--teal9);
- --accent10: var(--teal10);
- --accent11: var(--teal11);
- --accent12: var(--teal12);
- --accentA1: var(--tealA1);
- --accentA2: var(--tealA2);
- --accentA3: var(--tealA3);
- --accentA4: var(--tealA4);
- --accentA5: var(--tealA5);
- --accentA6: var(--tealA6);
- --accentA7: var(--tealA7);
- --accentA8: var(--tealA8);
- --accentA9: var(--tealA9);
- --accentA10: var(--tealA10);
- --accentA11: var(--tealA11);
- --accentA12: var(--tealA12);
-}
-[data-accent-color='tomato'] {
- --accent1: var(--tomato1);
- --accent2: var(--tomato2);
- --accent3: var(--tomato3);
- --accent4: var(--tomato4);
- --accent5: var(--tomato5);
- --accent6: var(--tomato6);
- --accent7: var(--tomato7);
- --accent8: var(--tomato8);
- --accent9: var(--tomato9);
- --accent10: var(--tomato10);
- --accent11: var(--tomato11);
- --accent12: var(--tomato12);
- --accentA1: var(--tomatoA1);
- --accentA2: var(--tomatoA2);
- --accentA3: var(--tomatoA3);
- --accentA4: var(--tomatoA4);
- --accentA5: var(--tomatoA5);
- --accentA6: var(--tomatoA6);
- --accentA7: var(--tomatoA7);
- --accentA8: var(--tomatoA8);
- --accentA9: var(--tomatoA9);
- --accentA10: var(--tomatoA10);
- --accentA11: var(--tomatoA11);
- --accentA12: var(--tomatoA12);
-}
-[data-accent-color='violet'] {
- --accent1: var(--violet1);
- --accent2: var(--violet2);
- --accent3: var(--violet3);
- --accent4: var(--violet4);
- --accent5: var(--violet5);
- --accent6: var(--violet6);
- --accent7: var(--violet7);
- --accent8: var(--violet8);
- --accent9: var(--violet9);
- --accent10: var(--violet10);
- --accent11: var(--violet11);
- --accent12: var(--violet12);
- --accentA1: var(--violetA1);
- --accentA2: var(--violetA2);
- --accentA3: var(--violetA3);
- --accentA4: var(--violetA4);
- --accentA5: var(--violetA5);
- --accentA6: var(--violetA6);
- --accentA7: var(--violetA7);
- --accentA8: var(--violetA8);
- --accentA9: var(--violetA9);
- --accentA10: var(--violetA10);
- --accentA11: var(--violetA11);
- --accentA12: var(--violetA12);
-}
-[data-accent-color='yellow'] {
- --accent1: var(--yellow1);
- --accent2: var(--yellow2);
- --accent3: var(--yellow3);
- --accent4: var(--yellow4);
- --accent5: var(--yellow5);
- --accent6: var(--yellow6);
- --accent7: var(--yellow7);
- --accent8: var(--yellow8);
- --accent9: var(--yellow9);
- --accent10: var(--yellow10);
- --accent11: var(--yellow11);
- --accent12: var(--yellow12);
- --accentA1: var(--yellowA1);
- --accentA2: var(--yellowA2);
- --accentA3: var(--yellowA3);
- --accentA4: var(--yellowA4);
- --accentA5: var(--yellowA5);
- --accentA6: var(--yellowA6);
- --accentA7: var(--yellowA7);
- --accentA8: var(--yellowA8);
- --accentA9: var(--yellowA9);
- --accentA10: var(--yellowA10);
- --accentA11: var(--yellowA11);
- --accentA12: var(--yellowA12);
-}
-[data-gray-color='mauve'],
-.radix-themes:where([data-gray-color='mauve']) {
- --gray-1: var(--mauve1);
- --gray-2: var(--mauve2);
- --gray-3: var(--mauve3);
- --gray-4: var(--mauve4);
- --gray-5: var(--mauve5);
- --gray-6: var(--mauve6);
- --gray-7: var(--mauve7);
- --gray-8: var(--mauve8);
- --gray-9: var(--mauve9);
- --gray-10: var(--mauve10);
- --gray-11: var(--mauve11);
- --gray-12: var(--mauve12);
- --grayA1: var(--mauveA1);
- --grayA2: var(--mauveA2);
- --grayA3: var(--mauveA3);
- --grayA4: var(--mauveA4);
- --grayA5: var(--mauveA5);
- --grayA6: var(--mauveA6);
- --grayA7: var(--mauveA7);
- --grayA8: var(--mauveA8);
- --grayA9: var(--mauveA9);
- --grayA10: var(--mauveA10);
- --grayA11: var(--mauveA11);
- --grayA12: var(--mauveA12);
-}
-[data-gray-color='olive'],
-.radix-themes:where([data-gray-color='olive']) {
- --gray-1: var(--olive1);
- --gray-2: var(--olive2);
- --gray-3: var(--olive3);
- --gray-4: var(--olive4);
- --gray-5: var(--olive5);
- --gray-6: var(--olive6);
- --gray-7: var(--olive7);
- --gray-8: var(--olive8);
- --gray-9: var(--olive9);
- --gray-10: var(--olive10);
- --gray-11: var(--olive11);
- --gray-12: var(--olive12);
- --grayA1: var(--oliveA1);
- --grayA2: var(--oliveA2);
- --grayA3: var(--oliveA3);
- --grayA4: var(--oliveA4);
- --grayA5: var(--oliveA5);
- --grayA6: var(--oliveA6);
- --grayA7: var(--oliveA7);
- --grayA8: var(--oliveA8);
- --grayA9: var(--oliveA9);
- --grayA10: var(--oliveA10);
- --grayA11: var(--oliveA11);
- --grayA12: var(--oliveA12);
+body[data-scroll-locked] {
+ @apply !p-4 transition-all duration-300 h-[calc(100dvh_-_32px)];
}
-[data-gray-color='sage'],
-.radix-themes:where([data-gray-color='sage']) {
- --gray-1: var(--sage1);
- --gray-2: var(--sage2);
- --gray-3: var(--sage3);
- --gray-4: var(--sage4);
- --gray-5: var(--sage5);
- --gray-6: var(--sage6);
- --gray-7: var(--sage7);
- --gray-8: var(--sage8);
- --gray-9: var(--sage9);
- --gray-10: var(--sage10);
- --gray-11: var(--sage11);
- --gray-12: var(--sage12);
- --grayA1: var(--sageA1);
- --grayA2: var(--sageA2);
- --grayA3: var(--sageA3);
- --grayA4: var(--sageA4);
- --grayA5: var(--sageA5);
- --grayA6: var(--sageA6);
- --grayA7: var(--sageA7);
- --grayA8: var(--sageA8);
- --grayA9: var(--sageA9);
- --grayA10: var(--sageA10);
- --grayA11: var(--sageA11);
- --grayA12: var(--sageA12);
+body[data-scroll-locked] .prodkt-provider {
+ @apply rounded-3xl transition-all duration-300 blur-sm sm:blur-none h-[calc(100dvh_-_32px)];
}
-[data-gray-color='sand'],
-.radix-themes:where([data-gray-color='sand']) {
- --gray-1: var(--sand1);
- --gray-2: var(--sand2);
- --gray-3: var(--sand3);
- --gray-4: var(--sand4);
- --gray-5: var(--sand5);
- --gray-6: var(--sand6);
- --gray-7: var(--sand7);
- --gray-8: var(--sand8);
- --gray-9: var(--sand9);
- --gray-10: var(--sand10);
- --gray-11: var(--sand11);
- --gray-12: var(--sand12);
- --grayA1: var(--sandA1);
- --grayA2: var(--sandA2);
- --grayA3: var(--sandA3);
- --grayA4: var(--sandA4);
- --grayA5: var(--sandA5);
- --grayA6: var(--sandA6);
- --grayA7: var(--sandA7);
- --grayA8: var(--sandA8);
- --grayA9: var(--sandA9);
- --grayA10: var(--sandA10);
- --grayA11: var(--sandA11);
- --grayA12: var(--sandA12);
+
+body[data-scroll-locked] div:has(.fixed, [role='dialog']),
+body[data-scroll-locked]
+ [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
+ @apply !inset-x-[16px] rounded-3xl bottom-[16px] overflow-hidden;
}
-[data-gray-color='slate'],
-.radix-themes:where([data-gray-color='slate']) {
- --gray-1: var(--slate1);
- --gray-2: var(--slate2);
- --gray-3: var(--slate3);
- --gray-4: var(--slate4);
- --gray-5: var(--slate5);
- --gray-6: var(--slate6);
- --gray-7: var(--slate7);
- --gray-8: var(--slate8);
- --gray-9: var(--slate9);
- --gray-10: var(--slate10);
- --gray-11: var(--slate11);
- --gray-12: var(--slate12);
- --grayA1: var(--slateA1);
- --grayA2: var(--slateA2);
- --grayA3: var(--slateA3);
- --grayA4: var(--slateA4);
- --grayA5: var(--slateA5);
- --grayA6: var(--slateA6);
- --grayA7: var(--slateA7);
- --grayA8: var(--slateA8);
- --grayA9: var(--slateA9);
- --grayA10: var(--slateA10);
- --grayA11: var(--slateA11);
- --grayA12: var(--slateA12);
+
+[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='closed'] {
+ @apply !inset-x-[16px] rounded-3xl bottom-[0px] overflow-hidden;
}
@layer base {
@@ -829,7 +35,7 @@ body[data-scroll-locked] {
html,
body {
- @apply bg-[var(--gray1)] text-foreground font-sans;
+ @apply text-foreground font-sans;
}
}
@@ -1011,6 +217,10 @@ body[data-scroll-locked] {
}
}
+.prodkt-blog-content a {
+ @apply text-[var(--accent10)] font-normal underline underline-offset-4 !important;
+}
+
.prodkt-changelog-accordion {
& h3 {
@apply !mb-0;
diff --git a/apps/marketing/src/supabase/index.tsx b/apps/marketing/src/supabase/index.tsx
index dd2a12b..85a18f2 100644
--- a/apps/marketing/src/supabase/index.tsx
+++ b/apps/marketing/src/supabase/index.tsx
@@ -1,6 +1,23 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable jsdoc/require-param-description */
+
+// import type { Database } from '@/database.types'
+// import type { CookieOptions } from '@supabase/ssr'
+
import type { Database } from '@/database.types'
-import type { SupabaseClientOptions } from '@supabase/supabase-js'
+import type {
+ ApiResponse,
+ ErrorProps,
+ FeedbackProps,
+ ProfileProps,
+ ProjectProps,
+} from '@/lib/types'
+import type { CookieOptions } from '@supabase/ssr'
+import type { SupabaseClient, UserMetadata } from '@supabase/supabase-js'
+import type { APIContext, AstroGlobal } from 'astro'
+import { createServerClient, parseCookieHeader } from '@supabase/ssr'
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL
@@ -10,28 +27,412 @@ if (!supabaseUrl || !supabaseAnonKey) {
throw new Error('Missing Supabase URL or Anonymous Key')
}
-const options: SupabaseClientOptions<'public'> = {
- db: {},
- auth: {
- flowType: 'pkce',
- autoRefreshToken: false,
- detectSessionInUrl: false,
- persistSession: true,
- },
- global: {
- headers: {
- 'x-prodkt-cloud': 'Prodkt from Bryan Funk',
- // cookies: {
- // get: (name: string) => string;
- // set: (name: string, value: string, options: Partial) => void;
- // remove: (name: string, options: Partial) => void;
- // };
+// const options: SupabaseClientOptions<'public'> = {
+// db: {},
+// auth: {
+// flowType: 'pkce',
+// autoRefreshToken: false,
+// detectSessionInUrl: false,
+// persistSession: true,
+// },
+// global: {
+// headers: {
+// 'x-prodkt-cloud': 'Prodkt from Bryan Funk',
+// // cookies: {
+// // get: (name: string) => string;
+// // set: (name: string, value: string, options: Partial) => void;
+// // remove: (name: string, options: Partial) => void;
+// // };
+// },
+// },
+// }
+
+export interface ClientCookiesConfig {
+ cookies: {
+ get?: (name: string) => string | undefined
+ set?: (name: string, value: string, options: CookieOptions) => void
+ remove?: (name: string, options: CookieOptions) => void
+ }
+}
+
+/**
+ *
+ * @param cookieStore
+ * @param operations
+ */
+function createCookiesConfig(
+ cookieStore: APIContext['cookies'],
+ operations: ('get' | 'set' | 'remove')[],
+): ClientCookiesConfig {
+ const config: ClientCookiesConfig = {
+ cookies: {},
+ }
+
+ operations.forEach((operation) => {
+ switch (operation) {
+ case 'get':
+ config.cookies.get = (name: string) => cookieStore.get(name)?.value
+ break
+ case 'set':
+ config.cookies.set = (
+ name: string,
+ value: string,
+ options: CookieOptions,
+ ) => {
+ cookieStore.set(name, value, options)
+ }
+ break
+ case 'remove':
+ config.cookies.remove = (name: string, options: CookieOptions) => {
+ cookieStore.set(name, '', { ...options })
+ }
+ break
+ default:
+ throw new Error(`Invalid operation: ${operation as string}`)
+ }
+ })
+
+ return config
+}
+
+/**
+ *
+ * @param context
+ * @param isPublic
+ */
+export async function GET(context: APIContext | AstroGlobal, isPublic = false) {
+ const headerStore = context.request.headers
+ const cookieStore = context.cookies
+ // let headerStore: Headers
+
+ // if (context?.request.headers) {
+ // // This covers both APIContext and AstroGlobal
+ // headerStore = context.request.headers
+ // cookieStore = context.cookies
+ // } else if (context?.url) {
+ // // This is likely an Astro.props context
+ // headerStore = context.request.headers
+ // cookieStore = context.cookies
+ // }
+
+ // If we can't get headers or cookies, we'll return early
+ // const assertedHeaderStore = headerStore;
+
+ const authHeader = headerStore.get('authorization')
+
+ const supabase = createServerClient(
+ import.meta.env.PUBLIC_SUPABASE_URL,
+ import.meta.env.PUBLIC_SUPABASE_ANON_KEY,
+ {
+ cookies: {
+ ...createCookiesConfig(cookieStore, ['get', 'set', 'remove']),
+ getAll() {
+ return parseCookieHeader(context.request.headers.get('Cookie') ?? '')
+ },
+ setAll(cookiesToSet) {
+ cookiesToSet.forEach(({ name, value, options }) => {
+ cookieStore.set(name, value, options)
+ })
+ },
+ },
+ auth: {
+ flowType: 'pkce',
+ autoRefreshToken: false,
+ detectSessionInUrl: false,
+ persistSession: true,
+ },
+ global: {
+ headers: {
+ lumkey: headerStore.get('lumkey') ?? '',
+ },
+ },
},
- },
+ )
+
+ // If auth header exists, validate api key
+ if (authHeader) {
+ // Get api key from auth header
+ const apiKey = authHeader.split(' ')[1]
+
+ // Fetch api key
+ const { data, error } = (await supabase
+ .from('project_api_keys')
+ .select('project_id, permission, creator:creator_id (*)')
+ .eq('token', apiKey)
+ .single()) as unknown as {
+ data: {
+ permission: 'full_access' | 'public_access'
+ creator: ProfileProps['Row']
+ project_id: string
+ }
+ error: ErrorProps
+ }
+
+ // If error is not null, then the api key is invalid
+ if (error.message) {
+ return {
+ supabase,
+ user: { data: null, error },
+ }
+ }
+
+ // TODO: Expand this further, also supporting public access for feedback etc.
+ if (data.permission === 'public_access' && !isPublic) {
+ return {
+ supabase,
+ user: {
+ data: null,
+ error: { message: 'unauthorized, missing permissions.', status: 403 },
+ },
+ }
+ }
+
+ return {
+ supabase,
+ user: { data: { user: data.creator }, error: null },
+ apiKey: data,
+ }
+ }
+
+ const user = await supabase.auth.getUser()
+
+ return { supabase, user, apiKey: null }
+}
+
+export const supabase = GET
+
+type WithProjectAuthHandler = (
+ user: UserMetadata | null,
+ supabase: SupabaseClient,
+ project: ProjectProps['Row'] | null,
+ error: ErrorProps | null,
+ allowPublic?: boolean,
+) => ApiResponse
+
+// withProjectAuth is a helper function that can be used to wrap API routes
+// Ensures that the user is logged in and is a member of the project with the given slug
+// allowAnonAccess = true bypasses complete user auth and project auth checks
+// requireLogin = true requires the user to be logged in, even if allowAnonAccess is true
+export const withProjectAuth = (handler: WithProjectAuthHandler) => {
+ return async (
+ context: APIContext,
+ slug: string,
+ allowAnonAccess = false,
+ requireLogin = true,
+ ) => {
+ // Get the user from the session
+ const result = await GET(context, allowAnonAccess)
+ const { supabase, user, apiKey } = result
+
+ // If user.error is not null, then the user is likely not logged in
+ if ((user.error !== null && requireLogin) || user.data === null) {
+ return handler(null, supabase as SupabaseClient, null, {
+ message:
+ user.error.message === 'invalid claim: missing sub claim'
+ ? 'unauthorized, login required.'
+ : user.error.message || 'Unauthorized',
+ status: user.error.status ?? 401,
+ })
+ }
+ const getSupabaseData = supabase as SupabaseClient
+ // Get project from database
+ const { data: project, error } = await getSupabaseData
+ .from('projects')
+ .select()
+ .eq('slug', slug)
+ .single()
+
+ // If error is not null, then the project does not exist
+ if (error) {
+ return handler(
+ user.data.user ?? null,
+ supabase as SupabaseClient,
+ project,
+ {
+ message: 'project not found.',
+ status: 404,
+ },
+ )
+ }
+
+ // If api key exists, check if the api key has access to the project
+ if (apiKey && apiKey.project_id !== project.id) {
+ return handler(
+ user.data.user,
+ supabase as SupabaseClient,
+ project as ProjectProps['Row'],
+ {
+ message: 'unauthorized, invalid api key.',
+ status: 401,
+ },
+ )
+ }
+
+ // Check if user is a member of the project
+ if (!allowAnonAccess) {
+ const { error: projectMemberError } = await getSupabaseData
+ .from('project_members')
+ .select()
+ .eq('project_id', project.id)
+ .eq('member_id', user.data.user?.id ?? '')
+ .single()
+
+ // If not null, user is not a member of the project and should not be able to access it
+ if (projectMemberError) {
+ return handler(
+ user.data.user ?? null,
+ supabase as SupabaseClient,
+ project as ProjectProps['Row'],
+ {
+ message: 'project not found.',
+ status: 404,
+ },
+ )
+ }
+ }
+
+ return handler(
+ user.data.user ?? null,
+ supabase as SupabaseClient,
+ project as ProjectProps['Row'],
+ null,
+ allowAnonAccess,
+ )
+ }
+}
+
+type WithFeedbackAuthHandler = (
+ user: UserMetadata | null,
+ supabase: SupabaseClient,
+ feedback: FeedbackProps['Row'] | null,
+ project: ProjectProps['Row'] | null,
+ error: ErrorProps | null,
+) => ApiResponse
+
+// withFeedbackAuth is a helper function that can be used to wrap API routes
+// Ensures that the user is logged in and is authorized to access the feedback post with the given id
+
+export const withFeedbackAuth = (handler: WithFeedbackAuthHandler) => {
+ return async (
+ id: string,
+ slug: string,
+ requireLogin = true,
+ context: APIContext,
+ allowAnonAccess = false,
+ ) => {
+ // Get the user from the session
+ const result = await GET(context, allowAnonAccess)
+ const { supabase, user } = result
+
+ // If user.error is not null, then the user is likely not logged in
+ if ((user.error !== null && requireLogin) || user.data === null) {
+ return handler(null, supabase as SupabaseClient, null, null, {
+ message:
+ user.error.message === 'invalid claim: missing sub claim'
+ ? 'unauthorized, login required.'
+ : 'An error occurred',
+ status: user.error.status ?? 401,
+ })
+ }
+
+ const getSupabaseData = supabase as SupabaseClient
+ // Get project from database
+ const { data: project, error } = await getSupabaseData
+ .from('projects')
+ .select()
+ .eq('slug', slug)
+ .single()
+
+ // If error is not null, then the project does not exist
+ if (error) {
+ return handler(
+ user.data.user ?? null,
+ supabase as SupabaseClient,
+ null,
+ project,
+ {
+ message: 'project not found.',
+ status: 404,
+ },
+ )
+ }
+
+ // Check if feedback exists
+ const { data: feedback, error: feedbackError } = await getSupabaseData
+ .from('feedback')
+ .select('*, user:user_id (*)')
+ .eq('id', id)
+ .eq('project_id', project.id)
+ .single()
+
+ // If not null, feedback does not exist
+ if (feedbackError) {
+ return handler(
+ user.data.user ?? null,
+ supabase as SupabaseClient,
+ null,
+ project as ProjectProps['Row'],
+ {
+ message: 'feedback not found.',
+ status: 404,
+ },
+ )
+ }
+
+ // Return feedback
+ return handler(
+ user.data.user ?? null,
+ supabase as SupabaseClient,
+ feedback as FeedbackProps['Row'],
+ project as ProjectProps['Row'],
+ null,
+ )
+ }
}
-const supabase = createClient(supabaseUrl, supabaseAnonKey, options)
+type WithUserAuthHandler = (
+ user: UserMetadata | null,
+ supabase: SupabaseClient,
+ error: ErrorProps | null,
+) => ApiResponse
+
+// withUserAuth is a helper function that can be used to wrap API routes
+// Ensures that the user is logged in
+export const withUserAuth = (handler: WithUserAuthHandler) => {
+ return async (context: APIContext, requireLogin = true) => {
+ // Get the user from the session
+ const result = await GET(context)
+ const { supabase, user } = result
+ // If user.error is not null, then the user is likely not logged in
+ if (user.error !== null && requireLogin) {
+ return handler(null, supabase as SupabaseClient, {
+ message:
+ user.error.message === 'invalid claim: missing sub claim'
+ ? 'unauthorized, login required.'
+ : user.error.message,
+ status: user.error.status ?? 401,
+ })
+ }
-// export const { data: getSession, error } = await supabase.auth.getSession()
+ return handler(
+ user.data?.user ?? null,
+ supabase as SupabaseClient,
+ null,
+ )
+ }
+}
-export { supabase }
+export const createClientSupabaseClient = () => {
+ return createClient(
+ import.meta.env.PUBLIC_SUPABASE_URL,
+ import.meta.env.PUBLIC_SUPABASE_ANON_KEY,
+ {
+ auth: {
+ storage: globalThis.localStorage,
+ autoRefreshToken: true,
+ persistSession: true,
+ detectSessionInUrl: true,
+ },
+ },
+ )
+}
diff --git a/apps/marketing/src/supabase/server.astro b/apps/marketing/src/supabase/server.astro
new file mode 100644
index 0000000..14f3c51
--- /dev/null
+++ b/apps/marketing/src/supabase/server.astro
@@ -0,0 +1,27 @@
+
diff --git a/apps/marketing/tsconfig.json b/apps/marketing/tsconfig.json
index 78897a7..750628e 100644
--- a/apps/marketing/tsconfig.json
+++ b/apps/marketing/tsconfig.json
@@ -1,10 +1,12 @@
{
"extends": ["astro/tsconfigs/strictest", "@prodkt/tsconfig/react.json"],
"compilerOptions": {
+ "jsx": "react-jsx",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@/supabase/*": ["src/supabase/*"]
}
- }
+ },
+ "exclude": ["public/posthog.js", "dist", "_*", "**/_*", "**/_*/**/*"]
}
diff --git a/apps/marketing/turbo.json b/apps/marketing/turbo.json
index 2682e4e..3a40263 100644
--- a/apps/marketing/turbo.json
+++ b/apps/marketing/turbo.json
@@ -9,25 +9,31 @@
"outputs": [".astro/**", "dist/**"],
"passThroughEnv": [
"PUBLIC_SUPABASE_URL",
+ "PUBLIC_VERCEL_ENV",
"PUBLIC_SUPABASE_ANON_KEY",
"PUBLIC_POSTHOG_KEY",
"PUBLIC_POSTHOG_HOST",
"PUBLIC_SENTRY_DSN",
"SENTRY_ORG",
"SENTRY_PROJECT",
- "SENTRY_AUTH_TOKEN"
+ "SENTRY_AUTH_TOKEN",
+ "TINYBIRD_API_URL",
+ "TINYBIRD_API_KEY"
]
},
"test:e2e": {
"passThroughEnv": [
"PUBLIC_SUPABASE_URL",
+ "PUBLIC_VERCEL_ENV",
"PUBLIC_SUPABASE_ANON_KEY",
"PUBLIC_POSTHOG_KEY",
"PUBLIC_POSTHOG_HOST",
"PUBLIC_SENTRY_DSN",
"SENTRY_ORG",
"SENTRY_PROJECT",
- "SENTRY_AUTH_TOKEN"
+ "SENTRY_AUTH_TOKEN",
+ "TINYBIRD_API_URL",
+ "TINYBIRD_API_KEY"
]
}
}
diff --git a/apps/web/package.json b/apps/web/package.json
index eea6a1b..ee60141 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,7 +7,7 @@
"author": "Bryan Funk",
"type": "module",
"scripts": {
- "build": "next build",
+ "build:temp": "next build",
"clean": "bun run rm -rf .next *.tsbuildinfo playwright-report test-results",
"dev": "next dev",
"lint": "eslint . --max-warnings 0",
@@ -22,9 +22,17 @@
"@prodkt/env": "workspace:*",
"@prodkt/ui": "workspace:*",
"@prodkt/utils": "workspace:*",
- "@sentry/nextjs": "^8.18.0",
+ "@sentry/nextjs": "^8.31.0",
"@t3-oss/env-nextjs": "^0.10.1",
"@tanstack/react-query": "^5.51.4",
+ "@tiptap/extension-character-count": "^2.1.12",
+ "@tiptap/extension-highlight": "^2.1.11",
+ "@tiptap/extension-link": "^2.2.4",
+ "@tiptap/extension-placeholder": "^2.1.11",
+ "@tiptap/extension-typography": "^2.1.11",
+ "@tiptap/pm": "^2.1.11",
+ "@tiptap/react": "^2.1.11",
+ "@tiptap/starter-kit": "^2.1.11",
"@total-typescript/ts-reset": "^0.5.1",
"@trpc/client": "next",
"@trpc/react-query": "next",
@@ -32,10 +40,10 @@
"@unkey/ratelimit": "^0.3.1",
"@uploadthing/react": "^6.7.2",
"geist": "^1.3.1",
- "next": "14.2.5",
+ "next": "14.2.13",
"next-themes": "^0.3.0",
- "posthog-js": "^1.148.0",
- "posthog-node": "^4.0.1",
+ "posthog-js": "^1.164.1",
+ "posthog-node": "^4.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"server-only": "^0.0.1",
@@ -49,12 +57,12 @@
"@prodkt/eslint": "workspace:*",
"@prodkt/tailwind": "workspace:*",
"@prodkt/tsconfig": "workspace:*",
- "@types/react": "^18.3.5",
+ "@types/react": "^18.3.8",
"@types/react-dom": "^18.3.0",
- "autoprefixer": "^10.4.19",
+ "autoprefixer": "^10.4.20",
"dotenv": "^16.4.5",
"jiti": "^1.21.6",
- "postcss": "^8.4.39",
- "tailwindcss": "^3.4.6"
+ "postcss": "^8.4.47",
+ "tailwindcss": "^3.4.13"
}
}
diff --git a/bun.lockb b/bun.lockb
old mode 100644
new mode 100755
index 915cd68..7c24d42
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/cspell.config.yaml b/cspell.config.yaml
index 7aaf35a..c3b0c7f 100644
--- a/cspell.config.yaml
+++ b/cspell.config.yaml
@@ -11,88 +11,174 @@ ignorePaths:
- drizzle
- '**/*.svg'
words:
+ - Aaiun
+ - Ababa
+ - abcdefghijklmopqrstuvwxyz
- acst
+ - actionables
+ - Adak
+ - Addis
- aest
- akst
+ - aliqua
+ - amet
+ - Amet
+ - Anadyr
- Anson
- apitoken
- - Concepting
+ - Aqtau
+ - Aqtobe
+ - Araguaina
+ - Asmera
- astro
- astrojs
+ - astrolib
+ - Atikokan
+ - Atka
+ - Atyrau
- autodocs
+ - automations
+ - Automations
- autoplay
+ - autoset
+ - AVATARBOX
- awst
- backgroun
- backgroundfill
+ - Baja
+ - Banderas
+ - Barthelemy
- basemaps
+ - Bator
- Beamer
- behance
- Bento
- Binni
+ - Blocke
+ - Blockquotes
+ - blueprintjs
- boxshadow
- branchname
+ - Branco
- bunx
+ - burndown
+ - burndowns
+ - Busingen
- bvaughn
- Byrom
- callees
- camdynn
- Camdynn
+ - Catamarca
+ - chartjs
+ - Choibalsan
+ - Chuuk
+ - Ciudad
- cjsx
- classname
- clsx
+ - cmax
- cmdk
+ - cmin
- codebl
- codefence
+ - codemark
- codemirror
- codepreview
- codesandbox
- codespace
- codespaces
+ - collab
- Colm
- colorwheel
+ - colwidth
+ - commitish
- commitlint
- commitlintrc
+ - Comod
+ - Comonent
- compat
+ - Concepting
- connectingfrom
- connectingto
+ - connectionindicator
- connectionline
+ - consequat
- Consolas
- consts
- Consulty
- coverflow
- cpath
+ - Creston
- crossorigin
+ - ÇŞĞIİÖÜA
- csvg
- ctsx
+ - Cuiaba
+ - customkeymap
+ - Dacca
+ - Danmarkshavn
+ - dashdraw
- datetime
- dbaeumer
+ - decos
- degit
+ - deserunt
- Designboise
+ - Dili
- directus
+ - doctag
- docummentation
- dotenv
+ - dotlottie
+ - downlaods
- dribbble
+ - dropcursor
- dropmenu
- dsznajder
- Duarte
+ - duis
+ - Dumont
+ - duplicable
- dwireframe
+ - edgelabel
+ - edgeupdater
+ - Efate
+ - Eirunepe
- Elsakaan
- Embla
+ - encapsulte
+ - Enderbury
+ - enim
+ - Ensenada
- esbenp
- eslintcache
+ - Eucla
- evenodd
+ - exitable
- explor
- Explor
- Extralight
+ - Fakaofo
+ - favorited
+ - FAVORITED
- Figtree
- filesize
- fkey
+ - flipbehavior
- floatingedges
- focusable
+ - fromnow
- frontmatter
+ - gantt
+ - Gantt
+ - gapcursor
+ - Gapcursor
+ - giest
- Gitbook
- Gloock
- googleanalytics
+ - gradia
- grotesk
- grouphover
- haspopup
@@ -100,51 +186,109 @@ words:
- hellsangels
- heroicons
- highlightjs
+ - hightlights
+ - hitbox
- hljs
- hookform
+ - Hovd
+ - Hoverable
+ - Hubspot
+ - HYWE
- ianvs
- Ideanote
+ - iefix
- Ifwg
+ - indexeddb
+ - Indexeddb
+ - Inuvik
+ - Issuefields
- jiti
- jscoverage
- jspm
+ - JTBD
+ - Jujuy
- Kanban
+ - Kanton
+ - keymap
+ - Keymap
+ - Khandyga
+ - Kiritimati
+ - Kitts
- kohler
+ - Kolkata
+ - Kosrae
+ - Kralendijk
+ - Kuala
- labil
+ - laquo
- Leveln
+ - Lindeman
- linecap
- linejoin
- Lnan
- lockb
- Logomark
+ - Longyearbyen
+ - lottiefiles
+ - lowlight
+ - Lowlight
- lucide
+ - lumkey
+ - Lumpur
+ - machine
+ - Magadan
+ - Mahe
- Malyavko
+ - Manaus
- mapbox
+ - marching
+ - Marigot
+ - Marino
+ - matching
+ - Mayen
+ - measurables
- Memoji
- Menlo
+ - MENUBOX
+ - Metlakatla
- microbundle
- mikestead
+ - Minh
- minimise
- Mintlify
- mjsx
+ - mollit
- monokai
- monorepoing
+ - Moresby
- mousewheel
- mtsx
+ - Murdo
- neonctl
- neondatabase
+ - Nera
- nesw
- Neue
- nextjs
+ - Nipigon
+ - nivo
+ - nocheck
- nodesselection
- nodrag
+ - noopener
- nopan
+ - noreferrer
+ - Noronha
+ - Norte
- Noto
- nowrap
- nums
+ - Nuuk
- nuxt
- nzst
- odzdpcvclydcqawdagdt
+ - officia
+ - Ojinaga
- ondark
- onwarn
- optimisations
@@ -153,14 +297,26 @@ words:
- packagejson
- pacocoursey
- pageview
+ - Pago
+ - Pandang
+ - Pangnirtung
- pannable
+ - passowrd
+ - pathline
- peduarte
+ - Pendo
- pids
- Pinterest
- pkce
+ - Planfoundry
+ - plutio
+ - Pohnpei
+ - popperjs
- Postgrest
- posthog
- posx
+ - powerlines
+ - Preconfigured
- preconnect
- prerender
- Presstek
@@ -168,29 +324,53 @@ words:
- prodkthero
- progressbar
- proptected
+ - prosemirror
+ - Prosemirror
- Psnhw
+ - Punta
+ - Qostanay
- quickstart
+ - Qyzylorda
+ - raquo
- Ratelimit
- reactflow
+ - reparent
- resizer
- revolutionvodka
- rgba
+ - Rica
+ - Rioja
- Ritalic
+ - Rivadavia
- Roadmaps
- rotatex
+ - Rothera
+ - rowspan
+ - Sablon
- sandpack
+ - Santarem
+ - Santo
+ - scatterplot
+ - Scoresbysund
- scroller
- Segoe
+ - selectednode
- selectionpane
+ - seperator
+ - servicemark
- shadcn
+ - Shiprock
- signin
+ - signup
- slidek
- sonner
- Squircle
- squoosh
- srcdoc
+ - Srednekolymsk
- sslmode
- Stabil
+ - Starke
- starterkit
- starterkits
- styledictionary
@@ -199,23 +379,37 @@ words:
- stylesheet
- subgrid
- subline
+ - sublist
+ - Sublist
- supabase
- superjson
- SVGR
- Swiper
+ - Syowa
- tada
- tailwindcss
- tamasfe
- tanstack
- textareas
- textbg
+ - textblock
+ - Textblock
- textnodes
+ - textwrapper
- Themeing
- thollander
- tiktok
+ - timebox
+ - timeboxed
+ - TINYBIRD
+ - tippyjs
+ - tiptap
+ - Tiptap
+ - Tiraspol
- todos
- tokensstudent
- tokentype
+ - Tongatapu
- topbar
- tovuti
- transitionall
@@ -227,30 +421,55 @@ words:
- tsconfigs
- tseslint
- tsup
+ - tubro
- Tuite
- turborepo
- typecheck
- typeof
- typesafe
+ - Ujung
+ - Ulaanbaatar
+ - Ulan
+ - ullamco
+ - unfavorited
+ - UNFAVORITED
- unifiedjs
- Uniforma
- unkey
+ - unstarted
+ - Unstarted
- uploadthing
+ - upvoted
- upvoters
- upvotes
- upvoting
+ - Urville
+ - Ushuaia
+ - uuidv
+ - Uzhgorod
- vaul
+ - Velho
+ - Velit
- vercel
+ - Vevay
- viewports
- vuepress
- waitlist
+ - webp
- wght
+ - Winamac
- wireframe
- wireframes
- WITA
- wscript
- xyflow
+ - Yada
+ - Yakutat
+ - Yancowinna
- yoav
+ - zipball
- zoomable
- zoompane
- ZUEP
+ - zustand
+ - zxcvbn
diff --git a/package.json b/package.json
index 74d26dd..9f193c4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
"workspaces": [
"apps/*",
"packages/*",
- "packages/config/*"
+ "packages/config/*",
+ "packages/editor/*"
],
"scripts": {
"commit": "git-cz",
@@ -43,7 +44,7 @@
}
},
"dependencies": {
- "supabase": "^1.192.5"
+ "supabase": "^1.200.3"
},
"devDependencies": {
"@changesets/cli": "^2.27.7",
@@ -56,8 +57,8 @@
"@prodkt/tsconfig": "workspace:*",
"@types/bun": "latest",
"@types/eslint": "^9.6.1",
- "@types/node": "^22.5.5",
- "@types/yargs": "^17.0.32",
+ "@types/node": "^22.6.1",
+ "@types/yargs": "^17.0.33",
"commitizen": "^4.3.0",
"cspell": "^8.11.0",
"eslint": "^9.7.0",
@@ -69,7 +70,7 @@
"prettier": "^3.3.3",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-packagejson": "^2.5.1",
- "turbo": "^2.0.7",
+ "turbo": "^2.1.3",
"typescript": "^5.5.4",
"yargs": "^17.7.2"
},
diff --git a/packages/assets/ampersand/ampersand-pattern.svg b/packages/assets/ampersand/ampersand-pattern.svg
new file mode 100644
index 0000000..b8f2cf9
--- /dev/null
+++ b/packages/assets/ampersand/ampersand-pattern.svg
@@ -0,0 +1,23 @@
+
diff --git a/packages/assets/ampersand/appCircles_lg_opt.avif b/packages/assets/ampersand/appCircles_lg_opt.avif
new file mode 100644
index 0000000..6e974b2
Binary files /dev/null and b/packages/assets/ampersand/appCircles_lg_opt.avif differ
diff --git a/packages/assets/ampersand/connectionLines.svg b/packages/assets/ampersand/connectionLines.svg
new file mode 100644
index 0000000..7517f93
--- /dev/null
+++ b/packages/assets/ampersand/connectionLines.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/assets/ampersand/figmaCircle1680w_md_opt.avif b/packages/assets/ampersand/figmaCircle1680w_md_opt.avif
new file mode 100644
index 0000000..bdc34b6
Binary files /dev/null and b/packages/assets/ampersand/figmaCircle1680w_md_opt.avif differ
diff --git a/packages/assets/ampersand/lockSwiper_md_opt.avif b/packages/assets/ampersand/lockSwiper_md_opt.avif
new file mode 100644
index 0000000..506cbaf
Binary files /dev/null and b/packages/assets/ampersand/lockSwiper_md_opt.avif differ
diff --git a/packages/assets/ampersand/logoOnlyMock_sm_opt.avif b/packages/assets/ampersand/logoOnlyMock_sm_opt.avif
new file mode 100644
index 0000000..a1e6261
Binary files /dev/null and b/packages/assets/ampersand/logoOnlyMock_sm_opt.avif differ
diff --git a/packages/assets/ampersand/menu-example.webp b/packages/assets/ampersand/menu-example.webp
new file mode 100644
index 0000000..972e4a5
Binary files /dev/null and b/packages/assets/ampersand/menu-example.webp differ
diff --git a/packages/assets/avatars/bryan-funk-portrait-xl.avif b/packages/assets/avatars/bryan-funk-portrait-xl.avif
new file mode 100644
index 0000000..19bc599
Binary files /dev/null and b/packages/assets/avatars/bryan-funk-portrait-xl.avif differ
diff --git a/packages/assets/bryan-funk/bryan-funk-portrait-xl.avif b/packages/assets/bryan-funk/bryan-funk-portrait-xl.avif
new file mode 100644
index 0000000..f4de095
Binary files /dev/null and b/packages/assets/bryan-funk/bryan-funk-portrait-xl.avif differ
diff --git a/packages/assets/features/radial1.svg b/packages/assets/features/radial1.svg
new file mode 100644
index 0000000..6f44686
--- /dev/null
+++ b/packages/assets/features/radial1.svg
@@ -0,0 +1,19 @@
+
diff --git a/packages/assets/features/radial2.svg b/packages/assets/features/radial2.svg
new file mode 100644
index 0000000..74eb850
--- /dev/null
+++ b/packages/assets/features/radial2.svg
@@ -0,0 +1,19 @@
+
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.eot b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.eot
new file mode 100644
index 0000000..08c07ed
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.eot differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.ttf b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.ttf
new file mode 100644
index 0000000..163426b
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.ttf differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.woff b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.woff
new file mode 100644
index 0000000..59e30a6
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.woff differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.woff2 b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.woff2
new file mode 100644
index 0000000..5d172f7
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Bold.woff2 differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.eot b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.eot
new file mode 100644
index 0000000..b4173a2
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.eot differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.ttf b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.ttf
new file mode 100644
index 0000000..fd6a66f
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.ttf differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.woff b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.woff
new file mode 100644
index 0000000..444f43e
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.woff differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.woff2 b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.woff2
new file mode 100644
index 0000000..9be909d
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Light.woff2 differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.eot b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.eot
new file mode 100644
index 0000000..ac9cf05
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.eot differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.ttf b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.ttf
new file mode 100644
index 0000000..d2829b2
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.ttf differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.woff b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.woff
new file mode 100644
index 0000000..952da1b
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.woff differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.woff2 b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.woff2
new file mode 100644
index 0000000..9f58460
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Medium.woff2 differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.eot b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.eot
new file mode 100644
index 0000000..96bb316
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.eot differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.ttf b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.ttf
new file mode 100644
index 0000000..f8aa7a8
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.ttf differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.woff b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.woff
new file mode 100644
index 0000000..3575e8b
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.woff differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.woff2 b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.woff2
new file mode 100644
index 0000000..6f651da
Binary files /dev/null and b/packages/assets/fonts/010-LabilGrotesk/LabilGrotesk-Regular.woff2 differ
diff --git a/packages/assets/fonts/010-LabilGrotesk/stylesheet.css b/packages/assets/fonts/010-LabilGrotesk/stylesheet.css
new file mode 100644
index 0000000..e213e29
--- /dev/null
+++ b/packages/assets/fonts/010-LabilGrotesk/stylesheet.css
@@ -0,0 +1,51 @@
+@font-face {
+ font-family: 'Labil Grotesk';
+ src: url('LabilGrotesk-Medium.eot');
+ src:
+ url('LabilGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
+ url('LabilGrotesk-Medium.woff2') format('woff2'),
+ url('LabilGrotesk-Medium.woff') format('woff'),
+ url('LabilGrotesk-Medium.ttf') format('truetype');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Labil Grotesk';
+ src: url('LabilGrotesk-Light.eot');
+ src:
+ url('LabilGrotesk-Light.eot?#iefix') format('embedded-opentype'),
+ url('LabilGrotesk-Light.woff2') format('woff2'),
+ url('LabilGrotesk-Light.woff') format('woff'),
+ url('LabilGrotesk-Light.ttf') format('truetype');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Labil Grotesk';
+ src: url('LabilGrotesk-Bold.eot');
+ src:
+ url('LabilGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
+ url('LabilGrotesk-Bold.woff2') format('woff2'),
+ url('LabilGrotesk-Bold.woff') format('woff'),
+ url('LabilGrotesk-Bold.ttf') format('truetype');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Labil Grotesk';
+ src: url('LabilGrotesk-Regular.eot');
+ src:
+ url('LabilGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
+ url('LabilGrotesk-Regular.woff2') format('woff2'),
+ url('LabilGrotesk-Regular.woff') format('woff'),
+ url('LabilGrotesk-Regular.ttf') format('truetype');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
diff --git a/packages/assets/fonts/index.css b/packages/assets/fonts/index.css
new file mode 100644
index 0000000..6d7e605
--- /dev/null
+++ b/packages/assets/fonts/index.css
@@ -0,0 +1,24 @@
+@import './stylesheet.css';
+
+:root {
+ --font-geist-mono: 'Geist Mono';
+ --font-geist-sans: 'Geist Sans';
+ --font-ibm-plex-mono: 'IBM Plex Mono';
+ --font-labil-grotesk: 'Labil Grotesk';
+ --font-dm-sans-variable: 'DM Sans Variable';
+ --font-dm-mono: 'DM Mono';
+ --font-jetbrains-mono-variable: 'JetBrains Mono Variable';
+ --font-figtree-variable: 'Figtree Variable';
+ --font-labil-grotesk-variable: 'Labil Grotesk Variable';
+ --font-stabil-grotesk: 'Stabil Grotesk';
+ --font-attila-sans-classic: 'Attila Sans Classic';
+ --font-attila-sans-sharp: 'Attila Sans Sharp';
+ --font-victor-narrow: 'Victor Narrow';
+ --font-victor-sans: 'Victor Sans';
+ --font-victor-serif: 'Victor Serif';
+ --font-victor-serif-variable: 'Victor Serif Variable';
+ --font-uniforma: 'Uniforma';
+ --font-uniforma-variable: 'Uniforma Variable';
+ --font-space-grotesk-variable: 'Space Grotesk Variable';
+ --font-space-grotesk: 'Space Grotesk';
+}
diff --git a/packages/assets/fonts/stylesheet.css b/packages/assets/fonts/stylesheet.css
index 8724bb6..e98b9bd 100644
--- a/packages/assets/fonts/stylesheet.css
+++ b/packages/assets/fonts/stylesheet.css
@@ -1,3 +1,58 @@
+/* dm-sans-latin-wght-normal */
+@font-face {
+ font-family: 'DM Sans Variable';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 100 1000;
+ src: url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans:vf@latest/latin-wght-normal.woff2)
+ format('woff2-variations');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+ U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* dm-mono-latin-400-normal */
+@font-face {
+ font-family: 'DM Mono';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 400;
+ src:
+ url(https://cdn.jsdelivr.net/fontsource/fonts/dm-mono@latest/latin-400-normal.woff2)
+ format('woff2'),
+ url(https://cdn.jsdelivr.net/fontsource/fonts/dm-mono@latest/latin-400-normal.woff)
+ format('woff');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+ U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* jetbrains-mono-latin-wght-normal */
+@font-face {
+ font-family: 'JetBrains Mono Variable';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 100 800;
+ src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2)
+ format('woff2-variations');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+ U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* figtree-latin-wght-normal */
+@font-face {
+ font-family: 'Figtree Variable';
+ font-style: normal;
+ font-display: swap;
+ font-weight: 300 900;
+ src: url(https://cdn.jsdelivr.net/fontsource/fonts/figtree:vf@latest/latin-wght-normal.woff2)
+ format('woff2-variations');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+ U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+ U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
@font-face {
font-family: 'Geist Sans';
src: url('./GeistVariable.ttf') format('truetype');
diff --git a/packages/assets/olio/olio/OlioCard.avif b/packages/assets/olio/olio/OlioCard.avif
new file mode 100644
index 0000000..c48b5f2
Binary files /dev/null and b/packages/assets/olio/olio/OlioCard.avif differ
diff --git a/packages/assets/olio/olio/olio_bg_1-2k.avif b/packages/assets/olio/olio/olio_bg_1-2k.avif
new file mode 100644
index 0000000..310f610
Binary files /dev/null and b/packages/assets/olio/olio/olio_bg_1-2k.avif differ
diff --git a/packages/assets/olio/olio/olio_ipad_1_opt.avif b/packages/assets/olio/olio/olio_ipad_1_opt.avif
new file mode 100644
index 0000000..e3b25d4
Binary files /dev/null and b/packages/assets/olio/olio/olio_ipad_1_opt.avif differ
diff --git a/packages/assets/olio/olio/olio_logotype_monochrome_onDark.svg b/packages/assets/olio/olio/olio_logotype_monochrome_onDark.svg
new file mode 100644
index 0000000..1e1caf7
--- /dev/null
+++ b/packages/assets/olio/olio/olio_logotype_monochrome_onDark.svg
@@ -0,0 +1,24 @@
+
+
+
diff --git a/packages/assets/olio/olio_bg_1-2k.avif b/packages/assets/olio/olio_bg_1-2k.avif
new file mode 100644
index 0000000..310f610
Binary files /dev/null and b/packages/assets/olio/olio_bg_1-2k.avif differ
diff --git a/packages/assets/olio/olio_ipad_1_opt.avif b/packages/assets/olio/olio_ipad_1_opt.avif
new file mode 100644
index 0000000..e3b25d4
Binary files /dev/null and b/packages/assets/olio/olio_ipad_1_opt.avif differ
diff --git a/packages/assets/olio/olio_logotype_monochrome_onDark.svg b/packages/assets/olio/olio_logotype_monochrome_onDark.svg
new file mode 100644
index 0000000..1e1caf7
--- /dev/null
+++ b/packages/assets/olio/olio_logotype_monochrome_onDark.svg
@@ -0,0 +1,24 @@
+
+
+
diff --git a/packages/assets/remix/Deco1.svg b/packages/assets/remix/Deco1.svg
new file mode 100644
index 0000000..cb4cb09
--- /dev/null
+++ b/packages/assets/remix/Deco1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---01.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---01.avif
new file mode 100644
index 0000000..127ab7d
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---01.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---02.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---02.avif
new file mode 100644
index 0000000..03c9eaa
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---02.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---03.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---03.avif
new file mode 100644
index 0000000..2c113d6
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---03.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---04.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---04.avif
new file mode 100644
index 0000000..68785ac
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---04.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---05.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---05.avif
new file mode 100644
index 0000000..e63a691
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---05.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---06.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---06.avif
new file mode 100644
index 0000000..46c6f6e
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---06.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---07.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---07.avif
new file mode 100644
index 0000000..338ade5
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---07.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---08.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---08.avif
new file mode 100644
index 0000000..7fbfdfd
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---08.avif differ
diff --git a/packages/assets/remix/Remix-Screen--iPhone15ProMax---09.avif b/packages/assets/remix/Remix-Screen--iPhone15ProMax---09.avif
new file mode 100644
index 0000000..b86694c
Binary files /dev/null and b/packages/assets/remix/Remix-Screen--iPhone15ProMax---09.avif differ
diff --git a/packages/assets/remix/iPhone15ProMax-DarkTitanium-96dpi-720h.avif b/packages/assets/remix/iPhone15ProMax-DarkTitanium-96dpi-720h.avif
new file mode 100644
index 0000000..1384c4e
Binary files /dev/null and b/packages/assets/remix/iPhone15ProMax-DarkTitanium-96dpi-720h.avif differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-1.png b/packages/assets/remix/isolated-elements/remixElement-1.png
new file mode 100644
index 0000000..33a5087
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-1.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-10.png b/packages/assets/remix/isolated-elements/remixElement-10.png
new file mode 100644
index 0000000..4ec408a
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-10.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-11.png b/packages/assets/remix/isolated-elements/remixElement-11.png
new file mode 100644
index 0000000..95658ea
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-11.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-2.png b/packages/assets/remix/isolated-elements/remixElement-2.png
new file mode 100644
index 0000000..7e23349
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-2.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-3.png b/packages/assets/remix/isolated-elements/remixElement-3.png
new file mode 100644
index 0000000..6168160
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-3.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-4.png b/packages/assets/remix/isolated-elements/remixElement-4.png
new file mode 100644
index 0000000..c8d9f14
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-4.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-5.png b/packages/assets/remix/isolated-elements/remixElement-5.png
new file mode 100644
index 0000000..f427f7b
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-5.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-6.png b/packages/assets/remix/isolated-elements/remixElement-6.png
new file mode 100644
index 0000000..3422186
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-6.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-7.png b/packages/assets/remix/isolated-elements/remixElement-7.png
new file mode 100644
index 0000000..c510442
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-7.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-8.png b/packages/assets/remix/isolated-elements/remixElement-8.png
new file mode 100644
index 0000000..5e3058b
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-8.png differ
diff --git a/packages/assets/remix/isolated-elements/remixElement-9.png b/packages/assets/remix/isolated-elements/remixElement-9.png
new file mode 100644
index 0000000..5ba220d
Binary files /dev/null and b/packages/assets/remix/isolated-elements/remixElement-9.png differ
diff --git a/packages/assets/remix/prodkt_card_13.avif b/packages/assets/remix/prodkt_card_13.avif
new file mode 100644
index 0000000..1787d63
Binary files /dev/null and b/packages/assets/remix/prodkt_card_13.avif differ
diff --git a/packages/assets/resume/BryanFunk_CV-Resume_v2_001_reduced.pdf b/packages/assets/resume/BryanFunk_CV-Resume_v2_001_reduced.pdf
new file mode 100644
index 0000000..2304be7
Binary files /dev/null and b/packages/assets/resume/BryanFunk_CV-Resume_v2_001_reduced.pdf differ
diff --git a/packages/assets/resume/bryan-funk-resume-promo.webp b/packages/assets/resume/bryan-funk-resume-promo.webp
new file mode 100644
index 0000000..d1b47c7
Binary files /dev/null and b/packages/assets/resume/bryan-funk-resume-promo.webp differ
diff --git a/packages/blocks/astro.config.mjs b/packages/blocks/astro.config.mjs
index 3a79d5d..cdb954c 100644
--- a/packages/blocks/astro.config.mjs
+++ b/packages/blocks/astro.config.mjs
@@ -10,7 +10,6 @@ import tailwind from '@astrojs/tailwind'
import { defineConfig } from 'astro/config'
import dotenv from 'dotenv'
-import postcss from './postcss.config.mjs'
import viteConfig from './vite.config.mjs'
dotenv.config()
@@ -22,18 +21,19 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
// https://astro.build/config
export default defineConfig({
- build: {
- rollupOptions: {
- output: {
- entryFileNames: 'client.js',
- chunkFileNames: 'client.js',
- assetFileNames: 'client.[ext]',
- },
- },
- },
+ // build: {
+ // rollupOptions: {
+ // output: {
+ // entryFileNames: 'client.js',
+ // chunkFileNames: 'client.js',
+ // assetFileNames: 'client.[ext]',
+ // },
+ // },
+ // },
integrations: [
react({
experimentalReactChildren: true,
+ include: ['**/react/*'],
}),
tailwind({
nesting: true,
@@ -41,15 +41,14 @@ export default defineConfig({
],
vite: {
...viteConfig,
- css: {
- postcss,
- },
+ // sourceMap: true,
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
ssr: {
+ // noExternal: ['swiper'],
external: ['image-size', 'tiny-glob'],
},
plugins: [],
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 4676197..de74e20 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -30,21 +30,23 @@
"dependencies": {
"@astrojs/check": "0.9.3",
"@astrojs/react": "3.6.2",
- "@astrojs/tailwind": "^5.1.0",
+ "@astrojs/tailwind": "^5.1.1",
"@prodkt/ui": "workspace:*",
- "astro": "4.15.6",
+ "@vitejs/plugin-react": "^4.3.1",
+ "astro": "4.15.8",
"lucide-react": "^0.441.0",
"react": "18.3.1",
"react-dom": "18.3.1",
- "sass": "^1.78.0",
+ "sass": "^1.79.2",
"tailwind-merge": "^2.5.2",
- "tailwindcss": "^3.4.11",
- "tailwindcss-animate": "^1.0.7"
+ "tailwindcss": "^3.4.12",
+ "tailwindcss-animate": "^1.0.7",
+ "vite": "^5.4.7"
},
"devDependencies": {
"@prodkt/tailwind": "workspace:*",
"@types/node": "^22.5.5",
- "@types/react": "^18.3.6",
+ "@types/react": "^18.3.8",
"@types/react-dom": "^18.3.0",
"autoprefixer": "^9.0.0",
"postcss": "^8.4.47",
diff --git a/packages/blocks/postcss.config.mjs b/packages/blocks/postcss.config.mjs
index 579c095..67a1045 100644
--- a/packages/blocks/postcss.config.mjs
+++ b/packages/blocks/postcss.config.mjs
@@ -2,8 +2,8 @@ import tailwindConfigurations from './tailwindConfigurations.mjs'
export default {
'postcss-import': {},
- // 'tailwindcss/nesting': {},
- 'tailwind-css-nesting': {},
+ 'tailwindcss/nesting': {},
+ // 'tailwind-css-nesting': {},
tailwindUno: tailwindConfigurations,
autoprefixer: {},
}
diff --git a/packages/blocks/src/component-map.ts b/packages/blocks/src/component-map.ts
index 7789537..322e628 100644
--- a/packages/blocks/src/component-map.ts
+++ b/packages/blocks/src/component-map.ts
@@ -1,8 +1,6 @@
import TemplateTresLayout from './templates/tres/layouts/TresLayout.astro'
-import AmpersandHero from './templates/unique/components/ampersand-hero.astro'
import LevelnHero from './templates/unique/components/leveln-hero.astro'
import WarpLandingPage from './templates/unique/components/warp-landing-page.astro'
-import AmpersandLayout from './templates/unique/layouts/ampersand-hero-layout.astro'
import LevelnLayout from './templates/unique/layouts/leveln-hero-layout.astro'
import TemplateUnoAboutOne from './templates/uno/components/About_1.astro'
import TemplateUnoComponentTest from './templates/uno/components/ComponentTest.astro'
@@ -24,8 +22,6 @@ const componentMap: ComponentMap = {
WarpLandingPage,
TemplateUnoComponentTest,
LevelnLayout,
- AmpersandLayout,
- AmpersandHero,
LevelnHero,
}
diff --git a/packages/blocks/src/env.d.ts b/packages/blocks/src/env.d.ts
index e16c13c..c3727c5 100644
--- a/packages/blocks/src/env.d.ts
+++ b/packages/blocks/src/env.d.ts
@@ -1 +1,26 @@
///
+///
+
+declare module '*.avif' {
+ const src: string
+
+ export default src
+}
+
+declare module '*.svg' {
+ const src: string
+
+ export default src
+}
+
+declare module '*.webp' {
+ const src: string
+
+ export default src
+}
+
+declare module '*.png' {
+ const src: string
+
+ export default src
+}
diff --git a/packages/blocks/src/templates/dos/components/page-header-announcement.tsx b/packages/blocks/src/templates/dos/components/page-header-announcement.tsx
index 2ee9c9e..2459973 100644
--- a/packages/blocks/src/templates/dos/components/page-header-announcement.tsx
+++ b/packages/blocks/src/templates/dos/components/page-header-announcement.tsx
@@ -1,19 +1,12 @@
import { ArrowRight } from 'lucide-react'
-import { Separator } from '@prodkt/ui/primitives/separator'
-
export function DosAnnouncement() {
return (
- 🎉{' '}
- {' '}
- Introducing Blocks
+ 🎉 Introducing Blocks
Introducing Blocks
diff --git a/packages/blocks/src/templates/unique/assets/remix/Deco1.svg b/packages/blocks/src/templates/unique/assets/remix/Deco1.svg
new file mode 100644
index 0000000..cb4cb09
--- /dev/null
+++ b/packages/blocks/src/templates/unique/assets/remix/Deco1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---01.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---01.avif
new file mode 100644
index 0000000..127ab7d
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---01.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---02.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---02.avif
new file mode 100644
index 0000000..03c9eaa
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---02.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---03.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---03.avif
new file mode 100644
index 0000000..2c113d6
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---03.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---04.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---04.avif
new file mode 100644
index 0000000..68785ac
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---04.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---05.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---05.avif
new file mode 100644
index 0000000..e63a691
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---05.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---06.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---06.avif
new file mode 100644
index 0000000..46c6f6e
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---06.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---07.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---07.avif
new file mode 100644
index 0000000..338ade5
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---07.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---08.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---08.avif
new file mode 100644
index 0000000..7fbfdfd
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---08.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---09.avif b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---09.avif
new file mode 100644
index 0000000..b86694c
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/Remix-Screen--iPhone15ProMax---09.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/iPhone15ProMax-DarkTitanium-96dpi-720h.avif b/packages/blocks/src/templates/unique/assets/remix/iPhone15ProMax-DarkTitanium-96dpi-720h.avif
new file mode 100644
index 0000000..1384c4e
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/iPhone15ProMax-DarkTitanium-96dpi-720h.avif differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-1.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-1.png
new file mode 100644
index 0000000..33a5087
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-1.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-10.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-10.png
new file mode 100644
index 0000000..4ec408a
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-10.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-11.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-11.png
new file mode 100644
index 0000000..95658ea
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-11.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-2.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-2.png
new file mode 100644
index 0000000..7e23349
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-2.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-3.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-3.png
new file mode 100644
index 0000000..6168160
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-3.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-4.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-4.png
new file mode 100644
index 0000000..c8d9f14
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-4.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-5.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-5.png
new file mode 100644
index 0000000..f427f7b
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-5.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-6.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-6.png
new file mode 100644
index 0000000..3422186
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-6.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-7.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-7.png
new file mode 100644
index 0000000..c510442
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-7.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-8.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-8.png
new file mode 100644
index 0000000..5e3058b
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-8.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-9.png b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-9.png
new file mode 100644
index 0000000..5ba220d
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/isolated-elements/remixElement-9.png differ
diff --git a/packages/blocks/src/templates/unique/assets/remix/prodkt_card_13.avif b/packages/blocks/src/templates/unique/assets/remix/prodkt_card_13.avif
new file mode 100644
index 0000000..1787d63
Binary files /dev/null and b/packages/blocks/src/templates/unique/assets/remix/prodkt_card_13.avif differ
diff --git a/packages/blocks/src/templates/unique/components/ampersand-hero.astro b/packages/blocks/src/templates/unique/components/ampersand-hero.astro
deleted file mode 100644
index ff8387d..0000000
--- a/packages/blocks/src/templates/unique/components/ampersand-hero.astro
+++ /dev/null
@@ -1,350 +0,0 @@
----
-import '../tailwind/leveln.css'
-
-import { Image } from 'astro:assets'
-
-import BryanMemoji from '../assets/leveln-hero/bryanFunk_memoji_lg_opt.avif'
-import CamdynnMemoji from '../assets/leveln-hero/camdynn-test-memoji.avif'
-import LevelnMonochrome from '../assets/leveln-hero/leveln_logomark_pink.svg'
-import Background3 from '../assets/leveln-hero/levelnChartLine_fillBlur.svg'
-import Background2 from '../assets/leveln-hero/levelnChartLine_outline.svg'
-import MemojiGirlCelebrate_1 from '../assets/leveln-hero/memoji_girl_celebrate_1.png'
-import MemojiGirlHeartEyes_1 from '../assets/leveln-hero/memoji_girl_heart-eyes_1.png'
-import MemojiGirlHeartEyes_2 from '../assets/leveln-hero/memoji_girl_heart-eyes_2.png'
-import MemojiGirlPonder_1 from '../assets/leveln-hero/memoji_girl_ponder_1.png'
-import MemojiGirlQuiet_1 from '../assets/leveln-hero/memoji_girl_quiet_1.png'
-import MemojiGirlThumbsDown_1 from '../assets/leveln-hero/memoji_girl_thumbs-down_1.png'
-import MemojiGirlThumbsDown_2 from '../assets/leveln-hero/memoji_girl_thumbs-down_2.png'
-import MemojiGirlThumbsUp_1 from '../assets/leveln-hero/memoji_girl_thumbs-up_1.png'
-import MemojiGirlUgh_1 from '../assets/leveln-hero/memoji_girl_ugh_1.png'
-import PulseGreen from '../assets/leveln-hero/pulseCircle-green.svg'
-import PulseRed from '../assets/leveln-hero/pulseCircle-red.svg'
-import Layout from '../layouts/leveln-hero-layout.astro'
----
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/blocks/src/templates/unique/layouts/ampersand-hero-layout.astro b/packages/blocks/src/templates/unique/layouts/ampersand-hero-layout.astro
deleted file mode 100644
index a03a71f..0000000
--- a/packages/blocks/src/templates/unique/layouts/ampersand-hero-layout.astro
+++ /dev/null
@@ -1,77 +0,0 @@
----
-
----
-
-
-
-
-
-
-
-
-
-
-
- Prodkt
-
-
-
-
-
-
diff --git a/packages/blocks/tsconfig.json b/packages/blocks/tsconfig.json
index 6505c10..289f9ee 100644
--- a/packages/blocks/tsconfig.json
+++ b/packages/blocks/tsconfig.json
@@ -1,14 +1,17 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
- "jsx": "react-jsx",
- "jsxImportSource": "react",
- "verbatimModuleSyntax": false,
- "declarationMap": true,
- "declaration": true,
+ // "jsx": "react", // or "react-jsx" for React 17+
+ // "esModuleInterop": true,
+ // "allowSyntheticDefaultImports": true,
+ // "module": "ESNext",
+ // "target": "ESNext",
+ // "verbatimModuleSyntax": false,
+ // "declarationMap": true,
+ // "declaration": true,
"baseUrl": ".",
"paths": {
- "@/*": ["./src/*"]
+ "@/*": ["src/*"]
}
}
}
diff --git a/packages/blocks/vite.config.mjs b/packages/blocks/vite.config.mjs
index fcc9aec..7efb9e5 100644
--- a/packages/blocks/vite.config.mjs
+++ b/packages/blocks/vite.config.mjs
@@ -1,16 +1,16 @@
import { defineConfig } from 'vite'
export default defineConfig({
- build: {
- rollupOptions: {
- output: {
- // Set the main entry file to a fixed name
- entryFileNames: '_astro/client.js',
- // Keep chunk files with hashes to avoid conflicts with dynamic imports
- chunkFileNames: '_astro/client-dynamic.js',
- // Asset file names (for CSS, images, etc.) can also keep their hashed names
- assetFileNames: '_astro/client-[hash].[ext]',
- },
- },
- },
+ // build: {
+ // rollupOptions: {
+ // output: {
+ // // Set the main entry file to a fixed name
+ // entryFileNames: '_astro/client.js',
+ // // Keep chunk files with hashes to avoid conflicts with dynamic imports
+ // chunkFileNames: '_astro/client-dynamic.js',
+ // // Asset file names (for CSS, images, etc.) can also keep their hashed names
+ // assetFileNames: '_astro/client-[hash].[ext]',
+ // },
+ // },
+ // },
})
diff --git a/packages/config/eslint/package.json b/packages/config/eslint/package.json
index b9a8824..8ac2e4e 100644
--- a/packages/config/eslint/package.json
+++ b/packages/config/eslint/package.json
@@ -21,18 +21,18 @@
"@eslint-community/eslint-plugin-eslint-comments": "^4.3.0",
"@eslint/compat": "^1.1.1",
"@eslint/eslintrc": "^3.1.0",
- "@eslint/js": "^9.7.0",
+ "@eslint/js": "^9.11.1",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-jsdoc": "^48.7.0",
"eslint-plugin-jsx-a11y": "^6.9.0",
"eslint-plugin-playwright": "^1.6.2",
- "eslint-plugin-react": "^7.34.4",
+ "eslint-plugin-react": "^7.36.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-regexp": "^2.6.0",
"eslint-plugin-security": "^3.0.1",
"eslint-plugin-tailwindcss": "^3.17.4",
"eslint-plugin-turbo": "^2.0.7",
- "globals": "^15.8.0",
+ "globals": "^15.9.0",
"typescript-eslint": "^7.16.1"
},
"devDependencies": {
diff --git a/packages/config/storybook/package.json b/packages/config/storybook/package.json
index 0401a4b..a561280 100644
--- a/packages/config/storybook/package.json
+++ b/packages/config/storybook/package.json
@@ -36,26 +36,26 @@
"@prodkt/assets": "workspace:*",
"@prodkt/utils": "workspace:*",
"@radix-ui/colors": "^3.0.0",
- "@storybook/addon-a11y": "^8.3.1",
- "@storybook/addon-essentials": "^8.3.1",
- "@storybook/addon-interactions": "^8.3.1",
- "@storybook/addon-links": "^8.3.1",
- "@storybook/addon-onboarding": "^8.3.1",
- "@storybook/addon-themes": "^8.3.1",
- "@storybook/addon-viewport": "^8.3.1",
- "@storybook/manager-api": "^8.3.1",
- "@storybook/react": "^8.3.1",
- "@storybook/react-vite": "^8.3.1",
- "@storybook/theming": "^8.3.1",
- "@storybook/types": "^8.3.1",
+ "@storybook/addon-a11y": "^8.3.2",
+ "@storybook/addon-essentials": "^8.3.2",
+ "@storybook/addon-interactions": "^8.3.2",
+ "@storybook/addon-links": "^8.3.2",
+ "@storybook/addon-onboarding": "^8.3.2",
+ "@storybook/addon-themes": "^8.3.2",
+ "@storybook/addon-viewport": "^8.3.2",
+ "@storybook/manager-api": "^8.3.2",
+ "@storybook/react": "^8.3.2",
+ "@storybook/react-vite": "^8.3.2",
+ "@storybook/theming": "^8.3.2",
+ "@storybook/types": "^8.3.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
- "storybook": "^8.3.1"
+ "storybook": "^8.3.2"
},
"devDependencies": {
"@prodkt/eslint": "workspace:*",
"@prodkt/tsconfig": "workspace:*",
- "@types/react": "^18.3.6",
+ "@types/react": "^18.3.8",
"@types/react-dom": "^18.3.0"
}
}
diff --git a/packages/config/storybook/src/configs/react-vite.ts b/packages/config/storybook/src/configs/react-vite.ts
index 861ecbc..3c6873d 100644
--- a/packages/config/storybook/src/configs/react-vite.ts
+++ b/packages/config/storybook/src/configs/react-vite.ts
@@ -1,32 +1,33 @@
import type { StorybookConfig } from '@storybook/react-vite'
-import { getAbsolutePath } from '@prodkt/utils/filesystem'
-
-const config = {
+const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
- getAbsolutePath('@storybook/addon-links'),
+ '@storybook/addon-links',
{
- name: getAbsolutePath('@storybook/addon-essentials'),
+ name: '@storybook/addon-essentials',
options: {
backgrounds: false,
},
},
- getAbsolutePath('@storybook/addon-onboarding'),
- getAbsolutePath('@storybook/addon-interactions'),
- getAbsolutePath('@storybook/addon-themes'),
- getAbsolutePath('@storybook/addon-a11y'),
+ '@storybook/addon-onboarding',
+ '@storybook/addon-interactions',
+ '@storybook/addon-themes',
+ '@storybook/addon-a11y',
],
framework: {
- name: getAbsolutePath('@storybook/react-vite') as '@storybook/react-vite',
+ name: '@storybook/react-vite',
options: {
strictMode: true,
},
},
- staticDirs: [getAbsolutePath('@prodkt/assets')],
+ staticDirs: ['../static'], // Ensure this is the correct path
docs: {
autodocs: 'tag',
},
-} satisfies StorybookConfig
+ core: {
+ builder: '@storybook/builder-vite',
+ },
+}
export default config
diff --git a/packages/config/storybook/src/theme.ts b/packages/config/storybook/src/theme.ts
index be46ef3..80b6d2b 100644
--- a/packages/config/storybook/src/theme.ts
+++ b/packages/config/storybook/src/theme.ts
@@ -1,28 +1,31 @@
-import { mauveDark, violetDark } from '@radix-ui/colors'
+import { grayDark, violetDark } from '@radix-ui/colors'
+
+import '@prodkt/assets/fonts/index.css'
+
import { create } from '@storybook/theming'
export default create({
base: 'dark',
- fontBase: 'var(--font-labil-grotesk)',
- fontCode: 'var(--font-ibm-plex-mono)',
- appContentBg: mauveDark.mauve1,
- appBg: mauveDark.mauve1,
- barBg: mauveDark.mauve1,
- inputBg: mauveDark.mauve3,
- buttonBg: mauveDark.mauve3,
- booleanBg: mauveDark.mauve3,
- appBorderColor: mauveDark.mauve2,
+ fontBase: 'var(--font-theme-sans), sans-serif',
+ fontCode: 'var(--font-theme-mono), monospace',
+ appContentBg: grayDark.gray3,
+ appBg: grayDark.gray1,
+ barBg: grayDark.gray3,
+ inputBg: grayDark.gray3,
+ buttonBg: grayDark.gray3,
+ booleanBg: grayDark.gray3,
+ appBorderColor: grayDark.gray4,
appBorderRadius: 8,
inputBorderRadius: 8,
- inputBorder: mauveDark.mauve6,
- buttonBorder: mauveDark.mauve6,
- textColor: mauveDark.mauve11,
+ inputBorder: grayDark.gray6,
+ buttonBorder: grayDark.gray6,
+ textColor: grayDark.gray11,
colorSecondary: violetDark.violet9,
colorPrimary: violetDark.violet9,
- barTextColor: mauveDark.mauve11,
+ barTextColor: grayDark.gray11,
barHoverColor: violetDark.violet9,
barSelectedColor: violetDark.violet9,
- inputTextColor: mauveDark.mauve11,
- textMutedColor: mauveDark.mauve10,
- textInverseColor: mauveDark.mauve1,
+ inputTextColor: grayDark.gray11,
+ textMutedColor: grayDark.gray10,
+ textInverseColor: grayDark.gray1,
})
diff --git a/packages/config/tailwind/package.json b/packages/config/tailwind/package.json
index 9070e09..d761514 100644
--- a/packages/config/tailwind/package.json
+++ b/packages/config/tailwind/package.json
@@ -8,7 +8,9 @@
"type": "module",
"exports": {
".": "./src/preset.ts",
- "./color": "./src/ghost.css"
+ "./color": "./src/color.css",
+ "./typography": "./src/typography.css",
+ "./ghost": "./src/ghost.css"
},
"scripts": {
"clean": "bun run rm -rf *.tsbuildinfo",
@@ -16,6 +18,7 @@
"typecheck": "tsc"
},
"dependencies": {
+ "@prodkt/assets": "workspace:*",
"@radix-ui/colors": "^3.0.0",
"@radix-ui/themes": "^3.1.3",
"@tailwindcss/aspect-ratio": "^0.4.2",
diff --git a/packages/config/tailwind/src/color.css b/packages/config/tailwind/src/color.css
index 2b42022..454c735 100644
--- a/packages/config/tailwind/src/color.css
+++ b/packages/config/tailwind/src/color.css
@@ -130,28 +130,6 @@
@tailwind components;
@tailwind utilities;
@tailwind base;
-:root {
- /* --background: 0 0% 100%;
- --foreground: 222.2 47.4% 11.2%;
- --muted: 210 40% 96.1%;
- --muted-foreground: 215.4 16.3% 46.9%;
- --card: 0 0% 100%;
- --card-foreground: 222.2 47.4% 11.2%;
- --popover: var(--red9);
- --popover-foreground: 222.2 47.4% 11.2%;
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --primary: 222.2 47.4% 11.2%;
- --primary-foreground: 210 40% 98%;
- --secondary: 210 40% 96.1%;
- --secondary-foreground: 222.2 47.4% 11.2%;
- --accent: 210 40% 96.1%;
- --accent-foreground: 222.2 47.4% 11.2%;
- --destructive: 0 100% 50%;
- --destructive-foreground: 210 40% 98%;
- --ring: 215 20.2% 65.1%;
- --radius: 0.5rem; */
-}
[data-accent-color='amber'] {
--accent1: var(--amber1);
@@ -965,6 +943,29 @@
--grayA12: var(--slateA12);
}
+:root {
+ --background: var(--gray2);
+ --foreground: var(--gray11);
+ --muted: var(--gray3);
+ --muted-foreground: var(--gray11);
+ --card: var(--gray2);
+ --card-foreground: var(--gray11);
+ --popover: var(--gray3);
+ --popover-foreground: var(--gray11);
+ --border: var(--grayA4);
+ --input: var(--gray4);
+ --primary: var(--accent9);
+ --primary-foreground: var(--accent2);
+ --secondary: var(--violet9);
+ --secondary-foreground: var(--violet12);
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+ --destructive: 0 100% 50%;
+ --destructive-foreground: 210 40% 98%;
+ --ring: 215 20.2% 65.1%;
+ --radius: 0.5rem;
+}
+
@layer base {
:root {
--chart-1: 12 76% 61%;
diff --git a/packages/config/tailwind/src/ghost.css b/packages/config/tailwind/src/ghost.css
index 7d0d6c1..1e2588f 100644
--- a/packages/config/tailwind/src/ghost.css
+++ b/packages/config/tailwind/src/ghost.css
@@ -156,6 +156,20 @@ input:where([type='submit']) {
rgba(0, 0, 0, 0) 100%
);
}
+.gradientMask-to-t-50 {
+ mask-image: radial-gradient(
+ circle,
+ rgba(0, 0, 0, 1) 25%,
+ rgba(0, 0, 0, 0.5) 55%,
+ rgba(0, 0, 0, 0) 69%
+ );
+ -webkit-mask-image: radial-gradient(
+ circle,
+ rgba(0, 0, 0, 1) 25%,
+ rgba(0, 0, 0, 0.5) 55%,
+ rgba(0, 0, 0, 0) 69%
+ );
+}
.gradientMask-to-t-20 {
mask-image: linear-gradient(
180deg,
@@ -216,6 +230,18 @@ input:where([type='submit']) {
rgba(0, 0, 0, 1) 10%
);
}
+.gradientMask-to-b-40 {
+ mask-image: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(0, 0, 0, 1) 40%
+ );
+ -webkit-mask-image: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(0, 0, 0, 1) 40%
+ );
+}
.gradientMask-to-l {
mask-image: linear-gradient(
270deg,
@@ -255,7 +281,3 @@ input:where([type='submit']) {
rgba(0, 0, 0, 0) 80%
);
}
-
-.prodkt-blog-content a {
- @apply text-[var(--accent10)] font-normal underline underline-offset-4 !important;
-}
diff --git a/packages/config/tailwind/src/preset.ts b/packages/config/tailwind/src/preset.ts
index 3256b0e..eec58c4 100644
--- a/packages/config/tailwind/src/preset.ts
+++ b/packages/config/tailwind/src/preset.ts
@@ -1,3 +1,8 @@
+/* eslint-disable @eslint-community/eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
import type { Config } from 'tailwindcss'
import aspectRatio from '@tailwindcss/aspect-ratio'
@@ -5,13 +10,14 @@ import containerQueries from '@tailwindcss/container-queries'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'
import animate from 'tailwindcss-animate'
+import plugin from 'tailwindcss/plugin'
import { createPlugin } from 'windy-radix-palette'
import windyTypography from 'windy-radix-typography'
const colors = createPlugin()
export const prodktTailwindPreset: Config = {
- content: ['./src/**/*.{js,jsx,ts,tsx,mdx}'],
+ content: ['./src/**/*.{js,jsx,ts,tsx,mdx,astro}'],
presets: [windyTypography],
theme: {
extend: {
@@ -20,9 +26,820 @@ export const prodktTailwindPreset: Config = {
'radial-gradient(87.07% 87.07% at 52.38% 100%, var(--grayA1) 0%, var(--grayA6) 100%)',
'radial-gradient-2':
'radial-gradient(100.44% 141.42% at 0% 0%, var(--grayA1) 0%, var(--grayA6) 100%);',
+ 'radial-gradient': 'radial-gradient(var(--tw-gradient-stops));',
+ 'conic-gradient':
+ 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
colors: {
- background: 'var(--gray1)',
+ amber: {
+ 1: 'var(--amber1)',
+ 2: 'var(--amber2)',
+ 3: 'var(--amber3)',
+ 4: 'var(--amber4)',
+ 5: 'var(--amber5)',
+ 6: 'var(--amber6)',
+ 7: 'var(--amber7)',
+ 8: 'var(--amber8)',
+ 9: 'var(--amber9)',
+ 10: 'var(--amber10)',
+ 11: 'var(--amber11)',
+ 12: 'var(--amber12)',
+ a1: 'var(--amberA1)',
+ a2: 'var(--amberA2)',
+ a3: 'var(--amberA3)',
+ a4: 'var(--amberA4)',
+ a5: 'var(--amberA5)',
+ a6: 'var(--amberA6)',
+ a7: 'var(--amberA7)',
+ a8: 'var(--amberA8)',
+ a9: 'var(--amberA9)',
+ a10: 'var(--amberA10)',
+ a11: 'var(--amberA11)',
+ a12: 'var(--amberA12)',
+ },
+ blue: {
+ 1: 'var(--blue1)',
+ 2: 'var(--blue2)',
+ 3: 'var(--blue3)',
+ 4: 'var(--blue4)',
+ 5: 'var(--blue5)',
+ 6: 'var(--blue6)',
+ 7: 'var(--blue7)',
+ 8: 'var(--blue8)',
+ 9: 'var(--blue9)',
+ 10: 'var(--blue10)',
+ 11: 'var(--blue11)',
+ 12: 'var(--blue12)',
+ a1: 'var(--blueA1)',
+ a2: 'var(--blueA2)',
+ a3: 'var(--blueA3)',
+ a4: 'var(--blueA4)',
+ a5: 'var(--blueA5)',
+ a6: 'var(--blueA6)',
+ a7: 'var(--blueA7)',
+ a8: 'var(--blueA8)',
+ a9: 'var(--blueA9)',
+ a10: 'var(--blueA10)',
+ a11: 'var(--blueA11)',
+ a12: 'var(--blueA12)',
+ },
+ bronze: {
+ 1: 'var(--bronze1)',
+ 2: 'var(--bronze2)',
+ 3: 'var(--bronze3)',
+ 4: 'var(--bronze4)',
+ 5: 'var(--bronze5)',
+ 6: 'var(--bronze6)',
+ 7: 'var(--bronze7)',
+ 8: 'var(--bronze8)',
+ 9: 'var(--bronze9)',
+ 10: 'var(--bronze10)',
+ 11: 'var(--bronze11)',
+ 12: 'var(--bronze12)',
+ a1: 'var(--bronzeA1)',
+ a2: 'var(--bronzeA2)',
+ a3: 'var(--bronzeA3)',
+ a4: 'var(--bronzeA4)',
+ a5: 'var(--bronzeA5)',
+ a6: 'var(--bronzeA6)',
+ a7: 'var(--bronzeA7)',
+ a8: 'var(--bronzeA8)',
+ a9: 'var(--bronzeA9)',
+ a10: 'var(--bronzeA10)',
+ a11: 'var(--bronzeA11)',
+ a12: 'var(--bronzeA12)',
+ },
+ brown: {
+ 1: 'var(--brown1)',
+ 2: 'var(--brown2)',
+ 3: 'var(--brown3)',
+ 4: 'var(--brown4)',
+ 5: 'var(--brown5)',
+ 6: 'var(--brown6)',
+ 7: 'var(--brown7)',
+ 8: 'var(--brown8)',
+ 9: 'var(--brown9)',
+ 10: 'var(--brown10)',
+ 11: 'var(--brown11)',
+ 12: 'var(--brown12)',
+ a1: 'var(--brownA1)',
+ a2: 'var(--brownA2)',
+ a3: 'var(--brownA3)',
+ a4: 'var(--brownA4)',
+ a5: 'var(--brownA5)',
+ a6: 'var(--brownA6)',
+ a7: 'var(--brownA7)',
+ a8: 'var(--brownA8)',
+ a9: 'var(--brownA9)',
+ a10: 'var(--brownA10)',
+ a11: 'var(--brownA11)',
+ a12: 'var(--brownA12)',
+ },
+ crimson: {
+ 1: 'var(--crimson1)',
+ 2: 'var(--crimson2)',
+ 3: 'var(--crimson3)',
+ 4: 'var(--crimson4)',
+ 5: 'var(--crimson5)',
+ 6: 'var(--crimson6)',
+ 7: 'var(--crimson7)',
+ 8: 'var(--crimson8)',
+ 9: 'var(--crimson9)',
+ 10: 'var(--crimson10)',
+ 11: 'var(--crimson11)',
+ 12: 'var(--crimson12)',
+ a1: 'var(--crimsonA1)',
+ a2: 'var(--crimsonA2)',
+ a3: 'var(--crimsonA3)',
+ a4: 'var(--crimsonA4)',
+ a5: 'var(--crimsonA5)',
+ a6: 'var(--crimsonA6)',
+ a7: 'var(--crimsonA7)',
+ a8: 'var(--crimsonA8)',
+ a9: 'var(--crimsonA9)',
+ a10: 'var(--crimsonA10)',
+ a11: 'var(--crimsonA11)',
+ a12: 'var(--crimsonA12)',
+ },
+ cyan: {
+ 1: 'var(--cyan1)',
+ 2: 'var(--cyan2)',
+ 3: 'var(--cyan3)',
+ 4: 'var(--cyan4)',
+ 5: 'var(--cyan5)',
+ 6: 'var(--cyan6)',
+ 7: 'var(--cyan7)',
+ 8: 'var(--cyan8)',
+ 9: 'var(--cyan9)',
+ 10: 'var(--cyan10)',
+ 11: 'var(--cyan11)',
+ 12: 'var(--cyan12)',
+ a1: 'var(--cyanA1)',
+ a2: 'var(--cyanA2)',
+ a3: 'var(--cyanA3)',
+ a4: 'var(--cyanA4)',
+ a5: 'var(--cyanA5)',
+ a6: 'var(--cyanA6)',
+ a7: 'var(--cyanA7)',
+ a8: 'var(--cyanA8)',
+ a9: 'var(--cyanA9)',
+ a10: 'var(--cyanA10)',
+ a11: 'var(--cyanA11)',
+ a12: 'var(--cyanA12)',
+ },
+ gold: {
+ 1: 'var(--gold1)',
+ 2: 'var(--gold2)',
+ 3: 'var(--gold3)',
+ 4: 'var(--gold4)',
+ 5: 'var(--gold5)',
+ 6: 'var(--gold6)',
+ 7: 'var(--gold7)',
+ 8: 'var(--gold8)',
+ 9: 'var(--gold9)',
+ 10: 'var(--gold10)',
+ 11: 'var(--gold11)',
+ 12: 'var(--gold12)',
+ a1: 'var(--goldA1)',
+ a2: 'var(--goldA2)',
+ a3: 'var(--goldA3)',
+ a4: 'var(--goldA4)',
+ a5: 'var(--goldA5)',
+ a6: 'var(--goldA6)',
+ a7: 'var(--goldA7)',
+ a8: 'var(--goldA8)',
+ a9: 'var(--goldA9)',
+ a10: 'var(--goldA10)',
+ a11: 'var(--goldA11)',
+ a12: 'var(--goldA12)',
+ },
+ grass: {
+ 1: 'var(--grass1)',
+ 2: 'var(--grass2)',
+ 3: 'var(--grass3)',
+ 4: 'var(--grass4)',
+ 5: 'var(--grass5)',
+ 6: 'var(--grass6)',
+ 7: 'var(--grass7)',
+ 8: 'var(--grass8)',
+ 9: 'var(--grass9)',
+ 10: 'var(--grass10)',
+ 11: 'var(--grass11)',
+ 12: 'var(--grass12)',
+ a1: 'var(--grassA1)',
+ a2: 'var(--grassA2)',
+ a3: 'var(--grassA3)',
+ a4: 'var(--grassA4)',
+ a5: 'var(--grassA5)',
+ a6: 'var(--grassA6)',
+ a7: 'var(--grassA7)',
+ a8: 'var(--grassA8)',
+ a9: 'var(--grassA9)',
+ a10: 'var(--grassA10)',
+ a11: 'var(--grassA11)',
+ a12: 'var(--grassA12)',
+ },
+ green: {
+ 1: 'var(--green1)',
+ 2: 'var(--green2)',
+ 3: 'var(--green3)',
+ 4: 'var(--green4)',
+ 5: 'var(--green5)',
+ 6: 'var(--green6)',
+ 7: 'var(--green7)',
+ 8: 'var(--green8)',
+ 9: 'var(--green9)',
+ 10: 'var(--green10)',
+ 11: 'var(--green11)',
+ 12: 'var(--green12)',
+ a1: 'var(--greenA1)',
+ a2: 'var(--greenA2)',
+ a3: 'var(--greenA3)',
+ a4: 'var(--greenA4)',
+ a5: 'var(--greenA5)',
+ a6: 'var(--greenA6)',
+ a7: 'var(--greenA7)',
+ a8: 'var(--greenA8)',
+ a9: 'var(--greenA9)',
+ a10: 'var(--greenA10)',
+ a11: 'var(--greenA11)',
+ a12: 'var(--greenA12)',
+ },
+ indigo: {
+ 1: 'var(--indigo1)',
+ 2: 'var(--indigo2)',
+ 3: 'var(--indigo3)',
+ 4: 'var(--indigo4)',
+ 5: 'var(--indigo5)',
+ 6: 'var(--indigo6)',
+ 7: 'var(--indigo7)',
+ 8: 'var(--indigo8)',
+ 9: 'var(--indigo9)',
+ 10: 'var(--indigo10)',
+ 11: 'var(--indigo11)',
+ 12: 'var(--indigo12)',
+ a1: 'var(--indigoA1)',
+ a2: 'var(--indigoA2)',
+ a3: 'var(--indigoA3)',
+ a4: 'var(--indigoA4)',
+ a5: 'var(--indigoA5)',
+ a6: 'var(--indigoA6)',
+ a7: 'var(--indigoA7)',
+ a8: 'var(--indigoA8)',
+ a9: 'var(--indigoA9)',
+ a10: 'var(--indigoA10)',
+ a11: 'var(--indigoA11)',
+ a12: 'var(--indigoA12)',
+ },
+ iris: {
+ 1: 'var(--iris1)',
+ 2: 'var(--iris2)',
+ 3: 'var(--iris3)',
+ 4: 'var(--iris4)',
+ 5: 'var(--iris5)',
+ 6: 'var(--iris6)',
+ 7: 'var(--iris7)',
+ 8: 'var(--iris8)',
+ 9: 'var(--iris9)',
+ 10: 'var(--iris10)',
+ 11: 'var(--iris11)',
+ 12: 'var(--iris12)',
+ a1: 'var(--irisA1)',
+ a2: 'var(--irisA2)',
+ a3: 'var(--irisA3)',
+ a4: 'var(--irisA4)',
+ a5: 'var(--irisA5)',
+ a6: 'var(--irisA6)',
+ a7: 'var(--irisA7)',
+ a8: 'var(--irisA8)',
+ a9: 'var(--irisA9)',
+ a10: 'var(--irisA10)',
+ a11: 'var(--irisA11)',
+ a12: 'var(--irisA12)',
+ },
+ jade: {
+ 1: 'var(--jade1)',
+ 2: 'var(--jade2)',
+ 3: 'var(--jade3)',
+ 4: 'var(--jade4)',
+ 5: 'var(--jade5)',
+ 6: 'var(--jade6)',
+ 7: 'var(--jade7)',
+ 8: 'var(--jade8)',
+ 9: 'var(--jade9)',
+ 10: 'var(--jade10)',
+ 11: 'var(--jade11)',
+ 12: 'var(--jade12)',
+ a1: 'var(--jadeA1)',
+ a2: 'var(--jadeA2)',
+ a3: 'var(--jadeA3)',
+ a4: 'var(--jadeA4)',
+ a5: 'var(--jadeA5)',
+ a6: 'var(--jadeA6)',
+ a7: 'var(--jadeA7)',
+ a8: 'var(--jadeA8)',
+ a9: 'var(--jadeA9)',
+ a10: 'var(--jadeA10)',
+ a11: 'var(--jadeA11)',
+ a12: 'var(--jadeA12)',
+ },
+ lime: {
+ 1: 'var(--lime1)',
+ 2: 'var(--lime2)',
+ 3: 'var(--lime3)',
+ 4: 'var(--lime4)',
+ 5: 'var(--lime5)',
+ 6: 'var(--lime6)',
+ 7: 'var(--lime7)',
+ 8: 'var(--lime8)',
+ 9: 'var(--lime9)',
+ 10: 'var(--lime10)',
+ 11: 'var(--lime11)',
+ 12: 'var(--lime12)',
+ a1: 'var(--limeA1)',
+ a2: 'var(--limeA2)',
+ a3: 'var(--limeA3)',
+ a4: 'var(--limeA4)',
+ a5: 'var(--limeA5)',
+ a6: 'var(--limeA6)',
+ a7: 'var(--limeA7)',
+ a8: 'var(--limeA8)',
+ a9: 'var(--limeA9)',
+ a10: 'var(--limeA10)',
+ a11: 'var(--limeA11)',
+ a12: 'var(--limeA12)',
+ },
+ mauve: {
+ 1: 'var(--mauve1)',
+ 2: 'var(--mauve2)',
+ 3: 'var(--mauve3)',
+ 4: 'var(--mauve4)',
+ 5: 'var(--mauve5)',
+ 6: 'var(--mauve6)',
+ 7: 'var(--mauve7)',
+ 8: 'var(--mauve8)',
+ 9: 'var(--mauve9)',
+ 10: 'var(--mauve10)',
+ 11: 'var(--mauve11)',
+ 12: 'var(--mauve12)',
+ a1: 'var(--mauveA1)',
+ a2: 'var(--mauveA2)',
+ a3: 'var(--mauveA3)',
+ a4: 'var(--mauveA4)',
+ a5: 'var(--mauveA5)',
+ a6: 'var(--mauveA6)',
+ a7: 'var(--mauveA7)',
+ a8: 'var(--mauveA8)',
+ a9: 'var(--mauveA9)',
+ a10: 'var(--mauveA10)',
+ a11: 'var(--mauveA11)',
+ a12: 'var(--mauveA12)',
+ },
+ mint: {
+ 1: 'var(--mint1)',
+ 2: 'var(--mint2)',
+ 3: 'var(--mint3)',
+ 4: 'var(--mint4)',
+ 5: 'var(--mint5)',
+ 6: 'var(--mint6)',
+ 7: 'var(--mint7)',
+ 8: 'var(--mint8)',
+ 9: 'var(--mint9)',
+ 10: 'var(--mint10)',
+ 11: 'var(--mint11)',
+ 12: 'var(--mint12)',
+ a1: 'var(--mintA1)',
+ a2: 'var(--mintA2)',
+ a3: 'var(--mintA3)',
+ a4: 'var(--mintA4)',
+ a5: 'var(--mintA5)',
+ a6: 'var(--mintA6)',
+ a7: 'var(--mintA7)',
+ a8: 'var(--mintA8)',
+ a9: 'var(--mintA9)',
+ a10: 'var(--mintA10)',
+ a11: 'var(--mintA11)',
+ a12: 'var(--mintA12)',
+ },
+ olive: {
+ 1: 'var(--olive1)',
+ 2: 'var(--olive2)',
+ 3: 'var(--olive3)',
+ 4: 'var(--olive4)',
+ 5: 'var(--olive5)',
+ 6: 'var(--olive6)',
+ 7: 'var(--olive7)',
+ 8: 'var(--olive8)',
+ 9: 'var(--olive9)',
+ 10: 'var(--olive10)',
+ 11: 'var(--olive11)',
+ 12: 'var(--olive12)',
+ a1: 'var(--oliveA1)',
+ a2: 'var(--oliveA2)',
+ a3: 'var(--oliveA3)',
+ a4: 'var(--oliveA4)',
+ a5: 'var(--oliveA5)',
+ a6: 'var(--oliveA6)',
+ a7: 'var(--oliveA7)',
+ a8: 'var(--oliveA8)',
+ a9: 'var(--oliveA9)',
+ a10: 'var(--oliveA10)',
+ a11: 'var(--oliveA11)',
+ a12: 'var(--oliveA12)',
+ },
+ orange: {
+ 1: 'var(--orange1)',
+ 2: 'var(--orange2)',
+ 3: 'var(--orange3)',
+ 4: 'var(--orange4)',
+ 5: 'var(--orange5)',
+ 6: 'var(--orange6)',
+ 7: 'var(--orange7)',
+ 8: 'var(--orange8)',
+ 9: 'var(--orange9)',
+ 10: 'var(--orange10)',
+ 11: 'var(--orange11)',
+ 12: 'var(--orange12)',
+ a1: 'var(--orangeA1)',
+ a2: 'var(--orangeA2)',
+ a3: 'var(--orangeA3)',
+ a4: 'var(--orangeA4)',
+ a5: 'var(--orangeA5)',
+ a6: 'var(--orangeA6)',
+ a7: 'var(--orangeA7)',
+ a8: 'var(--orangeA8)',
+ a9: 'var(--orangeA9)',
+ a10: 'var(--orangeA10)',
+ a11: 'var(--orangeA11)',
+ a12: 'var(--orangeA12)',
+ },
+ pink: {
+ 1: 'var(--pink1)',
+ 2: 'var(--pink2)',
+ 3: 'var(--pink3)',
+ 4: 'var(--pink4)',
+ 5: 'var(--pink5)',
+ 6: 'var(--pink6)',
+ 7: 'var(--pink7)',
+ 8: 'var(--pink8)',
+ 9: 'var(--pink9)',
+ 10: 'var(--pink10)',
+ 11: 'var(--pink11)',
+ 12: 'var(--pink12)',
+ a1: 'var(--pinkA1)',
+ a2: 'var(--pinkA2)',
+ a3: 'var(--pinkA3)',
+ a4: 'var(--pinkA4)',
+ a5: 'var(--pinkA5)',
+ a6: 'var(--pinkA6)',
+ a7: 'var(--pinkA7)',
+ a8: 'var(--pinkA8)',
+ a9: 'var(--pinkA9)',
+ a10: 'var(--pinkA10)',
+ a11: 'var(--pinkA11)',
+ a12: 'var(--pinkA12)',
+ },
+ plum: {
+ 1: 'var(--plum1)',
+ 2: 'var(--plum2)',
+ 3: 'var(--plum3)',
+ 4: 'var(--plum4)',
+ 5: 'var(--plum5)',
+ 6: 'var(--plum6)',
+ 7: 'var(--plum7)',
+ 8: 'var(--plum8)',
+ 9: 'var(--plum9)',
+ 10: 'var(--plum10)',
+ 11: 'var(--plum11)',
+ 12: 'var(--plum12)',
+ a1: 'var(--plumA1)',
+ a2: 'var(--plumA2)',
+ a3: 'var(--plumA3)',
+ a4: 'var(--plumA4)',
+ a5: 'var(--plumA5)',
+ a6: 'var(--plumA6)',
+ a7: 'var(--plumA7)',
+ a8: 'var(--plumA8)',
+ a9: 'var(--plumA9)',
+ a10: 'var(--plumA10)',
+ a11: 'var(--plumA11)',
+ a12: 'var(--plumA12)',
+ },
+ purple: {
+ 1: 'var(--purple1)',
+ 2: 'var(--purple2)',
+ 3: 'var(--purple3)',
+ 4: 'var(--purple4)',
+ 5: 'var(--purple5)',
+ 6: 'var(--purple6)',
+ 7: 'var(--purple7)',
+ 8: 'var(--purple8)',
+ 9: 'var(--purple9)',
+ 10: 'var(--purple10)',
+ 11: 'var(--purple11)',
+ 12: 'var(--purple12)',
+ a1: 'var(--purpleA1)',
+ a2: 'var(--purpleA2)',
+ a3: 'var(--purpleA3)',
+ a4: 'var(--purpleA4)',
+ a5: 'var(--purpleA5)',
+ a6: 'var(--purpleA6)',
+ a7: 'var(--purpleA7)',
+ a8: 'var(--purpleA8)',
+ a9: 'var(--purpleA9)',
+ a10: 'var(--purpleA10)',
+ a11: 'var(--purpleA11)',
+ a12: 'var(--purpleA12)',
+ },
+ red: {
+ 1: 'var(--red1)',
+ 2: 'var(--red2)',
+ 3: 'var(--red3)',
+ 4: 'var(--red4)',
+ 5: 'var(--red5)',
+ 6: 'var(--red6)',
+ 7: 'var(--red7)',
+ 8: 'var(--red8)',
+ 9: 'var(--red9)',
+ 10: 'var(--red10)',
+ 11: 'var(--red11)',
+ 12: 'var(--red12)',
+ a1: 'var(--redA1)',
+ a2: 'var(--redA2)',
+ a3: 'var(--redA3)',
+ a4: 'var(--redA4)',
+ a5: 'var(--redA5)',
+ a6: 'var(--redA6)',
+ a7: 'var(--redA7)',
+ a8: 'var(--redA8)',
+ a9: 'var(--redA9)',
+ a10: 'var(--redA10)',
+ a11: 'var(--redA11)',
+ a12: 'var(--redA12)',
+ },
+ ruby: {
+ 1: 'var(--ruby1)',
+ 2: 'var(--ruby2)',
+ 3: 'var(--ruby3)',
+ 4: 'var(--ruby4)',
+ 5: 'var(--ruby5)',
+ 6: 'var(--ruby6)',
+ 7: 'var(--ruby7)',
+ 8: 'var(--ruby8)',
+ 9: 'var(--ruby9)',
+ 10: 'var(--ruby10)',
+ 11: 'var(--ruby11)',
+ 12: 'var(--ruby12)',
+ a1: 'var(--rubyA1)',
+ a2: 'var(--rubyA2)',
+ a3: 'var(--rubyA3)',
+ a4: 'var(--rubyA4)',
+ a5: 'var(--rubyA5)',
+ a6: 'var(--rubyA6)',
+ a7: 'var(--rubyA7)',
+ a8: 'var(--rubyA8)',
+ a9: 'var(--rubyA9)',
+ a10: 'var(--rubyA10)',
+ a11: 'var(--rubyA11)',
+ a12: 'var(--rubyA12)',
+ },
+ sage: {
+ 1: 'var(--sage1)',
+ 2: 'var(--sage2)',
+ 3: 'var(--sage3)',
+ 4: 'var(--sage4)',
+ 5: 'var(--sage5)',
+ 6: 'var(--sage6)',
+ 7: 'var(--sage7)',
+ 8: 'var(--sage8)',
+ 9: 'var(--sage9)',
+ 10: 'var(--sage10)',
+ 11: 'var(--sage11)',
+ 12: 'var(--sage12)',
+ a1: 'var(--sageA1)',
+ a2: 'var(--sageA2)',
+ a3: 'var(--sageA3)',
+ a4: 'var(--sageA4)',
+ a5: 'var(--sageA5)',
+ a6: 'var(--sageA6)',
+ a7: 'var(--sageA7)',
+ a8: 'var(--sageA8)',
+ a9: 'var(--sageA9)',
+ a10: 'var(--sageA10)',
+ a11: 'var(--sageA11)',
+ a12: 'var(--sageA12)',
+ },
+ sand: {
+ 1: 'var(--sand1)',
+ 2: 'var(--sand2)',
+ 3: 'var(--sand3)',
+ 4: 'var(--sand4)',
+ 5: 'var(--sand5)',
+ 6: 'var(--sand6)',
+ 7: 'var(--sand7)',
+ 8: 'var(--sand8)',
+ 9: 'var(--sand9)',
+ 10: 'var(--sand10)',
+ 11: 'var(--sand11)',
+ 12: 'var(--sand12)',
+ a1: 'var(--sandA1)',
+ a2: 'var(--sandA2)',
+ a3: 'var(--sandA3)',
+ a4: 'var(--sandA4)',
+ a5: 'var(--sandA5)',
+ a6: 'var(--sandA6)',
+ a7: 'var(--sandA7)',
+ a8: 'var(--sandA8)',
+ a9: 'var(--sandA9)',
+ a10: 'var(--sandA10)',
+ a11: 'var(--sandA11)',
+ a12: 'var(--sandA12)',
+ },
+ sky: {
+ 1: 'var(--sky1)',
+ 2: 'var(--sky2)',
+ 3: 'var(--sky3)',
+ 4: 'var(--sky4)',
+ 5: 'var(--sky5)',
+ 6: 'var(--sky6)',
+ 7: 'var(--sky7)',
+ 8: 'var(--sky8)',
+ 9: 'var(--sky9)',
+ 10: 'var(--sky10)',
+ 11: 'var(--sky11)',
+ 12: 'var(--sky12)',
+ a1: 'var(--skyA1)',
+ a2: 'var(--skyA2)',
+ a3: 'var(--skyA3)',
+ a4: 'var(--skyA4)',
+ a5: 'var(--skyA5)',
+ a6: 'var(--skyA6)',
+ a7: 'var(--skyA7)',
+ a8: 'var(--skyA8)',
+ a9: 'var(--skyA9)',
+ a10: 'var(--skyA10)',
+ a11: 'var(--skyA11)',
+ a12: 'var(--skyA12)',
+ },
+ slate: {
+ 1: 'var(--slate1)',
+ 2: 'var(--slate2)',
+ 3: 'var(--slate3)',
+ 4: 'var(--slate4)',
+ 5: 'var(--slate5)',
+ 6: 'var(--slate6)',
+ 7: 'var(--slate7)',
+ 8: 'var(--slate8)',
+ 9: 'var(--slate9)',
+ 10: 'var(--slate10)',
+ 11: 'var(--slate11)',
+ 12: 'var(--slate12)',
+ a1: 'var(--slateA1)',
+ a2: 'var(--slateA2)',
+ a3: 'var(--slateA3)',
+ a4: 'var(--slateA4)',
+ a5: 'var(--slateA5)',
+ a6: 'var(--slateA6)',
+ a7: 'var(--slateA7)',
+ a8: 'var(--slateA8)',
+ a9: 'var(--slateA9)',
+ a10: 'var(--slateA10)',
+ a11: 'var(--slateA11)',
+ a12: 'var(--slateA12)',
+ },
+ teal: {
+ 1: 'var(--teal1)',
+ 2: 'var(--teal2)',
+ 3: 'var(--teal3)',
+ 4: 'var(--teal4)',
+ 5: 'var(--teal5)',
+ 6: 'var(--teal6)',
+ 7: 'var(--teal7)',
+ 8: 'var(--teal8)',
+ 9: 'var(--teal9)',
+ 10: 'var(--teal10)',
+ 11: 'var(--teal11)',
+ 12: 'var(--teal12)',
+ a1: 'var(--tealA1)',
+ a2: 'var(--tealA2)',
+ a3: 'var(--tealA3)',
+ a4: 'var(--tealA4)',
+ a5: 'var(--tealA5)',
+ a6: 'var(--tealA6)',
+ a7: 'var(--tealA7)',
+ a8: 'var(--tealA8)',
+ a9: 'var(--tealA9)',
+ a10: 'var(--tealA10)',
+ a11: 'var(--tealA11)',
+ a12: 'var(--tealA12)',
+ },
+ tomato: {
+ 1: 'var(--tomato1)',
+ 2: 'var(--tomato2)',
+ 3: 'var(--tomato3)',
+ 4: 'var(--tomato4)',
+ 5: 'var(--tomato5)',
+ 6: 'var(--tomato6)',
+ 7: 'var(--tomato7)',
+ 8: 'var(--tomato8)',
+ 9: 'var(--tomato9)',
+ 10: 'var(--tomato10)',
+ 11: 'var(--tomato11)',
+ 12: 'var(--tomato12)',
+ a1: 'var(--tomatoA1)',
+ a2: 'var(--tomatoA2)',
+ a3: 'var(--tomatoA3)',
+ a4: 'var(--tomatoA4)',
+ a5: 'var(--tomatoA5)',
+ a6: 'var(--tomatoA6)',
+ a7: 'var(--tomatoA7)',
+ a8: 'var(--tomatoA8)',
+ a9: 'var(--tomatoA9)',
+ a10: 'var(--tomatoA10)',
+ a11: 'var(--tomatoA11)',
+ a12: 'var(--tomatoA12)',
+ },
+ violet: {
+ 1: 'var(--violet1)',
+ 2: 'var(--violet2)',
+ 3: 'var(--violet3)',
+ 4: 'var(--violet4)',
+ 5: 'var(--violet5)',
+ 6: 'var(--violet6)',
+ 7: 'var(--violet7)',
+ 8: 'var(--violet8)',
+ 9: 'var(--violet9)',
+ 10: 'var(--violet10)',
+ 11: 'var(--violet11)',
+ 12: 'var(--violet12)',
+ a1: 'var(--violetA1)',
+ a2: 'var(--violetA2)',
+ a3: 'var(--violetA3)',
+ a4: 'var(--violetA4)',
+ a5: 'var(--violetA5)',
+ a6: 'var(--violetA6)',
+ a7: 'var(--violetA7)',
+ a8: 'var(--violetA8)',
+ a9: 'var(--violetA9)',
+ a10: 'var(--violetA10)',
+ a11: 'var(--violetA11)',
+ a12: 'var(--violetA12)',
+ },
+ yellow: {
+ 1: 'var(--yellow1)',
+ 2: 'var(--yellow2)',
+ 3: 'var(--yellow3)',
+ 4: 'var(--yellow4)',
+ 5: 'var(--yellow5)',
+ 6: 'var(--yellow6)',
+ 7: 'var(--yellow7)',
+ 8: 'var(--yellow8)',
+ 9: 'var(--yellow9)',
+ 10: 'var(--yellow10)',
+ 11: 'var(--yellow11)',
+ 12: 'var(--yellow12)',
+ a1: 'var(--yellowA1)',
+ a2: 'var(--yellowA2)',
+ a3: 'var(--yellowA3)',
+ a4: 'var(--yellowA4)',
+ a5: 'var(--yellowA5)',
+ a6: 'var(--yellowA6)',
+ a7: 'var(--yellowA7)',
+ a8: 'var(--yellowA8)',
+ a9: 'var(--yellowA9)',
+ a10: 'var(--yellowA10)',
+ a11: 'var(--yellowA11)',
+ a12: 'var(--yellowA12)',
+ },
+ white: {
+ a1: 'var(--whiteA1)',
+ a2: 'var(--whiteA2)',
+ a3: 'var(--whiteA3)',
+ a4: 'var(--whiteA4)',
+ a5: 'var(--whiteA5)',
+ a6: 'var(--whiteA6)',
+ a7: 'var(--whiteA7)',
+ a8: 'var(--whiteA8)',
+ a9: 'var(--whiteA9)',
+ a10: 'var(--whiteA10)',
+ a11: 'var(--whiteA11)',
+ a12: 'var(--whiteA12)',
+ },
+ black: {
+ a1: 'var(--blackA1)',
+ a2: 'var(--blackA2)',
+ a3: 'var(--blackA3)',
+ a4: 'var(--blackA4)',
+ a5: 'var(--blackA5)',
+ a6: 'var(--blackA6)',
+ a7: 'var(--blackA7)',
+ a8: 'var(--blackA8)',
+ a9: 'var(--blackA9)',
+ a10: 'var(--blackA10)',
+ a11: 'var(--blackA11)',
+ a12: 'var(--blackA12)',
+ },
+ background: 'var(--gray2)',
foreground: 'var(--gray12)',
muted: {
@@ -172,15 +989,15 @@ export const prodktTailwindPreset: Config = {
12: 'var(--red12)',
},
- border: 'var(--gray4)',
- ring: 'var(--gray4)',
+ border: 'var(--grayA4)',
+ ring: 'var(--grayA4)',
},
borderRadius: {
radius: '0.5rem',
},
fontFamily: {
- sans: ['var(--font-labil-grotesk)'],
- mono: ['var(--font-ibm-plex-mono)'],
+ sans: ['var(--font-theme-sans)'],
+ mono: ['var(--font-theme-mono)'],
},
keyframes: {
'accordion-down': {
@@ -195,6 +1012,14 @@ export const prodktTailwindPreset: Config = {
'0%,70%,100%': { opacity: '1' },
'20%,50%': { opacity: '0' },
},
+ marquee: {
+ from: { transform: 'translateX(0)' },
+ to: { transform: 'translateX(calc(-100% - var(--gap)))' },
+ },
+ 'marquee-vertical': {
+ from: { transform: 'translateY(0)' },
+ to: { transform: 'translateY(calc(-100% - var(--gap)))' },
+ },
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
@@ -204,6 +1029,9 @@ export const prodktTailwindPreset: Config = {
spinSlow2x: 'spin 22.25s linear infinite',
spinSlow3x: 'spin 24.25s linear infinite',
spinSlow4x: 'spin 26.25s linear infinite',
+ marquee: 'marquee var(--duration) linear infinite',
+ 'marquee-vertical': 'marquee-vertical var(--duration) linear infinite',
+ 'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
},
transitionDelay: {
0: '0s',
@@ -215,6 +1043,15 @@ export const prodktTailwindPreset: Config = {
500: '500ms',
700: '700ms',
1000: '1000ms',
+ 2000: '2000ms',
+ 3000: '3000ms',
+ 4000: '4000ms',
+ 5000: '5000ms',
+ 6000: '6000ms',
+ 7000: '7000ms',
+ 8000: '8000ms',
+ 9000: '9000ms',
+ 10000: '10000ms',
},
transitionDuration: {
DEFAULT: '150ms',
@@ -227,6 +1064,15 @@ export const prodktTailwindPreset: Config = {
500: '500ms',
700: '700ms',
1000: '1000ms',
+ 2000: '2000ms',
+ 3000: '3000ms',
+ 4000: '4000ms',
+ 5000: '5000ms',
+ 6000: '6000ms',
+ 7000: '7000ms',
+ 8000: '8000ms',
+ 9000: '9000ms',
+ 10000: '10000ms',
},
transitionProperty: {
none: 'none',
@@ -281,6 +1127,35 @@ export const prodktTailwindPreset: Config = {
},
},
plugins: [
+ // biome-ignore lint/suspicious/noExplicitAny:
+ plugin(({ matchUtilities, theme }: any) => {
+ matchUtilities(
+ {
+ // biome-ignore lint/suspicious/noExplicitAny:
+ 'translate-z': (value: any) => ({
+ '--tw-translate-z': value,
+ transform:
+ ' translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
+ }), // this is actual CSS
+ // biome-ignore lint/suspicious/noExplicitAny:
+ 'text-shadow': (value: any) => ({
+ textShadow: value,
+ }),
+ },
+ { values: theme('textShadow') },
+ { values: theme('translate'), supportsNegativeValues: true },
+ )
+ }),
+ // biome-ignore lint/suspicious/noExplicitAny:
+ plugin(({ addUtilities }: any) => {
+ const newUtilities = {
+ '.text-shadow-glow': {
+ textShadow:
+ '0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.5)',
+ },
+ }
+ addUtilities(newUtilities)
+ }),
animate,
typography,
forms,
diff --git a/packages/config/tailwind/src/typography.css b/packages/config/tailwind/src/typography.css
new file mode 100644
index 0000000..e70e52c
--- /dev/null
+++ b/packages/config/tailwind/src/typography.css
@@ -0,0 +1,37 @@
+@import '@prodkt/assets/fonts/index.css';
+
+:root {
+ --font-theme-sans: var(--font-labil-grotesk);
+ --font-theme-mono: var(--font-ibm-plex-mono);
+}
+
+[data-typography='prodkt'],
+.radix-themes:where([data-typography='prodkt']) {
+ --font-theme-sans: var(--font-labil-grotesk);
+ --font-theme-mono: var(--font-ibm-plex-mono);
+}
+[data-typography='trendy'],
+.radix-themes:where([data-typography='trendy']) {
+ --font-theme-sans: var(--font-dm-sans-variable);
+ --font-theme-mono: var(--font-ibm-plex-mono);
+}
+[data-typography='techy'],
+.radix-themes:where([data-typography='techy']) {
+ --font-theme-sans: var(--font-space-grotesk);
+ --font-theme-mono: var(--font-jetbrains-mono-variable);
+}
+[data-typography='press'],
+.radix-themes:where([data-typography='press']) {
+ --font-theme-sans: var(--font-dm-sans-variable);
+ --font-theme-mono: var(--font-dm-mono);
+}
+[data-typography='giest'],
+.radix-themes:where([data-typography='giest']) {
+ --font-theme-sans: var(--font-geist-sans);
+ --font-theme-mono: var(--font-geist-mono);
+}
+[data-typography='steady'],
+.radix-themes:where([data-typography='steady']) {
+ --font-theme-sans: var(--font-figtree-variable);
+ --font-theme-mono: var(--font-jetbrains-mono-variable);
+}
diff --git a/packages/config/vite/package.json b/packages/config/vite/package.json
index fe713ea..5a40fbf 100644
--- a/packages/config/vite/package.json
+++ b/packages/config/vite/package.json
@@ -23,7 +23,7 @@
"dependencies": {
"@rollup/plugin-inject": "^5.0.5",
"@vitejs/plugin-react": "^4.3.1",
- "vite": "^5.4.6",
+ "vite": "^5.4.7",
"vite-tsconfig-paths": "^5.0.1",
"vue-tsc": "^2.1.6"
},
diff --git a/packages/config/vite/src/build.ts b/packages/config/vite/src/build.ts
index 6540488..7de080f 100644
--- a/packages/config/vite/src/build.ts
+++ b/packages/config/vite/src/build.ts
@@ -7,6 +7,7 @@ import type { Options as ExternalPluginOptions } from 'vite-plugin-external'
import { globbySync } from 'globby'
import preserveDirectives from 'rollup-plugin-preserve-directives'
+import sass from 'sass'
import { defineConfig, loadEnv } from 'vite'
import dtsPlugin from 'vite-plugin-dts'
import createExternal from 'vite-plugin-external'
@@ -36,10 +37,29 @@ export function buildConfig({
external?: ExternalPluginOptions
}) {
return defineConfig({
+ css: {
+ preprocessorOptions: {
+ scss: {
+ // This passes options to the Dart Sass compiler
+ sassOptions: {
+ silenceDeprecations: ['legacy-js-api'], // Silence the legacy API warnings
+ },
+ },
+ },
+ },
plugins: [
createExternal({
nodeBuiltins: true,
...external,
+ name: 'configure-sass',
+ configResolved() {
+ // Modify the Sass render function globally
+ sass.render = ((originalRender) => (options, callback) => {
+ // Add the silenceDeprecations option
+ options.silenceDeprecations = ['legacy-js-api']
+ originalRender.call(sass, options, callback)
+ })(sass.render)
+ },
}),
dtsPlugin({
compilerOptions: {
@@ -54,19 +74,14 @@ export function buildConfig({
}),
],
build: {
- sourcemap: true,
+ sourcemap: 'inline',
rollupOptions: {
plugins: [
preserveDirectives({
suppressPreserveModulesWarning: true,
}),
],
- external: [
- 'react',
- 'react-dom',
- '@dnd-kit',
- '@codesandbox/sandpack-react',
- ],
+ external: [/node_modules/],
output: {
preserveModules: true,
preserveModulesRoot: 'src',
diff --git a/packages/constants/package.json b/packages/constants/package.json
new file mode 100644
index 0000000..37d1aca
--- /dev/null
+++ b/packages/constants/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@prodkt/constants",
+ "version": "0.1.0",
+ "private": true,
+ "exports": {
+ ".": "./src/index.ts",
+ "./*": "./src/*"
+ },
+ "main": "./src/index.ts",
+ "dependencies": {
+ "@nivo/core": "^0.87.0",
+ "lucide-react": "^0.446.0"
+ }
+}
diff --git a/packages/constants/src/analytics.ts b/packages/constants/src/analytics.ts
new file mode 100644
index 0000000..fdced3a
--- /dev/null
+++ b/packages/constants/src/analytics.ts
@@ -0,0 +1,79 @@
+// types
+
+import { TXAxisValues, TYAxisValues } from '@prodkt/types'
+
+export const ANALYTICS_TABS = [
+ { key: 'scope_and_demand', title: 'Scope and Demand' },
+ { key: 'custom', title: 'Custom Analytics' },
+]
+
+export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
+ [
+ {
+ value: 'state_id',
+ label: 'State name',
+ },
+ {
+ value: 'state__group',
+ label: 'State group',
+ },
+ {
+ value: 'priority',
+ label: 'Priority',
+ },
+ {
+ value: 'labels__id',
+ label: 'Label',
+ },
+ {
+ value: 'assignees__id',
+ label: 'Assignee',
+ },
+ {
+ value: 'estimate_point',
+ label: 'Estimate point',
+ },
+ {
+ value: 'issue_cycle__cycle_id',
+ label: 'Cycle',
+ },
+ {
+ value: 'issue_module__module_id',
+ label: 'Module',
+ },
+ {
+ value: 'completed_at',
+ label: 'Completed date',
+ },
+ {
+ value: 'target_date',
+ label: 'Due date',
+ },
+ {
+ value: 'start_date',
+ label: 'Start date',
+ },
+ {
+ value: 'created_at',
+ label: 'Created date',
+ },
+ ]
+
+export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] =
+ [
+ {
+ value: 'issue_count',
+ label: 'Issue Count',
+ },
+ {
+ value: 'estimate',
+ label: 'Estimate',
+ },
+ ]
+
+export const DATE_KEYS = [
+ 'completed_at',
+ 'target_date',
+ 'start_date',
+ 'created_at',
+]
diff --git a/packages/constants/src/archives.ts b/packages/constants/src/archives.ts
new file mode 100644
index 0000000..48b6218
--- /dev/null
+++ b/packages/constants/src/archives.ts
@@ -0,0 +1,51 @@
+// types
+
+import { IProject } from '@prodkt/types'
+// icons
+import { ContrastIcon, DiceIcon, LayersIcon } from '@prodkt/ui/primitives'
+
+export const ARCHIVES_TAB_LIST: {
+ key: string
+ label: string
+ shouldRender: (projectDetails: IProject) => boolean
+}[] = [
+ {
+ key: 'issues',
+ label: 'Issues',
+ shouldRender: () => true,
+ },
+ {
+ key: 'cycles',
+ label: 'Cycles',
+ shouldRender: (projectDetails) => projectDetails.cycle_view,
+ },
+ {
+ key: 'modules',
+ label: 'Modules',
+ shouldRender: (projectDetails) => projectDetails.module_view,
+ },
+]
+
+export const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
+ [key: string]: {
+ label: string
+ href: string
+ icon: React.FC & { className?: string }>
+ }
+} = {
+ issues: {
+ label: 'Issues',
+ href: '/issues',
+ icon: LayersIcon,
+ },
+ cycles: {
+ label: 'Cycles',
+ href: '/cycles',
+ icon: ContrastIcon,
+ },
+ modules: {
+ label: 'Modules',
+ href: '/modules',
+ icon: DiceIcon,
+ },
+}
diff --git a/packages/constants/src/auth.ts b/packages/constants/src/auth.ts
new file mode 100644
index 0000000..bd2d20d
--- /dev/null
+++ b/packages/constants/src/auth.ts
@@ -0,0 +1,370 @@
+import type { ReactNode } from "react";
+
+export enum EPageTypes {
+ PUBLIC = "PUBLIC",
+ NON_AUTHENTICATED = "NON_AUTHENTICATED",
+ SET_PASSWORD = "SET_PASSWORD",
+ ONBOARDING = "ONBOARDING",
+ AUTHENTICATED = "AUTHENTICATED",
+}
+
+export enum EAuthModes {
+ SIGN_IN = "SIGN_IN",
+ SIGN_UP = "SIGN_UP",
+}
+
+export enum EAuthSteps {
+ EMAIL = "EMAIL",
+ PASSWORD = "PASSWORD",
+ UNIQUE_CODE = "UNIQUE_CODE",
+}
+
+// TODO: remove this
+export enum EErrorAlertType {
+ BANNER_ALERT = "BANNER_ALERT",
+ INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
+ INLINE_EMAIL = "INLINE_EMAIL",
+ INLINE_PASSWORD = "INLINE_PASSWORD",
+ INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
+}
+
+export enum EAuthErrorCodes {
+ // Global
+ INSTANCE_NOT_CONFIGURED = "5000",
+ INVALID_EMAIL = "5005",
+ EMAIL_REQUIRED = "5010",
+ SIGNUP_DISABLED = "5015",
+ MAGIC_LINK_LOGIN_DISABLED = "5017",
+ PASSWORD_LOGIN_DISABLED = "5019",
+ SMTP_NOT_CONFIGURED = "5025",
+ // Password strength
+ INVALID_PASSWORD = "5020",
+ // Sign Up
+ USER_ACCOUNT_DEACTIVATED = "5019",
+ USER_ALREADY_EXIST = "5030",
+ AUTHENTICATION_FAILED_SIGN_UP = "5035",
+ REQUIRED_EMAIL_PASSWORD_SIGN_UP = "5040",
+ INVALID_EMAIL_SIGN_UP = "5045",
+ INVALID_EMAIL_MAGIC_SIGN_UP = "5050",
+ MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED = "5055",
+ // Sign In
+ USER_DOES_NOT_EXIST = "5060",
+ AUTHENTICATION_FAILED_SIGN_IN = "5065",
+ REQUIRED_EMAIL_PASSWORD_SIGN_IN = "5070",
+ INVALID_EMAIL_SIGN_IN = "5075",
+ INVALID_EMAIL_MAGIC_SIGN_IN = "5080",
+ MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED = "5085",
+ // Both Sign in and Sign up for magic
+ INVALID_MAGIC_CODE = "5090",
+ EXPIRED_MAGIC_CODE = "5095",
+ EMAIL_CODE_ATTEMPT_EXHAUSTED = "5100",
+ // Oauth
+ GOOGLE_NOT_CONFIGURED = "5105",
+ GITHUB_NOT_CONFIGURED = "5110",
+ GOOGLE_OAUTH_PROVIDER_ERROR = "5115",
+ GITHUB_OAUTH_PROVIDER_ERROR = "5120",
+ // Reset Password
+ INVALID_PASSWORD_TOKEN = "5125",
+ EXPIRED_PASSWORD_TOKEN = "5130",
+ // Change password
+ INCORRECT_OLD_PASSWORD = "5135",
+ MISSING_PASSWORD= "5138",
+ INVALID_NEW_PASSWORD = "5140",
+ // set passowrd
+ PASSWORD_ALREADY_SET = "5145",
+ // Admin
+ ADMIN_ALREADY_EXIST = "5150",
+ REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
+ INVALID_ADMIN_EMAIL = "5160",
+ INVALID_ADMIN_PASSWORD = "5165",
+ REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
+ ADMIN_AUTHENTICATION_FAILED = "5175",
+ ADMIN_USER_ALREADY_EXIST = "5180",
+ ADMIN_USER_DOES_NOT_EXIST = "5185",
+}
+
+export type TAuthErrorInfo = {
+ type: EErrorAlertType;
+ code: EAuthErrorCodes;
+ title: string;
+ message: ReactNode;
+};
+
+const errorCodeMessages: {
+ [key in EAuthErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
+} = {
+ // global
+ [EAuthErrorCodes.INSTANCE_NOT_CONFIGURED]: {
+ title: `Instance not configured`,
+ message: () => `Instance not configured. Please contact your administrator.`,
+ },
+ [EAuthErrorCodes.SIGNUP_DISABLED]: {
+ title: `Sign up disabled`,
+ message: () => `Sign up disabled. Please contact your administrator.`,
+ },
+ [EAuthErrorCodes.INVALID_PASSWORD]: {
+ title: `Invalid password`,
+ message: () => `Invalid password. Please try again.`,
+ },
+ [EAuthErrorCodes.SMTP_NOT_CONFIGURED]: {
+ title: `SMTP not configured`,
+ message: () => `SMTP not configured. Please contact your administrator.`,
+ },
+
+ // email check in both sign up and sign in
+ [EAuthErrorCodes.INVALID_EMAIL]: {
+ title: `Invalid email`,
+ message: () => `Invalid email. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.EMAIL_REQUIRED]: {
+ title: `Email required`,
+ message: () => `Email required. Please try again.`,
+ },
+
+ // sign up
+ [EAuthenticationErrorCodes.USER_ALREADY_EXIST]: {
+ title: `User already exists`,
+ message: (email = undefined) => (
+
+ Your account is already registered.
+
+ Sign In
+
+ now.
+
Your account is deactivated. Contact support@prodkt.cloud.
,
+ },
+ [EAuthenticationErrorCodes.USER_DOES_NOT_EXIST]: {
+ title: `User does not exist`,
+ message: (email = undefined) => (
+
+ ),
+ },
+ [EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN]: {
+ title: `Email and password required`,
+ message: () => `Email and password required. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN]: {
+ title: `Authentication failed`,
+ message: () => `Authentication failed. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_IN]: {
+ title: `Invalid email`,
+ message: () => `Invalid email. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED]: {
+ title: `Email and code required`,
+ message: () => `Email and code required. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN]: {
+ title: `Invalid email`,
+ message: () => `Invalid email. Please try again.`,
+ },
+
+ // Both Sign in and Sign up
+ [EAuthenticationErrorCodes.INVALID_MAGIC_CODE]: {
+ title: `Authentication failed`,
+ message: () => `Invalid magic code. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE]: {
+ title: `Expired magic code`,
+ message: () => `Expired magic code. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED]: {
+ title: `Expired magic code`,
+ message: () => `Expired magic code. Please try again.`,
+ },
+
+ // Oauth
+ [EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED]: {
+ title: `Google not configured`,
+ message: () => `Google not configured. Please contact your administrator.`,
+ },
+ [EAuthenticationErrorCodes.GITHUB_NOT_CONFIGURED]: {
+ title: `GitHub not configured`,
+ message: () => `GitHub not configured. Please contact your administrator.`,
+ },
+ [EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR]: {
+ title: `Google OAuth provider error`,
+ message: () => `Google OAuth provider error. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR]: {
+ title: `GitHub OAuth provider error`,
+ message: () => `GitHub OAuth provider error. Please try again.`,
+ },
+
+ // Reset Password
+ [EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN]: {
+ title: `Invalid password token`,
+ message: () => `Invalid password token. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN]: {
+ title: `Expired password token`,
+ message: () => `Expired password token. Please try again.`,
+ },
+
+ // Change password
+
+ [EAuthenticationErrorCodes.MISSING_PASSWORD]: {
+ title: `Password required`,
+ message: () => `Password required. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD]: {
+ title: `Incorrect old password`,
+ message: () => `Incorrect old password. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.INVALID_NEW_PASSWORD]: {
+ title: `Invalid new password`,
+ message: () => `Invalid new password. Please try again.`,
+ },
+
+ // set password
+ [EAuthenticationErrorCodes.PASSWORD_ALREADY_SET]: {
+ title: `Password already set`,
+ message: () => `Password already set. Please try again.`,
+ },
+
+ // admin
+ [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
+ title: `Admin already exists`,
+ message: () => `Admin already exists. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+ title: `Email, password and first name required`,
+ message: () => `Email, password and first name required. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL]: {
+ title: `Invalid admin email`,
+ message: () => `Invalid admin email. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD]: {
+ title: `Invalid admin password`,
+ message: () => `Invalid admin password. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+ title: `Email and password required`,
+ message: () => `Email and password required. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+ title: `Authentication failed`,
+ message: () => `Authentication failed. Please try again.`,
+ },
+ [EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+ title: `Admin user already exists`,
+ message: () => (
+
+ ),
+ },
+ [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+ title: `Admin user does not exist`,
+ message: () => (
+
+ ),
+ },
+};
+
+export const authErrorHandler = (
+ errorCode: EAuthenticationErrorCodes,
+ email?: string | undefined
+): TAuthErrorInfo | undefined => {
+ const bannerAlertErrorCodes = [
+ EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED,
+ EAuthenticationErrorCodes.INVALID_EMAIL,
+ EAuthenticationErrorCodes.EMAIL_REQUIRED,
+ EAuthenticationErrorCodes.SIGNUP_DISABLED,
+ EAuthenticationErrorCodes.INVALID_PASSWORD,
+ EAuthenticationErrorCodes.SMTP_NOT_CONFIGURED,
+ EAuthenticationErrorCodes.USER_ALREADY_EXIST,
+ EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP,
+ EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP,
+ EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_UP,
+ EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP,
+ EAuthenticationErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED,
+ EAuthenticationErrorCodes.USER_DOES_NOT_EXIST,
+ EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN,
+ EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN,
+ EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_IN,
+ EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN,
+ EAuthenticationErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED,
+ EAuthenticationErrorCodes.INVALID_MAGIC_CODE,
+ EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE,
+ EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED,
+ EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED,
+ EAuthenticationErrorCodes.GITHUB_NOT_CONFIGURED,
+ EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR,
+ EAuthenticationErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR,
+ EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN,
+ EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN,
+ EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD,
+ EAuthenticationErrorCodes.INVALID_NEW_PASSWORD,
+ EAuthenticationErrorCodes.PASSWORD_ALREADY_SET,
+ EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
+ EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+ EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
+ EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD,
+ EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+ EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+ EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
+ EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+ ];
+
+ if (bannerAlertErrorCodes.includes(errorCode))
+ return {
+ type: EErrorAlertType.BANNER_ALERT,
+ code: errorCode,
+ title: errorCodeMessages[errorCode]?.title || "Error",
+ message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
+ };
+
+ return undefined;
+};
diff --git a/packages/constants/src/calendar.ts b/packages/constants/src/calendar.ts
new file mode 100644
index 0000000..2cf9f5d
--- /dev/null
+++ b/packages/constants/src/calendar.ts
@@ -0,0 +1,109 @@
+import { TCalendarLayouts } from '@prodkt/types'
+
+export const MONTHS_LIST: {
+ [monthNumber: number]: {
+ shortTitle: string
+ title: string
+ }
+} = {
+ 1: {
+ shortTitle: 'Jan',
+ title: 'January',
+ },
+ 2: {
+ shortTitle: 'Feb',
+ title: 'February',
+ },
+ 3: {
+ shortTitle: 'Mar',
+ title: 'March',
+ },
+ 4: {
+ shortTitle: 'Apr',
+ title: 'April',
+ },
+ 5: {
+ shortTitle: 'May',
+ title: 'May',
+ },
+ 6: {
+ shortTitle: 'Jun',
+ title: 'June',
+ },
+ 7: {
+ shortTitle: 'Jul',
+ title: 'July',
+ },
+ 8: {
+ shortTitle: 'Aug',
+ title: 'August',
+ },
+ 9: {
+ shortTitle: 'Sep',
+ title: 'September',
+ },
+ 10: {
+ shortTitle: 'Oct',
+ title: 'October',
+ },
+ 11: {
+ shortTitle: 'Nov',
+ title: 'November',
+ },
+ 12: {
+ shortTitle: 'Dec',
+ title: 'December',
+ },
+}
+
+export const DAYS_LIST: {
+ [dayIndex: number]: {
+ shortTitle: string
+ title: string
+ }
+} = {
+ 1: {
+ shortTitle: 'Sun',
+ title: 'Sunday',
+ },
+ 2: {
+ shortTitle: 'Mon',
+ title: 'Monday',
+ },
+ 3: {
+ shortTitle: 'Tue',
+ title: 'Tuesday',
+ },
+ 4: {
+ shortTitle: 'Wed',
+ title: 'Wednesday',
+ },
+ 5: {
+ shortTitle: 'Thu',
+ title: 'Thursday',
+ },
+ 6: {
+ shortTitle: 'Fri',
+ title: 'Friday',
+ },
+ 7: {
+ shortTitle: 'Sat',
+ title: 'Saturday',
+ },
+}
+
+export const CALENDAR_LAYOUTS: {
+ [layout in TCalendarLayouts]: {
+ key: TCalendarLayouts
+ title: string
+ }
+} = {
+ month: {
+ key: 'month',
+ title: 'Month layout',
+ },
+ week: {
+ key: 'week',
+ title: 'Week layout',
+ },
+}
diff --git a/packages/constants/src/common.ts b/packages/constants/src/common.ts
new file mode 100644
index 0000000..8cdcf23
--- /dev/null
+++ b/packages/constants/src/common.ts
@@ -0,0 +1,7 @@
+export const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
+
+export const MARKETING_PRICING_PAGE_LINK = 'https://prodkt.cloud/pricing'
+
+export const MARKETING_CONTACT_US_PAGE_LINK = 'https://prodkt.cloud/contact'
+
+export const MARKETING_PRODKT_ONE_PAGE_LINK = 'https://prodkt.cloud/one'
diff --git a/packages/constants/src/cycle.ts b/packages/constants/src/cycle.ts
new file mode 100644
index 0000000..8a4dcd0
--- /dev/null
+++ b/packages/constants/src/cycle.ts
@@ -0,0 +1,155 @@
+// types
+
+import type { TCycleLayoutOptions, TCycleTabOptions } from '@prodkt/types'
+
+import {
+ AlertOctagon,
+ BarChart4,
+ CircleDashed,
+ Folder,
+ GanttChartSquare,
+ LayoutGrid,
+ List,
+ Microscope,
+ Search,
+} from 'lucide-react'
+
+export const CYCLE_TABS_LIST: {
+ key: TCycleTabOptions
+ name: string
+}[] = [
+ {
+ key: 'active',
+ name: 'Active',
+ },
+ {
+ key: 'all',
+ name: 'All',
+ },
+]
+
+export const CYCLE_VIEW_LAYOUTS: {
+ key: TCycleLayoutOptions
+ icon: any
+ title: string
+}[] = [
+ {
+ key: 'list',
+ icon: List,
+ title: 'List layout',
+ },
+ {
+ key: 'board',
+ icon: LayoutGrid,
+ title: 'Grid layout',
+ },
+ {
+ key: 'gantt',
+ icon: GanttChartSquare,
+ title: 'Gantt layout',
+ },
+]
+
+export const CYCLE_STATUS: {
+ label: string
+ value: 'current' | 'upcoming' | 'completed' | 'draft'
+ title: string
+ color: string
+ textColor: string
+ bgColor: string
+}[] = [
+ {
+ label: 'day left',
+ value: 'current',
+ title: 'Active',
+ color: '#F59E0B',
+ textColor: 'text-amber-500',
+ bgColor: 'bg-amber-50',
+ },
+ {
+ label: 'Yet to start',
+ value: 'upcoming',
+ title: 'Yet to start',
+ color: '#3F76FF',
+ textColor: 'text-blue-500',
+ bgColor: 'bg-indigo-50',
+ },
+ {
+ label: 'Completed',
+ value: 'completed',
+ title: 'Completed',
+ color: '#16A34A',
+ textColor: 'text-green-600',
+ bgColor: 'bg-green-50',
+ },
+ {
+ label: 'Draft',
+ value: 'draft',
+ title: 'Draft',
+ color: '#525252',
+ textColor: 'text-custom-text-300',
+ bgColor: 'bg-custom-background-90',
+ },
+]
+
+export const CYCLE_STATE_GROUPS_DETAILS = [
+ {
+ key: 'completed_issues',
+ title: 'Completed',
+ color: '#6490FE',
+ },
+ {
+ key: 'started_issues',
+ title: 'Started',
+ color: '#FDD97F',
+ },
+ {
+ key: 'unstarted_issues',
+ title: 'Unstarted',
+ color: '#FEB055',
+ },
+ {
+ key: 'backlog_issues',
+ title: 'Backlog',
+ color: '#F0F0F3',
+ },
+]
+
+export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
+ {
+ title: '10,000-feet view of all active cycles.',
+ description:
+ 'Zoom out to see running cycles across all your projects at once instead of going from Cycle to Cycle in each project.',
+ icon: Folder,
+ },
+ {
+ title: 'Get a snapshot of each active cycle.',
+ description:
+ 'Track high-level metrics for all active cycles, see their state of progress, and get a sense of scope against deadlines.',
+ icon: CircleDashed,
+ },
+ {
+ title: 'Compare burndowns.',
+ description:
+ 'Monitor how each of your teams are performing with a peek into each cycle’s burndown report.',
+ icon: BarChart4,
+ },
+ {
+ title: 'Quickly see make-or-break issues. ',
+ description:
+ 'Preview high-priority issues for each cycle against due dates. See all of them per cycle in one click.',
+ icon: AlertOctagon,
+ },
+ {
+ title: 'Zoom into cycles that need attention. ',
+ description:
+ 'Investigate the state of any cycle that doesn’t conform to expectations in one click.',
+ icon: Search,
+ },
+ {
+ title: 'Stay ahead of blockers.',
+ description:
+ 'Spot challenges from one project to another and see inter-cycle dependencies that aren’t obvious from any other view.',
+ icon: Microscope,
+ },
+]
diff --git a/packages/constants/src/dashboard.ts b/packages/constants/src/dashboard.ts
new file mode 100644
index 0000000..c60afe2
--- /dev/null
+++ b/packages/constants/src/dashboard.ts
@@ -0,0 +1,311 @@
+import { linearGradientDef } from '@nivo/core'
+// assets
+import { BarChart2, Briefcase, CheckCircle, Home } from 'lucide-react'
+import CompletedIssuesDark from 'public/empty-state/dashboard/dark/completed-issues.svg'
+import OverdueIssuesDark from 'public/empty-state/dashboard/dark/overdue-issues.svg'
+import UpcomingIssuesDark from 'public/empty-state/dashboard/dark/upcoming-issues.svg'
+import CompletedIssuesLight from 'public/empty-state/dashboard/light/completed-issues.svg'
+import OverdueIssuesLight from 'public/empty-state/dashboard/light/overdue-issues.svg'
+import UpcomingIssuesLight from 'public/empty-state/dashboard/light/upcoming-issues.svg'
+
+// types
+import { TIssuesListTypes, TStateGroups } from '@prodkt/types'
+import { ContrastIcon } from '@prodkt/ui/primitives'
+
+import { Props } from '@/components/icons/types'
+
+// constants
+import { EUserWorkspaceRoles } from './workspace'
+
+// icons
+
+// gradients for issues by priority widget graph bars
+export const PRIORITY_GRAPH_GRADIENTS = [
+ linearGradientDef(
+ 'gradientUrgent',
+ [
+ { offset: 0, color: '#A90408' },
+ { offset: 100, color: '#DF4D51' },
+ ],
+ {
+ x1: 1,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ },
+ ),
+ linearGradientDef(
+ 'gradientHigh',
+ [
+ { offset: 0, color: '#FE6B00' },
+ { offset: 100, color: '#FFAC88' },
+ ],
+ {
+ x1: 1,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ },
+ ),
+ linearGradientDef(
+ 'gradientMedium',
+ [
+ { offset: 0, color: '#F5AC00' },
+ { offset: 100, color: '#FFD675' },
+ ],
+ {
+ x1: 1,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ },
+ ),
+ linearGradientDef(
+ 'gradientLow',
+ [
+ { offset: 0, color: '#1B46DE' },
+ { offset: 100, color: '#4F9BF4' },
+ ],
+ {
+ x1: 1,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ },
+ ),
+ linearGradientDef(
+ 'gradientNone',
+ [
+ { offset: 0, color: '#A0A1A9' },
+ { offset: 100, color: '#B9BBC6' },
+ ],
+ {
+ x1: 1,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ },
+ ),
+]
+
+// colors for issues by state group widget graph arcs
+export const STATE_GROUP_GRAPH_GRADIENTS = [
+ linearGradientDef('gradientBacklog', [
+ { offset: 0, color: '#DEDEDE' },
+ { offset: 100, color: '#BABABE' },
+ ]),
+ linearGradientDef('gradientUnstarted', [
+ { offset: 0, color: '#D4D4D4' },
+ { offset: 100, color: '#878796' },
+ ]),
+ linearGradientDef('gradientStarted', [
+ { offset: 0, color: '#FFD300' },
+ { offset: 100, color: '#FAE270' },
+ ]),
+ linearGradientDef('gradientCompleted', [
+ { offset: 0, color: '#0E8B1B' },
+ { offset: 100, color: '#37CB46' },
+ ]),
+ linearGradientDef('gradientCanceled', [
+ { offset: 0, color: '#C90004' },
+ { offset: 100, color: '#FF7679' },
+ ]),
+]
+
+export const STATE_GROUP_GRAPH_COLORS: Record = {
+ backlog: '#CDCED6',
+ unstarted: '#80838D',
+ started: '#FFC53D',
+ completed: '#3E9B4F',
+ cancelled: '#E5484D',
+}
+
+export enum EDurationFilters {
+ NONE = 'none',
+ TODAY = 'today',
+ THIS_WEEK = 'this_week',
+ THIS_MONTH = 'this_month',
+ THIS_YEAR = 'this_year',
+ CUSTOM = 'custom',
+}
+
+// filter duration options
+export const DURATION_FILTER_OPTIONS: {
+ key: EDurationFilters
+ label: string
+}[] = [
+ {
+ key: EDurationFilters.NONE,
+ label: 'All time',
+ },
+ {
+ key: EDurationFilters.TODAY,
+ label: 'Due today',
+ },
+ {
+ key: EDurationFilters.THIS_WEEK,
+ label: 'Due this week',
+ },
+ {
+ key: EDurationFilters.THIS_MONTH,
+ label: 'Due this month',
+ },
+ {
+ key: EDurationFilters.THIS_YEAR,
+ label: 'Due this year',
+ },
+ {
+ key: EDurationFilters.CUSTOM,
+ label: 'Custom',
+ },
+]
+
+// random background colors for project cards
+export const PROJECT_BACKGROUND_COLORS = [
+ 'bg-gray-500/20',
+ 'bg-green-500/20',
+ 'bg-red-500/20',
+ 'bg-orange-500/20',
+ 'bg-blue-500/20',
+ 'bg-yellow-500/20',
+ 'bg-pink-500/20',
+ 'bg-purple-500/20',
+]
+
+// assigned and created issues widgets tabs list
+export const FILTERED_ISSUES_TABS_LIST: {
+ key: TIssuesListTypes
+ label: string
+}[] = [
+ {
+ key: 'upcoming',
+ label: 'Upcoming',
+ },
+ {
+ key: 'overdue',
+ label: 'Overdue',
+ },
+ {
+ key: 'completed',
+ label: 'Marked completed',
+ },
+]
+
+// assigned and created issues widgets tabs list
+export const UNFILTERED_ISSUES_TABS_LIST: {
+ key: TIssuesListTypes
+ label: string
+}[] = [
+ {
+ key: 'pending',
+ label: 'Pending',
+ },
+ {
+ key: 'completed',
+ label: 'Marked completed',
+ },
+]
+
+export const ASSIGNED_ISSUES_EMPTY_STATES = {
+ pending: {
+ title: 'Issues assigned to you that are pending\nwill show up here.',
+ darkImage: UpcomingIssuesDark,
+ lightImage: UpcomingIssuesLight,
+ },
+ upcoming: {
+ title: 'Upcoming issues assigned to\nyou will show up here.',
+ darkImage: UpcomingIssuesDark,
+ lightImage: UpcomingIssuesLight,
+ },
+ overdue: {
+ title:
+ 'Issues assigned to you that are past\ntheir due date will show up here.',
+ darkImage: OverdueIssuesDark,
+ lightImage: OverdueIssuesLight,
+ },
+ completed: {
+ title:
+ 'Issues assigned to you that you have\nmarked Completed will show up here.',
+ darkImage: CompletedIssuesDark,
+ lightImage: CompletedIssuesLight,
+ },
+}
+
+export const CREATED_ISSUES_EMPTY_STATES = {
+ pending: {
+ title: 'Issues created by you that are pending\nwill show up here.',
+ darkImage: UpcomingIssuesDark,
+ lightImage: UpcomingIssuesLight,
+ },
+ upcoming: {
+ title: 'Upcoming issues you created\nwill show up here.',
+ darkImage: UpcomingIssuesDark,
+ lightImage: UpcomingIssuesLight,
+ },
+ overdue: {
+ title:
+ 'Issues created by you that are past their\ndue date will show up here.',
+ darkImage: OverdueIssuesDark,
+ lightImage: OverdueIssuesLight,
+ },
+ completed: {
+ title:
+ 'Issues created by you that you have\nmarked completed will show up here.',
+ darkImage: CompletedIssuesDark,
+ lightImage: CompletedIssuesLight,
+ },
+}
+
+export const SIDEBAR_MENU_ITEMS: {
+ key: string
+ label: string
+ href: string
+ access: EUserWorkspaceRoles
+ highlight: (pathname: string, baseUrl: string) => boolean
+ Icon: React.FC
+}[] = [
+ {
+ key: 'home',
+ label: 'Home',
+ href: ``,
+ access: EUserWorkspaceRoles.GUEST,
+ highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}`,
+ Icon: Home,
+ },
+ {
+ key: 'analytics',
+ label: 'Analytics',
+ href: `/analytics`,
+ access: EUserWorkspaceRoles.MEMBER,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname.includes(`${baseUrl}/analytics`),
+ Icon: BarChart2,
+ },
+ {
+ key: 'projects',
+ label: 'Projects',
+ href: `/projects`,
+ access: EUserWorkspaceRoles.GUEST,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/projects`,
+ Icon: Briefcase,
+ },
+ {
+ key: 'all-issues',
+ label: 'All Issues',
+ href: `/workspace-views/all-issues`,
+ access: EUserWorkspaceRoles.GUEST,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname.includes(`${baseUrl}/workspace-views`),
+ Icon: CheckCircle,
+ },
+ {
+ key: 'active-cycles',
+ label: 'Active Cycles',
+ href: `/active-cycles`,
+ access: EUserWorkspaceRoles.GUEST,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/active-cycles`,
+ Icon: ContrastIcon,
+ },
+]
diff --git a/packages/constants/src/editor.ts b/packages/constants/src/editor.ts
new file mode 100644
index 0000000..6683889
--- /dev/null
+++ b/packages/constants/src/editor.ts
@@ -0,0 +1,133 @@
+// editor
+
+import type { EditorMenuItemNames } from '@prodkt/document-editor'
+import type { LucideIcon } from 'lucide-react'
+
+import {
+ Bold,
+ CaseSensitive,
+ Code2,
+ Heading1,
+ Heading2,
+ Heading3,
+ Heading4,
+ Heading5,
+ Heading6,
+ Image,
+ Italic,
+ List,
+ ListOrdered,
+ ListTodo,
+ Quote,
+ Strikethrough,
+ Table,
+ Underline,
+} from 'lucide-react'
+
+type TEditorTypes = 'lite' | 'document'
+
+export type ToolbarMenuItem = {
+ key: EditorMenuItemNames
+ name: string
+ icon: LucideIcon
+ shortcut?: string[]
+ editors: TEditorTypes[]
+}
+
+export const TYPOGRAPHY_ITEMS: ToolbarMenuItem[] = [
+ { key: 'text', name: 'Text', icon: CaseSensitive, editors: ['document'] },
+ { key: 'h1', name: 'Heading 1', icon: Heading1, editors: ['document'] },
+ { key: 'h2', name: 'Heading 2', icon: Heading2, editors: ['document'] },
+ { key: 'h3', name: 'Heading 3', icon: Heading3, editors: ['document'] },
+ { key: 'h4', name: 'Heading 4', icon: Heading4, editors: ['document'] },
+ { key: 'h5', name: 'Heading 5', icon: Heading5, editors: ['document'] },
+ { key: 'h6', name: 'Heading 6', icon: Heading6, editors: ['document'] },
+]
+
+const BASIC_MARK_ITEMS: ToolbarMenuItem[] = [
+ {
+ key: 'bold',
+ name: 'Bold',
+ icon: Bold,
+ shortcut: ['Cmd', 'B'],
+ editors: ['lite', 'document'],
+ },
+ {
+ key: 'italic',
+ name: 'Italic',
+ icon: Italic,
+ shortcut: ['Cmd', 'I'],
+ editors: ['lite', 'document'],
+ },
+ {
+ key: 'underline',
+ name: 'Underline',
+ icon: Underline,
+ shortcut: ['Cmd', 'U'],
+ editors: ['lite', 'document'],
+ },
+ {
+ key: 'strikethrough',
+ name: 'Strikethrough',
+ icon: Strikethrough,
+ shortcut: ['Cmd', 'Shift', 'S'],
+ editors: ['lite', 'document'],
+ },
+]
+
+const LIST_ITEMS: ToolbarMenuItem[] = [
+ {
+ key: 'bulleted-list',
+ name: 'Bulleted list',
+ icon: List,
+ shortcut: ['Cmd', 'Shift', '7'],
+ editors: ['lite', 'document'],
+ },
+ {
+ key: 'numbered-list',
+ name: 'Numbered list',
+ icon: ListOrdered,
+ shortcut: ['Cmd', 'Shift', '8'],
+ editors: ['lite', 'document'],
+ },
+ {
+ key: 'to-do-list',
+ name: 'To-do list',
+ icon: ListTodo,
+ shortcut: ['Cmd', 'Shift', '9'],
+ editors: ['lite', 'document'],
+ },
+]
+
+const USER_ACTION_ITEMS: ToolbarMenuItem[] = [
+ { key: 'quote', name: 'Quote', icon: Quote, editors: ['lite', 'document'] },
+ { key: 'code', name: 'Code', icon: Code2, editors: ['lite', 'document'] },
+]
+
+const COMPLEX_ITEMS: ToolbarMenuItem[] = [
+ { key: 'table', name: 'Table', icon: Table, editors: ['document'] },
+ { key: 'image', name: 'Image', icon: Image, editors: ['lite', 'document'] },
+]
+
+export const TOOLBAR_ITEMS: {
+ [editorType in TEditorTypes]: {
+ [key: string]: ToolbarMenuItem[]
+ }
+} = {
+ lite: {
+ basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes('lite')),
+ list: LIST_ITEMS.filter((item) => item.editors.includes('lite')),
+ userAction: USER_ACTION_ITEMS.filter((item) =>
+ item.editors.includes('lite'),
+ ),
+ complex: COMPLEX_ITEMS.filter((item) => item.editors.includes('lite')),
+ },
+ document: {
+ basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes('document')),
+ list: LIST_ITEMS.filter((item) => item.editors.includes('document')),
+ userAction: USER_ACTION_ITEMS.filter((item) =>
+ item.editors.includes('document'),
+ ),
+ complex: COMPLEX_ITEMS.filter((item) => item.editors.includes('document')),
+ },
+}
diff --git a/packages/constants/src/empty-state.ts b/packages/constants/src/empty-state.ts
new file mode 100644
index 0000000..d1014bc
--- /dev/null
+++ b/packages/constants/src/empty-state.ts
@@ -0,0 +1,736 @@
+import { EUserProjectRoles } from './project'
+import { EUserWorkspaceRoles } from './workspace'
+
+export interface EmptyStateDetails {
+ key: EmptyStateType
+ title?: string
+ description?: string
+ path?: string
+ primaryButton?: {
+ icon?: React.ReactNode
+ text: string
+ comicBox?: {
+ title?: string
+ description?: string
+ }
+ }
+ secondaryButton?: {
+ icon?: React.ReactNode
+ text: string
+ comicBox?: {
+ title?: string
+ description?: string
+ }
+ }
+ accessType?: 'workspace' | 'project'
+ access?: EUserWorkspaceRoles | EUserProjectRoles
+}
+
+export enum EmptyStateType {
+ WORKSPACE_DASHBOARD = 'workspace-dashboard',
+ WORKSPACE_ANALYTICS = 'workspace-analytics',
+ WORKSPACE_PROJECTS = 'workspace-projects',
+ WORKSPACE_ALL_ISSUES = 'workspace-all-issues',
+ WORKSPACE_ASSIGNED = 'workspace-assigned',
+ WORKSPACE_CREATED = 'workspace-created',
+ WORKSPACE_SUBSCRIBED = 'workspace-subscribed',
+ WORKSPACE_CUSTOM_VIEW = 'workspace-custom-view',
+ WORKSPACE_NO_PROJECTS = 'workspace-no-projects',
+ WORKSPACE_SETTINGS_API_TOKENS = 'workspace-settings-api-tokens',
+ WORKSPACE_SETTINGS_WEBHOOKS = 'workspace-settings-webhooks',
+ WORKSPACE_SETTINGS_EXPORT = 'workspace-settings-export',
+ WORKSPACE_SETTINGS_IMPORT = 'workspace-settings-import',
+ PROFILE_ACTIVITY = 'profile-activity',
+ PROFILE_ASSIGNED = 'profile-assigned',
+ PROFILE_CREATED = 'profile-created',
+ PROFILE_SUBSCRIBED = 'profile-subscribed',
+ PROJECT_SETTINGS_LABELS = 'project-settings-labels',
+ PROJECT_SETTINGS_INTEGRATIONS = 'project-settings-integrations',
+ PROJECT_SETTINGS_ESTIMATE = 'project-settings-estimate',
+ PROJECT_CYCLES = 'project-cycles',
+ PROJECT_CYCLE_NO_ISSUES = 'project-cycle-no-issues',
+ PROJECT_CYCLE_ACTIVE = 'project-cycle-active',
+ PROJECT_CYCLE_ALL = 'project-cycle-all',
+ PROJECT_CYCLE_COMPLETED_NO_ISSUES = 'project-cycle-completed-no-issues',
+ PROJECT_ARCHIVED_NO_CYCLES = 'project-archived-no-cycles',
+ PROJECT_EMPTY_FILTER = 'project-empty-filter',
+ PROJECT_ARCHIVED_EMPTY_FILTER = 'project-archived-empty-filter',
+ PROJECT_DRAFT_EMPTY_FILTER = 'project-draft-empty-filter',
+ PROJECT_NO_ISSUES = 'project-no-issues',
+ PROJECT_ARCHIVED_NO_ISSUES = 'project-archived-no-issues',
+ PROJECT_DRAFT_NO_ISSUES = 'project-draft-no-issues',
+ VIEWS_EMPTY_SEARCH = 'views-empty-search',
+ PROJECTS_EMPTY_SEARCH = 'projects-empty-search',
+ MEMBERS_EMPTY_SEARCH = 'members-empty-search',
+ PROJECT_MODULE_ISSUES = 'project-module-issues',
+ PROJECT_MODULE = 'project-module',
+ PROJECT_ARCHIVED_NO_MODULES = 'project-archived-no-modules',
+ PROJECT_VIEW = 'project-view',
+ PROJECT_PAGE = 'project-page',
+ PROJECT_PAGE_PRIVATE = 'project-page-private',
+ PROJECT_PAGE_PUBLIC = 'project-page-public',
+ PROJECT_PAGE_ARCHIVED = 'project-page-archived',
+
+ COMMAND_K_SEARCH_EMPTY_STATE = 'command-k-search-empty-state',
+ ISSUE_RELATION_SEARCH_EMPTY_STATE = 'issue-relation-search-empty-state',
+ ISSUE_RELATION_EMPTY_STATE = 'issue-relation-empty-state',
+ ISSUE_COMMENT_EMPTY_STATE = 'issue-comment-empty-state',
+
+ NOTIFICATION_MY_ISSUE_EMPTY_STATE = 'notification-my-issues-empty-state',
+ NOTIFICATION_CREATED_EMPTY_STATE = 'notification-created-empty-state',
+ NOTIFICATION_SUBSCRIBED_EMPTY_STATE = 'notification-subscribed-empty-state',
+ NOTIFICATION_ARCHIVED_EMPTY_STATE = 'notification-archived-empty-state',
+ NOTIFICATION_SNOOZED_EMPTY_STATE = 'notification-snoozed-empty-state',
+ NOTIFICATION_UNREAD_EMPTY_STATE = 'notification-unread-empty-state',
+
+ ACTIVE_CYCLE_PROGRESS_EMPTY_STATE = 'active-cycle-progress-empty-state',
+ ACTIVE_CYCLE_CHART_EMPTY_STATE = 'active-cycle-chart-empty-state',
+ ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE = 'active-cycle-priority-issue-empty-state',
+ ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE = 'active-cycle-assignee-empty-state',
+ ACTIVE_CYCLE_LABEL_EMPTY_STATE = 'active-cycle-label-empty-state',
+
+ DISABLED_PROJECT_INBOX = 'disabled-project-inbox',
+ DISABLED_PROJECT_CYCLE = 'disabled-project-cycle',
+ DISABLED_PROJECT_MODULE = 'disabled-project-module',
+ DISABLED_PROJECT_VIEW = 'disabled-project-view',
+ DISABLED_PROJECT_PAGE = 'disabled-project-page',
+
+ INBOX_SIDEBAR_OPEN_TAB = 'inbox-sidebar-open-tab',
+ INBOX_SIDEBAR_CLOSED_TAB = 'inbox-sidebar-closed-tab',
+ INBOX_SIDEBAR_FILTER_EMPTY_STATE = 'inbox-sidebar-filter-empty-state',
+ INBOX_DETAIL_EMPTY_STATE = 'inbox-detail-empty-state',
+}
+
+const emptyStateDetails = {
+ // workspace
+ [EmptyStateType.WORKSPACE_DASHBOARD]: {
+ key: EmptyStateType.WORKSPACE_DASHBOARD,
+ title: 'Overview of your projects, activity, and metrics',
+ description:
+ ' Welcome to Prodkt, we are excited to have you here. Create your first project and track your issues, and this page will transform into a space that helps you progress. Admins will also see items which help their team progress.',
+ path: '/empty-state/onboarding/dashboard',
+ // path: "/empty-state/onboarding/",
+ primaryButton: {
+ text: 'Build your first project',
+ comicBox: {
+ title: 'Everything starts with a project in Prodkt',
+ description:
+ 'A project could be a product’s roadmap, a marketing campaign, or launching a new car.',
+ },
+ },
+
+ accessType: 'workspace',
+ access: EUserWorkspaceRoles.MEMBER,
+ },
+ [EmptyStateType.WORKSPACE_ANALYTICS]: {
+ key: EmptyStateType.WORKSPACE_ANALYTICS,
+ title:
+ 'Track progress, workloads, and allocations. Spot trends, remove blockers, and move work faster',
+ description:
+ 'See scope versus demand, estimates, and scope creep. Get performance by team members and teams, and make sure your project runs on time.',
+ path: '/empty-state/onboarding/analytics',
+ primaryButton: {
+ text: 'Create Cycles and Modules first',
+ comicBox: {
+ title: 'Analytics works best with Cycles + Modules',
+ description:
+ 'First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav.',
+ },
+ },
+ accessType: 'workspace',
+ access: EUserWorkspaceRoles.MEMBER,
+ },
+ [EmptyStateType.WORKSPACE_PROJECTS]: {
+ key: EmptyStateType.WORKSPACE_PROJECTS,
+ title: 'No active projects',
+ description:
+ 'Think of each project as the parent for goal-oriented work. Projects are where Jobs, Cycles, and Modules live and, along with your colleagues, help you achieve that goal. Create a new project or filter for archived projects.',
+ path: '/empty-state/onboarding/projects',
+ primaryButton: {
+ text: 'Start your first project',
+ comicBox: {
+ title: 'Everything starts with a project in Prodkt',
+ description:
+ 'A project could be a product’s roadmap, a marketing campaign, or launching a new car.',
+ },
+ },
+ accessType: 'workspace',
+ access: EUserWorkspaceRoles.MEMBER,
+ },
+ // all-issues
+ [EmptyStateType.WORKSPACE_ALL_ISSUES]: {
+ key: EmptyStateType.WORKSPACE_ALL_ISSUES,
+ title: 'No issues in the project',
+ description:
+ "First project done! Now, slice your work into trackable pieces with issues. Let's go!",
+ path: '/empty-state/all-issues/all-issues',
+ primaryButton: {
+ text: 'Create new issue',
+ },
+ accessType: 'workspace',
+ access: EUserWorkspaceRoles.MEMBER,
+ },
+ [EmptyStateType.WORKSPACE_ASSIGNED]: {
+ key: EmptyStateType.WORKSPACE_ASSIGNED,
+ title: 'No issues yet',
+ description: 'Issues assigned to you can be tracked from here.',
+ path: '/empty-state/all-issues/assigned',
+ primaryButton: {
+ text: 'Create new issue',
+ },
+ accessType: 'workspace',
+ access: EUserWorkspaceRoles.MEMBER,
+ },
+ [EmptyStateType.WORKSPACE_CREATED]: {
+ key: EmptyStateType.WORKSPACE_CREATED,
+ title: 'No issues yet',
+ description:
+ 'All issues created by you come here, track them here directly.',
+ path: '/empty-state/all-issues/created',
+ primaryButton: {
+ text: 'Create new issue',
+ },
+ accessType: 'workspace',
+ access: EUserWorkspaceRoles.MEMBER,
+ },
+ [EmptyStateType.WORKSPACE_SUBSCRIBED]: {
+ key: EmptyStateType.WORKSPACE_SUBSCRIBED,
+ title: 'No issues yet',
+ description:
+ 'Subscribe to issues you are interested in, track all of them here.',
+ path: '/empty-state/all-issues/subscribed',
+ },
+ [EmptyStateType.WORKSPACE_CUSTOM_VIEW]: {
+ key: EmptyStateType.WORKSPACE_CUSTOM_VIEW,
+ title: 'No issues yet',
+ description: 'Issues that applies to the filters, track all of them here.',
+ path: '/empty-state/all-issues/custom-view',
+ },
+ [EmptyStateType.WORKSPACE_NO_PROJECTS]: {
+ key: EmptyStateType.WORKSPACE_NO_PROJECTS,
+ title: 'No project',
+ description:
+ 'To create issues or manage your work, you need to create a project or be a part of one.',
+ path: '/empty-state/onboarding/projects',
+ primaryButton: {
+ text: 'Start your first project',
+ comicBox: {
+ title: 'Everything starts with a project in Prodkt',
+ description:
+ 'A project could be a product’s roadmap, a marketing campaign, or launching a new car.',
+ },
+ },
+ accessType: 'workspace',
+ access: EUserWorkspaceRoles.MEMBER,
+ },
+ // workspace settings
+ [EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS]: {
+ key: EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS,
+ title: 'No API tokens created',
+ description:
+ 'Prodkt APIs can be used to integrate your data in Prodkt with any external system. Create a token to get started.',
+ path: '/empty-state/workspace-settings/api-tokens',
+ },
+ [EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS]: {
+ key: EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS,
+ title: 'No webhooks added',
+ description:
+ 'Create webhooks to receive real-time updates and automate actions.',
+ path: '/empty-state/workspace-settings/webhooks',
+ },
+ [EmptyStateType.WORKSPACE_SETTINGS_EXPORT]: {
+ key: EmptyStateType.WORKSPACE_SETTINGS_EXPORT,
+ title: 'No previous exports yet',
+ description:
+ 'Anytime you export, you will also have a copy here for reference.',
+ path: '/empty-state/workspace-settings/exports',
+ },
+ [EmptyStateType.WORKSPACE_SETTINGS_IMPORT]: {
+ key: EmptyStateType.WORKSPACE_SETTINGS_IMPORT,
+ title: 'No previous imports yet',
+ description: 'Find all your previous imports here and download them.',
+ path: '/empty-state/workspace-settings/imports',
+ },
+ // profile
+ [EmptyStateType.PROFILE_ACTIVITY]: {
+ key: EmptyStateType.PROFILE_ASSIGNED,
+ title: 'No activities yet',
+ description:
+ 'Get started by creating a new issue! Add details and properties to it. Explore more in Prodkt to see your activity.',
+ path: '/empty-state/profile/activity',
+ },
+ [EmptyStateType.PROFILE_ASSIGNED]: {
+ key: EmptyStateType.PROFILE_ASSIGNED,
+ title: 'No issues are assigned to you',
+ description: 'Issues assigned to you can be tracked from here.',
+ path: '/empty-state/profile/assigned',
+ },
+ [EmptyStateType.PROFILE_CREATED]: {
+ key: EmptyStateType.PROFILE_CREATED,
+ title: 'No issues yet',
+ description:
+ 'All issues created by you come here, track them here directly.',
+ path: '/empty-state/profile/created',
+ },
+ [EmptyStateType.PROFILE_SUBSCRIBED]: {
+ key: EmptyStateType.PROFILE_SUBSCRIBED,
+ title: 'No issues yet',
+ description:
+ 'Subscribe to issues you are interested in, track all of them here.',
+ path: '/empty-state/profile/subscribed',
+ },
+ // project settings
+ [EmptyStateType.PROJECT_SETTINGS_LABELS]: {
+ key: EmptyStateType.PROJECT_SETTINGS_LABELS,
+ title: 'No labels yet',
+ description:
+ 'Create labels to help organize and filter issues in you project.',
+ path: '/empty-state/project-settings/labels',
+ },
+ [EmptyStateType.PROJECT_SETTINGS_INTEGRATIONS]: {
+ key: EmptyStateType.PROJECT_SETTINGS_INTEGRATIONS,
+ title: 'No integrations configured',
+ description:
+ 'Configure GitHub and other integrations to sync your project issues.',
+ path: '/empty-state/project-settings/integrations',
+ },
+ [EmptyStateType.PROJECT_SETTINGS_ESTIMATE]: {
+ key: EmptyStateType.PROJECT_SETTINGS_ESTIMATE,
+ title: 'No estimates added',
+ description:
+ 'Create a set of estimates to communicate the amount of work per issue.',
+ path: '/empty-state/project-settings/estimates',
+ },
+ // project cycles
+ [EmptyStateType.PROJECT_CYCLES]: {
+ key: EmptyStateType.PROJECT_CYCLES,
+ title: 'Group and timebox your work in Cycles.',
+ description:
+ 'Break work down by timeboxed chunks, work backwards from your project deadline to set dates, and make tangible progress as a team.',
+ path: '/empty-state/onboarding/cycles',
+ primaryButton: {
+ text: 'Set your first cycle',
+ comicBox: {
+ title: 'Cycles are repetitive time-boxes.',
+ description:
+ 'A sprint, an iteration, and or any other term you use for weekly or fortnightly tracking of work is a cycle.',
+ },
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_CYCLE_NO_ISSUES]: {
+ key: EmptyStateType.PROJECT_CYCLE_NO_ISSUES,
+ title: 'No issues added to the cycle',
+ description:
+ 'Add or create issues you wish to timebox and deliver within this cycle',
+ path: '/empty-state/cycle-issues/',
+ primaryButton: {
+ text: 'Create new issue ',
+ },
+ secondaryButton: {
+ text: 'Add an existing issue',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_CYCLE_ACTIVE]: {
+ key: EmptyStateType.PROJECT_CYCLE_ACTIVE,
+ title: 'No active cycle',
+ description:
+ "An active cycle includes any period that encompasses today's date within its range. Find the progress and details of the active cycle here.",
+ path: '/empty-state/cycle/active',
+ },
+ [EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES]: {
+ key: EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES,
+ title: 'No issues in the cycle',
+ description:
+ 'No issues in the cycle. Issues are either transferred or hidden. To see hidden issues if any, update your display properties accordingly.',
+ path: '/empty-state/cycle/completed-no-issues',
+ },
+ [EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES]: {
+ key: EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES,
+ title: 'No archived cycles yet',
+ description:
+ 'To tidy up your project, archive completed cycles. Find them here once archived.',
+ path: '/empty-state/archived/empty-cycles',
+ },
+ [EmptyStateType.PROJECT_CYCLE_ALL]: {
+ key: EmptyStateType.PROJECT_CYCLE_ALL,
+ title: 'No cycles',
+ description:
+ "An active cycle includes any period that encompasses today's date within its range. Find the progress and details of the active cycle here.",
+ path: '/empty-state/cycle/active',
+ },
+ // empty filters
+ [EmptyStateType.PROJECT_EMPTY_FILTER]: {
+ key: EmptyStateType.PROJECT_EMPTY_FILTER,
+ title: 'No issues found matching the filters applied',
+ path: '/empty-state/empty-filters/',
+ secondaryButton: {
+ text: 'Clear all filters',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER]: {
+ key: EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER,
+ title: 'No issues found matching the filters applied',
+ path: '/empty-state/empty-filters/',
+ secondaryButton: {
+ text: 'Clear all filters',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER]: {
+ key: EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER,
+ title: 'No issues found matching the filters applied',
+ path: '/empty-state/empty-filters/',
+ secondaryButton: {
+ text: 'Clear all filters',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ // project issues
+ [EmptyStateType.PROJECT_NO_ISSUES]: {
+ key: EmptyStateType.PROJECT_NO_ISSUES,
+ title: 'Create an issue and assign it to someone, even yourself',
+ description:
+ 'Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal.',
+ path: '/empty-state/onboarding/issues',
+ primaryButton: {
+ text: 'Create your first issue',
+ comicBox: {
+ title: 'Issues are building blocks in Prodkt.',
+ description:
+ 'Redesign the Prodkt UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.',
+ },
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES]: {
+ key: EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES,
+ title: 'No archived issues yet',
+ description:
+ 'Manually or through automation, you can archive issues that are completed or cancelled. Find them here once archived.',
+ path: '/empty-state/archived/empty-issues',
+ primaryButton: {
+ text: 'Set automation',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_DRAFT_NO_ISSUES]: {
+ key: EmptyStateType.PROJECT_DRAFT_NO_ISSUES,
+ title: 'No draft issues yet',
+ description:
+ 'Quickly stepping away but want to keep your place? No worries – save a draft now. Your issues will be right here waiting for you.',
+ path: '/empty-state/draft/draft-issues-empty',
+ },
+ [EmptyStateType.VIEWS_EMPTY_SEARCH]: {
+ key: EmptyStateType.VIEWS_EMPTY_SEARCH,
+ title: 'No matching views',
+ description:
+ 'No views match the search criteria. Create a new view instead.',
+ path: '/empty-state/search/search',
+ },
+ [EmptyStateType.PROJECTS_EMPTY_SEARCH]: {
+ key: EmptyStateType.PROJECTS_EMPTY_SEARCH,
+ title: 'No matching projects',
+ description:
+ 'No projects detected with the matching criteria. Create a new project instead.',
+ path: '/empty-state/search/project',
+ },
+ [EmptyStateType.MEMBERS_EMPTY_SEARCH]: {
+ key: EmptyStateType.MEMBERS_EMPTY_SEARCH,
+ title: 'No matching members',
+ description:
+ 'Add them to the project if they are already a part of the workspace',
+ path: '/empty-state/search/member',
+ },
+ // project module
+ [EmptyStateType.PROJECT_MODULE_ISSUES]: {
+ key: EmptyStateType.PROJECT_MODULE_ISSUES,
+ title: 'No issues in the module',
+ description:
+ 'Create or add issues which you want to accomplish as part of this module',
+ path: '/empty-state/module-issues/',
+ primaryButton: {
+ text: 'Create new issue ',
+ },
+ secondaryButton: {
+ text: 'Add an existing issue',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_MODULE]: {
+ key: EmptyStateType.PROJECT_MODULE,
+ title:
+ 'Map your project milestones to Modules and track aggregated work easily.',
+ description:
+ 'A group of issues that belong to a logical, hierarchical parent form a module. Think of them as a way to track work by project milestones. They have their own periods and deadlines as well as analytics to help you see how close or far you are from a milestone.',
+ path: '/empty-state/onboarding/modules',
+ primaryButton: {
+ text: 'Build your first module',
+ comicBox: {
+ title: 'Modules help group work by hierarchy.',
+ description:
+ 'A cart module, a chassis module, and a warehouse module are all good example of this grouping.',
+ },
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_ARCHIVED_NO_MODULES]: {
+ key: EmptyStateType.PROJECT_ARCHIVED_NO_MODULES,
+ title: 'No archived Modules yet',
+ description:
+ 'To tidy up your project, archive completed or cancelled modules. Find them here once archived.',
+ path: '/empty-state/archived/empty-modules',
+ },
+ // project views
+ [EmptyStateType.PROJECT_VIEW]: {
+ key: EmptyStateType.PROJECT_VIEW,
+ title: 'Save filtered views for your project. Create as many as you need',
+ description:
+ 'Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone’s views and choose whichever suits their needs best.',
+ path: '/empty-state/onboarding/views',
+ primaryButton: {
+ text: 'Create your first view',
+ comicBox: {
+ title: 'Views work atop Issue properties.',
+ description:
+ 'You can create a view from here with as many properties as filters as you see fit.',
+ },
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ // project pages
+ [EmptyStateType.PROJECT_PAGE]: {
+ key: EmptyStateType.PROJECT_PAGE,
+ title:
+ 'Write a note, a doc, or a full knowledge base. Get Galileo, Prodkt’s AI assistant, to help you get started',
+ description:
+ 'Pages are thoughts potting space in Prodkt. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Prodkt’s AI, with a shortcut or the click of a button.',
+ path: '/empty-state/onboarding/pages',
+ primaryButton: {
+ text: 'Create your first page',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_PAGE_PRIVATE]: {
+ key: EmptyStateType.PROJECT_PAGE_PRIVATE,
+ title: 'No private pages yet',
+ description:
+ "Keep your private thoughts here. When you're ready to share, the team's just a click away.",
+ path: '/empty-state/pages/private',
+ primaryButton: {
+ text: 'Create your first page',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_PAGE_PUBLIC]: {
+ key: EmptyStateType.PROJECT_PAGE_PUBLIC,
+ title: 'No public pages yet',
+ description: 'See pages shared with everyone in your project right here.',
+ path: '/empty-state/pages/public',
+ primaryButton: {
+ text: 'Create your first page',
+ },
+ accessType: 'project',
+ access: EUserProjectRoles.MEMBER,
+ },
+ [EmptyStateType.PROJECT_PAGE_ARCHIVED]: {
+ key: EmptyStateType.PROJECT_PAGE_ARCHIVED,
+ title: 'No archived pages yet',
+ description:
+ 'Archive pages not on your radar. Access them here when needed.',
+ path: '/empty-state/pages/archived',
+ },
+
+ [EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE]: {
+ key: EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE,
+ title: 'No results found',
+ path: '/empty-state/search/search',
+ },
+ [EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE]: {
+ key: EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE,
+ title: 'No matching issues found',
+ path: '/empty-state/search/search',
+ },
+ [EmptyStateType.ISSUE_RELATION_EMPTY_STATE]: {
+ key: EmptyStateType.ISSUE_RELATION_EMPTY_STATE,
+ title: 'No issues found',
+ path: '/empty-state/search/issues',
+ },
+ [EmptyStateType.ISSUE_COMMENT_EMPTY_STATE]: {
+ key: EmptyStateType.ISSUE_COMMENT_EMPTY_STATE,
+ title: 'No comments yet',
+ description:
+ 'Comments can be used as a discussion and \n follow-up space for the issues',
+ path: '/empty-state/search/comments',
+ },
+
+ [EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE]: {
+ key: EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE,
+ title: 'No issues assigned',
+ description: 'Updates for issues assigned to you can be \n seen here',
+ path: '/empty-state/search/notification',
+ },
+
+ [EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE]: {
+ key: EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE,
+ title: 'No updates to issues',
+ description: 'Updates to issues created by you can be \n seen here',
+ path: '/empty-state/search/notification',
+ },
+ [EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE]: {
+ key: EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE,
+ title: 'No updates to issues',
+ description:
+ 'Updates to any issue you are \n subscribed to can be seen here',
+ path: '/empty-state/search/notification',
+ },
+ [EmptyStateType.NOTIFICATION_UNREAD_EMPTY_STATE]: {
+ key: EmptyStateType.NOTIFICATION_UNREAD_EMPTY_STATE,
+ title: 'No unread notifications',
+ description:
+ 'Congratulations, you are up-to-date \n with everything happening in the issues \n you care about',
+ path: '/empty-state/search/notification',
+ },
+ [EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE]: {
+ key: EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE,
+ title: 'No snoozed notifications yet',
+ description:
+ 'Any notification you snooze for later will \n be available here to act upon',
+ path: '/empty-state/search/snooze',
+ },
+ [EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE]: {
+ key: EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE,
+ title: 'No archived notifications yet',
+ description:
+ 'Any notification you archive will be \n available here to help you focus',
+ path: '/empty-state/search/archive',
+ },
+ [EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE]: {
+ key: EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE,
+ title: "Add issues to the cycle to view it's \n progress",
+ path: '/empty-state/active-cycle/progress',
+ },
+ [EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE]: {
+ key: EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE,
+ title: 'Add issues to the cycle to view the \n burndown chart.',
+ path: '/empty-state/active-cycle/chart',
+ },
+ [EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE]: {
+ key: EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE,
+ title: 'Observe high priority issues tackled in \n the cycle at a glance.',
+ path: '/empty-state/active-cycle/priority',
+ },
+ [EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE]: {
+ key: EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE,
+ title:
+ 'Add assignees to issues to see a \n breakdown of work by assignees.',
+ path: '/empty-state/active-cycle/assignee',
+ },
+ [EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE]: {
+ key: EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE,
+ title: 'Add labels to issues to see the \n breakdown of work by labels.',
+ path: '/empty-state/active-cycle/label',
+ },
+ [EmptyStateType.DISABLED_PROJECT_INBOX]: {
+ key: EmptyStateType.DISABLED_PROJECT_INBOX,
+ title: 'Inbox is not enabled for the project.',
+ description:
+ 'Inbox helps you manage incoming requests to your project and add them as issues in your workflow. Enable inbox \n from project settings to manage requests.',
+ accessType: 'project',
+ access: EUserProjectRoles.ADMIN,
+ path: '/empty-state/disabled-feature/inbox',
+ primaryButton: {
+ text: 'Manage features',
+ },
+ },
+ [EmptyStateType.DISABLED_PROJECT_CYCLE]: {
+ key: EmptyStateType.DISABLED_PROJECT_CYCLE,
+ title: 'Cycles is not enabled for this project.',
+ description:
+ 'Break work down by timeboxed chunks, work backwards from your project deadline to set dates, and make tangible progress as a team. Enable the cycles feature for your project to start using them.',
+ accessType: 'project',
+ access: EUserProjectRoles.ADMIN,
+ path: '/empty-state/disabled-feature/cycles',
+ primaryButton: {
+ text: 'Manage features',
+ },
+ },
+ [EmptyStateType.DISABLED_PROJECT_MODULE]: {
+ key: EmptyStateType.DISABLED_PROJECT_MODULE,
+ title: 'Modules are not enabled for the project.',
+ description:
+ 'A group of issues that belong to a logical, hierarchical parent form a module. Think of them as a way to track work by project milestones. Enable modules from project settings.',
+ accessType: 'project',
+ access: EUserProjectRoles.ADMIN,
+ path: '/empty-state/disabled-feature/modules',
+ primaryButton: {
+ text: 'Manage features',
+ },
+ },
+ [EmptyStateType.DISABLED_PROJECT_PAGE]: {
+ key: EmptyStateType.DISABLED_PROJECT_PAGE,
+ title: 'Pages are not enabled for the project.',
+ description:
+ 'Pages are thought spotting space in Prodkt. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. Enable the pages feature to start creating them in your project.',
+ accessType: 'project',
+ access: EUserProjectRoles.ADMIN,
+ path: '/empty-state/disabled-feature/pages',
+ primaryButton: {
+ text: 'Manage features',
+ },
+ },
+ [EmptyStateType.DISABLED_PROJECT_VIEW]: {
+ key: EmptyStateType.DISABLED_PROJECT_VIEW,
+ title: 'Views is not enabled for this project.',
+ description:
+ 'Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone’s views and choose whichever suits their needs best. Enable views in the project settings to start using them.',
+ accessType: 'project',
+ access: EUserProjectRoles.ADMIN,
+ path: '/empty-state/disabled-feature/views',
+ primaryButton: {
+ text: 'Manage features',
+ },
+ },
+ [EmptyStateType.INBOX_SIDEBAR_OPEN_TAB]: {
+ key: EmptyStateType.INBOX_SIDEBAR_OPEN_TAB,
+ title: 'No open issues',
+ description: 'Find open issues here. Create new issue.',
+ path: '/empty-state/inbox/inbox-issue',
+ },
+ [EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB]: {
+ key: EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB,
+ title: 'No closed issues',
+ description:
+ 'All the issues whether accepted or \n declined can be found here.',
+ path: '/empty-state/inbox/inbox-issue',
+ },
+ [EmptyStateType.INBOX_SIDEBAR_FILTER_EMPTY_STATE]: {
+ key: EmptyStateType.INBOX_SIDEBAR_FILTER_EMPTY_STATE,
+ title: 'No matching issues',
+ description:
+ 'No issue matches filter applied in inbox. \n Create a new issue.',
+ path: '/empty-state/inbox/filter-issue',
+ },
+ [EmptyStateType.INBOX_DETAIL_EMPTY_STATE]: {
+ key: EmptyStateType.INBOX_DETAIL_EMPTY_STATE,
+ title: 'Select an issue to view its details.',
+ path: '/empty-state/inbox/issue-detail',
+ },
+} as const
+
+export const EMPTY_STATE_DETAILS: Record =
+ emptyStateDetails
diff --git a/packages/constants/src/event-tracker.ts b/packages/constants/src/event-tracker.ts
new file mode 100644
index 0000000..14ef5f1
--- /dev/null
+++ b/packages/constants/src/event-tracker.ts
@@ -0,0 +1,227 @@
+export type IssueEventProps = {
+ eventName: string
+ payload: any
+ updates?: any
+ path?: string
+}
+
+export type EventProps = {
+ eventName: string
+ payload: any
+}
+
+export const getWorkspaceEventPayload = (payload: any) => ({
+ workspace_id: payload.id,
+ created_at: payload.created_at,
+ updated_at: payload.updated_at,
+ organization_size: payload.organization_size,
+ first_time: payload.first_time,
+ state: payload.state,
+ element: payload.element,
+})
+
+export const getProjectEventPayload = (payload: any) => ({
+ workspace_id: payload.workspace_id,
+ project_id: payload.id,
+ identifier: payload.identifier,
+ project_visibility: payload.network == 2 ? 'Public' : 'Private',
+ changed_properties: payload.changed_properties,
+ lead_id: payload.project_lead,
+ created_at: payload.created_at,
+ updated_at: payload.updated_at,
+ state: payload.state,
+ element: payload.element,
+})
+
+export const getCycleEventPayload = (payload: any) => ({
+ workspace_id: payload.workspace_id,
+ project_id: payload.project,
+ cycle_id: payload.id,
+ created_at: payload.created_at,
+ updated_at: payload.updated_at,
+ start_date: payload.start_date,
+ target_date: payload.target_date,
+ cycle_status: payload.status,
+ changed_properties: payload.changed_properties,
+ state: payload.state,
+ element: payload.element,
+})
+
+export const getModuleEventPayload = (payload: any) => ({
+ workspace_id: payload.workspace_id,
+ project_id: payload.project,
+ module_id: payload.id,
+ created_at: payload.created_at,
+ updated_at: payload.updated_at,
+ start_date: payload.start_date,
+ target_date: payload.target_date,
+ module_status: payload.status,
+ lead_id: payload.lead,
+ changed_properties: payload.changed_properties,
+ member_ids: payload.members,
+ state: payload.state,
+ element: payload.element,
+})
+
+export const getPageEventPayload = (payload: any) => ({
+ workspace_id: payload.workspace_id,
+ project_id: payload.project,
+ created_at: payload.created_at,
+ updated_at: payload.updated_at,
+ access: payload.access === 0 ? 'Public' : 'Private',
+ is_locked: payload.is_locked,
+ archived_at: payload.archived_at,
+ created_by: payload.created_by,
+ state: payload.state,
+ element: payload.element,
+})
+
+export const getIssueEventPayload = (props: IssueEventProps) => {
+ const { eventName, payload, updates, path } = props
+ let eventPayload: any = {
+ issue_id: payload.id,
+ estimate_point: payload.estimate_point,
+ link_count: payload.link_count,
+ target_date: payload.target_date,
+ is_draft: payload.is_draft,
+ label_ids: payload.label_ids,
+ assignee_ids: payload.assignee_ids,
+ created_at: payload.created_at,
+ updated_at: payload.updated_at,
+ sequence_id: payload.sequence_id,
+ module_ids: payload.module_ids,
+ sub_issues_count: payload.sub_issues_count,
+ parent_id: payload.parent_id,
+ project_id: payload.project_id,
+ workspace_id: payload.workspace_id,
+ priority: payload.priority,
+ state_id: payload.state_id,
+ start_date: payload.start_date,
+ attachment_count: payload.attachment_count,
+ cycle_id: payload.cycle_id,
+ module_id: payload.module_id,
+ archived_at: payload.archived_at,
+ state: payload.state,
+ view_id:
+ path?.includes('workspace-views') || path?.includes('views')
+ ? path.split('/').pop()
+ : '',
+ }
+
+ if (eventName === ISSUE_UPDATED) {
+ eventPayload = {
+ ...eventPayload,
+ ...updates,
+ updated_from: props.path?.includes('workspace-views')
+ ? 'All views'
+ : props.path?.includes('cycles')
+ ? 'Cycle'
+ : props.path?.includes('modules')
+ ? 'Module'
+ : props.path?.includes('views')
+ ? 'Project view'
+ : props.path?.includes('inbox')
+ ? 'Inbox'
+ : props.path?.includes('draft')
+ ? 'Draft'
+ : 'Project',
+ }
+ }
+ return eventPayload
+}
+
+export const getProjectStateEventPayload = (payload: any) => ({
+ workspace_id: payload.workspace_id,
+ project_id: payload.id,
+ state_id: payload.id,
+ created_at: payload.created_at,
+ updated_at: payload.updated_at,
+ group: payload.group,
+ color: payload.color,
+ default: payload.default,
+ state: payload.state,
+ element: payload.element,
+})
+
+// Workspace crud Events
+export const WORKSPACE_CREATED = 'Workspace created'
+export const WORKSPACE_UPDATED = 'Workspace updated'
+export const WORKSPACE_DELETED = 'Workspace deleted'
+// Project Events
+export const PROJECT_CREATED = 'Project created'
+export const PROJECT_UPDATED = 'Project updated'
+export const PROJECT_DELETED = 'Project deleted'
+// Cycle Events
+export const CYCLE_CREATED = 'Cycle created'
+export const CYCLE_UPDATED = 'Cycle updated'
+export const CYCLE_DELETED = 'Cycle deleted'
+export const CYCLE_FAVORITED = 'Cycle favorited'
+export const CYCLE_UNFAVORITED = 'Cycle unfavorited'
+// Module Events
+export const MODULE_CREATED = 'Module created'
+export const MODULE_UPDATED = 'Module updated'
+export const MODULE_DELETED = 'Module deleted'
+export const MODULE_FAVORITED = 'Module favorited'
+export const MODULE_UNFAVORITED = 'Module unfavorited'
+export const MODULE_LINK_CREATED = 'Module link created'
+export const MODULE_LINK_UPDATED = 'Module link updated'
+export const MODULE_LINK_DELETED = 'Module link deleted'
+// Issue Events
+export const ISSUE_CREATED = 'Issue created'
+export const ISSUE_UPDATED = 'Issue updated'
+export const ISSUE_DELETED = 'Issue deleted'
+export const ISSUE_ARCHIVED = 'Issue archived'
+export const ISSUE_RESTORED = 'Issue restored'
+export const ISSUE_OPENED = 'Issue opened'
+// Project State Events
+export const STATE_CREATED = 'State created'
+export const STATE_UPDATED = 'State updated'
+export const STATE_DELETED = 'State deleted'
+// Project Page Events
+export const PAGE_CREATED = 'Page created'
+export const PAGE_UPDATED = 'Page updated'
+export const PAGE_DELETED = 'Page deleted'
+// Member Events
+export const MEMBER_INVITED = 'Member invited'
+export const MEMBER_ACCEPTED = 'Member accepted'
+export const PROJECT_MEMBER_ADDED = 'Project member added'
+export const PROJECT_MEMBER_LEAVE = 'Project member leave'
+export const WORKSPACE_MEMBER_lEAVE = 'Workspace member leave'
+// Sign-in & Sign-up Events
+export const NAVIGATE_TO_SIGNUP = 'Navigate to sign-up page'
+export const NAVIGATE_TO_SIGNIN = 'Navigate to sign-in page'
+export const CODE_VERIFIED = 'Code verified'
+export const SETUP_PASSWORD = 'Password setup'
+export const PASSWORD_CREATE_SELECTED = 'Password created'
+export const PASSWORD_CREATE_SKIPPED = 'Skipped to setup'
+export const SIGN_IN_WITH_PASSWORD = 'Sign in with password'
+export const FORGOT_PASSWORD = 'Forgot password clicked'
+export const FORGOT_PASS_LINK = 'Forgot password link generated'
+export const NEW_PASS_CREATED = 'New password created'
+// Onboarding Events
+export const USER_DETAILS = 'User details added'
+export const USER_ONBOARDING_COMPLETED = 'User onboarding completed'
+// Product Tour Events
+export const PRODUCT_TOUR_STARTED = 'Product tour started'
+export const PRODUCT_TOUR_COMPLETED = 'Product tour completed'
+export const PRODUCT_TOUR_SKIPPED = 'Product tour skipped'
+// Dashboard Events
+export const CHANGELOG_REDIRECTED = 'Changelog redirected'
+export const GITHUB_REDIRECTED = 'Github redirected'
+// Sidebar Events
+export const SIDEBAR_CLICKED = 'Sidenav clicked'
+// Global View Events
+export const GLOBAL_VIEW_CREATED = 'Global view created'
+export const GLOBAL_VIEW_UPDATED = 'Global view updated'
+export const GLOBAL_VIEW_DELETED = 'Global view deleted'
+export const GLOBAL_VIEW_OPENED = 'Global view opened'
+// Notification Events
+export const NOTIFICATION_ARCHIVED = 'Notification archived'
+export const NOTIFICATION_SNOOZED = 'Notification snoozed'
+export const NOTIFICATION_READ = 'Notification marked read'
+export const UNREAD_NOTIFICATIONS = 'Unread notifications viewed'
+export const NOTIFICATIONS_READ = 'All notifications marked read'
+export const SNOOZED_NOTIFICATIONS = 'Snoozed notifications viewed'
+export const ARCHIVED_NOTIFICATIONS = 'Archived notifications viewed'
+// Groups
+export const GROUP_WORKSPACE = 'Workspace_metrics'
diff --git a/packages/constants/src/fetch-keys.ts b/packages/constants/src/fetch-keys.ts
new file mode 100644
index 0000000..ba947a0
--- /dev/null
+++ b/packages/constants/src/fetch-keys.ts
@@ -0,0 +1,433 @@
+import { objToQueryParams } from '@prodkt/helpers/string.helper'
+import {
+ IAnalyticsParams,
+ IJiraMetadata,
+ INotificationParams,
+} from '@prodkt/types'
+
+const paramsToKey = (params: any) => {
+ const {
+ state,
+ state_group,
+ priority,
+ mentions,
+ assignees,
+ created_by,
+ labels,
+ start_date,
+ target_date,
+ sub_issue,
+ project,
+ layout,
+ subscriber,
+ } = params
+
+ let projectKey = project ? project.split(',') : []
+ let stateKey = state ? state.split(',') : []
+ let stateGroupKey = state_group ? state_group.split(',') : []
+ let priorityKey = priority ? priority.split(',') : []
+ let mentionsKey = mentions ? mentions.split(',') : []
+ let assigneesKey = assignees ? assignees.split(',') : []
+ let createdByKey = created_by ? created_by.split(',') : []
+ let labelsKey = labels ? labels.split(',') : []
+ let subscriberKey = subscriber ? subscriber.split(',') : []
+ const startDateKey = start_date ?? ''
+ const targetDateKey = target_date ?? ''
+ const type = params.type ? params.type.toUpperCase() : 'NULL'
+ const groupBy = params.group_by ? params.group_by.toUpperCase() : 'NULL'
+ const orderBy = params.order_by ? params.order_by.toUpperCase() : 'NULL'
+ const layoutKey = layout ? layout.toUpperCase() : ''
+
+ // sorting each keys in ascending order
+ projectKey = projectKey.sort().join('_')
+ stateKey = stateKey.sort().join('_')
+ stateGroupKey = stateGroupKey.sort().join('_')
+ priorityKey = priorityKey.sort().join('_')
+ assigneesKey = assigneesKey.sort().join('_')
+ mentionsKey = mentionsKey.sort().join('_')
+ createdByKey = createdByKey.sort().join('_')
+ labelsKey = labelsKey.sort().join('_')
+ subscriberKey = subscriberKey.sort().join('_')
+
+ return `${layoutKey}_${projectKey}_${stateGroupKey}_${stateKey}_${priorityKey}_${assigneesKey}_${mentionsKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${subscriberKey}`
+}
+
+const myIssuesParamsToKey = (params: any) => {
+ const {
+ assignees,
+ created_by,
+ labels,
+ priority,
+ state_group,
+ subscriber,
+ start_date,
+ target_date,
+ } = params
+
+ let assigneesKey = assignees ? assignees.split(',') : []
+ let createdByKey = created_by ? created_by.split(',') : []
+ let stateGroupKey = state_group ? state_group.split(',') : []
+ let subscriberKey = subscriber ? subscriber.split(',') : []
+ let priorityKey = priority ? priority.split(',') : []
+ let labelsKey = labels ? labels.split(',') : []
+ const startDateKey = start_date ?? ''
+ const targetDateKey = target_date ?? ''
+ const type = params?.type ? params.type.toUpperCase() : 'NULL'
+ const groupBy = params?.group_by ? params.group_by.toUpperCase() : 'NULL'
+ const orderBy = params?.order_by ? params.order_by.toUpperCase() : 'NULL'
+
+ // sorting each keys in ascending order
+ assigneesKey = assigneesKey.sort().join('_')
+ createdByKey = createdByKey.sort().join('_')
+ stateGroupKey = stateGroupKey.sort().join('_')
+ subscriberKey = subscriberKey.sort().join('_')
+ priorityKey = priorityKey.sort().join('_')
+ labelsKey = labelsKey.sort().join('_')
+
+ return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}`
+}
+
+export const CURRENT_USER = 'CURRENT_USER'
+export const USER_WORKSPACE_INVITATIONS = 'USER_WORKSPACE_INVITATIONS'
+export const USER_WORKSPACES_LIST = 'USER_WORKSPACES_LIST'
+
+export const WORKSPACE_DETAILS = (workspaceSlug: string) =>
+ `WORKSPACE_DETAILS_${workspaceSlug.toUpperCase()}`
+
+export const WORKSPACE_MEMBERS = (workspaceSlug: string) =>
+ `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`
+export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) =>
+ `WORKSPACE_MEMBERS_ME${workspaceSlug.toUpperCase()}`
+export const WORKSPACE_INVITATIONS = (workspaceSlug: string) =>
+ `WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`
+export const WORKSPACE_INVITATION = (invitationId: string) =>
+ `WORKSPACE_INVITATION_${invitationId}`
+export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS =
+ 'LAST_ACTIVE_WORKSPACE_AND_PROJECTS'
+
+export const PROJECTS_LIST = (
+ workspaceSlug: string,
+ params: {
+ is_favorite: 'all' | boolean
+ },
+) => {
+ if (!params) return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}`
+
+ return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}_${params.is_favorite.toString().toUpperCase()}`
+}
+export const PROJECT_DETAILS = (projectId: string) =>
+ `PROJECT_DETAILS_${projectId.toUpperCase()}`
+
+export const PROJECT_MEMBERS = (projectId: string) =>
+ `PROJECT_MEMBERS_${projectId.toUpperCase()}`
+export const PROJECT_INVITATIONS = (projectId: string) =>
+ `PROJECT_INVITATIONS_${projectId.toString()}`
+
+export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
+ `PROJECT_ISSUES_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}`
+export const PROJECT_ISSUES_LIST_WITH_PARAMS = (
+ projectId: string,
+ params?: any,
+) => {
+ if (!params)
+ return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}`
+
+ const paramsKey = paramsToKey(params)
+
+ return `PROJECT_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}_${paramsKey}`
+}
+export const PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS = (
+ projectId: string,
+ params?: any,
+) => {
+ if (!params)
+ return `PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}`
+
+ const paramsKey = paramsToKey(params)
+
+ return `PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS_${projectId.toUpperCase()}_${paramsKey}`
+}
+
+export const PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS = (
+ projectId: string,
+ params?: any,
+) => {
+ if (!params)
+ return `PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS${projectId.toUpperCase()}`
+
+ const paramsKey = paramsToKey(params)
+
+ return `PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS${projectId.toUpperCase()}_${paramsKey}`
+}
+
+export const GLOBAL_VIEWS_LIST = (workspaceSlug: string) =>
+ `GLOBAL_VIEWS_LIST_${workspaceSlug.toUpperCase()}`
+export const GLOBAL_VIEW_DETAILS = (globalViewId: string) =>
+ `GLOBAL_VIEW_DETAILS_${globalViewId.toUpperCase()}`
+export const GLOBAL_VIEW_ISSUES = (globalViewId: string) =>
+ `GLOBAL_VIEW_ISSUES_${globalViewId.toUpperCase()}`
+
+export const PROJECT_ISSUES_DETAILS = (issueId: string) =>
+ `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`
+export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
+ `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`
+export const PROJECT_ISSUES_COMMENTS = (issueId: string) =>
+ `PROJECT_ISSUES_COMMENTS_${issueId.toUpperCase()}`
+export const PROJECT_ISSUES_ACTIVITY = (issueId: string) =>
+ `PROJECT_ISSUES_ACTIVITY_${issueId.toUpperCase()}`
+export const PROJECT_ISSUE_BY_STATE = (projectId: string) =>
+ `PROJECT_ISSUE_BY_STATE_${projectId.toUpperCase()}`
+export const PROJECT_ISSUE_LABELS = (projectId: string) =>
+ `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}`
+export const WORKSPACE_LABELS = (workspaceSlug: string) =>
+ `WORKSPACE_LABELS_${workspaceSlug.toUpperCase()}`
+export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
+ `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`
+
+// cycles
+export const CYCLES_LIST = (projectId: string) =>
+ `CYCLE_LIST_${projectId.toUpperCase()}`
+export const INCOMPLETE_CYCLES_LIST = (projectId: string) =>
+ `INCOMPLETE_CYCLES_LIST_${projectId.toUpperCase()}`
+export const CURRENT_CYCLE_LIST = (projectId: string) =>
+ `CURRENT_CYCLE_LIST_${projectId.toUpperCase()}`
+export const UPCOMING_CYCLES_LIST = (projectId: string) =>
+ `UPCOMING_CYCLES_LIST_${projectId.toUpperCase()}`
+export const DRAFT_CYCLES_LIST = (projectId: string) =>
+ `DRAFT_CYCLES_LIST_${projectId.toUpperCase()}`
+export const COMPLETED_CYCLES_LIST = (projectId: string) =>
+ `COMPLETED_CYCLES_LIST_${projectId.toUpperCase()}`
+export const CYCLE_ISSUES = (cycleId: string) =>
+ `CYCLE_ISSUES_${cycleId.toUpperCase()}`
+export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
+ if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`
+
+ const paramsKey = paramsToKey(params)
+
+ return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}_${paramsKey.toUpperCase()}`
+}
+export const CYCLE_DETAILS = (cycleId: string) =>
+ `CYCLE_DETAILS_${cycleId.toUpperCase()}`
+
+export const STATES_LIST = (projectId: string) =>
+ `STATES_LIST_${projectId.toUpperCase()}`
+
+export const USER_ISSUE = (workspaceSlug: string) =>
+ `USER_ISSUE_${workspaceSlug.toUpperCase()}`
+export const USER_ISSUES = (workspaceSlug: string, params: any) => {
+ const paramsKey = myIssuesParamsToKey(params)
+
+ return `USER_ISSUES_${workspaceSlug.toUpperCase()}_${paramsKey}`
+}
+export const USER_ACTIVITY = (params: { cursor?: string }) =>
+ `USER_ACTIVITY_${params?.cursor}`
+export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
+ `USER_WORKSPACE_DASHBOARD_${workspaceSlug.toUpperCase()}`
+export const USER_PROJECT_VIEW = (projectId: string) =>
+ `USER_PROJECT_VIEW_${projectId.toUpperCase()}`
+
+export const MODULE_LIST = (projectId: string) =>
+ `MODULE_LIST_${projectId.toUpperCase()}`
+export const MODULE_ISSUES = (moduleId: string) =>
+ `MODULE_ISSUES_${moduleId.toUpperCase()}`
+export const MODULE_ISSUES_WITH_PARAMS = (moduleId: string, params?: any) => {
+ if (!params) return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}`
+
+ const paramsKey = paramsToKey(params)
+
+ return `MODULE_ISSUES_WITH_PARAMS_${moduleId.toUpperCase()}_${paramsKey.toUpperCase()}`
+}
+export const MODULE_DETAILS = (moduleId: string) =>
+ `MODULE_DETAILS_${moduleId.toUpperCase()}`
+
+export const VIEWS_LIST = (projectId: string) =>
+ `VIEWS_LIST_${projectId.toUpperCase()}`
+export const VIEW_DETAILS = (viewId: string) =>
+ `VIEW_DETAILS_${viewId.toUpperCase()}`
+export const VIEW_ISSUES = (viewId: string, params: any) => {
+ if (!params) return `VIEW_ISSUES_${viewId.toUpperCase()}`
+
+ const paramsKey = paramsToKey(params)
+
+ return `VIEW_ISSUES_${viewId.toUpperCase()}_${paramsKey.toUpperCase()}`
+}
+
+// Issues
+export const ISSUE_DETAILS = (issueId: string) =>
+ `ISSUE_DETAILS_${issueId.toUpperCase()}`
+export const SUB_ISSUES = (issueId: string) =>
+ `SUB_ISSUES_${issueId.toUpperCase()}`
+export const ISSUE_ATTACHMENTS = (issueId: string) =>
+ `ISSUE_ATTACHMENTS_${issueId.toUpperCase()}`
+export const ARCHIVED_ISSUE_DETAILS = (issueId: string) =>
+ `ARCHIVED_ISSUE_DETAILS_${issueId.toUpperCase()}`
+
+// integrations
+export const APP_INTEGRATIONS = 'APP_INTEGRATIONS'
+export const WORKSPACE_INTEGRATIONS = (workspaceSlug: string) =>
+ `WORKSPACE_INTEGRATIONS_${workspaceSlug.toUpperCase()}`
+
+export const JIRA_IMPORTER_DETAIL = (
+ workspaceSlug: string,
+ params: IJiraMetadata,
+) => {
+ const { api_token, cloud_hostname, email, project_key } = params
+
+ return `JIRA_IMPORTER_DETAIL_${workspaceSlug.toUpperCase()}_${api_token}_${cloud_hostname}_${email}_${project_key}`
+}
+
+//import-export
+export const IMPORTER_SERVICES_LIST = (workspaceSlug: string) =>
+ `IMPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}`
+
+//export
+export const EXPORT_SERVICES_LIST = (
+ workspaceSlug: string,
+ cursor: string,
+ per_page: string,
+) =>
+ `EXPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`
+
+// github-importer
+export const GITHUB_REPOSITORY_INFO = (
+ workspaceSlug: string,
+ repoName: string,
+) =>
+ `GITHUB_REPO_INFO_${workspaceSlug.toString().toUpperCase()}_${repoName.toUpperCase()}`
+
+// slack-project-integration
+export const SLACK_CHANNEL_INFO = (workspaceSlug: string, projectId: string) =>
+ `SLACK_CHANNEL_INFO_${workspaceSlug.toString().toUpperCase()}_${projectId.toUpperCase()}`
+
+// Pages
+export const RECENT_PAGES_LIST = (projectId: string) =>
+ `RECENT_PAGES_LIST_${projectId.toUpperCase()}`
+export const ALL_PAGES_LIST = (projectId: string) =>
+ `ALL_PAGES_LIST_${projectId.toUpperCase()}`
+export const ARCHIVED_PAGES_LIST = (projectId: string) =>
+ `ARCHIVED_PAGES_LIST_${projectId.toUpperCase}`
+export const FAVORITE_PAGES_LIST = (projectId: string) =>
+ `FAVORITE_PAGES_LIST_${projectId.toUpperCase()}`
+export const PRIVATE_PAGES_LIST = (projectId: string) =>
+ `PRIVATE_PAGES_LIST_${projectId.toUpperCase()}`
+export const SHARED_PAGES_LIST = (projectId: string) =>
+ `SHARED_PAGES_LIST_${projectId.toUpperCase()}`
+export const PAGE_DETAILS = (pageId: string) =>
+ `PAGE_DETAILS_${pageId.toUpperCase()}`
+export const PAGE_BLOCKS_LIST = (pageId: string) =>
+ `PAGE_BLOCK_LIST_${pageId.toUpperCase()}`
+export const PAGE_BLOCK_DETAILS = (pageId: string) =>
+ `PAGE_BLOCK_DETAILS_${pageId.toUpperCase()}`
+export const MY_PAGES_LIST = (pageId: string) => `MY_PAGE_LIST_${pageId}`
+// estimates
+export const ESTIMATES_LIST = (projectId: string) =>
+ `ESTIMATES_LIST_${projectId.toUpperCase()}`
+export const ESTIMATE_DETAILS = (estimateId: string) =>
+ `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`
+
+// analytics
+export const ANALYTICS = (workspaceSlug: string, params: IAnalyticsParams) =>
+ `ANALYTICS${workspaceSlug.toUpperCase()}_${params.x_axis}_${params.y_axis}_${
+ params.segment
+ }_${params.project?.toString()}`
+export const DEFAULT_ANALYTICS = (
+ workspaceSlug: string,
+ params?: Partial,
+) =>
+ `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project?.toString()}_${params?.cycle}_${params?.module}`
+
+// notifications
+export const USER_WORKSPACE_NOTIFICATIONS = (
+ workspaceSlug: string,
+ params: INotificationParams,
+) => {
+ const { type, snoozed, archived, read } = params
+
+ return `USER_WORKSPACE_NOTIFICATIONS_${workspaceSlug?.toUpperCase()}_TYPE_${(
+ type ?? 'assigned'
+ )?.toUpperCase()}_SNOOZED_${snoozed}_ARCHIVED_${archived}_READ_${read}`
+}
+
+export const USER_WORKSPACE_NOTIFICATIONS_DETAILS = (
+ workspaceSlug: string,
+ notificationId: string,
+) =>
+ `USER_WORKSPACE_NOTIFICATIONS_DETAILS_${workspaceSlug?.toUpperCase()}_${notificationId?.toUpperCase()}`
+
+export const UNREAD_NOTIFICATIONS_COUNT = (workspaceSlug: string) =>
+ `UNREAD_NOTIFICATIONS_COUNT_${workspaceSlug?.toUpperCase()}`
+
+export const getPaginatedNotificationKey = (
+ index: number,
+ prevData: any,
+ workspaceSlug: string,
+ params: any,
+) => {
+ if (prevData && !prevData?.results?.length) return null
+
+ if (index === 0)
+ return `/api/workspaces/${workspaceSlug}/users/notifications?${objToQueryParams(
+ {
+ ...params,
+ cursor: '30:0:0',
+ },
+ )}`
+
+ const cursor = prevData?.next_cursor
+ const nextPageResults = prevData?.next_page_results
+
+ if (!nextPageResults) return null
+
+ return `/api/workspaces/${workspaceSlug}/users/notifications?${objToQueryParams(
+ {
+ ...params,
+ cursor,
+ },
+ )}`
+}
+
+// profile
+export const USER_PROFILE_DATA = (workspaceSlug: string, userId: string) =>
+ `USER_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`
+export const USER_PROFILE_ACTIVITY = (
+ workspaceSlug: string,
+ userId: string,
+ params: {
+ cursor?: string
+ },
+) =>
+ `USER_WORKSPACE_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${params?.cursor}`
+export const USER_PROFILE_PROJECT_SEGREGATION = (
+ workspaceSlug: string,
+ userId: string,
+) =>
+ `USER_PROFILE_PROJECT_SEGREGATION_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`
+export const USER_PROFILE_ISSUES = (
+ workspaceSlug: string,
+ userId: string,
+ params: any,
+) => {
+ const paramsKey = myIssuesParamsToKey(params)
+
+ return `USER_PROFILE_ISSUES_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${paramsKey}`
+}
+
+// reactions
+export const ISSUE_REACTION_LIST = (
+ workspaceSlug: string,
+ projectId: string,
+ issueId: string,
+) =>
+ `ISSUE_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${issueId.toUpperCase()}`
+export const COMMENT_REACTION_LIST = (
+ workspaceSlug: string,
+ projectId: string,
+ commendId: string,
+) =>
+ `COMMENT_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${commendId.toUpperCase()}`
+
+// api-tokens
+export const API_TOKENS_LIST = (workspaceSlug: string) =>
+ `API_TOKENS_LIST_${workspaceSlug.toUpperCase()}`
+export const API_TOKEN_DETAILS = (workspaceSlug: string, tokenId: string) =>
+ `API_TOKEN_DETAILS_${workspaceSlug.toUpperCase()}_${tokenId.toUpperCase()}`
diff --git a/packages/constants/src/filters.ts b/packages/constants/src/filters.ts
new file mode 100644
index 0000000..dcaa988
--- /dev/null
+++ b/packages/constants/src/filters.ts
@@ -0,0 +1,52 @@
+export const DATE_AFTER_FILTER_OPTIONS = [
+ {
+ name: '1 week from now',
+ value: '1_weeks;after;fromnow',
+ },
+ {
+ name: '2 weeks from now',
+ value: '2_weeks;after;fromnow',
+ },
+ {
+ name: '1 month from now',
+ value: '1_months;after;fromnow',
+ },
+ {
+ name: '2 months from now',
+ value: '2_months;after;fromnow',
+ },
+]
+
+export const DATE_BEFORE_FILTER_OPTIONS = [
+ {
+ name: '1 week ago',
+ value: '1_weeks;before;fromnow',
+ },
+ {
+ name: '2 weeks ago',
+ value: '2_weeks;before;fromnow',
+ },
+ {
+ name: '1 month ago',
+ value: '1_months;before;fromnow',
+ },
+]
+
+export const PROJECT_CREATED_AT_FILTER_OPTIONS = [
+ {
+ name: 'Today',
+ value: 'today;custom;custom',
+ },
+ {
+ name: 'Yesterday',
+ value: 'yesterday;custom;custom',
+ },
+ {
+ name: 'Last 7 days',
+ value: 'last_7_days;custom;custom',
+ },
+ {
+ name: 'Last 30 days',
+ value: 'last_30_days;custom;custom',
+ },
+]
diff --git a/packages/constants/src/graph.ts b/packages/constants/src/graph.ts
new file mode 100644
index 0000000..3fb7da9
--- /dev/null
+++ b/packages/constants/src/graph.ts
@@ -0,0 +1,36 @@
+// nivo
+
+import { Theme } from '@nivo/core'
+
+export const CHARTS_THEME: Theme = {
+ background: 'transparent',
+ textColor: 'rgb(var(--color-text-200))',
+ axis: {
+ domain: {
+ line: {
+ stroke: 'rgb(var(--color-background-80))',
+ strokeWidth: 0.5,
+ },
+ },
+ },
+ tooltip: {
+ container: {
+ background: 'rgb(var(--color-background-80))',
+ color: 'rgb(var(--color-text-200))',
+ fontSize: '0.8rem',
+ border: '1px solid rgb(var(--color-border-300))',
+ },
+ },
+ grid: {
+ line: {
+ stroke: 'rgb(var(--color-border-100))',
+ },
+ },
+}
+
+export const DEFAULT_MARGIN = {
+ top: 50,
+ right: 50,
+ bottom: 50,
+ left: 50,
+}
diff --git a/packages/constants/src/inbox.tsx b/packages/constants/src/inbox.tsx
new file mode 100644
index 0000000..604e0e4
--- /dev/null
+++ b/packages/constants/src/inbox.tsx
@@ -0,0 +1,121 @@
+// icons
+
+import {
+ AlertTriangle,
+ CheckCircle2,
+ Clock,
+ Copy,
+ LucideIcon,
+ XCircle,
+} from 'lucide-react'
+
+// helpers
+import { findHowManyDaysLeft } from '@prodkt/helpers/date-time.helper'
+import { EInboxIssueStatus } from '@prodkt/helpers/inbox.helper'
+// types
+import {
+ TInboxIssueSortingOrderByKeys,
+ TInboxIssueSortingSortByKeys,
+ TInboxIssueStatus,
+} from '@prodkt/types'
+
+export const INBOX_STATUS: {
+ key: string
+ status: TInboxIssueStatus
+ icon: LucideIcon
+ title: string
+ description: (snoozedTillDate: Date) => string
+ textColor: (snoozeDatePassed: boolean) => string
+ bgColor: (snoozeDatePassed: boolean) => string
+}[] = [
+ {
+ key: 'pending',
+ status: EInboxIssueStatus.PENDING,
+ icon: AlertTriangle,
+ title: 'Pending',
+ description: () => `Pending`,
+ textColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'text-[#AB6400]',
+ bgColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'bg-[#FFF7C2]',
+ },
+ {
+ key: 'declined',
+ status: EInboxIssueStatus.DECLINED,
+ icon: XCircle,
+ title: 'Declined',
+ description: () => `Declined`,
+ textColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'text-[#CE2C31]',
+ bgColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'bg-[#FEEBEC]',
+ },
+ {
+ key: 'snoozed',
+ status: EInboxIssueStatus.SNOOZED,
+ icon: Clock,
+ title: 'Snoozed',
+ description: (snoozedTillDate: Date = new Date()) =>
+ `${findHowManyDaysLeft(snoozedTillDate)} days to go`,
+ textColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? 'text-red-500' : 'text-custom-text-400',
+ bgColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? 'bg-red-500/10' : 'bg-[#E0E1E6]',
+ },
+ {
+ key: 'accepted',
+ status: EInboxIssueStatus.ACCEPTED,
+ icon: CheckCircle2,
+ title: 'Accepted',
+ description: () => `Accepted`,
+ textColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'text-[#3E9B4F]',
+ bgColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'bg-[#E9F6E9]',
+ },
+ {
+ key: 'duplicate',
+ status: EInboxIssueStatus.DUPLICATE,
+ icon: Copy,
+ title: 'Duplicate',
+ description: () => `Duplicate`,
+ textColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'text-custom-text-200',
+ bgColor: (snoozeDatePassed: boolean = false) =>
+ snoozeDatePassed ? '' : 'bg-gray-500/10',
+ },
+]
+
+export const INBOX_ISSUE_SOURCE = 'in-app'
+
+export const INBOX_ISSUE_ORDER_BY_OPTIONS: {
+ key: TInboxIssueSortingOrderByKeys
+ label: string
+}[] = [
+ {
+ key: 'issue__created_at',
+ label: 'Date created',
+ },
+ {
+ key: 'issue__updated_at',
+ label: 'Date updated',
+ },
+ {
+ key: 'issue__sequence_id',
+ label: 'ID',
+ },
+]
+
+export const INBOX_ISSUE_SORT_BY_OPTIONS: {
+ key: TInboxIssueSortingSortByKeys
+ label: string
+}[] = [
+ {
+ key: 'asc',
+ label: 'Ascending',
+ },
+ {
+ key: 'desc',
+ label: 'Descending',
+ },
+]
diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts
new file mode 100644
index 0000000..96f661a
--- /dev/null
+++ b/packages/constants/src/index.ts
@@ -0,0 +1,30 @@
+export * from './auth'
+export * from './analytics'
+export * from './archives'
+export * from './auth'
+export * from './calendar'
+export * from './common'
+export * from './cycle'
+export * from './dashboard'
+export * from './editor'
+export * from './empty-state'
+export * from './event-tracker'
+export * from './fetch-keys'
+export * from './filters'
+export * from './graph'
+export * from './inbox'
+export * from './index'
+export * from './issue'
+export * from './label'
+export * from './module'
+export * from './notification'
+export * from './page'
+export * from './profile'
+export * from './project'
+export * from './seo-variables'
+export * from './spreadsheet'
+export * from './state'
+export * from './swr-config'
+export * from './themes'
+export * from './timezones'
+export * from './workspace'
diff --git a/packages/constants/src/issue.ts b/packages/constants/src/issue.ts
new file mode 100644
index 0000000..1de269e
--- /dev/null
+++ b/packages/constants/src/issue.ts
@@ -0,0 +1,578 @@
+// icons
+
+import { Calendar, GanttChartSquare, Kanban, List, Sheet } from 'lucide-react'
+
+// types
+import {
+ IIssueDisplayProperties,
+ IIssueFilterOptions,
+ TIssueExtraOptions,
+ TIssueGroupByOptions,
+ TIssueLayouts,
+ TIssueOrderByOptions,
+ TIssuePriorities,
+ TIssueTypeFilters,
+} from '@prodkt/types'
+
+export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
+ 'state',
+ 'priority',
+ 'assignees',
+ 'labels',
+ 'module',
+ 'cycle',
+]
+
+export enum EIssuesStoreType {
+ GLOBAL = 'GLOBAL',
+ PROFILE = 'PROFILE',
+ PROJECT = 'PROJECT',
+ CYCLE = 'CYCLE',
+ MODULE = 'MODULE',
+ PROJECT_VIEW = 'PROJECT_VIEW',
+ ARCHIVED = 'ARCHIVED',
+ DRAFT = 'DRAFT',
+ DEFAULT = 'DEFAULT',
+}
+
+export type TCreateModalStoreTypes =
+ | EIssuesStoreType.PROJECT
+ | EIssuesStoreType.PROJECT_VIEW
+ | EIssuesStoreType.PROFILE
+ | EIssuesStoreType.CYCLE
+ | EIssuesStoreType.MODULE
+
+export enum EIssueFilterType {
+ FILTERS = 'filters',
+ DISPLAY_FILTERS = 'display_filters',
+ DISPLAY_PROPERTIES = 'display_properties',
+ KANBAN_FILTERS = 'kanban_filters',
+}
+
+export enum EIssueCommentAccessSpecifier {
+ EXTERNAL = 'EXTERNAL',
+ INTERNAL = 'INTERNAL',
+}
+
+export const ISSUE_PRIORITIES: {
+ key: TIssuePriorities
+ title: string
+}[] = [
+ { key: 'urgent', title: 'Urgent' },
+ { key: 'high', title: 'High' },
+ { key: 'medium', title: 'Medium' },
+ { key: 'low', title: 'Low' },
+ { key: 'none', title: 'None' },
+]
+
+export const ISSUE_GROUP_BY_OPTIONS: {
+ key: TIssueGroupByOptions
+ title: string
+}[] = [
+ { key: 'state', title: 'States' },
+ { key: 'state_detail.group', title: 'State Groups' },
+ { key: 'priority', title: 'Priority' },
+ { key: 'project', title: 'Project' }, // required this on my issues
+ { key: 'cycle', title: 'Cycle' }, // required this on my issues
+ { key: 'module', title: 'Module' }, // required this on my issues
+ { key: 'labels', title: 'Labels' },
+ { key: 'assignees', title: 'Assignees' },
+ { key: 'created_by', title: 'Created By' },
+ { key: null, title: 'None' },
+]
+
+export const ISSUE_ORDER_BY_OPTIONS: {
+ key: TIssueOrderByOptions
+ title: string
+}[] = [
+ { key: 'sort_order', title: 'Manual' },
+ { key: '-created_at', title: 'Last Created' },
+ { key: '-updated_at', title: 'Last Updated' },
+ { key: 'start_date', title: 'Start Date' },
+ { key: 'target_date', title: 'Due Date' },
+ { key: '-priority', title: 'Priority' },
+]
+
+export const ISSUE_FILTER_OPTIONS: {
+ key: TIssueTypeFilters
+ title: string
+}[] = [
+ { key: null, title: 'All' },
+ { key: 'active', title: 'Active Issues' },
+ { key: 'backlog', title: 'Backlog Issues' },
+ // { key: "draft", title: "Draft Issues" },
+]
+
+export const ISSUE_DISPLAY_PROPERTIES: {
+ key: keyof IIssueDisplayProperties
+ title: string
+}[] = [
+ { key: 'assignee', title: 'Assignee' },
+ { key: 'start_date', title: 'Start date' },
+ { key: 'due_date', title: 'Due date' },
+ { key: 'key', title: 'ID' },
+ { key: 'labels', title: 'Labels' },
+ { key: 'priority', title: 'Priority' },
+ { key: 'state', title: 'State' },
+ { key: 'sub_issue_count', title: 'Sub issue count' },
+ { key: 'attachment_count', title: 'Attachment count' },
+ { key: 'link', title: 'Link' },
+ { key: 'estimate', title: 'Estimate' },
+ { key: 'modules', title: 'Modules' },
+ { key: 'cycle', title: 'Cycle' },
+]
+
+export const ISSUE_EXTRA_OPTIONS: {
+ key: TIssueExtraOptions
+ title: string
+}[] = [
+ { key: 'sub_issue', title: 'Show sub-issues' }, // in spreadsheet its always false
+ { key: 'show_empty_groups', title: 'Show empty groups' }, // filter on front-end
+]
+
+export const ISSUE_LAYOUTS: {
+ key: TIssueLayouts
+ title: string
+ icon: any
+}[] = [
+ { key: 'list', title: 'List Layout', icon: List },
+ { key: 'kanban', title: 'Kanban Layout', icon: Kanban },
+ { key: 'calendar', title: 'Calendar Layout', icon: Calendar },
+ { key: 'spreadsheet', title: 'Spreadsheet Layout', icon: Sheet },
+ { key: 'gantt_chart', title: 'Gantt Chart Layout', icon: GanttChartSquare },
+]
+
+export interface ILayoutDisplayFiltersOptions {
+ filters: (keyof IIssueFilterOptions)[]
+ display_properties: boolean
+ display_filters: {
+ group_by?: TIssueGroupByOptions[]
+ sub_group_by?: TIssueGroupByOptions[]
+ order_by?: TIssueOrderByOptions[]
+ type?: TIssueTypeFilters[]
+ }
+ extra_options: {
+ access: boolean
+ values: TIssueExtraOptions[]
+ }
+}
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+ [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions }
+} = {
+ profile_issues: {
+ list: {
+ filters: [
+ 'priority',
+ 'state_group',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ group_by: ['state_detail.group', 'priority', 'project', 'labels', null],
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['show_empty_groups', 'sub_issue'],
+ },
+ },
+ kanban: {
+ filters: [
+ 'priority',
+ 'state_group',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ group_by: ['state_detail.group', 'priority', 'project', 'labels'],
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['show_empty_groups'],
+ },
+ },
+ },
+ archived_issues: {
+ list: {
+ filters: [
+ 'priority',
+ 'state',
+ 'cycle',
+ 'module',
+ 'assignees',
+ 'created_by',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ group_by: [
+ 'state',
+ 'cycle',
+ 'module',
+ 'state_detail.group',
+ 'priority',
+ 'labels',
+ 'assignees',
+ 'created_by',
+ null,
+ ],
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['show_empty_groups'],
+ },
+ },
+ },
+ draft_issues: {
+ list: {
+ filters: [
+ 'priority',
+ 'state_group',
+ 'cycle',
+ 'module',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ group_by: [
+ 'state_detail.group',
+ 'cycle',
+ 'module',
+ 'priority',
+ 'project',
+ 'labels',
+ null,
+ ],
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['show_empty_groups'],
+ },
+ },
+ kanban: {
+ filters: [
+ 'priority',
+ 'state_group',
+ 'cycle',
+ 'module',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ group_by: [
+ 'state_detail.group',
+ 'cycle',
+ 'module',
+ 'priority',
+ 'project',
+ 'labels',
+ ],
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['show_empty_groups'],
+ },
+ },
+ },
+ my_issues: {
+ spreadsheet: {
+ filters: [
+ 'priority',
+ 'state_group',
+ 'labels',
+ 'assignees',
+ 'created_by',
+ 'subscriber',
+ 'project',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['sub_issue'],
+ },
+ },
+ list: {
+ filters: [
+ 'priority',
+ 'state_group',
+ 'labels',
+ 'assignees',
+ 'created_by',
+ 'subscriber',
+ 'project',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: false,
+ values: [],
+ },
+ },
+ },
+ issues: {
+ list: {
+ filters: [
+ 'priority',
+ 'state',
+ 'cycle',
+ 'module',
+ 'assignees',
+ 'mentions',
+ 'created_by',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ group_by: [
+ 'state',
+ 'priority',
+ 'cycle',
+ 'module',
+ 'labels',
+ 'assignees',
+ 'created_by',
+ null,
+ ],
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['show_empty_groups', 'sub_issue'],
+ },
+ },
+ kanban: {
+ filters: [
+ 'priority',
+ 'state',
+ 'cycle',
+ 'module',
+ 'assignees',
+ 'mentions',
+ 'created_by',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ group_by: [
+ 'state',
+ 'priority',
+ 'cycle',
+ 'module',
+ 'labels',
+ 'assignees',
+ 'created_by',
+ ],
+ sub_group_by: [
+ 'state',
+ 'priority',
+ 'cycle',
+ 'module',
+ 'labels',
+ 'assignees',
+ 'created_by',
+ null,
+ ],
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ 'target_date',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['show_empty_groups', 'sub_issue'],
+ },
+ },
+ calendar: {
+ filters: [
+ 'priority',
+ 'state',
+ 'cycle',
+ 'module',
+ 'assignees',
+ 'mentions',
+ 'created_by',
+ 'labels',
+ 'start_date',
+ ],
+ display_properties: false,
+ display_filters: {
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['sub_issue'],
+ },
+ },
+ spreadsheet: {
+ filters: [
+ 'priority',
+ 'state',
+ 'cycle',
+ 'module',
+ 'assignees',
+ 'mentions',
+ 'created_by',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: true,
+ display_filters: {
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['sub_issue'],
+ },
+ },
+ gantt_chart: {
+ filters: [
+ 'priority',
+ 'state',
+ 'cycle',
+ 'module',
+ 'assignees',
+ 'mentions',
+ 'created_by',
+ 'labels',
+ 'start_date',
+ 'target_date',
+ ],
+ display_properties: false,
+ display_filters: {
+ order_by: [
+ 'sort_order',
+ '-created_at',
+ '-updated_at',
+ 'start_date',
+ '-priority',
+ ],
+ type: [null, 'active', 'backlog'],
+ },
+ extra_options: {
+ access: true,
+ values: ['sub_issue'],
+ },
+ },
+ },
+}
+
+export enum EIssueListRow {
+ HEADER = 'HEADER',
+ ISSUE = 'ISSUE',
+ NO_ISSUES = 'NO_ISSUES',
+ QUICK_ADD = 'QUICK_ADD',
+}
+
+// issue reactions
+export const issueReactionEmojis = [
+ '128077',
+ '128078',
+ '128516',
+ '128165',
+ '128533',
+ '129505',
+ '9992',
+ '128064',
+]
+
+export const groupReactionEmojis = (reactions: any) => {
+ let groupedEmojis: any = {}
+
+ issueReactionEmojis.map((_r) => {
+ groupedEmojis = { ...groupedEmojis, [_r]: [] }
+ })
+
+ if (reactions && reactions.length > 0) {
+ reactions.map((_reaction: any) => {
+ groupedEmojis = {
+ ...groupedEmojis,
+ [_reaction.reaction]: [...groupedEmojis[_reaction.reaction], _reaction],
+ }
+ })
+ }
+
+ return groupedEmojis
+}
diff --git a/packages/constants/src/label.ts b/packages/constants/src/label.ts
new file mode 100644
index 0000000..9c14ab2
--- /dev/null
+++ b/packages/constants/src/label.ts
@@ -0,0 +1,17 @@
+export const LABEL_COLOR_OPTIONS = [
+ '#FF6900',
+ '#FCB900',
+ '#7BDCB5',
+ '#00D084',
+ '#8ED1FC',
+ '#0693E3',
+ '#ABB8C3',
+ '#EB144C',
+ '#F78DA7',
+ '#9900EF',
+]
+
+export const getRandomLabelColor = () => {
+ const randomIndex = Math.floor(Math.random() * LABEL_COLOR_OPTIONS.length)
+ return LABEL_COLOR_OPTIONS[randomIndex]
+}
diff --git a/packages/constants/src/module.ts b/packages/constants/src/module.ts
new file mode 100644
index 0000000..b783875
--- /dev/null
+++ b/packages/constants/src/module.ts
@@ -0,0 +1,111 @@
+import { GanttChartSquare, LayoutGrid, List } from 'lucide-react'
+
+// types
+import {
+ TModuleLayoutOptions,
+ TModuleOrderByOptions,
+ TModuleStatus,
+} from '@prodkt/types'
+
+export const MODULE_STATUS: {
+ label: string
+ value: TModuleStatus
+ color: string
+ textColor: string
+ bgColor: string
+}[] = [
+ {
+ label: 'Backlog',
+ value: 'backlog',
+ color: '#a3a3a2',
+ textColor: 'text-custom-text-400',
+ bgColor: 'bg-custom-background-80',
+ },
+ {
+ label: 'Planned',
+ value: 'planned',
+ color: '#3f76ff',
+ textColor: 'text-blue-500',
+ bgColor: 'bg-indigo-50',
+ },
+ {
+ label: 'In Progress',
+ value: 'in-progress',
+ color: '#f39e1f',
+ textColor: 'text-amber-500',
+ bgColor: 'bg-amber-50',
+ },
+ {
+ label: 'Paused',
+ value: 'paused',
+ color: '#525252',
+ textColor: 'text-custom-text-300',
+ bgColor: 'bg-custom-background-90',
+ },
+ {
+ label: 'Completed',
+ value: 'completed',
+ color: '#16a34a',
+ textColor: 'text-green-600',
+ bgColor: 'bg-green-100',
+ },
+ {
+ label: 'Cancelled',
+ value: 'cancelled',
+ color: '#ef4444',
+ textColor: 'text-red-500',
+ bgColor: 'bg-red-50',
+ },
+]
+
+export const MODULE_VIEW_LAYOUTS: {
+ key: TModuleLayoutOptions
+ icon: any
+ title: string
+}[] = [
+ {
+ key: 'list',
+ icon: List,
+ title: 'List layout',
+ },
+ {
+ key: 'board',
+ icon: LayoutGrid,
+ title: 'Grid layout',
+ },
+ {
+ key: 'gantt',
+ icon: GanttChartSquare,
+ title: 'Gantt layout',
+ },
+]
+
+export const MODULE_ORDER_BY_OPTIONS: {
+ key: TModuleOrderByOptions
+ label: string
+}[] = [
+ {
+ key: 'name',
+ label: 'Name',
+ },
+ {
+ key: 'progress',
+ label: 'Progress',
+ },
+ {
+ key: 'issues_length',
+ label: 'Number of issues',
+ },
+ {
+ key: 'target_date',
+ label: 'Due date',
+ },
+ {
+ key: 'created_at',
+ label: 'Created date',
+ },
+ {
+ key: 'sort_order',
+ label: 'Manual',
+ },
+]
diff --git a/packages/constants/src/notification.ts b/packages/constants/src/notification.ts
new file mode 100644
index 0000000..5001da7
--- /dev/null
+++ b/packages/constants/src/notification.ts
@@ -0,0 +1,57 @@
+export const snoozeOptions = [
+ {
+ label: '1 day',
+ value: new Date(new Date().getTime() + 24 * 60 * 60 * 1000),
+ },
+ {
+ label: '3 days',
+ value: new Date(new Date().getTime() + 3 * 24 * 60 * 60 * 1000),
+ },
+ {
+ label: '5 days',
+ value: new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000),
+ },
+ {
+ label: '1 week',
+ value: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000),
+ },
+ {
+ label: '2 weeks',
+ value: new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000),
+ },
+ {
+ label: 'Custom',
+ value: null,
+ },
+]
+
+// Constant for all time values in 30 minutes interval in 12 hours format
+export const allTimeIn30MinutesInterval12HoursFormat: Array<{
+ label: string
+ value: string
+}> = [
+ { label: '12:00', value: '12:00' },
+ { label: '12:30', value: '12:30' },
+ { label: '01:00', value: '01:00' },
+ { label: '01:30', value: '01:30' },
+ { label: '02:00', value: '02:00' },
+ { label: '02:30', value: '02:30' },
+ { label: '03:00', value: '03:00' },
+ { label: '03:30', value: '03:30' },
+ { label: '04:00', value: '04:00' },
+ { label: '04:30', value: '04:30' },
+ { label: '05:00', value: '05:00' },
+ { label: '05:30', value: '05:30' },
+ { label: '06:00', value: '06:00' },
+ { label: '06:30', value: '06:30' },
+ { label: '07:00', value: '07:00' },
+ { label: '07:30', value: '07:30' },
+ { label: '08:00', value: '08:00' },
+ { label: '08:30', value: '08:30' },
+ { label: '09:00', value: '09:00' },
+ { label: '09:30', value: '09:30' },
+ { label: '10:00', value: '10:00' },
+ { label: '10:30', value: '10:30' },
+ { label: '11:00', value: '11:00' },
+ { label: '11:30', value: '11:30' },
+]
diff --git a/packages/constants/src/page.ts b/packages/constants/src/page.ts
new file mode 100644
index 0000000..2a18731
--- /dev/null
+++ b/packages/constants/src/page.ts
@@ -0,0 +1,45 @@
+import { Globe2, Lock, LucideIcon } from 'lucide-react'
+
+// types
+import { TPageFiltersSortBy, TPageFiltersSortKey } from '@prodkt/types'
+
+export enum EPageAccess {
+ PUBLIC = 0,
+ PRIVATE = 1,
+}
+
+export const PAGE_ACCESS_SPECIFIERS: {
+ key: EPageAccess
+ label: string
+ icon: LucideIcon
+}[] = [
+ { key: EPageAccess.PUBLIC, label: 'Public', icon: Globe2 },
+ { key: EPageAccess.PRIVATE, label: 'Private', icon: Lock },
+]
+
+export const PAGE_SORTING_KEY_OPTIONS: {
+ key: TPageFiltersSortKey
+ label: string
+}[] = [
+ { key: 'name', label: 'Name' },
+ { key: 'created_at', label: 'Date created' },
+ { key: 'updated_at', label: 'Date modified' },
+]
+
+export const PAGE_SORT_BY_OPTIONS: {
+ key: TPageFiltersSortBy
+ label: string
+}[] = [
+ { key: 'asc', label: 'Ascending' },
+ { key: 'desc', label: 'Descending' },
+]
+
+export type TCreatePageModal = {
+ isOpen: boolean
+ pageAccess?: EPageAccess
+}
+
+export const DEFAULT_CREATE_PAGE_MODAL_DATA: TCreatePageModal = {
+ isOpen: false,
+ pageAccess: EPageAccess.PUBLIC,
+}
diff --git a/packages/constants/src/profile.ts b/packages/constants/src/profile.ts
new file mode 100644
index 0000000..6165c28
--- /dev/null
+++ b/packages/constants/src/profile.ts
@@ -0,0 +1,78 @@
+import React from 'react'
+
+// icons
+import {
+ Activity,
+ CircleUser,
+ KeyRound,
+ LucideProps,
+ Settings2,
+} from 'lucide-react'
+
+export const PROFILE_ACTION_LINKS: {
+ key: string
+ label: string
+ href: string
+ highlight: (pathname: string) => boolean
+ Icon: React.FC
+}[] = [
+ {
+ key: 'profile',
+ label: 'Profile',
+ href: `/profile`,
+ highlight: (pathname: string) => pathname === '/profile',
+ Icon: CircleUser,
+ },
+ {
+ key: 'change-password',
+ label: 'Change password',
+ href: `/profile/change-password`,
+ highlight: (pathname: string) => pathname === '/profile/change-password',
+ Icon: KeyRound,
+ },
+ {
+ key: 'activity',
+ label: 'Activity',
+ href: `/profile/activity`,
+ highlight: (pathname: string) => pathname === '/profile/activity',
+ Icon: Activity,
+ },
+ {
+ key: 'preferences',
+ label: 'Preferences',
+ href: `/profile/preferences/theme`,
+ highlight: (pathname: string) => pathname.includes('/profile/preferences'),
+ Icon: Settings2,
+ },
+]
+
+export const PROFILE_VIEWER_TAB = [
+ {
+ route: '',
+ label: 'Summary',
+ selected: '/[workspaceSlug]/profile/[userId]',
+ },
+]
+
+export const PROFILE_ADMINS_TAB = [
+ {
+ route: 'assigned',
+ label: 'Assigned',
+ selected: '/[workspaceSlug]/profile/[userId]/assigned',
+ },
+ {
+ route: 'created',
+ label: 'Created',
+ selected: '/[workspaceSlug]/profile/[userId]/created',
+ },
+ {
+ route: 'subscribed',
+ label: 'Subscribed',
+ selected: '/[workspaceSlug]/profile/[userId]/subscribed',
+ },
+ {
+ route: 'activity',
+ label: 'Activity',
+ selected: '/[workspaceSlug]/profile/[userId]/activity',
+ },
+]
diff --git a/packages/constants/src/project.ts b/packages/constants/src/project.ts
new file mode 100644
index 0000000..ed8038b
--- /dev/null
+++ b/packages/constants/src/project.ts
@@ -0,0 +1,183 @@
+// icons
+
+import { Globe2, Lock, LucideIcon } from 'lucide-react'
+
+import {
+ TProjectAppliedDisplayFilterKeys,
+ TProjectOrderByOptions,
+} from '@prodkt/types'
+
+import { SettingIcon } from '@/components/icons/attachment'
+// types
+import { Props } from '@/components/icons/types'
+
+export enum EUserProjectRoles {
+ GUEST = 5,
+ VIEWER = 10,
+ MEMBER = 15,
+ ADMIN = 20,
+}
+
+export const NETWORK_CHOICES: {
+ key: 0 | 2
+ label: string
+ description: string
+ icon: LucideIcon
+}[] = [
+ {
+ key: 0,
+ label: 'Private',
+ description: 'Accessible only by invite',
+ icon: Lock,
+ },
+ {
+ key: 2,
+ label: 'Public',
+ description: 'Anyone in the workspace can join',
+ icon: Globe2,
+ },
+]
+
+export const GROUP_CHOICES = {
+ backlog: 'Backlog',
+ unstarted: 'Unstarted',
+ started: 'Started',
+ completed: 'Completed',
+ cancelled: 'Cancelled',
+}
+
+export const PROJECT_AUTOMATION_MONTHS = [
+ { label: '1 month', value: 1 },
+ { label: '3 months', value: 3 },
+ { label: '6 months', value: 6 },
+ { label: '9 months', value: 9 },
+ { label: '12 months', value: 12 },
+]
+
+export const PROJECT_UNSPLASH_COVERS = [
+ 'https://images.unsplash.com/photo-1531045535792-b515d59c3d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
+ 'https://images.unsplash.com/photo-1693027407934-e3aa8a54c7ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
+ 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
+ 'https://images.unsplash.com/photo-1464925257126-6450e871c667?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1606768666853-403c90a981ad?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1643330683233-ff2ac89b002c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
+ 'https://images.unsplash.com/photo-1542202229-7d93c33f5d07?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
+ 'https://images.unsplash.com/photo-1475738972911-5b44ce984c42?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1673393058808-50e9baaf4d2c?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1696643830146-44a8755f1905?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80',
+ 'https://images.unsplash.com/photo-1693868769698-6c7440636a09?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1691230995681-480d86cbc135?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+ 'https://images.unsplash.com/photo-1675351066828-6fc770b90dd2?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80',
+]
+
+export const PROJECT_SETTINGS_LINKS: {
+ key: string
+ label: string
+ href: string
+ access: EUserProjectRoles
+ highlight: (pathname: string, baseUrl: string) => boolean
+ Icon: React.FC
+}[] = [
+ {
+ key: 'general',
+ label: 'General',
+ href: `/settings`,
+ access: EUserProjectRoles.MEMBER,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'members',
+ label: 'Members',
+ href: `/settings/members`,
+ access: EUserProjectRoles.MEMBER,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/members`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'features',
+ label: 'Features',
+ href: `/settings/features`,
+ access: EUserProjectRoles.ADMIN,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/features`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'states',
+ label: 'States',
+ href: `/settings/states`,
+ access: EUserProjectRoles.MEMBER,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/states`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'labels',
+ label: 'Labels',
+ href: `/settings/labels`,
+ access: EUserProjectRoles.MEMBER,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/labels`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'estimates',
+ label: 'Estimates',
+ href: `/settings/estimates`,
+ access: EUserProjectRoles.ADMIN,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/estimates`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'automations',
+ label: 'Automations',
+ href: `/settings/automations`,
+ access: EUserProjectRoles.ADMIN,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/automations`,
+ Icon: SettingIcon,
+ },
+]
+
+export const PROJECT_ORDER_BY_OPTIONS: {
+ key: TProjectOrderByOptions
+ label: string
+}[] = [
+ {
+ key: 'sort_order',
+ label: 'Manual',
+ },
+ {
+ key: 'name',
+ label: 'Name',
+ },
+ {
+ key: 'created_at',
+ label: 'Created date',
+ },
+ {
+ key: 'members_length',
+ label: 'Number of members',
+ },
+]
+
+export const PROJECT_DISPLAY_FILTER_OPTIONS: {
+ key: TProjectAppliedDisplayFilterKeys
+ label: string
+}[] = [
+ {
+ key: 'my_projects',
+ label: 'My projects',
+ },
+ {
+ key: 'archived_projects',
+ label: 'Archived',
+ },
+]
diff --git a/packages/constants/src/seo-variables.ts b/packages/constants/src/seo-variables.ts
new file mode 100644
index 0000000..b6dcbec
--- /dev/null
+++ b/packages/constants/src/seo-variables.ts
@@ -0,0 +1,11 @@
+export const SITE_NAME =
+ 'Prodkt | Simple, extensible, open-source project management tool.'
+export const SITE_TITLE =
+ 'Prodkt | Simple, extensible, open-source project management tool.'
+export const SITE_DESCRIPTION =
+ 'Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.'
+export const SITE_KEYWORDS =
+ 'software development, plan, ship, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration'
+export const SITE_URL = 'https://app.prodkt.cloud/'
+export const TWITTER_USER_NAME =
+ 'Prodkt | Simple, extensible, open-source project management tool.'
diff --git a/packages/constants/src/spreadsheet.ts b/packages/constants/src/spreadsheet.ts
new file mode 100644
index 0000000..5a9ea0b
--- /dev/null
+++ b/packages/constants/src/spreadsheet.ts
@@ -0,0 +1,210 @@
+import { FC } from 'react'
+
+// icons
+import {
+ CalendarCheck2,
+ CalendarClock,
+ CalendarDays,
+ Link2,
+ Paperclip,
+ Signal,
+ Tag,
+ Triangle,
+ Users,
+} from 'lucide-react'
+
+// types
+import {
+ IIssueDisplayProperties,
+ TIssue,
+ TIssueOrderByOptions,
+} from '@prodkt/types'
+// ui
+import {
+ ContrastIcon,
+ DiceIcon,
+ DoubleCircleIcon,
+ LayersIcon,
+} from '@prodkt/ui/primitives'
+import { ISvgIcons } from '@prodkt/ui/primitives/src/icons/type'
+
+// components
+import {
+ SpreadsheetAssigneeColumn,
+ SpreadsheetAttachmentColumn,
+ SpreadsheetCreatedOnColumn,
+ SpreadsheetCycleColumn,
+ SpreadsheetDueDateColumn,
+ SpreadsheetEstimateColumn,
+ SpreadsheetLabelColumn,
+ SpreadsheetLinkColumn,
+ SpreadsheetModuleColumn,
+ SpreadsheetPriorityColumn,
+ SpreadsheetStartDateColumn,
+ SpreadsheetStateColumn,
+ SpreadsheetSubIssueColumn,
+ SpreadsheetUpdatedOnColumn,
+} from '@/components/issues/issue-layouts/spreadsheet'
+
+export const SPREADSHEET_PROPERTY_DETAILS: {
+ [key: string]: {
+ title: string
+ ascendingOrderKey: TIssueOrderByOptions
+ ascendingOrderTitle: string
+ descendingOrderKey: TIssueOrderByOptions
+ descendingOrderTitle: string
+ icon: FC
+ Column: React.FC<{
+ issue: TIssue
+ onClose: () => void
+ onChange: (issue: TIssue, data: Partial, updates: any) => void
+ disabled: boolean
+ }>
+ }
+} = {
+ assignee: {
+ title: 'Assignees',
+ ascendingOrderKey: 'assignees__first_name',
+ ascendingOrderTitle: 'A',
+ descendingOrderKey: '-assignees__first_name',
+ descendingOrderTitle: 'Z',
+ icon: Users,
+ Column: SpreadsheetAssigneeColumn,
+ },
+ created_on: {
+ title: 'Created on',
+ ascendingOrderKey: '-created_at',
+ ascendingOrderTitle: 'New',
+ descendingOrderKey: 'created_at',
+ descendingOrderTitle: 'Old',
+ icon: CalendarDays,
+ Column: SpreadsheetCreatedOnColumn,
+ },
+ due_date: {
+ title: 'Due date',
+ ascendingOrderKey: '-target_date',
+ ascendingOrderTitle: 'New',
+ descendingOrderKey: 'target_date',
+ descendingOrderTitle: 'Old',
+ icon: CalendarCheck2,
+ Column: SpreadsheetDueDateColumn,
+ },
+ estimate: {
+ title: 'Estimate',
+ ascendingOrderKey: 'estimate_point',
+ ascendingOrderTitle: 'Low',
+ descendingOrderKey: '-estimate_point',
+ descendingOrderTitle: 'High',
+ icon: Triangle,
+ Column: SpreadsheetEstimateColumn,
+ },
+ labels: {
+ title: 'Labels',
+ ascendingOrderKey: 'labels__name',
+ ascendingOrderTitle: 'A',
+ descendingOrderKey: '-labels__name',
+ descendingOrderTitle: 'Z',
+ icon: Tag,
+ Column: SpreadsheetLabelColumn,
+ },
+ modules: {
+ title: 'Modules',
+ ascendingOrderKey: 'modules__name',
+ ascendingOrderTitle: 'A',
+ descendingOrderKey: '-modules__name',
+ descendingOrderTitle: 'Z',
+ icon: DiceIcon,
+ Column: SpreadsheetModuleColumn,
+ },
+ cycle: {
+ title: 'Cycle',
+ ascendingOrderKey: 'cycle__name',
+ ascendingOrderTitle: 'A',
+ descendingOrderKey: '-cycle__name',
+ descendingOrderTitle: 'Z',
+ icon: ContrastIcon,
+ Column: SpreadsheetCycleColumn,
+ },
+ priority: {
+ title: 'Priority',
+ ascendingOrderKey: 'priority',
+ ascendingOrderTitle: 'None',
+ descendingOrderKey: '-priority',
+ descendingOrderTitle: 'Urgent',
+ icon: Signal,
+ Column: SpreadsheetPriorityColumn,
+ },
+ start_date: {
+ title: 'Start date',
+ ascendingOrderKey: '-start_date',
+ ascendingOrderTitle: 'New',
+ descendingOrderKey: 'start_date',
+ descendingOrderTitle: 'Old',
+ icon: CalendarClock,
+ Column: SpreadsheetStartDateColumn,
+ },
+ state: {
+ title: 'State',
+ ascendingOrderKey: 'state__name',
+ ascendingOrderTitle: 'A',
+ descendingOrderKey: '-state__name',
+ descendingOrderTitle: 'Z',
+ icon: DoubleCircleIcon,
+ Column: SpreadsheetStateColumn,
+ },
+ updated_on: {
+ title: 'Updated on',
+ ascendingOrderKey: '-updated_at',
+ ascendingOrderTitle: 'New',
+ descendingOrderKey: 'updated_at',
+ descendingOrderTitle: 'Old',
+ icon: CalendarDays,
+ Column: SpreadsheetUpdatedOnColumn,
+ },
+ link: {
+ title: 'Link',
+ ascendingOrderKey: '-link_count',
+ ascendingOrderTitle: 'Most',
+ descendingOrderKey: 'link_count',
+ descendingOrderTitle: 'Least',
+ icon: Link2,
+ Column: SpreadsheetLinkColumn,
+ },
+ attachment_count: {
+ title: 'Attachment',
+ ascendingOrderKey: '-attachment_count',
+ ascendingOrderTitle: 'Most',
+ descendingOrderKey: 'attachment_count',
+ descendingOrderTitle: 'Least',
+ icon: Paperclip,
+ Column: SpreadsheetAttachmentColumn,
+ },
+ sub_issue_count: {
+ title: 'Sub-issue',
+ ascendingOrderKey: '-sub_issues_count',
+ ascendingOrderTitle: 'Most',
+ descendingOrderKey: 'sub_issues_count',
+ descendingOrderTitle: 'Least',
+ icon: LayersIcon,
+ Column: SpreadsheetSubIssueColumn,
+ },
+}
+
+export const SPREADSHEET_PROPERTY_LIST: (keyof IIssueDisplayProperties)[] = [
+ 'state',
+ 'priority',
+ 'assignee',
+ 'labels',
+ 'modules',
+ 'cycle',
+ 'start_date',
+ 'due_date',
+ 'estimate',
+ 'created_on',
+ 'updated_on',
+ 'link',
+ 'attachment_count',
+ 'sub_issue_count',
+]
+
+export const SPREADSHEET_SELECT_GROUP = 'spreadsheet-issues'
diff --git a/packages/constants/src/state.ts b/packages/constants/src/state.ts
new file mode 100644
index 0000000..5074659
--- /dev/null
+++ b/packages/constants/src/state.ts
@@ -0,0 +1,40 @@
+import { TStateGroups } from '@prodkt/types'
+
+export const STATE_GROUPS: {
+ [key in TStateGroups]: {
+ key: TStateGroups
+ label: string
+ color: string
+ }
+} = {
+ backlog: {
+ key: 'backlog',
+ label: 'Backlog',
+ color: '#d9d9d9',
+ },
+ unstarted: {
+ key: 'unstarted',
+ label: 'Unstarted',
+ color: '#3f76ff',
+ },
+ started: {
+ key: 'started',
+ label: 'Started',
+ color: '#f59e0b',
+ },
+ completed: {
+ key: 'completed',
+ label: 'Completed',
+ color: '#16a34a',
+ },
+ cancelled: {
+ key: 'cancelled',
+ label: 'Canceled',
+ color: '#dc2626',
+ },
+}
+
+export const ARCHIVABLE_STATE_GROUPS = [
+ STATE_GROUPS.completed.key,
+ STATE_GROUPS.cancelled.key,
+]
diff --git a/packages/constants/src/swr-config.ts b/packages/constants/src/swr-config.ts
new file mode 100644
index 0000000..777f05e
--- /dev/null
+++ b/packages/constants/src/swr-config.ts
@@ -0,0 +1,8 @@
+export const SWR_CONFIG = {
+ refreshWhenHidden: false,
+ revalidateIfStale: true,
+ revalidateOnFocus: true,
+ revalidateOnMount: true,
+ refreshInterval: 600000,
+ errorRetryCount: 3,
+}
diff --git a/packages/constants/src/themes.ts b/packages/constants/src/themes.ts
new file mode 100644
index 0000000..dcbf286
--- /dev/null
+++ b/packages/constants/src/themes.ts
@@ -0,0 +1,81 @@
+export const THEMES = [
+ 'light',
+ 'dark',
+ 'light-contrast',
+ 'dark-contrast',
+ 'custom',
+]
+
+export interface I_THEME_OPTION {
+ value: string
+ label: string
+ type: string
+ icon: {
+ border: string
+ color1: string
+ color2: string
+ }
+}
+
+export const THEME_OPTIONS: I_THEME_OPTION[] = [
+ {
+ value: 'system',
+ label: 'System Preference',
+ type: 'light',
+ icon: {
+ border: '#DEE2E6',
+ color1: '#FAFAFA',
+ color2: '#3F76FF',
+ },
+ },
+ {
+ value: 'light',
+ label: 'Light',
+ type: 'light',
+ icon: {
+ border: '#DEE2E6',
+ color1: '#FAFAFA',
+ color2: '#3F76FF',
+ },
+ },
+ {
+ value: 'dark',
+ label: 'Dark',
+ type: 'dark',
+ icon: {
+ border: '#2E3234',
+ color1: '#191B1B',
+ color2: '#3C85D9',
+ },
+ },
+ {
+ value: 'light-contrast',
+ label: 'Light High Contrast',
+ type: 'light',
+ icon: {
+ border: '#000000',
+ color1: '#FFFFFF',
+ color2: '#3F76FF',
+ },
+ },
+ {
+ value: 'dark-contrast',
+ label: 'Dark High Contrast',
+ type: 'dark',
+ icon: {
+ border: '#FFFFFF',
+ color1: '#030303',
+ color2: '#3A8BE9',
+ },
+ },
+ {
+ value: 'custom',
+ label: 'Custom Theming',
+ type: 'light',
+ icon: {
+ border: '#FFC9C9',
+ color1: '#FFF7F7',
+ color2: '#FF5151',
+ },
+ },
+]
diff --git a/packages/constants/src/timezones.ts b/packages/constants/src/timezones.ts
new file mode 100644
index 0000000..d8c8271
--- /dev/null
+++ b/packages/constants/src/timezones.ts
@@ -0,0 +1,2386 @@
+export const TIME_ZONES = [
+ {
+ label: 'Africa/Abidjan, GMT',
+ value: 'Africa/Abidjan',
+ },
+ {
+ label: 'Africa/Accra, GMT',
+ value: 'Africa/Accra',
+ },
+ {
+ label: 'Africa/Addis_Ababa, GMT+03:00',
+ value: 'Africa/Addis_Ababa',
+ },
+ {
+ label: 'Africa/Algiers, GMT+01:00',
+ value: 'Africa/Algiers',
+ },
+ {
+ label: 'Africa/Asmara, GMT+03:00',
+ value: 'Africa/Asmara',
+ },
+ {
+ label: 'Africa/Asmera, GMT+03:00',
+ value: 'Africa/Asmera',
+ },
+ {
+ label: 'Africa/Bamako, GMT',
+ value: 'Africa/Bamako',
+ },
+ {
+ label: 'Africa/Bangui, GMT+01:00',
+ value: 'Africa/Bangui',
+ },
+ {
+ label: 'Africa/Banjul, GMT',
+ value: 'Africa/Banjul',
+ },
+ {
+ label: 'Africa/Bissau, GMT',
+ value: 'Africa/Bissau',
+ },
+ {
+ label: 'Africa/Blantyre, GMT+02:00',
+ value: 'Africa/Blantyre',
+ },
+ {
+ label: 'Africa/Brazzaville, GMT+01:00',
+ value: 'Africa/Brazzaville',
+ },
+ {
+ label: 'Africa/Bujumbura, GMT+02:00',
+ value: 'Africa/Bujumbura',
+ },
+ {
+ label: 'Africa/Cairo, GMT+03:00',
+ value: 'Africa/Cairo',
+ },
+ {
+ label: 'Africa/Casablanca, GMT+01:00',
+ value: 'Africa/Casablanca',
+ },
+ {
+ label: 'Africa/Ceuta, GMT+02:00',
+ value: 'Africa/Ceuta',
+ },
+ {
+ label: 'Africa/Conakry, GMT',
+ value: 'Africa/Conakry',
+ },
+ {
+ label: 'Africa/Dakar, GMT',
+ value: 'Africa/Dakar',
+ },
+ {
+ label: 'Africa/Dar_es_Salaam, GMT+03:00',
+ value: 'Africa/Dar_es_Salaam',
+ },
+ {
+ label: 'Africa/Djibouti, GMT+03:00',
+ value: 'Africa/Djibouti',
+ },
+ {
+ label: 'Africa/Douala, GMT+01:00',
+ value: 'Africa/Douala',
+ },
+ {
+ label: 'Africa/El_Aaiun, GMT+01:00',
+ value: 'Africa/El_Aaiun',
+ },
+ {
+ label: 'Africa/Freetown, GMT',
+ value: 'Africa/Freetown',
+ },
+ {
+ label: 'Africa/Gaborone, GMT+02:00',
+ value: 'Africa/Gaborone',
+ },
+ {
+ label: 'Africa/Harare, GMT+02:00',
+ value: 'Africa/Harare',
+ },
+ {
+ label: 'Africa/Johannesburg, GMT+02:00',
+ value: 'Africa/Johannesburg',
+ },
+ {
+ label: 'Africa/Juba, GMT+02:00',
+ value: 'Africa/Juba',
+ },
+ {
+ label: 'Africa/Kampala, GMT+03:00',
+ value: 'Africa/Kampala',
+ },
+ {
+ label: 'Africa/Khartoum, GMT+02:00',
+ value: 'Africa/Khartoum',
+ },
+ {
+ label: 'Africa/Kigali, GMT+02:00',
+ value: 'Africa/Kigali',
+ },
+ {
+ label: 'Africa/Kinshasa, GMT+01:00',
+ value: 'Africa/Kinshasa',
+ },
+ {
+ label: 'Africa/Lagos, GMT+01:00',
+ value: 'Africa/Lagos',
+ },
+ {
+ label: 'Africa/Libreville, GMT+01:00',
+ value: 'Africa/Libreville',
+ },
+ {
+ label: 'Africa/Lome, GMT',
+ value: 'Africa/Lome',
+ },
+ {
+ label: 'Africa/Luanda, GMT+01:00',
+ value: 'Africa/Luanda',
+ },
+ {
+ label: 'Africa/Lubumbashi, GMT+02:00',
+ value: 'Africa/Lubumbashi',
+ },
+ {
+ label: 'Africa/Lusaka, GMT+02:00',
+ value: 'Africa/Lusaka',
+ },
+ {
+ label: 'Africa/Malabo, GMT+01:00',
+ value: 'Africa/Malabo',
+ },
+ {
+ label: 'Africa/Maputo, GMT+02:00',
+ value: 'Africa/Maputo',
+ },
+ {
+ label: 'Africa/Maseru, GMT+02:00',
+ value: 'Africa/Maseru',
+ },
+ {
+ label: 'Africa/Mbabane, GMT+02:00',
+ value: 'Africa/Mbabane',
+ },
+ {
+ label: 'Africa/Mogadishu, GMT+03:00',
+ value: 'Africa/Mogadishu',
+ },
+ {
+ label: 'Africa/Monrovia, GMT',
+ value: 'Africa/Monrovia',
+ },
+ {
+ label: 'Africa/Nairobi, GMT+03:00',
+ value: 'Africa/Nairobi',
+ },
+ {
+ label: 'Africa/Ndjamena, GMT+01:00',
+ value: 'Africa/Ndjamena',
+ },
+ {
+ label: 'Africa/Niamey, GMT+01:00',
+ value: 'Africa/Niamey',
+ },
+ {
+ label: 'Africa/Nouakchott, GMT',
+ value: 'Africa/Nouakchott',
+ },
+ {
+ label: 'Africa/Ouagadougou, GMT',
+ value: 'Africa/Ouagadougou',
+ },
+ {
+ label: 'Africa/Porto-Novo, GMT+01:00',
+ value: 'Africa/Porto-Novo',
+ },
+ {
+ label: 'Africa/Sao_Tome, GMT',
+ value: 'Africa/Sao_Tome',
+ },
+ {
+ label: 'Africa/Timbuktu, GMT',
+ value: 'Africa/Timbuktu',
+ },
+ {
+ label: 'Africa/Tripoli, GMT+02:00',
+ value: 'Africa/Tripoli',
+ },
+ {
+ label: 'Africa/Tunis, GMT+01:00',
+ value: 'Africa/Tunis',
+ },
+ {
+ label: 'Africa/Windhoek, GMT+02:00',
+ value: 'Africa/Windhoek',
+ },
+ {
+ label: 'America/Adak, GMT-09:00',
+ value: 'America/Adak',
+ },
+ {
+ label: 'America/Anchorage, GMT-08:00',
+ value: 'America/Anchorage',
+ },
+ {
+ label: 'America/Anguilla, GMT-04:00',
+ value: 'America/Anguilla',
+ },
+ {
+ label: 'America/Antigua, GMT-04:00',
+ value: 'America/Antigua',
+ },
+ {
+ label: 'America/Araguaina, GMT-03:00',
+ value: 'America/Araguaina',
+ },
+ {
+ label: 'America/Argentina/Buenos_Aires, GMT-03:00',
+ value: 'America/Argentina/Buenos_Aires',
+ },
+ {
+ label: 'America/Argentina/Catamarca, GMT-03:00',
+ value: 'America/Argentina/Catamarca',
+ },
+ {
+ label: 'America/Argentina/ComodRivadavia, GMT-03:00',
+ value: 'America/Argentina/ComodRivadavia',
+ },
+ {
+ label: 'America/Argentina/Cordoba, GMT-03:00',
+ value: 'America/Argentina/Cordoba',
+ },
+ {
+ label: 'America/Argentina/Jujuy, GMT-03:00',
+ value: 'America/Argentina/Jujuy',
+ },
+ {
+ label: 'America/Argentina/La_Rioja, GMT-03:00',
+ value: 'America/Argentina/La_Rioja',
+ },
+ {
+ label: 'America/Argentina/Mendoza, GMT-03:00',
+ value: 'America/Argentina/Mendoza',
+ },
+ {
+ label: 'America/Argentina/Rio_Gallegos, GMT-03:00',
+ value: 'America/Argentina/Rio_Gallegos',
+ },
+ {
+ label: 'America/Argentina/Salta, GMT-03:00',
+ value: 'America/Argentina/Salta',
+ },
+ {
+ label: 'America/Argentina/San_Juan, GMT-03:00',
+ value: 'America/Argentina/San_Juan',
+ },
+ {
+ label: 'America/Argentina/San_Luis, GMT-03:00',
+ value: 'America/Argentina/San_Luis',
+ },
+ {
+ label: 'America/Argentina/Tucuman, GMT-03:00',
+ value: 'America/Argentina/Tucuman',
+ },
+ {
+ label: 'America/Argentina/Ushuaia, GMT-03:00',
+ value: 'America/Argentina/Ushuaia',
+ },
+ {
+ label: 'America/Aruba, GMT-04:00',
+ value: 'America/Aruba',
+ },
+ {
+ label: 'America/Asuncion, GMT-04:00',
+ value: 'America/Asuncion',
+ },
+ {
+ label: 'America/Atikokan, GMT-05:00',
+ value: 'America/Atikokan',
+ },
+ {
+ label: 'America/Atka, GMT-09:00',
+ value: 'America/Atka',
+ },
+ {
+ label: 'America/Bahia, GMT-03:00',
+ value: 'America/Bahia',
+ },
+ {
+ label: 'America/Bahia_Banderas, GMT-06:00',
+ value: 'America/Bahia_Banderas',
+ },
+ {
+ label: 'America/Barbados, GMT-04:00',
+ value: 'America/Barbados',
+ },
+ {
+ label: 'America/Belem, GMT-03:00',
+ value: 'America/Belem',
+ },
+ {
+ label: 'America/Belize, GMT-06:00',
+ value: 'America/Belize',
+ },
+ {
+ label: 'America/Blanc-Sablon, GMT-04:00',
+ value: 'America/Blanc-Sablon',
+ },
+ {
+ label: 'America/Boa_Vista, GMT-04:00',
+ value: 'America/Boa_Vista',
+ },
+ {
+ label: 'America/Bogota, GMT-05:00',
+ value: 'America/Bogota',
+ },
+ {
+ label: 'America/Boise, GMT-06:00',
+ value: 'America/Boise',
+ },
+ {
+ label: 'America/Buenos_Aires, GMT-03:00',
+ value: 'America/Buenos_Aires',
+ },
+ {
+ label: 'America/Cambridge_Bay, GMT-06:00',
+ value: 'America/Cambridge_Bay',
+ },
+ {
+ label: 'America/Campo_Grande, GMT-04:00',
+ value: 'America/Campo_Grande',
+ },
+ {
+ label: 'America/Cancun, GMT-05:00',
+ value: 'America/Cancun',
+ },
+ {
+ label: 'America/Caracas, GMT-04:00',
+ value: 'America/Caracas',
+ },
+ {
+ label: 'America/Catamarca, GMT-03:00',
+ value: 'America/Catamarca',
+ },
+ {
+ label: 'America/Cayenne, GMT-03:00',
+ value: 'America/Cayenne',
+ },
+ {
+ label: 'America/Cayman, GMT-05:00',
+ value: 'America/Cayman',
+ },
+ {
+ label: 'America/Chicago, GMT-05:00',
+ value: 'America/Chicago',
+ },
+ {
+ label: 'America/Chihuahua, GMT-06:00',
+ value: 'America/Chihuahua',
+ },
+ {
+ label: 'America/Ciudad_Juarez, GMT-06:00',
+ value: 'America/Ciudad_Juarez',
+ },
+ {
+ label: 'America/Coral_Harbour, GMT-05:00',
+ value: 'America/Coral_Harbour',
+ },
+ {
+ label: 'America/Cordoba, GMT-03:00',
+ value: 'America/Cordoba',
+ },
+ {
+ label: 'America/Costa_Rica, GMT-06:00',
+ value: 'America/Costa_Rica',
+ },
+ {
+ label: 'America/Creston, GMT-07:00',
+ value: 'America/Creston',
+ },
+ {
+ label: 'America/Cuiaba, GMT-04:00',
+ value: 'America/Cuiaba',
+ },
+ {
+ label: 'America/Curacao, GMT-04:00',
+ value: 'America/Curacao',
+ },
+ {
+ label: 'America/Danmarkshavn, GMT',
+ value: 'America/Danmarkshavn',
+ },
+ {
+ label: 'America/Dawson, GMT-07:00',
+ value: 'America/Dawson',
+ },
+ {
+ label: 'America/Dawson_Creek, GMT-07:00',
+ value: 'America/Dawson_Creek',
+ },
+ {
+ label: 'America/Denver, GMT-06:00',
+ value: 'America/Denver',
+ },
+ {
+ label: 'America/Detroit, GMT-04:00',
+ value: 'America/Detroit',
+ },
+ {
+ label: 'America/Dominica, GMT-04:00',
+ value: 'America/Dominica',
+ },
+ {
+ label: 'America/Edmonton, GMT-06:00',
+ value: 'America/Edmonton',
+ },
+ {
+ label: 'America/Eirunepe, GMT-05:00',
+ value: 'America/Eirunepe',
+ },
+ {
+ label: 'America/El_Salvador, GMT-06:00',
+ value: 'America/El_Salvador',
+ },
+ {
+ label: 'America/Ensenada, GMT-07:00',
+ value: 'America/Ensenada',
+ },
+ {
+ label: 'America/Fort_Nelson, GMT-07:00',
+ value: 'America/Fort_Nelson',
+ },
+ {
+ label: 'America/Fort_Wayne, GMT-04:00',
+ value: 'America/Fort_Wayne',
+ },
+ {
+ label: 'America/Fortaleza, GMT-03:00',
+ value: 'America/Fortaleza',
+ },
+ {
+ label: 'America/Glace_Bay, GMT-03:00',
+ value: 'America/Glace_Bay',
+ },
+ {
+ label: 'America/Godthab, GMT-02:00',
+ value: 'America/Godthab',
+ },
+ {
+ label: 'America/Goose_Bay, GMT-03:00',
+ value: 'America/Goose_Bay',
+ },
+ {
+ label: 'America/Grand_Turk, GMT-04:00',
+ value: 'America/Grand_Turk',
+ },
+ {
+ label: 'America/Grenada, GMT-04:00',
+ value: 'America/Grenada',
+ },
+ {
+ label: 'America/Guadeloupe, GMT-04:00',
+ value: 'America/Guadeloupe',
+ },
+ {
+ label: 'America/Guatemala, GMT-06:00',
+ value: 'America/Guatemala',
+ },
+ {
+ label: 'America/Guayaquil, GMT-05:00',
+ value: 'America/Guayaquil',
+ },
+ {
+ label: 'America/Guyana, GMT-04:00',
+ value: 'America/Guyana',
+ },
+ {
+ label: 'America/Halifax, GMT-03:00',
+ value: 'America/Halifax',
+ },
+ {
+ label: 'America/Havana, GMT-04:00',
+ value: 'America/Havana',
+ },
+ {
+ label: 'America/Hermosillo, GMT-07:00',
+ value: 'America/Hermosillo',
+ },
+ {
+ label: 'America/Indiana/Indianapolis, GMT-04:00',
+ value: 'America/Indiana/Indianapolis',
+ },
+ {
+ label: 'America/Indiana/Knox, GMT-05:00',
+ value: 'America/Indiana/Knox',
+ },
+ {
+ label: 'America/Indiana/Marengo, GMT-04:00',
+ value: 'America/Indiana/Marengo',
+ },
+ {
+ label: 'America/Indiana/Petersburg, GMT-04:00',
+ value: 'America/Indiana/Petersburg',
+ },
+ {
+ label: 'America/Indiana/Tell_City, GMT-05:00',
+ value: 'America/Indiana/Tell_City',
+ },
+ {
+ label: 'America/Indiana/Vevay, GMT-04:00',
+ value: 'America/Indiana/Vevay',
+ },
+ {
+ label: 'America/Indiana/Vincennes, GMT-04:00',
+ value: 'America/Indiana/Vincennes',
+ },
+ {
+ label: 'America/Indiana/Winamac, GMT-04:00',
+ value: 'America/Indiana/Winamac',
+ },
+ {
+ label: 'America/Indianapolis, GMT-04:00',
+ value: 'America/Indianapolis',
+ },
+ {
+ label: 'America/Inuvik, GMT-06:00',
+ value: 'America/Inuvik',
+ },
+ {
+ label: 'America/Iqaluit, GMT-04:00',
+ value: 'America/Iqaluit',
+ },
+ {
+ label: 'America/Jamaica, GMT-05:00',
+ value: 'America/Jamaica',
+ },
+ {
+ label: 'America/Jujuy, GMT-03:00',
+ value: 'America/Jujuy',
+ },
+ {
+ label: 'America/Juneau, GMT-08:00',
+ value: 'America/Juneau',
+ },
+ {
+ label: 'America/Kentucky/Louisville, GMT-04:00',
+ value: 'America/Kentucky/Louisville',
+ },
+ {
+ label: 'America/Kentucky/Monticello, GMT-04:00',
+ value: 'America/Kentucky/Monticello',
+ },
+ {
+ label: 'America/Knox_IN, GMT-05:00',
+ value: 'America/Knox_IN',
+ },
+ {
+ label: 'America/Kralendijk, GMT-04:00',
+ value: 'America/Kralendijk',
+ },
+ {
+ label: 'America/La_Paz, GMT-04:00',
+ value: 'America/La_Paz',
+ },
+ {
+ label: 'America/Lima, GMT-05:00',
+ value: 'America/Lima',
+ },
+ {
+ label: 'America/Los_Angeles, GMT-07:00',
+ value: 'America/Los_Angeles',
+ },
+ {
+ label: 'America/Louisville, GMT-04:00',
+ value: 'America/Louisville',
+ },
+ {
+ label: 'America/Lower_Princes, GMT-04:00',
+ value: 'America/Lower_Princes',
+ },
+ {
+ label: 'America/Maceio, GMT-03:00',
+ value: 'America/Maceio',
+ },
+ {
+ label: 'America/Managua, GMT-06:00',
+ value: 'America/Managua',
+ },
+ {
+ label: 'America/Manaus, GMT-04:00',
+ value: 'America/Manaus',
+ },
+ {
+ label: 'America/Marigot, GMT-04:00',
+ value: 'America/Marigot',
+ },
+ {
+ label: 'America/Martinique, GMT-04:00',
+ value: 'America/Martinique',
+ },
+ {
+ label: 'America/Matamoros, GMT-05:00',
+ value: 'America/Matamoros',
+ },
+ {
+ label: 'America/Mazatlan, GMT-07:00',
+ value: 'America/Mazatlan',
+ },
+ {
+ label: 'America/Mendoza, GMT-03:00',
+ value: 'America/Mendoza',
+ },
+ {
+ label: 'America/Menominee, GMT-05:00',
+ value: 'America/Menominee',
+ },
+ {
+ label: 'America/Merida, GMT-06:00',
+ value: 'America/Merida',
+ },
+ {
+ label: 'America/Metlakatla, GMT-08:00',
+ value: 'America/Metlakatla',
+ },
+ {
+ label: 'America/Mexico_City, GMT-06:00',
+ value: 'America/Mexico_City',
+ },
+ {
+ label: 'America/Miquelon, GMT-02:00',
+ value: 'America/Miquelon',
+ },
+ {
+ label: 'America/Moncton, GMT-03:00',
+ value: 'America/Moncton',
+ },
+ {
+ label: 'America/Monterrey, GMT-06:00',
+ value: 'America/Monterrey',
+ },
+ {
+ label: 'America/Montevideo, GMT-03:00',
+ value: 'America/Montevideo',
+ },
+ {
+ label: 'America/Montreal, GMT-04:00',
+ value: 'America/Montreal',
+ },
+ {
+ label: 'America/Montserrat, GMT-04:00',
+ value: 'America/Montserrat',
+ },
+ {
+ label: 'America/Nassau, GMT-04:00',
+ value: 'America/Nassau',
+ },
+ {
+ label: 'America/New_York, GMT-04:00',
+ value: 'America/New_York',
+ },
+ {
+ label: 'America/Nipigon, GMT-04:00',
+ value: 'America/Nipigon',
+ },
+ {
+ label: 'America/Nome, GMT-08:00',
+ value: 'America/Nome',
+ },
+ {
+ label: 'America/Noronha, GMT-02:00',
+ value: 'America/Noronha',
+ },
+ {
+ label: 'America/North_Dakota/Beulah, GMT-05:00',
+ value: 'America/North_Dakota/Beulah',
+ },
+ {
+ label: 'America/North_Dakota/Center, GMT-05:00',
+ value: 'America/North_Dakota/Center',
+ },
+ {
+ label: 'America/North_Dakota/New_Salem, GMT-05:00',
+ value: 'America/North_Dakota/New_Salem',
+ },
+ {
+ label: 'America/Nuuk, GMT-02:00',
+ value: 'America/Nuuk',
+ },
+ {
+ label: 'America/Ojinaga, GMT-05:00',
+ value: 'America/Ojinaga',
+ },
+ {
+ label: 'America/Panama, GMT-05:00',
+ value: 'America/Panama',
+ },
+ {
+ label: 'America/Pangnirtung, GMT-04:00',
+ value: 'America/Pangnirtung',
+ },
+ {
+ label: 'America/Paramaribo, GMT-03:00',
+ value: 'America/Paramaribo',
+ },
+ {
+ label: 'America/Phoenix, GMT-07:00',
+ value: 'America/Phoenix',
+ },
+ {
+ label: 'America/Port-au-Prince, GMT-04:00',
+ value: 'America/Port-au-Prince',
+ },
+ {
+ label: 'America/Port_of_Spain, GMT-04:00',
+ value: 'America/Port_of_Spain',
+ },
+ {
+ label: 'America/Porto_Acre, GMT-05:00',
+ value: 'America/Porto_Acre',
+ },
+ {
+ label: 'America/Porto_Velho, GMT-04:00',
+ value: 'America/Porto_Velho',
+ },
+ {
+ label: 'America/Puerto_Rico, GMT-04:00',
+ value: 'America/Puerto_Rico',
+ },
+ {
+ label: 'America/Punta_Arenas, GMT-03:00',
+ value: 'America/Punta_Arenas',
+ },
+ {
+ label: 'America/Rainy_River, GMT-05:00',
+ value: 'America/Rainy_River',
+ },
+ {
+ label: 'America/Rankin_Inlet, GMT-05:00',
+ value: 'America/Rankin_Inlet',
+ },
+ {
+ label: 'America/Recife, GMT-03:00',
+ value: 'America/Recife',
+ },
+ {
+ label: 'America/Regina, GMT-06:00',
+ value: 'America/Regina',
+ },
+ {
+ label: 'America/Resolute, GMT-05:00',
+ value: 'America/Resolute',
+ },
+ {
+ label: 'America/Rio_Branco, GMT-05:00',
+ value: 'America/Rio_Branco',
+ },
+ {
+ label: 'America/Rosario, GMT-03:00',
+ value: 'America/Rosario',
+ },
+ {
+ label: 'America/Santa_Isabel, GMT-07:00',
+ value: 'America/Santa_Isabel',
+ },
+ {
+ label: 'America/Santarem, GMT-03:00',
+ value: 'America/Santarem',
+ },
+ {
+ label: 'America/Santiago, GMT-04:00',
+ value: 'America/Santiago',
+ },
+ {
+ label: 'America/Santo_Domingo, GMT-04:00',
+ value: 'America/Santo_Domingo',
+ },
+ {
+ label: 'America/Sao_Paulo, GMT-03:00',
+ value: 'America/Sao_Paulo',
+ },
+ {
+ label: 'America/Scoresbysund, GMT',
+ value: 'America/Scoresbysund',
+ },
+ {
+ label: 'America/Shiprock, GMT-06:00',
+ value: 'America/Shiprock',
+ },
+ {
+ label: 'America/Sitka, GMT-08:00',
+ value: 'America/Sitka',
+ },
+ {
+ label: 'America/St_Barthelemy, GMT-04:00',
+ value: 'America/St_Barthelemy',
+ },
+ {
+ label: 'America/St_Johns, GMT-02:30',
+ value: 'America/St_Johns',
+ },
+ {
+ label: 'America/St_Kitts, GMT-04:00',
+ value: 'America/St_Kitts',
+ },
+ {
+ label: 'America/St_Lucia, GMT-04:00',
+ value: 'America/St_Lucia',
+ },
+ {
+ label: 'America/St_Thomas, GMT-04:00',
+ value: 'America/St_Thomas',
+ },
+ {
+ label: 'America/St_Vincent, GMT-04:00',
+ value: 'America/St_Vincent',
+ },
+ {
+ label: 'America/Swift_Current, GMT-06:00',
+ value: 'America/Swift_Current',
+ },
+ {
+ label: 'America/Tegucigalpa, GMT-06:00',
+ value: 'America/Tegucigalpa',
+ },
+ {
+ label: 'America/Thule, GMT-03:00',
+ value: 'America/Thule',
+ },
+ {
+ label: 'America/Thunder_Bay, GMT-04:00',
+ value: 'America/Thunder_Bay',
+ },
+ {
+ label: 'America/Tijuana, GMT-07:00',
+ value: 'America/Tijuana',
+ },
+ {
+ label: 'America/Toronto, GMT-04:00',
+ value: 'America/Toronto',
+ },
+ {
+ label: 'America/Tortola, GMT-04:00',
+ value: 'America/Tortola',
+ },
+ {
+ label: 'America/Vancouver, GMT-07:00',
+ value: 'America/Vancouver',
+ },
+ {
+ label: 'America/Virgin, GMT-04:00',
+ value: 'America/Virgin',
+ },
+ {
+ label: 'America/Whitehorse, GMT-07:00',
+ value: 'America/Whitehorse',
+ },
+ {
+ label: 'America/Winnipeg, GMT-05:00',
+ value: 'America/Winnipeg',
+ },
+ {
+ label: 'America/Yakutat, GMT-08:00',
+ value: 'America/Yakutat',
+ },
+ {
+ label: 'America/Yellowknife, GMT-06:00',
+ value: 'America/Yellowknife',
+ },
+ {
+ label: 'Antarctica/Casey, GMT+11:00',
+ value: 'Antarctica/Casey',
+ },
+ {
+ label: 'Antarctica/Davis, GMT+07:00',
+ value: 'Antarctica/Davis',
+ },
+ {
+ label: 'Antarctica/DumontDUrville, GMT+10:00',
+ value: 'Antarctica/DumontDUrville',
+ },
+ {
+ label: 'Antarctica/Macquarie, GMT+10:00',
+ value: 'Antarctica/Macquarie',
+ },
+ {
+ label: 'Antarctica/Mawson, GMT+05:00',
+ value: 'Antarctica/Mawson',
+ },
+ {
+ label: 'Antarctica/McMurdo, GMT+12:00',
+ value: 'Antarctica/McMurdo',
+ },
+ {
+ label: 'Antarctica/Palmer, GMT-03:00',
+ value: 'Antarctica/Palmer',
+ },
+ {
+ label: 'Antarctica/Rothera, GMT-03:00',
+ value: 'Antarctica/Rothera',
+ },
+ {
+ label: 'Antarctica/South_Pole, GMT+12:00',
+ value: 'Antarctica/South_Pole',
+ },
+ {
+ label: 'Antarctica/Syowa, GMT+03:00',
+ value: 'Antarctica/Syowa',
+ },
+ {
+ label: 'Antarctica/Troll, GMT+02:00',
+ value: 'Antarctica/Troll',
+ },
+ {
+ label: 'Antarctica/Vostok, GMT+06:00',
+ value: 'Antarctica/Vostok',
+ },
+ {
+ label: 'Arctic/Longyearbyen, GMT+02:00',
+ value: 'Arctic/Longyearbyen',
+ },
+ {
+ label: 'Asia/Aden, GMT+03:00',
+ value: 'Asia/Aden',
+ },
+ {
+ label: 'Asia/Almaty, GMT+06:00',
+ value: 'Asia/Almaty',
+ },
+ {
+ label: 'Asia/Amman, GMT+03:00',
+ value: 'Asia/Amman',
+ },
+ {
+ label: 'Asia/Anadyr, GMT+12:00',
+ value: 'Asia/Anadyr',
+ },
+ {
+ label: 'Asia/Aqtau, GMT+05:00',
+ value: 'Asia/Aqtau',
+ },
+ {
+ label: 'Asia/Aqtobe, GMT+05:00',
+ value: 'Asia/Aqtobe',
+ },
+ {
+ label: 'Asia/Ashgabat, GMT+05:00',
+ value: 'Asia/Ashgabat',
+ },
+ {
+ label: 'Asia/Ashkhabad, GMT+05:00',
+ value: 'Asia/Ashkhabad',
+ },
+ {
+ label: 'Asia/Atyrau, GMT+05:00',
+ value: 'Asia/Atyrau',
+ },
+ {
+ label: 'Asia/Baghdad, GMT+03:00',
+ value: 'Asia/Baghdad',
+ },
+ {
+ label: 'Asia/Bahrain, GMT+03:00',
+ value: 'Asia/Bahrain',
+ },
+ {
+ label: 'Asia/Baku, GMT+04:00',
+ value: 'Asia/Baku',
+ },
+ {
+ label: 'Asia/Bangkok, GMT+07:00',
+ value: 'Asia/Bangkok',
+ },
+ {
+ label: 'Asia/Barnaul, GMT+07:00',
+ value: 'Asia/Barnaul',
+ },
+ {
+ label: 'Asia/Beirut, GMT+03:00',
+ value: 'Asia/Beirut',
+ },
+ {
+ label: 'Asia/Bishkek, GMT+06:00',
+ value: 'Asia/Bishkek',
+ },
+ {
+ label: 'Asia/Brunei, GMT+08:00',
+ value: 'Asia/Brunei',
+ },
+ {
+ label: 'Asia/Calcutta, GMT+05:30',
+ value: 'Asia/Calcutta',
+ },
+ {
+ label: 'Asia/Chita, GMT+09:00',
+ value: 'Asia/Chita',
+ },
+ {
+ label: 'Asia/Choibalsan, GMT+08:00',
+ value: 'Asia/Choibalsan',
+ },
+ {
+ label: 'Asia/Chongqing, GMT+08:00',
+ value: 'Asia/Chongqing',
+ },
+ {
+ label: 'Asia/Chungking, GMT+08:00',
+ value: 'Asia/Chungking',
+ },
+ {
+ label: 'Asia/Colombo, GMT+05:30',
+ value: 'Asia/Colombo',
+ },
+ {
+ label: 'Asia/Dacca, GMT+06:00',
+ value: 'Asia/Dacca',
+ },
+ {
+ label: 'Asia/Damascus, GMT+03:00',
+ value: 'Asia/Damascus',
+ },
+ {
+ label: 'Asia/Dhaka, GMT+06:00',
+ value: 'Asia/Dhaka',
+ },
+ {
+ label: 'Asia/Dili, GMT+09:00',
+ value: 'Asia/Dili',
+ },
+ {
+ label: 'Asia/Dubai, GMT+04:00',
+ value: 'Asia/Dubai',
+ },
+ {
+ label: 'Asia/Dushanbe, GMT+05:00',
+ value: 'Asia/Dushanbe',
+ },
+ {
+ label: 'Asia/Famagusta, GMT+03:00',
+ value: 'Asia/Famagusta',
+ },
+ {
+ label: 'Asia/Gaza, GMT+03:00',
+ value: 'Asia/Gaza',
+ },
+ {
+ label: 'Asia/Harbin, GMT+08:00',
+ value: 'Asia/Harbin',
+ },
+ {
+ label: 'Asia/Hebron, GMT+03:00',
+ value: 'Asia/Hebron',
+ },
+ {
+ label: 'Asia/Ho_Chi_Minh, GMT+07:00',
+ value: 'Asia/Ho_Chi_Minh',
+ },
+ {
+ label: 'Asia/Hong_Kong, GMT+08:00',
+ value: 'Asia/Hong_Kong',
+ },
+ {
+ label: 'Asia/Hovd, GMT+07:00',
+ value: 'Asia/Hovd',
+ },
+ {
+ label: 'Asia/Irkutsk, GMT+08:00',
+ value: 'Asia/Irkutsk',
+ },
+ {
+ label: 'Asia/Istanbul, GMT+03:00',
+ value: 'Asia/Istanbul',
+ },
+ {
+ label: 'Asia/Jakarta, GMT+07:00',
+ value: 'Asia/Jakarta',
+ },
+ {
+ label: 'Asia/Jayapura, GMT+09:00',
+ value: 'Asia/Jayapura',
+ },
+ {
+ label: 'Asia/Jerusalem, GMT+03:00',
+ value: 'Asia/Jerusalem',
+ },
+ {
+ label: 'Asia/Kabul, GMT+04:30',
+ value: 'Asia/Kabul',
+ },
+ {
+ label: 'Asia/Kamchatka, GMT+12:00',
+ value: 'Asia/Kamchatka',
+ },
+ {
+ label: 'Asia/Karachi, GMT+05:00',
+ value: 'Asia/Karachi',
+ },
+ {
+ label: 'Asia/Kashgar, GMT+06:00',
+ value: 'Asia/Kashgar',
+ },
+ {
+ label: 'Asia/Kathmandu, GMT+05:45',
+ value: 'Asia/Kathmandu',
+ },
+ {
+ label: 'Asia/Katmandu, GMT+05:45',
+ value: 'Asia/Katmandu',
+ },
+ {
+ label: 'Asia/Khandyga, GMT+09:00',
+ value: 'Asia/Khandyga',
+ },
+ {
+ label: 'Asia/Kolkata, GMT+05:30',
+ value: 'Asia/Kolkata',
+ },
+ {
+ label: 'Asia/Krasnoyarsk, GMT+07:00',
+ value: 'Asia/Krasnoyarsk',
+ },
+ {
+ label: 'Asia/Kuala_Lumpur, GMT+08:00',
+ value: 'Asia/Kuala_Lumpur',
+ },
+ {
+ label: 'Asia/Kuching, GMT+08:00',
+ value: 'Asia/Kuching',
+ },
+ {
+ label: 'Asia/Kuwait, GMT+03:00',
+ value: 'Asia/Kuwait',
+ },
+ {
+ label: 'Asia/Macao, GMT+08:00',
+ value: 'Asia/Macao',
+ },
+ {
+ label: 'Asia/Macau, GMT+08:00',
+ value: 'Asia/Macau',
+ },
+ {
+ label: 'Asia/Magadan, GMT+11:00',
+ value: 'Asia/Magadan',
+ },
+ {
+ label: 'Asia/Makassar, GMT+08:00',
+ value: 'Asia/Makassar',
+ },
+ {
+ label: 'Asia/Manila, GMT+08:00',
+ value: 'Asia/Manila',
+ },
+ {
+ label: 'Asia/Muscat, GMT+04:00',
+ value: 'Asia/Muscat',
+ },
+ {
+ label: 'Asia/Nicosia, GMT+03:00',
+ value: 'Asia/Nicosia',
+ },
+ {
+ label: 'Asia/Novokuznetsk, GMT+07:00',
+ value: 'Asia/Novokuznetsk',
+ },
+ {
+ label: 'Asia/Novosibirsk, GMT+07:00',
+ value: 'Asia/Novosibirsk',
+ },
+ {
+ label: 'Asia/Omsk, GMT+06:00',
+ value: 'Asia/Omsk',
+ },
+ {
+ label: 'Asia/Oral, GMT+05:00',
+ value: 'Asia/Oral',
+ },
+ {
+ label: 'Asia/Phnom_Penh, GMT+07:00',
+ value: 'Asia/Phnom_Penh',
+ },
+ {
+ label: 'Asia/Pontianak, GMT+07:00',
+ value: 'Asia/Pontianak',
+ },
+ {
+ label: 'Asia/Pyongyang, GMT+09:00',
+ value: 'Asia/Pyongyang',
+ },
+ {
+ label: 'Asia/Qatar, GMT+03:00',
+ value: 'Asia/Qatar',
+ },
+ {
+ label: 'Asia/Qostanay, GMT+06:00',
+ value: 'Asia/Qostanay',
+ },
+ {
+ label: 'Asia/Qyzylorda, GMT+05:00',
+ value: 'Asia/Qyzylorda',
+ },
+ {
+ label: 'Asia/Rangoon, GMT+06:30',
+ value: 'Asia/Rangoon',
+ },
+ {
+ label: 'Asia/Riyadh, GMT+03:00',
+ value: 'Asia/Riyadh',
+ },
+ {
+ label: 'Asia/Saigon, GMT+07:00',
+ value: 'Asia/Saigon',
+ },
+ {
+ label: 'Asia/Sakhalin, GMT+11:00',
+ value: 'Asia/Sakhalin',
+ },
+ {
+ label: 'Asia/Samarkand, GMT+05:00',
+ value: 'Asia/Samarkand',
+ },
+ {
+ label: 'Asia/Seoul, GMT+09:00',
+ value: 'Asia/Seoul',
+ },
+ {
+ label: 'Asia/Shanghai, GMT+08:00',
+ value: 'Asia/Shanghai',
+ },
+ {
+ label: 'Asia/Singapore, GMT+08:00',
+ value: 'Asia/Singapore',
+ },
+ {
+ label: 'Asia/Srednekolymsk, GMT+11:00',
+ value: 'Asia/Srednekolymsk',
+ },
+ {
+ label: 'Asia/Taipei, GMT+08:00',
+ value: 'Asia/Taipei',
+ },
+ {
+ label: 'Asia/Tashkent, GMT+05:00',
+ value: 'Asia/Tashkent',
+ },
+ {
+ label: 'Asia/Tbilisi, GMT+04:00',
+ value: 'Asia/Tbilisi',
+ },
+ {
+ label: 'Asia/Tehran, GMT+03:30',
+ value: 'Asia/Tehran',
+ },
+ {
+ label: 'Asia/Tel_Aviv, GMT+03:00',
+ value: 'Asia/Tel_Aviv',
+ },
+ {
+ label: 'Asia/Thimbu, GMT+06:00',
+ value: 'Asia/Thimbu',
+ },
+ {
+ label: 'Asia/Thimphu, GMT+06:00',
+ value: 'Asia/Thimphu',
+ },
+ {
+ label: 'Asia/Tokyo, GMT+09:00',
+ value: 'Asia/Tokyo',
+ },
+ {
+ label: 'Asia/Tomsk, GMT+07:00',
+ value: 'Asia/Tomsk',
+ },
+ {
+ label: 'Asia/Ujung_Pandang, GMT+08:00',
+ value: 'Asia/Ujung_Pandang',
+ },
+ {
+ label: 'Asia/Ulaanbaatar, GMT+08:00',
+ value: 'Asia/Ulaanbaatar',
+ },
+ {
+ label: 'Asia/Ulan_Bator, GMT+08:00',
+ value: 'Asia/Ulan_Bator',
+ },
+ {
+ label: 'Asia/Urumqi, GMT+06:00',
+ value: 'Asia/Urumqi',
+ },
+ {
+ label: 'Asia/Ust-Nera, GMT+10:00',
+ value: 'Asia/Ust-Nera',
+ },
+ {
+ label: 'Asia/Vientiane, GMT+07:00',
+ value: 'Asia/Vientiane',
+ },
+ {
+ label: 'Asia/Vladivostok, GMT+10:00',
+ value: 'Asia/Vladivostok',
+ },
+ {
+ label: 'Asia/Yakutsk, GMT+09:00',
+ value: 'Asia/Yakutsk',
+ },
+ {
+ label: 'Asia/Yangon, GMT+06:30',
+ value: 'Asia/Yangon',
+ },
+ {
+ label: 'Asia/Yekaterinburg, GMT+05:00',
+ value: 'Asia/Yekaterinburg',
+ },
+ {
+ label: 'Asia/Yerevan, GMT+04:00',
+ value: 'Asia/Yerevan',
+ },
+ {
+ label: 'Atlantic/Azores, GMT',
+ value: 'Atlantic/Azores',
+ },
+ {
+ label: 'Atlantic/Bermuda, GMT-03:00',
+ value: 'Atlantic/Bermuda',
+ },
+ {
+ label: 'Atlantic/Canary, GMT+01:00',
+ value: 'Atlantic/Canary',
+ },
+ {
+ label: 'Atlantic/Cape_Verde, GMT-01:00',
+ value: 'Atlantic/Cape_Verde',
+ },
+ {
+ label: 'Atlantic/Faeroe, GMT+01:00',
+ value: 'Atlantic/Faeroe',
+ },
+ {
+ label: 'Atlantic/Faroe, GMT+01:00',
+ value: 'Atlantic/Faroe',
+ },
+ {
+ label: 'Atlantic/Jan_Mayen, GMT+02:00',
+ value: 'Atlantic/Jan_Mayen',
+ },
+ {
+ label: 'Atlantic/Madeira, GMT+01:00',
+ value: 'Atlantic/Madeira',
+ },
+ {
+ label: 'Atlantic/Reykjavik, GMT',
+ value: 'Atlantic/Reykjavik',
+ },
+ {
+ label: 'Atlantic/South_Georgia, GMT-02:00',
+ value: 'Atlantic/South_Georgia',
+ },
+ {
+ label: 'Atlantic/St_Helena, GMT',
+ value: 'Atlantic/St_Helena',
+ },
+ {
+ label: 'Atlantic/Stanley, GMT-03:00',
+ value: 'Atlantic/Stanley',
+ },
+ {
+ label: 'Australia/ACT, GMT+10:00',
+ value: 'Australia/ACT',
+ },
+ {
+ label: 'Australia/Adelaide, GMT+09:30',
+ value: 'Australia/Adelaide',
+ },
+ {
+ label: 'Australia/Brisbane, GMT+10:00',
+ value: 'Australia/Brisbane',
+ },
+ {
+ label: 'Australia/Broken_Hill, GMT+09:30',
+ value: 'Australia/Broken_Hill',
+ },
+ {
+ label: 'Australia/Canberra, GMT+10:00',
+ value: 'Australia/Canberra',
+ },
+ {
+ label: 'Australia/Currie, GMT+10:00',
+ value: 'Australia/Currie',
+ },
+ {
+ label: 'Australia/Darwin, GMT+09:30',
+ value: 'Australia/Darwin',
+ },
+ {
+ label: 'Australia/Eucla, GMT+08:45',
+ value: 'Australia/Eucla',
+ },
+ {
+ label: 'Australia/Hobart, GMT+10:00',
+ value: 'Australia/Hobart',
+ },
+ {
+ label: 'Australia/LHI, GMT+10:30',
+ value: 'Australia/LHI',
+ },
+ {
+ label: 'Australia/Lindeman, GMT+10:00',
+ value: 'Australia/Lindeman',
+ },
+ {
+ label: 'Australia/Lord_Howe, GMT+10:30',
+ value: 'Australia/Lord_Howe',
+ },
+ {
+ label: 'Australia/Melbourne, GMT+10:00',
+ value: 'Australia/Melbourne',
+ },
+ {
+ label: 'Australia/NSW, GMT+10:00',
+ value: 'Australia/NSW',
+ },
+ {
+ label: 'Australia/North, GMT+09:30',
+ value: 'Australia/North',
+ },
+ {
+ label: 'Australia/Perth, GMT+08:00',
+ value: 'Australia/Perth',
+ },
+ {
+ label: 'Australia/Queensland, GMT+10:00',
+ value: 'Australia/Queensland',
+ },
+ {
+ label: 'Australia/South, GMT+09:30',
+ value: 'Australia/South',
+ },
+ {
+ label: 'Australia/Sydney, GMT+10:00',
+ value: 'Australia/Sydney',
+ },
+ {
+ label: 'Australia/Tasmania, GMT+10:00',
+ value: 'Australia/Tasmania',
+ },
+ {
+ label: 'Australia/Victoria, GMT+10:00',
+ value: 'Australia/Victoria',
+ },
+ {
+ label: 'Australia/West, GMT+08:00',
+ value: 'Australia/West',
+ },
+ {
+ label: 'Australia/Yancowinna, GMT+09:30',
+ value: 'Australia/Yancowinna',
+ },
+ {
+ label: 'Brazil/Acre, GMT-05:00',
+ value: 'Brazil/Acre',
+ },
+ {
+ label: 'Brazil/DeNoronha, GMT-02:00',
+ value: 'Brazil/DeNoronha',
+ },
+ {
+ label: 'Brazil/East, GMT-03:00',
+ value: 'Brazil/East',
+ },
+ {
+ label: 'Brazil/West, GMT-04:00',
+ value: 'Brazil/West',
+ },
+ {
+ label: 'CET, GMT+02:00',
+ value: 'CET',
+ },
+ {
+ label: 'CST6CDT, GMT-05:00',
+ value: 'CST6CDT',
+ },
+ {
+ label: 'Canada/Atlantic, GMT-03:00',
+ value: 'Canada/Atlantic',
+ },
+ {
+ label: 'Canada/Central, GMT-05:00',
+ value: 'Canada/Central',
+ },
+ {
+ label: 'Canada/Eastern, GMT-04:00',
+ value: 'Canada/Eastern',
+ },
+ {
+ label: 'Canada/Mountain, GMT-06:00',
+ value: 'Canada/Mountain',
+ },
+ {
+ label: 'Canada/Newfoundland, GMT-02:30',
+ value: 'Canada/Newfoundland',
+ },
+ {
+ label: 'Canada/Pacific, GMT-07:00',
+ value: 'Canada/Pacific',
+ },
+ {
+ label: 'Canada/Saskatchewan, GMT-06:00',
+ value: 'Canada/Saskatchewan',
+ },
+ {
+ label: 'Canada/Yukon, GMT-07:00',
+ value: 'Canada/Yukon',
+ },
+ {
+ label: 'Chile/Continental, GMT-04:00',
+ value: 'Chile/Continental',
+ },
+ {
+ label: 'Chile/EasterIsland, GMT-06:00',
+ value: 'Chile/EasterIsland',
+ },
+ {
+ label: 'Cuba, GMT-04:00',
+ value: 'Cuba',
+ },
+ {
+ label: 'EET, GMT+03:00',
+ value: 'EET',
+ },
+ {
+ label: 'EST, GMT-05:00',
+ value: 'EST',
+ },
+ {
+ label: 'EST5EDT, GMT-04:00',
+ value: 'EST5EDT',
+ },
+ {
+ label: 'Egypt, GMT+03:00',
+ value: 'Egypt',
+ },
+ {
+ label: 'Eire, GMT+01:00',
+ value: 'Eire',
+ },
+ {
+ label: 'Etc/GMT, GMT',
+ value: 'Etc/GMT',
+ },
+ {
+ label: 'Etc/GMT+0, GMT',
+ value: 'Etc/GMT+0',
+ },
+ {
+ label: 'Etc/GMT+1, GMT-01:00',
+ value: 'Etc/GMT+1',
+ },
+ {
+ label: 'Etc/GMT+10, GMT-10:00',
+ value: 'Etc/GMT+10',
+ },
+ {
+ label: 'Etc/GMT+11, GMT-11:00',
+ value: 'Etc/GMT+11',
+ },
+ {
+ label: 'Etc/GMT+12, GMT-12:00',
+ value: 'Etc/GMT+12',
+ },
+ {
+ label: 'Etc/GMT+2, GMT-02:00',
+ value: 'Etc/GMT+2',
+ },
+ {
+ label: 'Etc/GMT+3, GMT-03:00',
+ value: 'Etc/GMT+3',
+ },
+ {
+ label: 'Etc/GMT+4, GMT-04:00',
+ value: 'Etc/GMT+4',
+ },
+ {
+ label: 'Etc/GMT+5, GMT-05:00',
+ value: 'Etc/GMT+5',
+ },
+ {
+ label: 'Etc/GMT+6, GMT-06:00',
+ value: 'Etc/GMT+6',
+ },
+ {
+ label: 'Etc/GMT+7, GMT-07:00',
+ value: 'Etc/GMT+7',
+ },
+ {
+ label: 'Etc/GMT+8, GMT-08:00',
+ value: 'Etc/GMT+8',
+ },
+ {
+ label: 'Etc/GMT+9, GMT-09:00',
+ value: 'Etc/GMT+9',
+ },
+ {
+ label: 'Etc/GMT-0, GMT',
+ value: 'Etc/GMT-0',
+ },
+ {
+ label: 'Etc/GMT-1, GMT+01:00',
+ value: 'Etc/GMT-1',
+ },
+ {
+ label: 'Etc/GMT-10, GMT+10:00',
+ value: 'Etc/GMT-10',
+ },
+ {
+ label: 'Etc/GMT-11, GMT+11:00',
+ value: 'Etc/GMT-11',
+ },
+ {
+ label: 'Etc/GMT-12, GMT+12:00',
+ value: 'Etc/GMT-12',
+ },
+ {
+ label: 'Etc/GMT-13, GMT+13:00',
+ value: 'Etc/GMT-13',
+ },
+ {
+ label: 'Etc/GMT-14, GMT+14:00',
+ value: 'Etc/GMT-14',
+ },
+ {
+ label: 'Etc/GMT-2, GMT+02:00',
+ value: 'Etc/GMT-2',
+ },
+ {
+ label: 'Etc/GMT-3, GMT+03:00',
+ value: 'Etc/GMT-3',
+ },
+ {
+ label: 'Etc/GMT-4, GMT+04:00',
+ value: 'Etc/GMT-4',
+ },
+ {
+ label: 'Etc/GMT-5, GMT+05:00',
+ value: 'Etc/GMT-5',
+ },
+ {
+ label: 'Etc/GMT-6, GMT+06:00',
+ value: 'Etc/GMT-6',
+ },
+ {
+ label: 'Etc/GMT-7, GMT+07:00',
+ value: 'Etc/GMT-7',
+ },
+ {
+ label: 'Etc/GMT-8, GMT+08:00',
+ value: 'Etc/GMT-8',
+ },
+ {
+ label: 'Etc/GMT-9, GMT+09:00',
+ value: 'Etc/GMT-9',
+ },
+ {
+ label: 'Etc/GMT0, GMT',
+ value: 'Etc/GMT0',
+ },
+ {
+ label: 'Etc/Greenwich, GMT',
+ value: 'Etc/Greenwich',
+ },
+ {
+ label: 'Etc/UCT, GMT',
+ value: 'Etc/UCT',
+ },
+ {
+ label: 'Etc/UTC, GMT',
+ value: 'Etc/UTC',
+ },
+ {
+ label: 'Etc/Universal, GMT',
+ value: 'Etc/Universal',
+ },
+ {
+ label: 'Etc/Zulu, GMT',
+ value: 'Etc/Zulu',
+ },
+ {
+ label: 'Europe/Amsterdam, GMT+02:00',
+ value: 'Europe/Amsterdam',
+ },
+ {
+ label: 'Europe/Andorra, GMT+02:00',
+ value: 'Europe/Andorra',
+ },
+ {
+ label: 'Europe/Astrakhan, GMT+04:00',
+ value: 'Europe/Astrakhan',
+ },
+ {
+ label: 'Europe/Athens, GMT+03:00',
+ value: 'Europe/Athens',
+ },
+ {
+ label: 'Europe/Belfast, GMT+01:00',
+ value: 'Europe/Belfast',
+ },
+ {
+ label: 'Europe/Belgrade, GMT+02:00',
+ value: 'Europe/Belgrade',
+ },
+ {
+ label: 'Europe/Berlin, GMT+02:00',
+ value: 'Europe/Berlin',
+ },
+ {
+ label: 'Europe/Bratislava, GMT+02:00',
+ value: 'Europe/Bratislava',
+ },
+ {
+ label: 'Europe/Brussels, GMT+02:00',
+ value: 'Europe/Brussels',
+ },
+ {
+ label: 'Europe/Bucharest, GMT+03:00',
+ value: 'Europe/Bucharest',
+ },
+ {
+ label: 'Europe/Budapest, GMT+02:00',
+ value: 'Europe/Budapest',
+ },
+ {
+ label: 'Europe/Busingen, GMT+02:00',
+ value: 'Europe/Busingen',
+ },
+ {
+ label: 'Europe/Chisinau, GMT+03:00',
+ value: 'Europe/Chisinau',
+ },
+ {
+ label: 'Europe/Copenhagen, GMT+02:00',
+ value: 'Europe/Copenhagen',
+ },
+ {
+ label: 'Europe/Dublin, GMT+01:00',
+ value: 'Europe/Dublin',
+ },
+ {
+ label: 'Europe/Gibraltar, GMT+02:00',
+ value: 'Europe/Gibraltar',
+ },
+ {
+ label: 'Europe/Guernsey, GMT+01:00',
+ value: 'Europe/Guernsey',
+ },
+ {
+ label: 'Europe/Helsinki, GMT+03:00',
+ value: 'Europe/Helsinki',
+ },
+ {
+ label: 'Europe/Isle_of_Man, GMT+01:00',
+ value: 'Europe/Isle_of_Man',
+ },
+ {
+ label: 'Europe/Istanbul, GMT+03:00',
+ value: 'Europe/Istanbul',
+ },
+ {
+ label: 'Europe/Jersey, GMT+01:00',
+ value: 'Europe/Jersey',
+ },
+ {
+ label: 'Europe/Kaliningrad, GMT+02:00',
+ value: 'Europe/Kaliningrad',
+ },
+ {
+ label: 'Europe/Kiev, GMT+03:00',
+ value: 'Europe/Kiev',
+ },
+ {
+ label: 'Europe/Kirov, GMT+03:00',
+ value: 'Europe/Kirov',
+ },
+ {
+ label: 'Europe/Kyiv, GMT+03:00',
+ value: 'Europe/Kyiv',
+ },
+ {
+ label: 'Europe/Lisbon, GMT+01:00',
+ value: 'Europe/Lisbon',
+ },
+ {
+ label: 'Europe/Ljubljana, GMT+02:00',
+ value: 'Europe/Ljubljana',
+ },
+ {
+ label: 'Europe/London, GMT+01:00',
+ value: 'Europe/London',
+ },
+ {
+ label: 'Europe/Luxembourg, GMT+02:00',
+ value: 'Europe/Luxembourg',
+ },
+ {
+ label: 'Europe/Madrid, GMT+02:00',
+ value: 'Europe/Madrid',
+ },
+ {
+ label: 'Europe/Malta, GMT+02:00',
+ value: 'Europe/Malta',
+ },
+ {
+ label: 'Europe/Mariehamn, GMT+03:00',
+ value: 'Europe/Mariehamn',
+ },
+ {
+ label: 'Europe/Minsk, GMT+03:00',
+ value: 'Europe/Minsk',
+ },
+ {
+ label: 'Europe/Monaco, GMT+02:00',
+ value: 'Europe/Monaco',
+ },
+ {
+ label: 'Europe/Moscow, GMT+03:00',
+ value: 'Europe/Moscow',
+ },
+ {
+ label: 'Europe/Nicosia, GMT+03:00',
+ value: 'Europe/Nicosia',
+ },
+ {
+ label: 'Europe/Oslo, GMT+02:00',
+ value: 'Europe/Oslo',
+ },
+ {
+ label: 'Europe/Paris, GMT+02:00',
+ value: 'Europe/Paris',
+ },
+ {
+ label: 'Europe/Podgorica, GMT+02:00',
+ value: 'Europe/Podgorica',
+ },
+ {
+ label: 'Europe/Prague, GMT+02:00',
+ value: 'Europe/Prague',
+ },
+ {
+ label: 'Europe/Riga, GMT+03:00',
+ value: 'Europe/Riga',
+ },
+ {
+ label: 'Europe/Rome, GMT+02:00',
+ value: 'Europe/Rome',
+ },
+ {
+ label: 'Europe/Samara, GMT+04:00',
+ value: 'Europe/Samara',
+ },
+ {
+ label: 'Europe/San_Marino, GMT+02:00',
+ value: 'Europe/San_Marino',
+ },
+ {
+ label: 'Europe/Sarajevo, GMT+02:00',
+ value: 'Europe/Sarajevo',
+ },
+ {
+ label: 'Europe/Saratov, GMT+04:00',
+ value: 'Europe/Saratov',
+ },
+ {
+ label: 'Europe/Simferopol, GMT+03:00',
+ value: 'Europe/Simferopol',
+ },
+ {
+ label: 'Europe/Skopje, GMT+02:00',
+ value: 'Europe/Skopje',
+ },
+ {
+ label: 'Europe/Sofia, GMT+03:00',
+ value: 'Europe/Sofia',
+ },
+ {
+ label: 'Europe/Stockholm, GMT+02:00',
+ value: 'Europe/Stockholm',
+ },
+ {
+ label: 'Europe/Tallinn, GMT+03:00',
+ value: 'Europe/Tallinn',
+ },
+ {
+ label: 'Europe/Tirane, GMT+02:00',
+ value: 'Europe/Tirane',
+ },
+ {
+ label: 'Europe/Tiraspol, GMT+03:00',
+ value: 'Europe/Tiraspol',
+ },
+ {
+ label: 'Europe/Ulyanovsk, GMT+04:00',
+ value: 'Europe/Ulyanovsk',
+ },
+ {
+ label: 'Europe/Uzhgorod, GMT+03:00',
+ value: 'Europe/Uzhgorod',
+ },
+ {
+ label: 'Europe/Vaduz, GMT+02:00',
+ value: 'Europe/Vaduz',
+ },
+ {
+ label: 'Europe/Vatican, GMT+02:00',
+ value: 'Europe/Vatican',
+ },
+ {
+ label: 'Europe/Vienna, GMT+02:00',
+ value: 'Europe/Vienna',
+ },
+ {
+ label: 'Europe/Vilnius, GMT+03:00',
+ value: 'Europe/Vilnius',
+ },
+ {
+ label: 'Europe/Volgograd, GMT+03:00',
+ value: 'Europe/Volgograd',
+ },
+ {
+ label: 'Europe/Warsaw, GMT+02:00',
+ value: 'Europe/Warsaw',
+ },
+ {
+ label: 'Europe/Zagreb, GMT+02:00',
+ value: 'Europe/Zagreb',
+ },
+ {
+ label: 'Europe/Zaporozhye, GMT+03:00',
+ value: 'Europe/Zaporozhye',
+ },
+ {
+ label: 'Europe/Zurich, GMT+02:00',
+ value: 'Europe/Zurich',
+ },
+ {
+ label: 'GB, GMT+01:00',
+ value: 'GB',
+ },
+ {
+ label: 'GB-Eire, GMT+01:00',
+ value: 'GB-Eire',
+ },
+ {
+ label: 'GMT, GMT',
+ value: 'GMT',
+ },
+ {
+ label: 'GMT+0, GMT',
+ value: 'GMT+0',
+ },
+ {
+ label: 'GMT-0, GMT',
+ value: 'GMT-0',
+ },
+ {
+ label: 'GMT0, GMT',
+ value: 'GMT0',
+ },
+ {
+ label: 'Greenwich, GMT',
+ value: 'Greenwich',
+ },
+ {
+ label: 'HST, GMT-10:00',
+ value: 'HST',
+ },
+ {
+ label: 'Hongkong, GMT+08:00',
+ value: 'Hongkong',
+ },
+ {
+ label: 'Iceland, GMT',
+ value: 'Iceland',
+ },
+ {
+ label: 'Indian/Antananarivo, GMT+03:00',
+ value: 'Indian/Antananarivo',
+ },
+ {
+ label: 'Indian/Chagos, GMT+06:00',
+ value: 'Indian/Chagos',
+ },
+ {
+ label: 'Indian/Christmas, GMT+07:00',
+ value: 'Indian/Christmas',
+ },
+ {
+ label: 'Indian/Cocos, GMT+06:30',
+ value: 'Indian/Cocos',
+ },
+ {
+ label: 'Indian/Comoro, GMT+03:00',
+ value: 'Indian/Comoro',
+ },
+ {
+ label: 'Indian/Kerguelen, GMT+05:00',
+ value: 'Indian/Kerguelen',
+ },
+ {
+ label: 'Indian/Mahe, GMT+04:00',
+ value: 'Indian/Mahe',
+ },
+ {
+ label: 'Indian/Maldives, GMT+05:00',
+ value: 'Indian/Maldives',
+ },
+ {
+ label: 'Indian/Mauritius, GMT+04:00',
+ value: 'Indian/Mauritius',
+ },
+ {
+ label: 'Indian/Mayotte, GMT+03:00',
+ value: 'Indian/Mayotte',
+ },
+ {
+ label: 'Indian/Reunion, GMT+04:00',
+ value: 'Indian/Reunion',
+ },
+ {
+ label: 'Iran, GMT+03:30',
+ value: 'Iran',
+ },
+ {
+ label: 'Israel, GMT+03:00',
+ value: 'Israel',
+ },
+ {
+ label: 'Jamaica, GMT-05:00',
+ value: 'Jamaica',
+ },
+ {
+ label: 'Japan, GMT+09:00',
+ value: 'Japan',
+ },
+ {
+ label: 'Kwajalein, GMT+12:00',
+ value: 'Kwajalein',
+ },
+ {
+ label: 'Libya, GMT+02:00',
+ value: 'Libya',
+ },
+ {
+ label: 'MET, GMT+02:00',
+ value: 'MET',
+ },
+ {
+ label: 'MST, GMT-07:00',
+ value: 'MST',
+ },
+ {
+ label: 'MST7MDT, GMT-06:00',
+ value: 'MST7MDT',
+ },
+ {
+ label: 'Mexico/BajaNorte, GMT-07:00',
+ value: 'Mexico/BajaNorte',
+ },
+ {
+ label: 'Mexico/BajaSur, GMT-07:00',
+ value: 'Mexico/BajaSur',
+ },
+ {
+ label: 'Mexico/General, GMT-06:00',
+ value: 'Mexico/General',
+ },
+ {
+ label: 'NZ, GMT+12:00',
+ value: 'NZ',
+ },
+ {
+ label: 'NZ-CHAT, GMT+12:45',
+ value: 'NZ-CHAT',
+ },
+ {
+ label: 'Navajo, GMT-06:00',
+ value: 'Navajo',
+ },
+ {
+ label: 'PRC, GMT+08:00',
+ value: 'PRC',
+ },
+ {
+ label: 'PST8PDT, GMT-07:00',
+ value: 'PST8PDT',
+ },
+ {
+ label: 'Pacific/Apia, GMT+13:00',
+ value: 'Pacific/Apia',
+ },
+ {
+ label: 'Pacific/Auckland, GMT+12:00',
+ value: 'Pacific/Auckland',
+ },
+ {
+ label: 'Pacific/Bougainville, GMT+11:00',
+ value: 'Pacific/Bougainville',
+ },
+ {
+ label: 'Pacific/Chatham, GMT+12:45',
+ value: 'Pacific/Chatham',
+ },
+ {
+ label: 'Pacific/Chuuk, GMT+10:00',
+ value: 'Pacific/Chuuk',
+ },
+ {
+ label: 'Pacific/Easter, GMT-06:00',
+ value: 'Pacific/Easter',
+ },
+ {
+ label: 'Pacific/Efate, GMT+11:00',
+ value: 'Pacific/Efate',
+ },
+ {
+ label: 'Pacific/Enderbury, GMT+13:00',
+ value: 'Pacific/Enderbury',
+ },
+ {
+ label: 'Pacific/Fakaofo, GMT+13:00',
+ value: 'Pacific/Fakaofo',
+ },
+ {
+ label: 'Pacific/Fiji, GMT+12:00',
+ value: 'Pacific/Fiji',
+ },
+ {
+ label: 'Pacific/Funafuti, GMT+12:00',
+ value: 'Pacific/Funafuti',
+ },
+ {
+ label: 'Pacific/Galapagos, GMT-06:00',
+ value: 'Pacific/Galapagos',
+ },
+ {
+ label: 'Pacific/Gambier, GMT-09:00',
+ value: 'Pacific/Gambier',
+ },
+ {
+ label: 'Pacific/Guadalcanal, GMT+11:00',
+ value: 'Pacific/Guadalcanal',
+ },
+ {
+ label: 'Pacific/Guam, GMT+10:00',
+ value: 'Pacific/Guam',
+ },
+ {
+ label: 'Pacific/Honolulu, GMT-10:00',
+ value: 'Pacific/Honolulu',
+ },
+ {
+ label: 'Pacific/Johnston, GMT-10:00',
+ value: 'Pacific/Johnston',
+ },
+ {
+ label: 'Pacific/Kanton, GMT+13:00',
+ value: 'Pacific/Kanton',
+ },
+ {
+ label: 'Pacific/Kiritimati, GMT+14:00',
+ value: 'Pacific/Kiritimati',
+ },
+ {
+ label: 'Pacific/Kosrae, GMT+11:00',
+ value: 'Pacific/Kosrae',
+ },
+ {
+ label: 'Pacific/Kwajalein, GMT+12:00',
+ value: 'Pacific/Kwajalein',
+ },
+ {
+ label: 'Pacific/Majuro, GMT+12:00',
+ value: 'Pacific/Majuro',
+ },
+ {
+ label: 'Pacific/Marquesas, GMT-09:30',
+ value: 'Pacific/Marquesas',
+ },
+ {
+ label: 'Pacific/Midway, GMT-11:00',
+ value: 'Pacific/Midway',
+ },
+ {
+ label: 'Pacific/Nauru, GMT+12:00',
+ value: 'Pacific/Nauru',
+ },
+ {
+ label: 'Pacific/Niue, GMT-11:00',
+ value: 'Pacific/Niue',
+ },
+ {
+ label: 'Pacific/Norfolk, GMT+11:00',
+ value: 'Pacific/Norfolk',
+ },
+ {
+ label: 'Pacific/Noumea, GMT+11:00',
+ value: 'Pacific/Noumea',
+ },
+ {
+ label: 'Pacific/Pago_Pago, GMT-11:00',
+ value: 'Pacific/Pago_Pago',
+ },
+ {
+ label: 'Pacific/Palau, GMT+09:00',
+ value: 'Pacific/Palau',
+ },
+ {
+ label: 'Pacific/Pitcairn, GMT-08:00',
+ value: 'Pacific/Pitcairn',
+ },
+ {
+ label: 'Pacific/Pohnpei, GMT+11:00',
+ value: 'Pacific/Pohnpei',
+ },
+ {
+ label: 'Pacific/Ponape, GMT+11:00',
+ value: 'Pacific/Ponape',
+ },
+ {
+ label: 'Pacific/Port_Moresby, GMT+10:00',
+ value: 'Pacific/Port_Moresby',
+ },
+ {
+ label: 'Pacific/Rarotonga, GMT-10:00',
+ value: 'Pacific/Rarotonga',
+ },
+ {
+ label: 'Pacific/Saipan, GMT+10:00',
+ value: 'Pacific/Saipan',
+ },
+ {
+ label: 'Pacific/Samoa, GMT-11:00',
+ value: 'Pacific/Samoa',
+ },
+ {
+ label: 'Pacific/Tahiti, GMT-10:00',
+ value: 'Pacific/Tahiti',
+ },
+ {
+ label: 'Pacific/Tarawa, GMT+12:00',
+ value: 'Pacific/Tarawa',
+ },
+ {
+ label: 'Pacific/Tongatapu, GMT+13:00',
+ value: 'Pacific/Tongatapu',
+ },
+ {
+ label: 'Pacific/Truk, GMT+10:00',
+ value: 'Pacific/Truk',
+ },
+ {
+ label: 'Pacific/Wake, GMT+12:00',
+ value: 'Pacific/Wake',
+ },
+ {
+ label: 'Pacific/Wallis, GMT+12:00',
+ value: 'Pacific/Wallis',
+ },
+ {
+ label: 'Pacific/Yap, GMT+10:00',
+ value: 'Pacific/Yap',
+ },
+ {
+ label: 'Poland, GMT+02:00',
+ value: 'Poland',
+ },
+ {
+ label: 'Portugal, GMT+01:00',
+ value: 'Portugal',
+ },
+ {
+ label: 'ROC, GMT+08:00',
+ value: 'ROC',
+ },
+ {
+ label: 'ROK, GMT+09:00',
+ value: 'ROK',
+ },
+ {
+ label: 'Singapore, GMT+08:00',
+ value: 'Singapore',
+ },
+ {
+ label: 'Turkey, GMT+03:00',
+ value: 'Turkey',
+ },
+ {
+ label: 'UCT, GMT',
+ value: 'UCT',
+ },
+ {
+ label: 'US/Alaska, GMT-08:00',
+ value: 'US/Alaska',
+ },
+ {
+ label: 'US/Aleutian, GMT-09:00',
+ value: 'US/Aleutian',
+ },
+ {
+ label: 'US/Arizona, GMT-07:00',
+ value: 'US/Arizona',
+ },
+ {
+ label: 'US/Central, GMT-05:00',
+ value: 'US/Central',
+ },
+ {
+ label: 'US/East-Indiana, GMT-04:00',
+ value: 'US/East-Indiana',
+ },
+ {
+ label: 'US/Eastern, GMT-04:00',
+ value: 'US/Eastern',
+ },
+ {
+ label: 'US/Hawaii, GMT-10:00',
+ value: 'US/Hawaii',
+ },
+ {
+ label: 'US/Indiana-Starke, GMT-05:00',
+ value: 'US/Indiana-Starke',
+ },
+ {
+ label: 'US/Michigan, GMT-04:00',
+ value: 'US/Michigan',
+ },
+ {
+ label: 'US/Mountain, GMT-06:00',
+ value: 'US/Mountain',
+ },
+ {
+ label: 'US/Pacific, GMT-07:00',
+ value: 'US/Pacific',
+ },
+ {
+ label: 'US/Samoa, GMT-11:00',
+ value: 'US/Samoa',
+ },
+ {
+ label: 'UTC, GMT',
+ value: 'UTC',
+ },
+ {
+ label: 'Universal, GMT',
+ value: 'Universal',
+ },
+ {
+ label: 'W-SU, GMT+03:00',
+ value: 'W-SU',
+ },
+ {
+ label: 'WET, GMT+01:00',
+ value: 'WET',
+ },
+ {
+ label: 'Zulu, GMT',
+ value: 'Zulu',
+ },
+]
diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts
new file mode 100644
index 0000000..88f60f6
--- /dev/null
+++ b/packages/constants/src/workspace.ts
@@ -0,0 +1,216 @@
+// types
+
+// services images
+
+import CSVLogo from 'public/services/csv.svg'
+import ExcelLogo from 'public/services/excel.svg'
+import GithubLogo from 'public/services/github.png'
+import JiraLogo from 'public/services/jira.svg'
+import JSONLogo from 'public/services/json.svg'
+
+import { TStaticViewTypes } from '@prodkt/types'
+
+// icons
+import { SettingIcon } from '@/components/icons/attachment'
+import { Props } from '@/components/icons/types'
+
+export enum EUserWorkspaceRoles {
+ GUEST = 5,
+ VIEWER = 10,
+ MEMBER = 15,
+ ADMIN = 20,
+}
+
+export const ROLE = {
+ 5: 'Guest',
+ 10: 'Viewer',
+ 15: 'Member',
+ 20: 'Admin',
+}
+
+export const ROLE_DETAILS = {
+ 5: {
+ title: 'Guest',
+ description: 'External members of organizations can be invited as guests.',
+ },
+ 10: {
+ title: 'Viewer',
+ description: 'External members of organizations can be invited as guests.',
+ },
+ 15: {
+ title: 'Member',
+ description:
+ 'Ability to read, write, edit, and delete entities inside projects, cycles, and modules',
+ },
+ 20: {
+ title: 'Admin',
+ description: 'All permissions set to true within the workspace.',
+ },
+}
+
+export const ORGANIZATION_SIZE = [
+ 'Just myself',
+ '2-10',
+ '11-50',
+ '51-200',
+ '201-500',
+ '500+',
+]
+
+export const USER_ROLES = [
+ { value: 'Product / Project Manager', label: 'Product / Project Manager' },
+ { value: 'Development / Engineering', label: 'Development / Engineering' },
+ { value: 'Founder / Executive', label: 'Founder / Executive' },
+ { value: 'Freelancer / Consultant', label: 'Freelancer / Consultant' },
+ { value: 'Marketing / Growth', label: 'Marketing / Growth' },
+ {
+ value: 'Sales / Business Development',
+ label: 'Sales / Business Development',
+ },
+ { value: 'Support / Operations', label: 'Support / Operations' },
+ { value: 'Student / Professor', label: 'Student / Professor' },
+ { value: 'Human Resources', label: 'Human Resources' },
+ { value: 'Other', label: 'Other' },
+]
+
+export const IMPORTERS_LIST = [
+ {
+ provider: 'github',
+ type: 'import',
+ title: 'GitHub',
+ description: 'Import issues from GitHub repositories and sync them.',
+ logo: GithubLogo,
+ },
+ {
+ provider: 'jira',
+ type: 'import',
+ title: 'Jira',
+ description: 'Import issues and epics from Jira projects and epics.',
+ logo: JiraLogo,
+ },
+]
+
+export const EXPORTERS_LIST = [
+ {
+ provider: 'csv',
+ type: 'export',
+ title: 'CSV',
+ description: 'Export issues to a CSV file.',
+ logo: CSVLogo,
+ },
+ {
+ provider: 'xlsx',
+ type: 'export',
+ title: 'Excel',
+ description: 'Export issues to a Excel file.',
+ logo: ExcelLogo,
+ },
+ {
+ provider: 'json',
+ type: 'export',
+ title: 'JSON',
+ description: 'Export issues to a JSON file.',
+ logo: JSONLogo,
+ },
+]
+
+export const DEFAULT_GLOBAL_VIEWS_LIST: {
+ key: TStaticViewTypes
+ label: string
+}[] = [
+ {
+ key: 'all-issues',
+ label: 'All issues',
+ },
+ {
+ key: 'assigned',
+ label: 'Assigned',
+ },
+ {
+ key: 'created',
+ label: 'Created',
+ },
+ {
+ key: 'subscribed',
+ label: 'Subscribed',
+ },
+]
+
+export const RESTRICTED_URLS = [
+ '404',
+ 'accounts',
+ 'api',
+ 'create-workspace',
+ 'error',
+ 'god-mode',
+ 'installations',
+ 'invitations',
+ 'onboarding',
+ 'profile',
+ 'spaces',
+ 'workspace-invitations',
+]
+
+export const WORKSPACE_SETTINGS_LINKS: {
+ key: string
+ label: string
+ href: string
+ access: EUserWorkspaceRoles
+ highlight: (pathname: string, baseUrl: string) => boolean
+ Icon: React.FC
+}[] = [
+ {
+ key: 'general',
+ label: 'General',
+ href: `/settings`,
+ access: EUserWorkspaceRoles.GUEST,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'members',
+ label: 'Members',
+ href: `/settings/members`,
+ access: EUserWorkspaceRoles.GUEST,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/members`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'billing-and-plans',
+ label: 'Billing and plans',
+ href: `/settings/billing`,
+ access: EUserWorkspaceRoles.ADMIN,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/billing`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'export',
+ label: 'Exports',
+ href: `/settings/exports`,
+ access: EUserWorkspaceRoles.MEMBER,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/exports`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'webhooks',
+ label: 'Webhooks',
+ href: `/settings/webhooks`,
+ access: EUserWorkspaceRoles.ADMIN,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/webhooks`,
+ Icon: SettingIcon,
+ },
+ {
+ key: 'api-tokens',
+ label: 'API tokens',
+ href: `/settings/api-tokens`,
+ access: EUserWorkspaceRoles.ADMIN,
+ highlight: (pathname: string, baseUrl: string) =>
+ pathname === `${baseUrl}/settings/api-tokens`,
+ Icon: SettingIcon,
+ },
+]
diff --git a/packages/editor/core/.eslintrc.js b/packages/editor/core/.eslintrc.js
new file mode 100644
index 0000000..c8df607
--- /dev/null
+++ b/packages/editor/core/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+ root: true,
+ extends: ["custom"],
+};
diff --git a/packages/editor/core/.prettierignore b/packages/editor/core/.prettierignore
new file mode 100644
index 0000000..43e8a7b
--- /dev/null
+++ b/packages/editor/core/.prettierignore
@@ -0,0 +1,6 @@
+.next
+.vercel
+.tubro
+out/
+dis/
+build/
\ No newline at end of file
diff --git a/packages/editor/core/.prettierrc b/packages/editor/core/.prettierrc
new file mode 100644
index 0000000..87d988f
--- /dev/null
+++ b/packages/editor/core/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "printWidth": 120,
+ "tabWidth": 2,
+ "trailingComma": "es5"
+}
diff --git a/packages/editor/core/Readme.md b/packages/editor/core/Readme.md
new file mode 100644
index 0000000..230fab5
--- /dev/null
+++ b/packages/editor/core/Readme.md
@@ -0,0 +1,116 @@
+# @prodkt/editor-core
+
+## Description
+
+The `@prodkt/editor-core` package serves as the foundation for our editor system. It provides the base functionality for our other editor packages, but it will not be used directly in any of the projects but only for extending other editors.
+
+## Utilities
+
+We provide a wide range of utilities for extending the core itself.
+
+1. Merging classes and custom styling
+2. Adding new extensions
+3. Adding custom props
+4. Base menu items, and their commands
+
+This allows for extensive customization and flexibility in the Editors created using our `editor-core` package.
+
+### Here's a detailed overview of what's exported
+
+1. useEditor - A hook that you can use to extend the Prodkt editor.
+
+ | Prop | Type | Description |
+ | ------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+ | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
+ | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
+ | `uploadFile` | `(file: File) => Promise` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+ | `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
+ | `value` | `html string` | The initial content of the editor. |
+ | `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+ | `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
+ | `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
+ | `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert in case of content not being "saved". |
+ | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
+
+2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor.
+
+ | Prop | Type | Description |
+ | -------------- | ------------- | ------------------------------------------------------------------------------------------ |
+ | `value` | `string` | The initial content of the editor. |
+ | `forwardedRef` | `any` | Pass this in whenever you want to control the editor's state from an external component |
+ | `extensions` | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
+ | `editorProps` | `EditorProps` | Extend the editor props by passing in a custom props object |
+
+3. Items and Commands - H1, H2, H3, task list, quote, code block, etc's methods.
+
+4. UI Wrappers
+
+- `EditorContainer` - Wrap your Editor Container with this to apply base classes and styles.
+- `EditorContentWrapper` - Use this to get Editor's Content and base menus.
+
+5. Extending with Custom Styles
+
+```ts
+const customEditorClassNames = getEditorClassNames({
+ noBorder,
+ borderOnFocus,
+ customClassName,
+});
+```
+
+## Core features
+
+- **Content Trimming**: The Editor’s content is now automatically trimmed of empty line breaks from the start and end before submitting it to the backend. This ensures cleaner, more consistent data.
+- **Value Cleaning**: The Editor’s value is cleaned at the editor core level, eliminating the need for additional validation before sending from our app. This results in cleaner code and less potential for errors.
+- **Turbo Pipeline**: Added a turbo pipeline for both dev and build tasks for projects depending on the editor package.
+
+```json
+ "web#develop": {
+ "cache": false,
+ "persistent": true,
+ "dependsOn": [
+ "@prodkt/lite-text-editor#build",
+ "@prodkt/rich-text-editor#build"
+ ]
+ },
+ "space#develop": {
+ "cache": false,
+ "persistent": true,
+ "dependsOn": [
+ "@prodkt/lite-text-editor#build",
+ "@prodkt/rich-text-editor#build"
+ ]
+ },
+ "web#build": {
+ "cache": true,
+ "dependsOn": [
+ "@prodkt/lite-text-editor#build",
+ "@prodkt/rich-text-editor#build"
+ ]
+ },
+ "space#build": {
+ "cache": true,
+ "dependsOn": [
+ "@prodkt/lite-text-editor#build",
+ "@prodkt/rich-text-editor#build"
+ ]
+ },
+
+```
+
+## Base extensions included
+
+- BulletList
+- OrderedList
+- Blockquote
+- Code
+- Gapcursor
+- Link
+- Image
+- Basic Marks
+ - Underline
+ - TextStyle
+ - Color
+- TaskList
+- Markdown
+- Table
diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json
new file mode 100644
index 0000000..e8e44f7
--- /dev/null
+++ b/packages/editor/core/package.json
@@ -0,0 +1,77 @@
+{
+ "name": "@prodkt/editor-core",
+ "version": "0.1.0",
+ "description": "Core Editor that powers Prodkt",
+ "private": true,
+ "main": "./dist/index.mjs",
+ "module": "./dist/index.mjs",
+ "types": "./dist/index.d.mts",
+ "files": [
+ "dist/**/*"
+ ],
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.mts",
+ "import": "./dist/index.mjs",
+ "module": "./dist/index.mjs"
+ }
+ },
+ "scripts": {
+ "build": "tsup --minify",
+ "dev": "tsup --watch",
+ "check-types": "tsc --noEmit",
+ "format": "prettier --write \"**/*.{ts,tsx,md}\""
+ },
+ "peerDependencies": {
+ "next": "12.3.2",
+ "react": "^18.2.0",
+ "react-dom": "18.2.0"
+ },
+ "dependencies": {
+ "@prodkt/ui": "*",
+ "@tiptap/core": "^2.1.13",
+ "@tiptap/extension-blockquote": "^2.1.13",
+ "@tiptap/extension-image": "^2.1.13",
+ "@tiptap/extension-list-item": "^2.1.13",
+ "@tiptap/extension-mention": "^2.1.13",
+ "@tiptap/extension-placeholder": "^2.3.0",
+ "@tiptap/extension-task-item": "^2.1.13",
+ "@tiptap/extension-task-list": "^2.1.13",
+ "@tiptap/extension-text-style": "^2.1.13",
+ "@tiptap/extension-underline": "^2.1.13",
+ "@tiptap/pm": "^2.1.13",
+ "@tiptap/react": "^2.1.13",
+ "@tiptap/starter-kit": "^2.1.13",
+ "@tiptap/suggestion": "^2.0.13",
+ "class-variance-authority": "^0.7.0",
+ "clsx": "^1.2.1",
+ "highlight.js": "^11.8.0",
+ "jsx-dom-cjs": "^8.0.3",
+ "linkifyjs": "^4.1.3",
+ "lowlight": "^3.0.0",
+ "lucide-react": "^0.378.0",
+ "prosemirror-codemark": "^0.4.2",
+ "react-moveable": "^0.54.2",
+ "tailwind-merge": "^1.14.0",
+ "tippy.js": "^6.3.7",
+ "tiptap-markdown": "^0.8.9"
+ },
+ "devDependencies": {
+ "@types/node": "18.15.3",
+ "@types/react": "^18.2.42",
+ "@types/react-dom": "^18.2.17",
+ "eslint-config-custom": "*",
+ "postcss": "^8.4.38",
+ "tailwind-config-custom": "*",
+ "tsconfig": "*",
+ "tsup": "^7.2.0",
+ "typescript": "4.9.5"
+ },
+ "keywords": [
+ "editor",
+ "rich-text",
+ "markdown",
+ "nextjs",
+ "react"
+ ]
+}
diff --git a/packages/editor/core/postcss.config.js b/packages/editor/core/postcss.config.js
new file mode 100644
index 0000000..07aa434
--- /dev/null
+++ b/packages/editor/core/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/packages/editor/core/src/helpers/insert-content-at-cursor-position.ts b/packages/editor/core/src/helpers/insert-content-at-cursor-position.ts
new file mode 100644
index 0000000..f17858d
--- /dev/null
+++ b/packages/editor/core/src/helpers/insert-content-at-cursor-position.ts
@@ -0,0 +1,28 @@
+import { Selection } from "@tiptap/pm/state";
+import { Editor } from "@tiptap/react";
+import { MutableRefObject } from "react";
+
+export const insertContentAtSavedSelection = (
+ editorRef: MutableRefObject,
+ content: string,
+ savedSelection: Selection
+) => {
+ if (!editorRef.current || editorRef.current.isDestroyed) {
+ console.error("Editor reference is not available or has been destroyed.");
+ return;
+ }
+
+ if (!savedSelection) {
+ console.error("Saved selection is invalid.");
+ return;
+ }
+
+ const docSize = editorRef.current.state.doc.content.size;
+ const safePosition = Math.max(0, Math.min(savedSelection.anchor, docSize));
+
+ try {
+ editorRef.current.chain().focus().insertContentAt(safePosition, content).run();
+ } catch (error) {
+ console.error("An error occurred while inserting content at saved selection:", error);
+ }
+};
diff --git a/packages/editor/core/src/helpers/scroll-to-node.ts b/packages/editor/core/src/helpers/scroll-to-node.ts
new file mode 100644
index 0000000..abcb132
--- /dev/null
+++ b/packages/editor/core/src/helpers/scroll-to-node.ts
@@ -0,0 +1,38 @@
+import type { Editor } from "@tiptap/react";
+
+export interface IMarking {
+ type: "heading";
+ level: number;
+ text: string;
+ sequence: number;
+}
+
+function findNthH1(editor: Editor, level?: number): number {
+ let pos = 0;
+ editor.state.doc.descendants((node, position) => {
+ // biome-ignore lint/complexity/useLiteralKeys:
+ if (node.type.name === "heading" && node.attrs["level"] === level) {
+ pos = position;
+ return false; // Stop traversal when matching heading is found
+ }
+ return true;
+ });
+ return pos;
+}
+
+function scrollToNode(editor: Editor, pos: number): void {
+ const headingNode = editor.state.doc.nodeAt(pos);
+ if (headingNode) {
+ const headingDOM = editor.view.nodeDOM(pos);
+ if (headingDOM instanceof HTMLElement) {
+ headingDOM.scrollIntoView({ behavior: "smooth" });
+ }
+ }
+}
+
+export function scrollSummary(editor: Editor, marking: IMarking) {
+ if (editor) {
+ const pos = findNthH1(editor, marking.level);
+ scrollToNode(editor, pos);
+ }
+}
diff --git a/packages/editor/core/src/hooks/use-editor.tsx b/packages/editor/core/src/hooks/use-editor.tsx
new file mode 100644
index 0000000..abc481b
--- /dev/null
+++ b/packages/editor/core/src/hooks/use-editor.tsx
@@ -0,0 +1,232 @@
+import { useEditor as useCustomEditor, type Editor } from "@tiptap/react";
+import { useImperativeHandle, useRef, type MutableRefObject, useState, useEffect } from "react";
+import { CoreEditorProps } from "@/ui/props";
+import { CoreEditorExtensions } from "@/ui/extensions";
+import type { EditorProps } from "@tiptap/pm/view";
+import type { DeleteImage } from "@/types/delete-image";
+import type { IMentionHighlight, IMentionSuggestion } from "@/types/mention-suggestion";
+import type { RestoreImage } from "@/types/restore-image";
+import type { UploadImage } from "@/types/upload-image";
+import type { Selection } from "@tiptap/pm/state";
+import { insertContentAtSavedSelection } from "@/helpers/insert-content-at-cursor-position";
+import { type EditorMenuItemNames, getEditorMenuItems } from "@/ui/menus/menu-items";
+import type { EditorRefApi } from "@/types/editor-ref-api";
+import { type IMarking, scrollSummary } from "@/helpers/scroll-to-node";
+
+export type TFileHandler = {
+ cancel: () => void;
+ delete: DeleteImage;
+ upload: UploadImage;
+ restore: RestoreImage;
+};
+
+export interface CustomEditorProps {
+ id?: string;
+ fileHandler: TFileHandler;
+ initialValue?: string;
+ editorClassName: string;
+ // undefined when prop is not passed, null if intentionally passed to stop
+ // swr syncing
+ value?: string | null | undefined;
+ onChange?: (json: object, html: string) => void;
+ // biome-ignore lint/suspicious/noExplicitAny:
+ extensions?: any;
+ editorProps?: EditorProps;
+ forwardedRef?: MutableRefObject;
+ mentionHandler: {
+ highlights: () => Promise;
+ suggestions?: () => Promise;
+ };
+ handleEditorReady?: (value: boolean) => void;
+ placeholder: string | ((isFocused: boolean, value: string) => string) | undefined;
+ tabIndex?: number;
+}
+
+export const useEditor = ({
+ id = "",
+ editorProps = {},
+ initialValue,
+ editorClassName,
+ value,
+ extensions = [],
+ fileHandler,
+ onChange,
+ forwardedRef,
+ tabIndex,
+ handleEditorReady,
+ mentionHandler,
+ placeholder,
+}: CustomEditorProps) => {
+ const editor = useCustomEditor({
+ editorProps: {
+ ...CoreEditorProps(editorClassName),
+ ...editorProps,
+ },
+ extensions: [
+ ...CoreEditorExtensions({
+ mentionConfig: {
+ mentionSuggestions: mentionHandler.suggestions as () => Promise,
+ mentionHighlights: mentionHandler.highlights as () => Promise,
+ },
+ fileConfig: {
+ uploadFile: fileHandler.upload,
+ deleteFile: fileHandler.delete,
+ restoreFile: fileHandler.restore,
+ cancelUploadImage: fileHandler.cancel,
+ },
+ placeholder: placeholder as NonNullable,
+ tabIndex: tabIndex as NonNullable,
+ }),
+ ...extensions,
+ ],
+ content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "",
+ onCreate: async () => {
+ handleEditorReady?.(true);
+ },
+ onTransaction: async ({ editor }) => {
+ setSavedSelection(editor.state.selection);
+ },
+ onUpdate: async ({ editor }) => {
+ onChange?.(editor.getJSON(), editor.getHTML());
+ },
+ onDestroy: async () => {
+ handleEditorReady?.(false);
+ },
+ });
+
+ const editorRef: MutableRefObject = useRef(null);
+
+ const [savedSelection, setSavedSelection] = useState(null);
+
+ // Inside your component or hook
+ const savedSelectionRef = useRef(savedSelection);
+
+ // Update the ref whenever savedSelection changes
+ useEffect(() => {
+ savedSelectionRef.current = savedSelection;
+ }, [savedSelection]);
+
+ // Effect for syncing SWR data
+ useEffect(() => {
+ // value is null when intentionally passed where syncing is not yet
+ // supported and value is undefined when the data from swr is not populated
+ if (value === null || value === undefined) return;
+ if (
+ editor &&
+ !editor.isDestroyed &&
+ // biome-ignore lint/complexity/useLiteralKeys:
+ !editor.storage["image"].uploadInProgress
+ ) {
+ try {
+ editor.commands.setContent(value, false, {
+ preserveWhitespace: "full",
+ });
+ const currentSavedSelection = savedSelectionRef.current;
+ if (currentSavedSelection) {
+ const docLength = editor.state.doc.content.size;
+ const relativePosition = Math.min(currentSavedSelection.from, docLength - 1);
+ editor.commands.setTextSelection(relativePosition);
+ }
+ } catch (error) {
+ console.error("Error syncing editor content with external value:", error);
+ }
+ }
+ }, [editor, value, id]);
+
+ useImperativeHandle(
+ forwardedRef,
+ () => ({
+ clearEditor: () => {
+ editorRef.current?.commands.clearContent();
+ },
+ setEditorValue: (content: string) => {
+ editorRef.current?.commands.setContent(content);
+ },
+ setEditorValueAtCursorPosition: (content: string) => {
+ if (savedSelection) {
+ insertContentAtSavedSelection(editorRef, content, savedSelection);
+ }
+ },
+ executeMenuItemCommand: (itemName: EditorMenuItemNames) => {
+ const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
+
+ const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
+
+ const item = getEditorMenuItem(itemName);
+ if (item) {
+ if (item.key === "image") {
+ item.command(savedSelectionRef.current);
+ } else {
+ item.command();
+ }
+ } else {
+ console.warn(`No command found for item: ${itemName}`);
+ }
+ },
+ isMenuItemActive: (itemName: EditorMenuItemNames): boolean => {
+ const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
+
+ const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
+ const item = getEditorMenuItem(itemName);
+ return item ? item.isActive() : false;
+ },
+ onStateChange: (callback: () => void) => {
+ // Subscribe to editor state changes
+ editorRef.current?.on("transaction", () => {
+ callback();
+ });
+ // Return a function to unsubscribe to the continuous transactions of
+ // the editor on unmounting the component that has subscribed to this
+ // method
+ return () => {
+ editorRef.current?.off("transaction");
+ };
+ },
+ getMarkDown: (): string => {
+ const markdownOutput =
+ // biome-ignore lint/complexity/useLiteralKeys:
+ editorRef.current?.storage["markdown"].getMarkdown();
+ return markdownOutput;
+ },
+ getHTML: (): string => {
+ const htmlOutput = editorRef.current?.getHTML() ?? "";
+ return htmlOutput;
+ },
+ scrollSummary: (marking: IMarking): void => {
+ if (!editorRef.current) return;
+ scrollSummary(editorRef.current, marking);
+ },
+ isEditorReadyToDiscard: () =>
+ // biome-ignore lint/complexity/useLiteralKeys:
+ editorRef.current?.storage["image"].uploadInProgress === false,
+ setFocusAtPosition: (position: number) => {
+ if (!editorRef.current || editorRef.current.isDestroyed) {
+ console.error("Editor reference is not available or has been destroyed.");
+ return;
+ }
+ try {
+ const docSize = editorRef.current.state.doc.content.size;
+ const safePosition = Math.max(0, Math.min(position, docSize));
+ editorRef.current
+ .chain()
+ .insertContentAt(safePosition, [{ type: "paragraph" }])
+ .focus()
+ .run();
+ } catch (error) {
+ console.error("An error occurred while setting focus at position:", error);
+ }
+ },
+ }),
+ [editorRef, savedSelection, fileHandler.upload]
+ );
+
+ if (!editor) {
+ return null;
+ }
+
+ // the editorRef is used to access the editor instance from outside the hook
+ // and should only be used after editor is initialized
+ editorRef.current = editor;
+
+ return editor;
+};
diff --git a/packages/editor/core/src/hooks/use-read-only-editor.tsx b/packages/editor/core/src/hooks/use-read-only-editor.tsx
new file mode 100644
index 0000000..74cd8a2
--- /dev/null
+++ b/packages/editor/core/src/hooks/use-read-only-editor.tsx
@@ -0,0 +1,89 @@
+import { useEditor as useCustomEditor, type Editor } from "@tiptap/react";
+import { useImperativeHandle, useRef, type MutableRefObject, useEffect } from "react";
+import { CoreReadOnlyEditorExtensions } from "@/ui/read-only/extensions";
+import { CoreReadOnlyEditorProps } from "@/ui/read-only/props";
+import type { EditorProps } from "@tiptap/pm/view";
+import type { EditorReadOnlyRefApi } from "@/types/editor-ref-api";
+import { type IMarking, scrollSummary } from "@/helpers/scroll-to-node";
+import type { IMentionHighlight } from "@/types/mention-suggestion";
+
+interface CustomReadOnlyEditorProps {
+ initialValue: string;
+ editorClassName: string;
+ forwardedRef?: MutableRefObject;
+ extensions?: any;
+ editorProps?: EditorProps;
+ handleEditorReady?: (value: boolean) => void;
+ mentionHandler: {
+ highlights: () => Promise;
+ };
+}
+
+export const useReadOnlyEditor = ({
+ initialValue,
+ editorClassName,
+ forwardedRef,
+ extensions = [],
+ editorProps = {},
+ handleEditorReady,
+ mentionHandler,
+}: CustomReadOnlyEditorProps) => {
+ const editor = useCustomEditor({
+ editable: false,
+ content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "",
+ editorProps: {
+ ...CoreReadOnlyEditorProps(editorClassName),
+ ...editorProps,
+ },
+ onCreate: async () => {
+ handleEditorReady?.(true);
+ },
+ extensions: [
+ ...CoreReadOnlyEditorExtensions({
+ mentionHighlights: mentionHandler.highlights,
+ }),
+ ...extensions,
+ ],
+ onDestroy: () => {
+ handleEditorReady?.(false);
+ },
+ });
+
+ // for syncing swr data on tab refocus etc
+ useEffect(() => {
+ if (initialValue === null || initialValue === undefined) return;
+ if (editor && !editor.isDestroyed) editor?.commands.setContent(initialValue);
+ }, [editor, initialValue]);
+
+ const editorRef: MutableRefObject = useRef(null);
+
+ useImperativeHandle(forwardedRef, () => ({
+ clearEditor: () => {
+ editorRef.current?.commands.clearContent();
+ },
+ setEditorValue: (content: string) => {
+ editorRef.current?.commands.setContent(content);
+ },
+ getMarkDown: (): string => {
+ const markdownOutput =
+ // biome-ignore lint/complexity/useLiteralKeys:
+ editorRef.current?.storage["markdown"].getMarkdown();
+ return markdownOutput;
+ },
+ getHTML: (): string => {
+ const htmlOutput = editorRef.current?.getHTML() ?? "";
+ return htmlOutput;
+ },
+ scrollSummary: (marking: IMarking): void => {
+ if (!editorRef.current) return;
+ scrollSummary(editorRef.current, marking);
+ },
+ }));
+
+ if (!editor) {
+ return null;
+ }
+
+ editorRef.current = editor;
+ return editor;
+};
diff --git a/packages/editor/core/src/index.ts b/packages/editor/core/src/index.ts
new file mode 100644
index 0000000..493f02d
--- /dev/null
+++ b/packages/editor/core/src/index.ts
@@ -0,0 +1,34 @@
+// styles
+// import "./styles/tailwind.css";
+import "src/styles/editor.css";
+import "src/styles/table.css";
+import "src/styles/github-dark.css";
+
+export { isCellSelection } from "src/ui/extensions/table/table/utilities/is-cell-selection";
+
+// utils
+export * from "src/lib/utils";
+export * from "src/ui/extensions/table/table";
+export { startImageUpload } from "src/ui/plugins/image/image-upload-handler";
+
+// components
+export { EditorContainer } from "src/ui/components/editor-container";
+export { EditorContentWrapper } from "src/ui/components/editor-content";
+
+// hooks
+export { useEditor } from "src/hooks/use-editor";
+export { useReadOnlyEditor } from "src/hooks/use-read-only-editor";
+
+// helper items
+export * from "src/ui/menus/menu-items";
+export * from "src/lib/editor-commands";
+
+// types
+export type { CustomEditorProps, TFileHandler } from "src/hooks/use-editor";
+export type { DeleteImage } from "src/types/delete-image";
+export type { UploadImage } from "src/types/upload-image";
+export type { EditorRefApi, EditorReadOnlyRefApi } from "src/types/editor-ref-api";
+export type { RestoreImage } from "src/types/restore-image";
+export type { IMentionHighlight, IMentionSuggestion } from "src/types/mention-suggestion";
+export type { ISlashCommandItem, CommandProps } from "src/types/slash-commands-suggestion";
+export type { LucideIconType } from "src/types/lucide-icon";
diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts
new file mode 100644
index 0000000..53e20b3
--- /dev/null
+++ b/packages/editor/core/src/lib/editor-commands.ts
@@ -0,0 +1,154 @@
+import type { Editor, Range } from "@tiptap/core";
+import { startImageUpload } from "@/ui/plugins/image/image-upload-handler";
+import { findTableAncestor } from "@/lib/utils";
+import type { Selection } from "@tiptap/pm/state";
+import type { UploadImage } from "@/types/upload-image";
+import { replaceCodeWithText } from "@/ui/extensions/code/utils/replace-code-block-with-text";
+
+export const setText = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).clearNodes().run();
+ else editor.chain().focus().clearNodes().run();
+};
+
+export const toggleHeadingOne = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+ else editor.chain().focus().toggleHeading({ level: 1 }).run();
+};
+
+export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+ else editor.chain().focus().toggleHeading({ level: 2 }).run();
+};
+
+export const toggleHeadingThree = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+ else editor.chain().focus().toggleHeading({ level: 3 }).run();
+};
+
+export const toggleHeadingFour = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 4 }).run();
+ else editor.chain().focus().toggleHeading({ level: 4 }).run();
+};
+
+export const toggleHeadingFive = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 5 }).run();
+ else editor.chain().focus().toggleHeading({ level: 5 }).run();
+};
+
+export const toggleHeadingSix = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 6 }).run();
+ else editor.chain().focus().toggleHeading({ level: 6 }).run();
+};
+
+export const toggleBold = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
+ else editor.chain().focus().toggleBold().run();
+};
+
+export const toggleItalic = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleItalic().run();
+ else editor.chain().focus().toggleItalic().run();
+};
+
+export const toggleUnderline = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleUnderline().run();
+ else editor.chain().focus().toggleUnderline().run();
+};
+
+export const toggleCodeBlock = (editor: Editor, range?: Range) => {
+ try {
+ // if it's a code block, replace it with the code with paragraphs
+ if (editor.isActive("codeBlock")) {
+ replaceCodeWithText(editor);
+ return;
+ }
+
+ const { from, to } = range || editor.state.selection;
+ const text = editor.state.doc.textBetween(from, to, "\n");
+ const isMultiline = text.includes("\n");
+
+ // if the selection is not a range i.e. empty, then simply convert it into a code block
+ if (editor.state.selection.empty) {
+ editor.chain().focus().toggleCodeBlock().run();
+ } else if (isMultiline) {
+ // if the selection is multiline, then also replace the text content with
+ // a code block
+ editor.chain().focus().deleteRange({ from, to }).insertContentAt(from, `\`\`\`\n${text}\n\`\`\``).run();
+ } else {
+ // if the selection is single line, then simply convert it into inline
+ // code
+ editor.chain().focus().toggleCode().run();
+ }
+ } catch (error) {
+ console.error("An error occurred while toggling code block:", error);
+ }
+};
+
+export const toggleOrderedList = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+ else editor.chain().focus().toggleOrderedList().run();
+};
+
+export const toggleBulletList = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleBulletList().run();
+ else editor.chain().focus().toggleBulletList().run();
+};
+
+export const toggleTaskList = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
+ else editor.chain().focus().toggleTaskList().run();
+};
+
+export const toggleStrike = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleStrike().run();
+ else editor.chain().focus().toggleStrike().run();
+};
+
+export const toggleBlockquote = (editor: Editor, range?: Range) => {
+ if (range) editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+ else editor.chain().focus().toggleBlockquote().run();
+};
+
+export const insertTableCommand = (editor: Editor, range?: Range) => {
+ if (typeof window !== "undefined") {
+ const selection = window.getSelection();
+ if (selection) {
+ if (selection.rangeCount !== 0) {
+ const range = selection.getRangeAt(0);
+ if (findTableAncestor(range.startContainer)) {
+ return;
+ }
+ }
+ }
+ }
+ if (range) editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3 }).run();
+ else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3 }).run();
+};
+
+export const unsetLinkEditor = (editor: Editor) => {
+ editor.chain().focus().unsetLink().run();
+};
+
+export const setLinkEditor = (editor: Editor, url: string) => {
+ editor.chain().focus().setLink({ href: url }).run();
+};
+
+export const insertImageCommand = (
+ editor: Editor,
+ uploadFile: UploadImage,
+ savedSelection?: Selection | null,
+ range?: Range
+) => {
+ if (range) editor.chain().focus().deleteRange(range).run();
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = ".jpeg, .jpg, .png, .webp, .svg";
+ input.onchange = async () => {
+ if (input.files?.length) {
+ const file = input.files[0] as File;
+ const pos = savedSelection?.anchor ?? editor.view.state.selection.from;
+ startImageUpload(editor, file, editor.view, pos, uploadFile);
+ }
+ };
+ input.click();
+};
diff --git a/packages/editor/core/src/lib/utils.ts b/packages/editor/core/src/lib/utils.ts
new file mode 100644
index 0000000..137c70c
--- /dev/null
+++ b/packages/editor/core/src/lib/utils.ts
@@ -0,0 +1,79 @@
+import { Extensions, generateJSON, getSchema } from "@tiptap/core";
+import { Selection } from "@tiptap/pm/state";
+import { clsx, type ClassValue } from "clsx";
+import { CoreEditorExtensionsWithoutProps } from "src/ui/extensions/core-without-props";
+import { twMerge } from "tailwind-merge";
+interface EditorClassNames {
+ noBorder?: boolean;
+ borderOnFocus?: boolean;
+ containerClassName?: string;
+}
+
+export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassName }: EditorClassNames) =>
+ cn(
+ "w-full max-w-full sm:rounded-lg focus:outline-none focus:border-0",
+ {
+ "border border-custom-border-200": !noBorder,
+ "focus:border border-custom-border-300": borderOnFocus,
+ },
+ containerClassName
+ );
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+// Helper function to find the parent node of a specific type
+export function findParentNodeOfType(selection: Selection, typeName: string) {
+ let depth = selection.$anchor.depth;
+ while (depth > 0) {
+ const node = selection.$anchor.node(depth);
+ if (node.type.name === typeName) {
+ return { node, pos: selection.$anchor.start(depth) - 1 };
+ }
+ depth--;
+ }
+ return null;
+}
+
+export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
+ while (node !== null && node.nodeName !== "TABLE") {
+ node = node.parentNode;
+ }
+ return node as HTMLTableElement;
+};
+
+export const getTrimmedHTML = (html: string) => {
+ html = html.replace(/^(<\/p>)+/, "");
+ html = html.replace(/(
<\/p>)+$/, "");
+ return html;
+};
+
+export const isValidHttpUrl = (string: string): boolean => {
+ let url: URL;
+
+ try {
+ url = new URL(string);
+ } catch (_) {
+ return false;
+ }
+
+ return url.protocol === "http:" || url.protocol === "https:";
+};
+
+/**
+ * @description return an object with contentJSON and editorSchema
+ * @description contentJSON- ProseMirror JSON from HTML content
+ * @description editorSchema- editor schema from extensions
+ * @param {string} html
+ * @returns {object} {contentJSON, editorSchema}
+ */
+export const generateJSONfromHTML = (html: string) => {
+ const extensions = CoreEditorExtensionsWithoutProps();
+ const contentJSON = generateJSON(html ?? "
", extensions as Extensions);
+ const editorSchema = getSchema(extensions as Extensions);
+ return {
+ contentJSON,
+ editorSchema,
+ };
+};
diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css
new file mode 100644
index 0000000..f76b6b1
--- /dev/null
+++ b/packages/editor/core/src/styles/editor.css
@@ -0,0 +1,401 @@
+.ProseMirror {
+ --font-size-h1: 1.5rem;
+ --font-size-h2: 1.3125rem;
+ --font-size-h3: 1.125rem;
+ --font-size-h4: 0.9375rem;
+ --font-size-h5: 0.8125rem;
+ --font-size-h6: 0.75rem;
+ --font-size-regular: 0.9375rem;
+ --font-size-list: var(--font-size-regular);
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+ content: attr(data-placeholder);
+ float: left;
+ color: rgb(var(--color-text-400));
+ pointer-events: none;
+ height: 0;
+}
+
+/* block quotes */
+.ProseMirror blockquote {
+ font-style: normal;
+ font-weight: 400;
+ border-left: 3px solid rgb(var(--color-border-300));
+}
+
+.ProseMirror blockquote p::before,
+.ProseMirror blockquote p::after {
+ display: none;
+}
+/* end block quotes */
+
+.ProseMirror code::before,
+.ProseMirror code::after {
+ display: none;
+}
+
+.ProseMirror .is-empty::before {
+ content: attr(data-placeholder);
+ float: left;
+ color: rgb(var(--color-text-400));
+ pointer-events: none;
+ height: 0;
+}
+
+/* Custom image styles */
+.ProseMirror img {
+ transition: filter 0.1s ease-in-out;
+ margin-top: 8px;
+ margin-bottom: 0;
+
+ &:hover {
+ cursor: pointer;
+ filter: brightness(90%);
+ }
+
+ &.ProseMirror-selectednode {
+ outline: 3px solid rgba(var(--color-primary-100));
+ filter: brightness(90%);
+ }
+}
+
+/* Custom gap cursor styles */
+.ProseMirror-gapcursor::after {
+ border-top: 1px solid rgb(var(--color-text-100)) !important;
+}
+
+/* to-do list */
+ul[data-type="taskList"] li {
+ font-size: var(--font-size-list);
+ line-height: 1.5;
+}
+
+ul[data-type="taskList"] li > label {
+ position: absolute;
+ left: -5px;
+ margin: 0.1rem 0.15rem 0 0;
+ user-select: none;
+}
+
+ul[data-type="taskList"] li > div {
+ margin-left: 1.15rem;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+ border: 1px solid rgba(var(--color-border-300)) !important;
+ outline: none;
+ border-radius: 2px;
+ transform: scale(1.05);
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
+ background-color: rgba(var(--color-background-80)) !important;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
+ background-color: rgba(var(--color-primary-100)) !important;
+ border-color: rgba(var(--color-primary-100)) !important;
+ color: white !important;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
+ background-color: rgba(var(--color-primary-300)) !important;
+ border-color: rgba(var(--color-primary-300)) !important;
+}
+
+@media screen and (max-width: 768px) {
+ ul[data-type="taskList"] li > label {
+ margin-right: 0.5rem;
+ }
+}
+
+/* the p tag just after the ul tag */
+ul[data-type="taskList"] + p {
+ margin-top: 0.4rem !important;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+ position: relative;
+ -webkit-appearance: none;
+ appearance: none;
+ background-color: rgb(var(--color-background-100));
+ margin: 0;
+ cursor: pointer;
+ width: 0.8rem;
+ height: 0.8rem;
+ position: relative;
+ border: 1.5px solid rgb(var(--color-text-100));
+ margin-right: 0.2rem;
+ margin-top: 0.15rem;
+
+ &:hover {
+ background-color: rgb(var(--color-background-80));
+ }
+
+ &:active {
+ background-color: rgb(var(--color-background-90));
+ }
+
+ /* check sign */
+ &::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0.5em;
+ height: 0.5em;
+ transform: scale(0);
+ transform-origin: center;
+ transition: 120ms transform ease-in-out;
+ box-shadow: inset 1em 1em;
+ clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+ }
+
+ &:checked::before {
+ transform: scale(1) translate(-50%, -50%);
+ }
+}
+
+ul[data-type="taskList"] li > div > p {
+ margin-top: 10px;
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+ color: rgb(var(--color-text-400));
+ text-decoration: line-through;
+ text-decoration-thickness: 2px;
+}
+/* end to-do list */
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+ max-width: 400px !important;
+}
+
+.ProseMirror {
+ position: relative;
+ word-wrap: break-word;
+ white-space: pre-wrap;
+ -moz-tab-size: 4;
+ tab-size: 4;
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+ outline: none;
+ cursor: text;
+ line-height: 1.2;
+ font-family: inherit;
+ font-size: var(--font-size-regular);
+ color: inherit;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ appearance: textfield;
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+}
+
+.fade-in {
+ opacity: 1;
+ transition: opacity 0.3s ease-in;
+}
+
+.fade-out {
+ opacity: 0;
+ transition: opacity 0.2s ease-out;
+}
+
+.img-placeholder {
+ position: relative;
+ width: 35%;
+ margin-top: 0 !important;
+ margin-bottom: 0 !important;
+
+ &::before {
+ content: "";
+ box-sizing: border-box;
+ position: absolute;
+ top: 50%;
+ left: 45%;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ border: 3px solid rgba(var(--color-text-200));
+ border-top-color: rgba(var(--color-text-800));
+ animation: spinning 0.6s linear infinite;
+ }
+}
+
+@keyframes spinning {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.resize-cursor {
+ cursor: ew-resize;
+ cursor: col-resize;
+}
+
+.ProseMirror table * .is-empty::before {
+ opacity: 0;
+}
+
+.ProseMirror pre {
+ font-family: JetBrainsMono, monospace;
+ tab-size: 2;
+}
+
+.ProseMirror pre code {
+ background: none;
+ color: inherit;
+ font-size: 0.8rem;
+ padding: 0;
+}
+
+div[data-type="horizontalRule"] {
+ line-height: 0;
+ padding: 0.25rem 0;
+ margin-top: 0;
+ margin-bottom: 0;
+
+ & > div {
+ border-bottom: 2px solid rgb(var(--color-border-200));
+ }
+}
+
+/* image resizer */
+.moveable-control-box {
+ z-index: 10 !important;
+}
+
+/* Cursor styles for the inline code blocks */
+@keyframes blink {
+ 49% {
+ border-color: unset;
+ }
+
+ 50% {
+ border-color: transparent;
+ }
+
+ 99% {
+ border-color: transparent;
+ }
+}
+
+.no-cursor {
+ caret-color: transparent;
+}
+
+div:focus .fake-cursor,
+span:focus .fake-cursor {
+ margin-right: -1px;
+ border-left-width: 1.5px;
+ border-left-style: solid;
+ animation: blink 1s;
+ animation-iteration-count: infinite;
+ position: relative;
+ z-index: 1;
+}
+
+/* numbered, bulleted and to-do lists spacing */
+.prose ol:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+.prose
+ ul:not([data-type="taskList"]):where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+.prose ul[data-type="taskList"]:where(.prose > :first-child) {
+ margin-top: 0.25rem !important;
+ margin-bottom: 1px !important;
+}
+
+.prose ol:not(:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))),
+.prose
+ ul:not([data-type="taskList"]):not(
+ :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))
+ ),
+.prose ul[data-type="taskList"]:not(:where(.prose > :first-child)) {
+ margin-top: calc(0.25rem + 3px) !important;
+ margin-bottom: 1px !important;
+}
+
+ol ol,
+ol ul:not([data-type="taskList"]),
+ul:not([data-type="taskList"]) ul:not([data-type="taskList"]),
+ul:not([data-type="taskList"]) ol {
+ margin-top: 0.45rem !important;
+}
+
+ul[data-type="taskList"] ul[data-type="taskList"] {
+ margin-top: 0.6rem;
+}
+/* end numbered, bulleted and to-do lists spacing */
+
+/* tailwind typography */
+.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 2rem;
+ margin-bottom: 4px;
+ font-size: var(--font-size-h1);
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1.4rem;
+ margin-bottom: 1px;
+ font-size: var(--font-size-h2);
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1rem;
+ margin-bottom: 1px;
+ font-size: var(--font-size-h3);
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1rem;
+ margin-bottom: 1px;
+ font-size: var(--font-size-h4);
+ font-weight: 600;
+ line-height: 1.5;
+}
+
+.prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1rem;
+ margin-bottom: 1px;
+ font-size: var(--font-size-h5);
+ font-weight: 600;
+ line-height: 1.5;
+}
+
+.prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 1rem;
+ margin-bottom: 1px;
+ font-size: var(--font-size-h6);
+ font-weight: 600;
+ line-height: 1.5;
+}
+
+.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0.25rem;
+ margin-bottom: 1px;
+ padding: 3px 0;
+ font-size: var(--font-size-regular);
+ line-height: 1.5;
+}
+
+.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p,
+.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p {
+ font-size: var(--font-size-list);
+ line-height: 1.5;
+}
+
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ margin-top: 0;
+}
+/* end tailwind typography */
diff --git a/packages/editor/core/src/styles/github-dark.css b/packages/editor/core/src/styles/github-dark.css
new file mode 100644
index 0000000..9374de4
--- /dev/null
+++ b/packages/editor/core/src/styles/github-dark.css
@@ -0,0 +1,85 @@
+pre code.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 1em;
+}
+code.hljs {
+ padding: 3px 5px;
+}
+.hljs {
+ color: #c9d1d9;
+ background: #0d1117;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+ color: #ff7b72;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+ color: #d2a8ff;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+ color: #79c0ff;
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+ color: #a5d6ff;
+}
+.hljs-built_in,
+.hljs-symbol {
+ color: #ffa657;
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+ color: #8b949e;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+ color: #7ee787;
+}
+.hljs-subst {
+ color: #c9d1d9;
+}
+.hljs-section {
+ color: #1f6feb;
+ font-weight: 700;
+}
+.hljs-bullet {
+ color: #f2cc60;
+}
+.hljs-emphasis {
+ color: #c9d1d9;
+ font-style: italic;
+}
+.hljs-strong {
+ color: #c9d1d9;
+ font-weight: 700;
+}
+.hljs-addition {
+ color: #aff5b4;
+ background-color: #033a16;
+}
+.hljs-deletion {
+ color: #ffdcd7;
+ background-color: #67060c;
+}
diff --git a/packages/editor/core/src/styles/table.css b/packages/editor/core/src/styles/table.css
new file mode 100644
index 0000000..d5adac9
--- /dev/null
+++ b/packages/editor/core/src/styles/table.css
@@ -0,0 +1,116 @@
+.table-wrapper {
+ overflow-x: auto;
+ width: fit-content;
+ max-width: 100%;
+}
+
+.table-wrapper table {
+ border-collapse: collapse;
+ table-layout: fixed;
+ margin: 0.5rem 0 1rem 0;
+ border: 1px solid rgba(var(--color-border-200));
+ width: 100%;
+}
+
+.table-wrapper table p {
+ font-size: 14px;
+}
+
+.table-wrapper table td,
+.table-wrapper table th {
+ min-width: 1em;
+ border: 1px solid rgba(var(--color-border-200));
+ padding: 10px 15px;
+ vertical-align: top;
+ box-sizing: border-box;
+ position: relative;
+ transition: background-color 0.3s ease;
+
+ > * {
+ margin-bottom: 0;
+ }
+}
+
+.table-wrapper table th {
+ font-weight: 500;
+ text-align: left;
+ background-color: rgba(var(--color-background-90));
+}
+
+.table-wrapper table .selectedCell {
+ outline: 0.5px solid rgba(var(--color-primary-100));
+}
+
+/* table dropdown */
+.table-wrapper table .column-resize-handle {
+ position: absolute;
+ right: -2px;
+ top: 0;
+ width: 2px;
+ height: 100%;
+ z-index: 5;
+ background-color: rgba(var(--color-primary-100));
+ pointer-events: none;
+}
+
+.table-wrapper .table-controls {
+ position: absolute;
+}
+
+.table-wrapper .table-controls .columns-control,
+.table-wrapper .table-controls .rows-control {
+ transition: opacity ease-in 100ms;
+ position: absolute;
+ z-index: 5;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.table-wrapper .table-controls .columns-control {
+ height: 20px;
+ transform: translateY(-50%);
+}
+
+.table-wrapper .table-controls .columns-control .columns-control-div {
+ color: white;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+ width: 30px;
+ height: 15px;
+}
+
+.table-wrapper .table-controls .rows-control {
+ width: 20px;
+ transform: translateX(-50%);
+}
+
+.table-wrapper .table-controls .rows-control .rows-control-div {
+ color: white;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+ height: 30px;
+ width: 15px;
+}
+
+.table-wrapper .table-controls .rows-control-div,
+.table-wrapper .table-controls .columns-control-div {
+ background-color: rgba(var(--color-background-80));
+ border: 0.5px solid rgba(var(--color-border-200));
+ border-radius: 4px;
+ background-size: 1.25rem;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition:
+ transform ease-out 100ms,
+ background-color ease-out 100ms;
+ outline: none;
+ box-shadow: rgba(var(--color-shadow-2xs));
+ cursor: pointer;
+}
+
+.resize-cursor .table-wrapper .table-controls .rows-control,
+.table-wrapper.controls--disabled .table-controls .rows-control,
+.resize-cursor .table-wrapper .table-controls .columns-control,
+.table-wrapper.controls--disabled .table-controls .columns-control {
+ opacity: 0;
+ pointer-events: none;
+}
diff --git a/packages/editor/core/src/styles/tailwind.css b/packages/editor/core/src/styles/tailwind.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/packages/editor/core/src/styles/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/editor/core/src/types/delete-image.ts b/packages/editor/core/src/types/delete-image.ts
new file mode 100644
index 0000000..40bfffe
--- /dev/null
+++ b/packages/editor/core/src/types/delete-image.ts
@@ -0,0 +1 @@
+export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise;
diff --git a/packages/editor/core/src/types/editor-ref-api.ts b/packages/editor/core/src/types/editor-ref-api.ts
new file mode 100644
index 0000000..b15ae94
--- /dev/null
+++ b/packages/editor/core/src/types/editor-ref-api.ts
@@ -0,0 +1,19 @@
+import { IMarking } from "src/helpers/scroll-to-node";
+import { EditorMenuItemNames } from "src/ui/menus/menu-items";
+
+export type EditorReadOnlyRefApi = {
+ getMarkDown: () => string;
+ getHTML: () => string;
+ clearEditor: () => void;
+ setEditorValue: (content: string) => void;
+ scrollSummary: (marking: IMarking) => void;
+};
+
+export interface EditorRefApi extends EditorReadOnlyRefApi {
+ setEditorValueAtCursorPosition: (content: string) => void;
+ executeMenuItemCommand: (itemName: EditorMenuItemNames) => void;
+ isMenuItemActive: (itemName: EditorMenuItemNames) => boolean;
+ onStateChange: (callback: () => void) => () => void;
+ setFocusAtPosition: (position: number) => void;
+ isEditorReadyToDiscard: () => boolean;
+}
diff --git a/packages/editor/core/src/types/lucide-icon.ts b/packages/editor/core/src/types/lucide-icon.ts
new file mode 100644
index 0000000..2211c18
--- /dev/null
+++ b/packages/editor/core/src/types/lucide-icon.ts
@@ -0,0 +1,3 @@
+import { Smile } from "lucide-react";
+
+export type LucideIconType = typeof Smile;
diff --git a/packages/editor/core/src/types/mention-suggestion.ts b/packages/editor/core/src/types/mention-suggestion.ts
new file mode 100644
index 0000000..53377bd
--- /dev/null
+++ b/packages/editor/core/src/types/mention-suggestion.ts
@@ -0,0 +1,18 @@
+import type { Editor, Range } from "@tiptap/react";
+export type IMentionSuggestion = {
+ id: string;
+ type: string;
+ entity_name: string;
+ entity_identifier: string;
+ avatar: string;
+ title: string;
+ subtitle: string;
+ redirect_uri: string;
+};
+
+export type CommandProps = {
+ editor: Editor;
+ range: Range;
+};
+
+export type IMentionHighlight = string;
diff --git a/packages/editor/core/src/types/restore-image.ts b/packages/editor/core/src/types/restore-image.ts
new file mode 100644
index 0000000..9b33177
--- /dev/null
+++ b/packages/editor/core/src/types/restore-image.ts
@@ -0,0 +1 @@
+export type RestoreImage = (assetUrlWithWorkspaceId: string) => Promise;
diff --git a/packages/editor/core/src/types/slash-commands-suggestion.ts b/packages/editor/core/src/types/slash-commands-suggestion.ts
new file mode 100644
index 0000000..34e4510
--- /dev/null
+++ b/packages/editor/core/src/types/slash-commands-suggestion.ts
@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { Editor, Range } from "@tiptap/core";
+
+export type CommandProps = {
+ editor: Editor;
+ range: Range;
+};
+
+export type ISlashCommandItem = {
+ key: string;
+ title: string;
+ description: string;
+ searchTerms: string[];
+ icon: ReactNode;
+ command: ({ editor, range }: CommandProps) => void;
+};
diff --git a/packages/editor/core/src/types/upload-image.ts b/packages/editor/core/src/types/upload-image.ts
new file mode 100644
index 0000000..3cf1408
--- /dev/null
+++ b/packages/editor/core/src/types/upload-image.ts
@@ -0,0 +1 @@
+export type UploadImage = (file: File) => Promise;
diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx
new file mode 100644
index 0000000..cfa80da
--- /dev/null
+++ b/packages/editor/core/src/ui/components/editor-container.tsx
@@ -0,0 +1,70 @@
+import { Editor } from "@tiptap/react";
+import { FC, ReactNode } from "react";
+import { cn } from "src/lib/utils";
+
+interface EditorContainerProps {
+ editor: Editor | null;
+ editorContainerClassName: string;
+ children: ReactNode;
+ hideDragHandle?: () => void;
+}
+
+export const EditorContainer: FC = (props) => {
+ const { editor, editorContainerClassName, hideDragHandle, children } = props;
+
+ const handleContainerClick = () => {
+ if (!editor) return;
+ if (!editor.isEditable) return;
+ try {
+ if (editor.isFocused) return; // If editor is already focused, do nothing
+
+ const { selection } = editor.state;
+ const currentNode = selection.$from.node();
+
+ editor?.chain().focus("end", { scrollIntoView: false }).run(); // Focus the editor at the end
+
+ if (
+ currentNode.content.size === 0 && // Check if the current node is empty
+ !(
+ editor.isActive("orderedList") ||
+ editor.isActive("bulletList") ||
+ editor.isActive("taskItem") ||
+ editor.isActive("table") ||
+ editor.isActive("blockquote") ||
+ editor.isActive("codeBlock")
+ ) // Check if it's an empty node within an orderedList, bulletList, taskItem, table, quote or code block
+ ) {
+ return;
+ }
+
+ // Insert a new paragraph at the end of the document
+ const endPosition = editor?.state.doc.content.size;
+ editor?.chain().insertContentAt(endPosition, { type: "paragraph" }).run();
+
+ // Focus the newly added paragraph for immediate editing
+ editor
+ .chain()
+ .setTextSelection(endPosition + 1)
+ .run();
+ } catch (error) {
+ console.error("An error occurred while handling container click to insert new empty node at bottom:", error);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx
new file mode 100644
index 0000000..a242726
--- /dev/null
+++ b/packages/editor/core/src/ui/components/editor-content.tsx
@@ -0,0 +1,21 @@
+import { Editor, EditorContent } from "@tiptap/react";
+import { FC, ReactNode } from "react";
+import { ImageResizer } from "src/ui/extensions/image/image-resize";
+
+interface EditorContentProps {
+ editor: Editor | null;
+ children?: ReactNode;
+ tabIndex?: number;
+}
+
+export const EditorContentWrapper: FC = (props) => {
+ const { editor, tabIndex, children } = props;
+
+ return (
+ editor?.chain().focus(undefined, { scrollIntoView: false }).run()}>
+
+ {editor?.isActive("image") && editor?.isEditable && }
+ {children}
+
+ );
+};
diff --git a/packages/editor/core/src/ui/extensions/code-inline/index.tsx b/packages/editor/core/src/ui/extensions/code-inline/index.tsx
new file mode 100644
index 0000000..60a1236
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code-inline/index.tsx
@@ -0,0 +1,96 @@
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
+
+export interface CodeOptions {
+ HTMLAttributes: Record;
+}
+
+declare module "@tiptap/core" {
+ interface Commands {
+ code: {
+ /**
+ * Set a code mark
+ */
+ setCode: () => ReturnType;
+ /**
+ * Toggle inline code
+ */
+ toggleCode: () => ReturnType;
+ /**
+ * Unset a code mark
+ */
+ unsetCode: () => ReturnType;
+ };
+ }
+}
+
+export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/;
+export const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/g;
+
+export const CustomCodeInlineExtension = Mark.create({
+ name: "code",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {
+ class:
+ "rounded bg-custom-background-80 px-1 py-[2px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200",
+ spellcheck: "false",
+ },
+ };
+ },
+
+ excludes: "_",
+
+ code: true,
+
+ exitable: true,
+
+ parseHTML() {
+ return [{ tag: "code" }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return ["code", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+ },
+
+ addCommands() {
+ return {
+ setCode:
+ () =>
+ ({ commands }) =>
+ commands.setMark(this.name),
+ toggleCode:
+ () =>
+ ({ commands }) =>
+ commands.toggleMark(this.name),
+ unsetCode:
+ () =>
+ ({ commands }) =>
+ commands.unsetMark(this.name),
+ };
+ },
+
+ addKeyboardShortcuts() {
+ return {
+ "Mod-e": () => this.editor.commands.toggleCode(),
+ };
+ },
+
+ addInputRules() {
+ return [
+ markInputRule({
+ find: inputRegex,
+ type: this.type,
+ }),
+ ];
+ },
+
+ addPasteRules() {
+ return [
+ markPasteRule({
+ find: pasteRegex,
+ type: this.type,
+ }),
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/code/code-block-lowlight.ts b/packages/editor/core/src/ui/extensions/code/code-block-lowlight.ts
new file mode 100644
index 0000000..ae44d83
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code/code-block-lowlight.ts
@@ -0,0 +1,30 @@
+// import CodeBlock, { CodeBlockOptions } from "@tiptap/extension-code-block";
+
+import { CodeBlockOptions, CodeBlock } from "./code-block";
+import { LowlightPlugin } from "./lowlight-plugin";
+
+export interface CodeBlockLowlightOptions extends CodeBlockOptions {
+ lowlight: any;
+ defaultLanguage: string | null | undefined;
+}
+
+export const CodeBlockLowlight = CodeBlock.extend({
+ addOptions() {
+ return {
+ ...this.parent?.(),
+ lowlight: {},
+ defaultLanguage: null,
+ };
+ },
+
+ addProseMirrorPlugins() {
+ return [
+ ...(this.parent?.() || []),
+ LowlightPlugin({
+ name: this.name,
+ lowlight: this.options.lowlight,
+ defaultLanguage: this.options.defaultLanguage,
+ }),
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx b/packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx
new file mode 100644
index 0000000..1d2cd09
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code/code-block-node-view.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
+import { common, createLowlight } from "lowlight";
+import ts from "highlight.js/lib/languages/typescript";
+import { CopyIcon, CheckIcon } from "lucide-react";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { cn } from "src/lib/utils";
+import { Tooltip } from "@prodkt/ui/primitives";
+
+// we just have ts support for now
+const lowlight = createLowlight(common);
+lowlight.register("ts", ts);
+
+interface CodeBlockComponentProps {
+ node: ProseMirrorNode;
+}
+
+export const CodeBlockComponent: React.FC = ({ node }) => {
+ const [copied, setCopied] = useState(false);
+
+ const copyToClipboard = async (e: React.MouseEvent) => {
+ try {
+ await navigator.clipboard.writeText(node.textContent);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1000);
+ } catch (error) {
+ setCopied(false);
+ }
+ e.preventDefault();
+ e.stopPropagation();
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/editor/core/src/ui/extensions/code/code-block.ts b/packages/editor/core/src/ui/extensions/code/code-block.ts
new file mode 100644
index 0000000..b2218ee
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code/code-block.ts
@@ -0,0 +1,346 @@
+import { mergeAttributes, Node, textblockTypeInputRule } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+export interface CodeBlockOptions {
+ /**
+ * Adds a prefix to language classes that are applied to code tags.
+ * Defaults to `'language-'`.
+ */
+ languageClassPrefix: string;
+ /**
+ * Define whether the node should be exited on triple enter.
+ * Defaults to `true`.
+ */
+ exitOnTripleEnter: boolean;
+ /**
+ * Define whether the node should be exited on arrow down if there is no node after it.
+ * Defaults to `true`.
+ */
+ exitOnArrowDown: boolean;
+ /**
+ * Custom HTML attributes that should be added to the rendered HTML tag.
+ */
+ HTMLAttributes: Record;
+}
+
+declare module "@tiptap/core" {
+ interface Commands {
+ codeBlock: {
+ /**
+ * Set a code block
+ */
+ setCodeBlock: (attributes?: { language: string }) => ReturnType;
+ /**
+ * Toggle a code block
+ */
+ toggleCodeBlock: (attributes?: { language: string }) => ReturnType;
+ };
+ }
+}
+
+export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
+
+export const CodeBlock = Node.create({
+ name: "codeBlock",
+
+ addOptions() {
+ return {
+ languageClassPrefix: "language-",
+ exitOnTripleEnter: true,
+ exitOnArrowDown: true,
+ HTMLAttributes: {},
+ };
+ },
+ content: "text*",
+
+ marks: "",
+
+ group: "block",
+
+ code: true,
+
+ defining: true,
+
+ addAttributes() {
+ return {
+ language: {
+ default: null,
+ parseHTML: (element) => {
+ const { languageClassPrefix } = this.options;
+ // @ts-expect-error element is a DOM element
+ const classNames = [...(element.firstElementChild?.classList || [])];
+ const languages = classNames
+ .filter((className) => className.startsWith(languageClassPrefix))
+ .map((className) => className.replace(languageClassPrefix, ""));
+ const language = languages[0];
+
+ if (!language) {
+ return null;
+ }
+
+ return language;
+ },
+ rendered: false,
+ },
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "pre",
+ preserveWhitespace: "full",
+ },
+ ];
+ },
+
+ renderHTML({ node, HTMLAttributes }) {
+ return [
+ "pre",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+ [
+ "code",
+ {
+ class: node.attrs.language ? this.options.languageClassPrefix + node.attrs.language : null,
+ },
+ 0,
+ ],
+ ];
+ },
+
+ addCommands() {
+ return {
+ setCodeBlock:
+ (attributes) =>
+ ({ commands }) =>
+ commands.setNode(this.name, attributes),
+ toggleCodeBlock:
+ (attributes) =>
+ ({ commands }) =>
+ commands.toggleNode(this.name, "paragraph", attributes),
+ };
+ },
+
+ addKeyboardShortcuts() {
+ return {
+ "Mod-Alt-c": () => this.editor.commands.toggleCodeBlock(),
+
+ // remove code block when at start of document or code block is empty
+ Backspace: () => {
+ try {
+ const { empty, $anchor } = this.editor.state.selection;
+ const isAtStart = $anchor.pos === 1;
+
+ if (!empty || $anchor.parent.type.name !== this.name) {
+ return false;
+ }
+
+ if (isAtStart || !$anchor.parent.textContent.length) {
+ return this.editor.commands.clearNodes();
+ }
+
+ return false;
+ } catch (error) {
+ console.error("Error handling Backspace in code block:", error);
+ return false;
+ }
+ },
+
+ // exit node on triple enter
+ Enter: ({ editor }) => {
+ try {
+ if (!this.options.exitOnTripleEnter) {
+ return false;
+ }
+
+ const { state } = editor;
+ const { selection } = state;
+ const { $from, empty } = selection;
+
+ if (!empty || $from.parent.type !== this.type) {
+ return false;
+ }
+
+ const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+ const endsWithDoubleNewline = $from.parent.textContent.endsWith("\n\n");
+
+ if (!isAtEnd || !endsWithDoubleNewline) {
+ return false;
+ }
+
+ return editor
+ .chain()
+ .command(({ tr }) => {
+ tr.delete($from.pos - 2, $from.pos);
+
+ return true;
+ })
+ .exitCode()
+ .run();
+ } catch (error) {
+ console.error("Error handling Enter in code block:", error);
+ return false;
+ }
+ },
+
+ // exit node on arrow down
+ ArrowDown: ({ editor }) => {
+ try {
+ if (!this.options.exitOnArrowDown) {
+ return false;
+ }
+
+ const { state } = editor;
+ const { selection, doc } = state;
+ const { $from, empty } = selection;
+
+ if (!empty || $from.parent.type !== this.type) {
+ return false;
+ }
+
+ const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+ if (!isAtEnd) {
+ return false;
+ }
+
+ const after = $from.after();
+
+ if (after === undefined) {
+ return false;
+ }
+
+ const nodeAfter = doc.nodeAt(after);
+
+ if (nodeAfter) {
+ return false;
+ }
+
+ return editor.commands.exitCode();
+ } catch (error) {
+ console.error("Error handling ArrowDown in code block:", error);
+ return false;
+ }
+ },
+ };
+ },
+
+ addInputRules() {
+ return [
+ textblockTypeInputRule({
+ find: backtickInputRegex,
+ type: this.type,
+ getAttributes: (match) => ({
+ language: match[1],
+ }),
+ }),
+ textblockTypeInputRule({
+ find: tildeInputRegex,
+ type: this.type,
+ getAttributes: (match) => ({
+ language: match[1],
+ }),
+ }),
+ ];
+ },
+ addProseMirrorPlugins() {
+ return [
+ new Plugin({
+ key: new PluginKey("codeBlockVSCodeHandlerCustom"),
+ props: {
+ handlePaste: (view, event) => {
+ try {
+ if (!event.clipboardData) {
+ return false;
+ }
+
+ if (this.editor.isActive(this.type.name)) {
+ return false;
+ }
+
+ if (this.editor.isActive("code")) {
+ // Check if it's an inline code block
+ event.preventDefault();
+ const text = event.clipboardData.getData("text/plain");
+
+ if (!text) {
+ console.error("Pasted text is empty.");
+ return false;
+ }
+
+ const { tr } = view.state;
+ const { $from, $to } = tr.selection;
+
+ if ($from.pos > $to.pos) {
+ console.error("Invalid selection range.");
+ return false;
+ }
+
+ const docSize = tr.doc.content.size;
+ if ($from.pos < 0 || $to.pos > docSize) {
+ console.error("Selection range is out of document bounds.");
+ return false;
+ }
+
+ // Extend the current selection to replace it with the pasted text
+ // wrapped in an inline code mark
+ const codeMark = view.state.schema.marks.code.create();
+ tr.replaceWith($from.pos, $to.pos, view.state.schema.text(text, [codeMark]));
+ view.dispatch(tr);
+ return true;
+ }
+
+ event.preventDefault();
+ const text = event.clipboardData.getData("text/plain");
+ const vscode = event.clipboardData.getData("vscode-editor-data");
+ const vscodeData = vscode ? JSON.parse(vscode) : undefined;
+ const language = vscodeData?.mode;
+
+ if (vscodeData && language) {
+ const { tr } = view.state;
+ const { $from } = tr.selection;
+
+ // Check if the current line is empty
+ const isCurrentLineEmpty = !$from.parent.textContent.trim();
+
+ let insertPos;
+
+ if (isCurrentLineEmpty) {
+ // If the current line is empty, use the current position
+ insertPos = $from.pos - 1;
+ } else {
+ // If the current line is not empty, insert below the current block node
+ insertPos = $from.end($from.depth) + 1;
+ }
+
+ // Ensure insertPos is within document bounds
+ if (insertPos < 0 || insertPos > tr.doc.content.size) {
+ console.error("Invalid insert position.");
+ return false;
+ }
+
+ // Create a new code block node with the pasted content
+ const textNode = view.state.schema.text(text.replace(/\r\n?/g, "\n"));
+ const codeBlock = this.type.create({ language }, textNode);
+ if (insertPos <= tr.doc.content.size) {
+ tr.insert(insertPos, codeBlock);
+ view.dispatch(tr);
+ return true;
+ }
+
+ return false;
+ } else {
+ // TODO: complicated paste logic, to be handled later
+ return false;
+ }
+ } catch (error) {
+ console.error("Error handling paste in CodeBlock extension:", error);
+ return false;
+ }
+ },
+ },
+ }),
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/code/index.tsx b/packages/editor/core/src/ui/extensions/code/index.tsx
new file mode 100644
index 0000000..206930a
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code/index.tsx
@@ -0,0 +1,121 @@
+import { common, createLowlight } from "lowlight";
+import ts from "highlight.js/lib/languages/typescript";
+
+const lowlight = createLowlight(common);
+lowlight.register("ts", ts);
+
+import { Selection } from "@tiptap/pm/state";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { CodeBlockComponent } from "./code-block-node-view";
+import { CodeBlockLowlight } from "./code-block-lowlight";
+
+export const CustomCodeBlockExtension = CodeBlockLowlight.extend({
+ addNodeView() {
+ return ReactNodeViewRenderer(CodeBlockComponent);
+ },
+
+ addKeyboardShortcuts() {
+ return {
+ Tab: ({ editor }) => {
+ try {
+ const { state } = editor;
+ const { selection } = state;
+ const { $from, empty } = selection;
+
+ if (!empty || $from.parent.type !== this.type) {
+ return false;
+ }
+
+ // Use ProseMirror's insertText transaction to insert the tab character
+ const tr = state.tr.insertText("\t", $from.pos, $from.pos);
+ editor.view.dispatch(tr);
+
+ return true;
+ } catch (error) {
+ console.error("Error handling Tab in CustomCodeBlockExtension:", error);
+ return false;
+ }
+ },
+ ArrowUp: ({ editor }) => {
+ try {
+ const { state } = editor;
+ const { selection } = state;
+ const { $from, empty } = selection;
+
+ if (!empty || $from.parent.type !== this.type) {
+ return false;
+ }
+
+ const isAtStart = $from.parentOffset === 0;
+
+ if (!isAtStart) {
+ return false;
+ }
+
+ // Check if codeBlock is the first node
+ const isFirstNode = $from.depth === 1 && $from.index($from.depth - 1) === 0;
+
+ if (isFirstNode) {
+ // Insert a new paragraph at the start of the document and move the cursor to it
+ return editor.commands.command(({ tr }) => {
+ const node = editor.schema.nodes.paragraph.create();
+ tr.insert(0, node);
+ tr.setSelection(Selection.near(tr.doc.resolve(1)));
+ return true;
+ });
+ }
+
+ return false;
+ } catch (error) {
+ console.error("Error handling ArrowUp in CustomCodeBlockExtension:", error);
+ return false;
+ }
+ },
+ ArrowDown: ({ editor }) => {
+ try {
+ if (!this.options.exitOnArrowDown) {
+ return false;
+ }
+
+ const { state } = editor;
+ const { selection, doc } = state;
+ const { $from, empty } = selection;
+
+ if (!empty || $from.parent.type !== this.type) {
+ return false;
+ }
+
+ const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+ if (!isAtEnd) {
+ return false;
+ }
+
+ const after = $from.after();
+
+ if (after === undefined) {
+ return false;
+ }
+
+ const nodeAfter = doc.nodeAt(after);
+
+ if (nodeAfter) {
+ return editor.commands.command(({ tr }) => {
+ tr.setSelection(Selection.near(doc.resolve(after)));
+ return true;
+ });
+ }
+
+ return editor.commands.exitCode();
+ } catch (error) {
+ console.error("Error handling ArrowDown in CustomCodeBlockExtension:", error);
+ return false;
+ }
+ },
+ };
+ },
+}).configure({
+ lowlight,
+ defaultLanguage: "plaintext",
+ exitOnTripleEnter: false,
+});
diff --git a/packages/editor/core/src/ui/extensions/code/lowlight-plugin.ts b/packages/editor/core/src/ui/extensions/code/lowlight-plugin.ts
new file mode 100644
index 0000000..54aa431
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code/lowlight-plugin.ts
@@ -0,0 +1,153 @@
+import { findChildren } from "@tiptap/core";
+import { Node as ProsemirrorNode } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import highlight from "highlight.js/lib/core";
+
+function parseNodes(nodes: any[], className: string[] = []): { text: string; classes: string[] }[] {
+ return nodes
+ .map((node) => {
+ const classes = [...className, ...(node.properties ? node.properties.className : [])];
+
+ if (node.children) {
+ return parseNodes(node.children, classes);
+ }
+
+ return {
+ text: node.value,
+ classes,
+ };
+ })
+ .flat();
+}
+
+function getHighlightNodes(result: any) {
+ // `.value` for lowlight v1, `.children` for lowlight v2
+ return result.value || result.children || [];
+}
+
+function registered(aliasOrLanguage: string) {
+ return Boolean(highlight.getLanguage(aliasOrLanguage));
+}
+
+function getDecorations({
+ doc,
+ name,
+ lowlight,
+ defaultLanguage,
+}: {
+ doc: ProsemirrorNode;
+ name: string;
+ lowlight: any;
+ defaultLanguage: string | null | undefined;
+}) {
+ const decorations: Decoration[] = [];
+
+ findChildren(doc, (node) => node.type.name === name).forEach((block) => {
+ let from = block.pos + 1;
+ const language = block.node.attrs.language || defaultLanguage;
+ const languages = lowlight.listLanguages();
+
+ const nodes =
+ language && (languages.includes(language) || registered(language))
+ ? getHighlightNodes(lowlight.highlight(language, block.node.textContent))
+ : getHighlightNodes(lowlight.highlightAuto(block.node.textContent));
+
+ parseNodes(nodes).forEach((node) => {
+ const to = from + node.text.length;
+
+ if (node.classes.length) {
+ const decoration = Decoration.inline(from, to, {
+ class: node.classes.join(" "),
+ });
+
+ decorations.push(decoration);
+ }
+
+ from = to;
+ });
+ });
+
+ return DecorationSet.create(doc, decorations);
+}
+
+function isFunction(param: () => any) {
+ return typeof param === "function";
+}
+
+export function LowlightPlugin({
+ name,
+ lowlight,
+ defaultLanguage,
+}: {
+ name: string;
+ lowlight: any;
+ defaultLanguage: string | null | undefined;
+}) {
+ if (!["highlight", "highlightAuto", "listLanguages"].every((api) => isFunction(lowlight[api]))) {
+ throw Error("You should provide an instance of lowlight to use the code-block-lowlight extension");
+ }
+
+ const lowlightPlugin: Plugin = new Plugin({
+ key: new PluginKey("lowlight"),
+
+ state: {
+ init: (_, { doc }) =>
+ getDecorations({
+ doc,
+ name,
+ lowlight,
+ defaultLanguage,
+ }),
+ apply: (transaction, decorationSet, oldState, newState) => {
+ const oldNodeName = oldState.selection.$head.parent.type.name;
+ const newNodeName = newState.selection.$head.parent.type.name;
+ const oldNodes = findChildren(oldState.doc, (node) => node.type.name === name);
+ const newNodes = findChildren(newState.doc, (node) => node.type.name === name);
+
+ if (
+ transaction.docChanged &&
+ // Apply decorations if:
+ // selection includes named node,
+ ([oldNodeName, newNodeName].includes(name) ||
+ // OR transaction adds/removes named node,
+ newNodes.length !== oldNodes.length ||
+ // OR transaction has changes that completely encapsulte a node
+ // (for example, a transaction that affects the entire document).
+ // Such transactions can happen during collab syncing via y-prosemirror, for example.
+ transaction.steps.some(
+ (step) =>
+ // @ts-ignore
+ step.from !== undefined &&
+ // @ts-ignore
+ step.to !== undefined &&
+ oldNodes.some(
+ (node) =>
+ // @ts-ignore
+ node.pos >= step.from &&
+ // @ts-ignore
+ node.pos + node.node.nodeSize <= step.to
+ )
+ ))
+ ) {
+ return getDecorations({
+ doc: transaction.doc,
+ name,
+ lowlight,
+ defaultLanguage,
+ });
+ }
+
+ return decorationSet.map(transaction.mapping, transaction.doc);
+ },
+ },
+
+ props: {
+ decorations(state) {
+ return lowlightPlugin.getState(state);
+ },
+ },
+ });
+
+ return lowlightPlugin;
+}
diff --git a/packages/editor/core/src/ui/extensions/code/utils/replace-code-block-with-text.ts b/packages/editor/core/src/ui/extensions/code/utils/replace-code-block-with-text.ts
new file mode 100644
index 0000000..daf2c5f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code/utils/replace-code-block-with-text.ts
@@ -0,0 +1,124 @@
+import { Editor, findParentNode } from "@tiptap/core";
+
+type ReplaceCodeBlockParams = {
+ editor: Editor;
+ from: number;
+ to: number;
+ textContent: string;
+ cursorPosInsideCodeblock: number;
+};
+
+export function replaceCodeWithText(editor: Editor): void {
+ try {
+ const { from, to } = editor.state.selection;
+ const cursorPosInsideCodeblock = from;
+ let replaced = false;
+
+ editor.state.doc.nodesBetween(from, to, (node, pos) => {
+ if (node.type === editor.state.schema.nodes.codeBlock) {
+ const startPos = pos;
+ const endPos = pos + node.nodeSize;
+ const textContent = node.textContent;
+
+ if (textContent.length === 0) {
+ editor.chain().focus().toggleCodeBlock().run();
+ } else {
+ transformCodeBlockToParagraphs({
+ editor,
+ from: startPos,
+ to: endPos,
+ textContent,
+ cursorPosInsideCodeblock,
+ });
+ }
+
+ replaced = true;
+ return false;
+ }
+ });
+
+ if (!replaced) {
+ console.log("No code block to replace.");
+ }
+ } catch (error) {
+ console.error("An error occurred while replacing code block content:", error);
+ }
+}
+
+function transformCodeBlockToParagraphs({
+ editor,
+ from,
+ to,
+ textContent,
+ cursorPosInsideCodeblock,
+}: ReplaceCodeBlockParams): void {
+ const { schema } = editor.state;
+ const { paragraph } = schema.nodes;
+ const docSize = editor.state.doc.content.size;
+
+ if (from < 0 || to > docSize || from > to) {
+ console.error("Invalid range for replacement: ", from, to, "in a document of size", docSize);
+ return;
+ }
+
+ // Split the textContent by new lines to handle each line as a separate paragraph for Windows (\r\n) and Unix (\n)
+ const lines = textContent.split(/\r?\n/);
+ const tr = editor.state.tr;
+ let insertPos = from;
+
+ // Remove the code block first
+ tr.delete(from, to);
+
+ // For each line, create a paragraph node and insert it
+ lines.forEach((line) => {
+ // if the line is empty, create a paragraph node with no content
+ const paragraphNode = line.length === 0 ? paragraph.create({}) : paragraph.create({}, schema.text(line));
+ tr.insert(insertPos, paragraphNode);
+ insertPos += paragraphNode.nodeSize;
+ });
+
+ // Now persist the focus to the converted paragraph
+ const parentNodeOffset = findParentNode((node) => node.type === schema.nodes.codeBlock)(editor.state.selection)?.pos;
+
+ if (parentNodeOffset === undefined) throw new Error("Invalid code block offset");
+
+ const lineNumber = getLineNumber(textContent, cursorPosInsideCodeblock, parentNodeOffset);
+ const cursorPosOutsideCodeblock = cursorPosInsideCodeblock + (lineNumber - 1);
+
+ editor.view.dispatch(tr);
+ editor.chain().focus(cursorPosOutsideCodeblock).run();
+}
+
+/**
+ * Calculates the line number where the cursor is located inside the code block.
+ * Assumes the indexing of the content inside the code block is like ProseMirror's indexing.
+ *
+ * @param {string} textContent - The content of the code block.
+ * @param {number} cursorPosition - The absolute cursor position in the document.
+ * @param {number} codeBlockNodePos - The starting position of the code block node in the document.
+ * @returns {number} The 1-based line number where the cursor is located.
+ */
+function getLineNumber(textContent: string, cursorPosition: number, codeBlockNodePos: number): number {
+ // Split the text content into lines, handling both Unix and Windows newlines
+ const lines = textContent.split(/\r?\n/);
+ const cursorPosInsideCodeblockRelative = cursorPosition - codeBlockNodePos;
+
+ let startPosition = 0;
+ let lineNumber = 0;
+
+ for (let i = 0; i < lines.length; i++) {
+ // Calculate the end position of the current line
+ const endPosition = startPosition + lines[i].length + 1; // +1 for the newline character
+
+ // Check if the cursor position is within the current line
+ if (cursorPosInsideCodeblockRelative >= startPosition && cursorPosInsideCodeblockRelative <= endPosition) {
+ lineNumber = i + 1; // Line numbers are 1-based
+ break;
+ }
+
+ // Update the start position for the next line
+ startPosition = endPosition;
+ }
+
+ return lineNumber;
+}
diff --git a/packages/editor/core/src/ui/extensions/core-without-props.tsx b/packages/editor/core/src/ui/extensions/core-without-props.tsx
new file mode 100644
index 0000000..3bb0001
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/core-without-props.tsx
@@ -0,0 +1,121 @@
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
+
+import { Table } from "src/ui/extensions/table/table";
+import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
+import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
+import { TableRow } from "src/ui/extensions/table/table-row/table-row";
+
+import { isValidHttpUrl } from "src/lib/utils";
+
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
+import { CustomKeymap } from "src/ui/extensions/keymap";
+import { CustomQuoteExtension } from "src/ui/extensions/quote";
+
+import { CustomLinkExtension } from "src/ui/extensions/custom-link";
+import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
+import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
+import { CustomCodeMarkPlugin } from "src/ui/extensions/custom-code-inline/inline-code-plugin";
+import { MentionsWithoutProps } from "src/ui/mentions/mention-without-props";
+import { ImageExtensionWithoutProps } from "src/ui/extensions/image/image-extension-without-props";
+
+import StarterKit from "@tiptap/starter-kit";
+
+export const CoreEditorExtensionsWithoutProps = () => [
+ StarterKit.configure({
+ bulletList: {
+ HTMLAttributes: {
+ class: "list-disc pl-7 space-y-2",
+ },
+ },
+ orderedList: {
+ HTMLAttributes: {
+ class: "list-decimal pl-7 space-y-2",
+ },
+ },
+ listItem: {
+ HTMLAttributes: {
+ class: "not-prose space-y-2",
+ },
+ },
+ code: false,
+ codeBlock: false,
+ horizontalRule: false,
+ blockquote: false,
+ dropcursor: {
+ color: "rgba(var(--color-text-100))",
+ width: 1,
+ },
+ }),
+ CustomQuoteExtension,
+ CustomHorizontalRule.configure({
+ HTMLAttributes: {
+ class: "my-4 border-custom-border-400",
+ },
+ }),
+ CustomKeymap,
+ // ListKeymap,
+ CustomLinkExtension.configure({
+ openOnClick: true,
+ autolink: true,
+ linkOnPaste: true,
+ protocols: ["http", "https"],
+ validate: (url: string) => isValidHttpUrl(url),
+ HTMLAttributes: {
+ class:
+ "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+ },
+ }),
+ CustomTypographyExtension,
+ ImageExtensionWithoutProps().configure({
+ HTMLAttributes: {
+ class: "rounded-md",
+ },
+ }),
+ TiptapUnderline,
+ TextStyle,
+ TaskList.configure({
+ HTMLAttributes: {
+ class: "not-prose pl-2 space-y-2",
+ },
+ }),
+ TaskItem.configure({
+ HTMLAttributes: {
+ class: "flex",
+ },
+ nested: true,
+ }),
+ CustomCodeBlockExtension.configure({
+ HTMLAttributes: {
+ class: "",
+ },
+ }),
+ CustomCodeMarkPlugin,
+ CustomCodeInlineExtension,
+ Markdown.configure({
+ html: true,
+ transformPastedText: true,
+ }),
+ Table,
+ TableHeader,
+ TableCell,
+ TableRow,
+ MentionsWithoutProps(),
+ Placeholder.configure({
+ placeholder: ({ editor, node }) => {
+ if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+
+ const shouldHidePlaceholder =
+ editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");
+ if (shouldHidePlaceholder) return "";
+
+ return "Press '/' for commands...";
+ },
+ includeChildren: true,
+ }),
+];
diff --git a/packages/editor/core/src/ui/extensions/custom-code-inline/inline-code-plugin.ts b/packages/editor/core/src/ui/extensions/custom-code-inline/inline-code-plugin.ts
new file mode 100644
index 0000000..3b3cfaa
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-code-inline/inline-code-plugin.ts
@@ -0,0 +1,9 @@
+import { Extension } from "@tiptap/core";
+import codemark from "prosemirror-codemark";
+
+export const CustomCodeMarkPlugin = Extension.create({
+ name: "codemarkPlugin",
+ addProseMirrorPlugins() {
+ return codemark({ markType: this.editor.schema.marks.code });
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/autolink.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/autolink.ts
new file mode 100644
index 0000000..cf67e13
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/autolink.ts
@@ -0,0 +1,118 @@
+import {
+ combineTransactionSteps,
+ findChildrenInRange,
+ getChangedRanges,
+ getMarksBetween,
+ NodeWithPos,
+} from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find } from "linkifyjs";
+
+type AutolinkOptions = {
+ type: MarkType;
+ validate?: (url: string) => boolean;
+};
+
+export function autolink(options: AutolinkOptions): Plugin {
+ return new Plugin({
+ key: new PluginKey("autolink"),
+ appendTransaction: (transactions, oldState, newState) => {
+ const docChanges = transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
+ const preventAutolink = transactions.some((transaction) => transaction.getMeta("preventAutolink"));
+
+ if (!docChanges || preventAutolink) {
+ return;
+ }
+
+ const { tr } = newState;
+ const transform = combineTransactionSteps(oldState.doc, [...transactions]);
+ const changes = getChangedRanges(transform);
+
+ changes.forEach(({ newRange }) => {
+ // Now let’s see if we can add new links.
+ const nodesInChangedRanges = findChildrenInRange(newState.doc, newRange, (node) => node.isTextblock);
+
+ let textBlock: NodeWithPos | undefined;
+ let textBeforeWhitespace: string | undefined;
+
+ if (nodesInChangedRanges.length > 1) {
+ // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter).
+ textBlock = nodesInChangedRanges[0];
+ textBeforeWhitespace = newState.doc.textBetween(
+ textBlock.pos,
+ textBlock.pos + textBlock.node.nodeSize,
+ undefined,
+ " "
+ );
+ } else if (
+ nodesInChangedRanges.length &&
+ // We want to make sure to include the block seperator argument to treat hard breaks like spaces.
+ newState.doc.textBetween(newRange.from, newRange.to, " ", " ").endsWith(" ")
+ ) {
+ textBlock = nodesInChangedRanges[0];
+ textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, newRange.to, undefined, " ");
+ }
+
+ if (textBlock && textBeforeWhitespace) {
+ const wordsBeforeWhitespace = textBeforeWhitespace.split(" ").filter((s) => s !== "");
+
+ if (wordsBeforeWhitespace.length <= 0) {
+ return false;
+ }
+
+ const lastWordBeforeSpace = wordsBeforeWhitespace[wordsBeforeWhitespace.length - 1];
+ const lastWordAndBlockOffset = textBlock.pos + textBeforeWhitespace.lastIndexOf(lastWordBeforeSpace);
+
+ if (!lastWordBeforeSpace) {
+ return false;
+ }
+
+ find(lastWordBeforeSpace)
+ .filter((link) => link.isLink)
+ // Calculate link position.
+ .map((link) => ({
+ ...link,
+ from: lastWordAndBlockOffset + link.start + 1,
+ to: lastWordAndBlockOffset + link.end + 1,
+ }))
+ // ignore link inside code mark
+ .filter((link) => {
+ if (!newState.schema.marks.code) {
+ return true;
+ }
+
+ return !newState.doc.rangeHasMark(link.from, link.to, newState.schema.marks.code);
+ })
+ // validate link
+ .filter((link) => {
+ if (options.validate) {
+ return options.validate(link.value);
+ }
+ return true;
+ })
+ // Add link mark.
+ .forEach((link) => {
+ if (getMarksBetween(link.from, link.to, newState.doc).some((item) => item.mark.type === options.type)) {
+ return;
+ }
+
+ tr.addMark(
+ link.from,
+ link.to,
+ options.type.create({
+ href: link.href,
+ })
+ );
+ });
+ }
+ });
+
+ if (!tr.steps.length) {
+ return;
+ }
+
+ return tr;
+ },
+ });
+}
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts
new file mode 100644
index 0000000..ec6c540
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts
@@ -0,0 +1,46 @@
+import { getAttributes } from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+type ClickHandlerOptions = {
+ type: MarkType;
+};
+
+export function clickHandler(options: ClickHandlerOptions): Plugin {
+ return new Plugin({
+ key: new PluginKey("handleClickLink"),
+ props: {
+ handleClick: (view, pos, event) => {
+ if (event.button !== 0) {
+ return false;
+ }
+
+ let a = event.target as HTMLElement;
+ const els = [];
+
+ while (a.nodeName !== "DIV") {
+ els.push(a);
+ a = a.parentNode as HTMLElement;
+ }
+
+ if (!els.find((value) => value.nodeName === "A")) {
+ return false;
+ }
+
+ const attrs = getAttributes(view.state, options.type.name);
+ const link = event.target as HTMLLinkElement;
+
+ const href = link?.href ?? attrs.href;
+ const target = link?.target ?? attrs.target;
+
+ if (link && href) {
+ window.open(href, target);
+
+ return true;
+ }
+
+ return false;
+ },
+ },
+ });
+}
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts
new file mode 100644
index 0000000..475bf28
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts
@@ -0,0 +1,44 @@
+import { Editor } from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find } from "linkifyjs";
+
+type PasteHandlerOptions = {
+ editor: Editor;
+ type: MarkType;
+};
+
+export function pasteHandler(options: PasteHandlerOptions): Plugin {
+ return new Plugin({
+ key: new PluginKey("handlePasteLink"),
+ props: {
+ handlePaste: (view, event, slice) => {
+ const { state } = view;
+ const { selection } = state;
+ const { empty } = selection;
+
+ if (empty) {
+ return false;
+ }
+
+ let textContent = "";
+
+ slice.content.forEach((node) => {
+ textContent += node.textContent;
+ });
+
+ const link = find(textContent).find((item) => item.isLink && item.value === textContent);
+
+ if (!textContent || !link) {
+ return false;
+ }
+
+ options.editor.commands.setMark(options.type, {
+ href: link.href,
+ });
+
+ return true;
+ },
+ },
+ });
+}
diff --git a/packages/editor/core/src/ui/extensions/custom-link/index.ts b/packages/editor/core/src/ui/extensions/custom-link/index.ts
new file mode 100644
index 0000000..88e7abf
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/index.ts
@@ -0,0 +1,248 @@
+import { Mark, markPasteRule, mergeAttributes, PasteRuleMatch } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+import { find, registerCustomProtocol, reset } from "linkifyjs";
+import { autolink } from "./helpers/autolink";
+import { clickHandler } from "./helpers/clickHandler";
+import { pasteHandler } from "./helpers/pasteHandler";
+
+export interface LinkProtocolOptions {
+ scheme: string;
+ optionalSlashes?: boolean;
+}
+
+export const pasteRegex =
+ /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)(?:[-a-zA-Z0-9@:%._+~#=?!&/]*)/gi;
+
+export interface LinkOptions {
+ /**
+ * If enabled, it adds links as you type.
+ */
+ autolink: boolean;
+ /**
+ * An array of custom protocols to be registered with linkifyjs.
+ */
+ protocols: Array;
+ /**
+ * If enabled, links will be opened on click.
+ */
+ openOnClick: boolean;
+ /**
+ * If enabled, links will be inclusive i.e. if you move your cursor to the
+ * link text, and start typing, it'll be a part of the link itself.
+ */
+ inclusive: boolean;
+ /**
+ * Adds a link to the current selection if the pasted content only contains an url.
+ */
+ linkOnPaste: boolean;
+ /**
+ * A list of HTML attributes to be rendered.
+ */
+ HTMLAttributes: Record;
+ /**
+ * A validation function that modifies link verification for the auto linker.
+ * @param url - The url to be validated.
+ * @returns - True if the url is valid, false otherwise.
+ */
+ validate?: (url: string) => boolean;
+}
+
+declare module "@tiptap/core" {
+ interface Commands {
+ link: {
+ /**
+ * Set a link mark
+ */
+ setLink: (attributes: {
+ href: string;
+ target?: string | null;
+ rel?: string | null;
+ class?: string | null;
+ }) => ReturnType;
+ /**
+ * Toggle a link mark
+ */
+ toggleLink: (attributes: {
+ href: string;
+ target?: string | null;
+ rel?: string | null;
+ class?: string | null;
+ }) => ReturnType;
+ /**
+ * Unset a link mark
+ */
+ unsetLink: () => ReturnType;
+ };
+ }
+}
+
+export const CustomLinkExtension = Mark.create({
+ name: "link",
+
+ priority: 1000,
+
+ keepOnSplit: false,
+
+ onCreate() {
+ this.options.protocols.forEach((protocol) => {
+ if (typeof protocol === "string") {
+ registerCustomProtocol(protocol);
+ return;
+ }
+ registerCustomProtocol(protocol.scheme, protocol.optionalSlashes);
+ });
+ },
+
+ onDestroy() {
+ reset();
+ },
+
+ inclusive() {
+ return this.options.inclusive;
+ },
+
+ addOptions() {
+ return {
+ openOnClick: true,
+ linkOnPaste: true,
+ autolink: true,
+ inclusive: false,
+ protocols: [],
+ HTMLAttributes: {
+ target: "_blank",
+ rel: "noopener noreferrer nofollow",
+ class: null,
+ },
+ validate: undefined,
+ };
+ },
+
+ addAttributes() {
+ return {
+ href: {
+ default: null,
+ },
+ target: {
+ default: this.options.HTMLAttributes.target,
+ },
+ rel: {
+ default: this.options.HTMLAttributes.rel,
+ },
+ class: {
+ default: this.options.HTMLAttributes.class,
+ },
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "a[href]",
+ getAttrs: (node) => {
+ if (typeof node === "string" || !(node instanceof HTMLElement)) {
+ return null;
+ }
+ const href = node.getAttribute("href")?.toLowerCase() || "";
+ if (href.startsWith("javascript:") || href.startsWith("data:") || href.startsWith("vbscript:")) {
+ return false;
+ }
+ return {};
+ },
+ },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ const href = HTMLAttributes.href?.toLowerCase() || "";
+ if (href.startsWith("javascript:") || href.startsWith("data:") || href.startsWith("vbscript:")) {
+ return ["a", mergeAttributes(this.options.HTMLAttributes, { ...HTMLAttributes, href: "" }), 0];
+ }
+ return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+ },
+
+ addCommands() {
+ return {
+ setLink:
+ (attributes) =>
+ ({ chain }) =>
+ chain().setMark(this.name, attributes).setMeta("preventAutolink", true).run(),
+
+ toggleLink:
+ (attributes) =>
+ ({ chain }) =>
+ chain()
+ .toggleMark(this.name, attributes, { extendEmptyMarkRange: true })
+ .setMeta("preventAutolink", true)
+ .run(),
+
+ unsetLink:
+ () =>
+ ({ chain }) =>
+ chain().unsetMark(this.name, { extendEmptyMarkRange: true }).setMeta("preventAutolink", true).run(),
+ };
+ },
+
+ addPasteRules() {
+ return [
+ markPasteRule({
+ find: (text) => {
+ const foundLinks: PasteRuleMatch[] = [];
+
+ if (text) {
+ const links = find(text).filter((item) => item.isLink);
+
+ if (links.length) {
+ links.forEach((link) =>
+ foundLinks.push({
+ text: link.value,
+ data: {
+ href: link.href,
+ },
+ index: link.start,
+ })
+ );
+ }
+ }
+
+ return foundLinks;
+ },
+ type: this.type,
+ getAttributes: (match) => ({
+ href: match.data?.href,
+ }),
+ }),
+ ];
+ },
+
+ addProseMirrorPlugins() {
+ const plugins: Plugin[] = [];
+
+ if (this.options.autolink) {
+ plugins.push(
+ autolink({
+ type: this.type,
+ validate: this.options.validate,
+ })
+ );
+ }
+
+ if (this.options.openOnClick) {
+ plugins.push(
+ clickHandler({
+ type: this.type,
+ })
+ );
+ }
+
+ if (this.options.linkOnPaste) {
+ plugins.push(
+ pasteHandler({
+ editor: this.editor,
+ type: this.type,
+ })
+ );
+ }
+
+ return plugins;
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/index.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/index.ts
new file mode 100644
index 0000000..b91209e
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/index.ts
@@ -0,0 +1 @@
+export * from "./list-keymap";
diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers.ts
new file mode 100644
index 0000000..d6ddb8c
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers.ts
@@ -0,0 +1,371 @@
+import { EditorState } from "@tiptap/pm/state";
+import { Editor, getNodeType, getNodeAtPosition, isAtEndOfNode, isAtStartOfNode, isNodeActive } from "@tiptap/core";
+import { Node, NodeType } from "@tiptap/pm/model";
+
+const findListItemPos = (typeOrName: string | NodeType, state: EditorState) => {
+ const { $from } = state.selection;
+ const nodeType = getNodeType(typeOrName, state.schema);
+
+ let currentNode = null;
+ let currentDepth = $from.depth;
+ let currentPos = $from.pos;
+ let targetDepth: number | null = null;
+
+ while (currentDepth > 0 && targetDepth === null) {
+ currentNode = $from.node(currentDepth);
+
+ if (currentNode.type === nodeType) {
+ targetDepth = currentDepth;
+ } else {
+ currentDepth -= 1;
+ currentPos -= 1;
+ }
+ }
+
+ if (targetDepth === null) {
+ return null;
+ }
+
+ return { $pos: state.doc.resolve(currentPos), depth: targetDepth };
+};
+
+const nextListIsDeeper = (typeOrName: string, state: EditorState) => {
+ const listDepth = getNextListDepth(typeOrName, state);
+ const listItemPos = findListItemPos(typeOrName, state);
+
+ if (!listItemPos || !listDepth) {
+ return false;
+ }
+
+ if (listDepth > listItemPos.depth) {
+ return true;
+ }
+
+ return false;
+};
+
+const getNextListDepth = (typeOrName: string, state: EditorState) => {
+ const listItemPos = findListItemPos(typeOrName, state);
+
+ if (!listItemPos) {
+ return false;
+ }
+
+ const [, depth] = getNodeAtPosition(state, typeOrName, listItemPos.$pos.pos + 4);
+
+ return depth;
+};
+
+const getPrevListDepth = (typeOrName: string, state: EditorState) => {
+ const listItemPos = findListItemPos(typeOrName, state);
+
+ if (!listItemPos) {
+ return false;
+ }
+
+ let depth = 0;
+ const pos = listItemPos.$pos;
+
+ // Adjust the position to ensure we're within the list item, especially for edge cases
+ const resolvedPos = state.doc.resolve(Math.max(pos.pos - 1, 0));
+
+ // Traverse up the document structure from the adjusted position
+ for (let d = resolvedPos.depth; d > 0; d--) {
+ const node = resolvedPos.node(d);
+ if (node.type.name === "bulletList" || node.type.name === "orderedList" || node.type.name === "taskList") {
+ // Increment depth for each list ancestor found
+ depth++;
+ }
+ }
+
+ // Subtract 1 from the calculated depth to get the parent list's depth
+ // This adjustment is necessary because the depth calculation includes the current list
+ // By subtracting 1, we aim to get the depth of the parent list, which helps in identifying if the current list is a sublist
+ depth = depth > 0 ? depth - 1 : 0;
+
+ // Double the depth value to get results as 2, 4, 6, 8, etc.
+ depth = depth * 2;
+
+ return depth;
+};
+
+export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => {
+ // this is required to still handle the undo handling
+ if (editor.commands.undoInputRule()) {
+ return true;
+ }
+ // Check if a node range is selected, and if so, fall back to default backspace functionality
+ const { from, to } = editor.state.selection;
+ if (from !== to) {
+ // A range is selected, not just a cursor position; fall back to default behavior
+ return false; // Let the editor handle backspace by default
+ }
+
+ // if the current item is NOT inside a list item &
+ // the previous item is a list (orderedList or bulletList)
+ // move the cursor into the list and delete the current item
+ if (!isNodeActive(editor.state, name) && hasListBefore(editor.state, name, parentListTypes)) {
+ const { $anchor } = editor.state.selection;
+
+ const $listPos = editor.state.doc.resolve($anchor.before() - 1);
+
+ const listDescendants: Array<{ node: Node; pos: number }> = [];
+
+ $listPos.node().descendants((node, pos) => {
+ if (node.type.name === name) {
+ listDescendants.push({ node, pos });
+ }
+ });
+
+ const lastItem = listDescendants.at(-1);
+
+ if (!lastItem) {
+ return false;
+ }
+
+ const $lastItemPos = editor.state.doc.resolve($listPos.start() + lastItem.pos + 1);
+
+ // Check if positions are within the valid range
+ const startPos = $anchor.start() - 1;
+ const endPos = $anchor.end() + 1;
+ if (startPos < 0 || endPos > editor.state.doc.content.size) {
+ return false; // Invalid position, abort operation
+ }
+
+ return editor.chain().cut({ from: startPos, to: endPos }, $lastItemPos.end()).joinForward().run();
+ }
+
+ // if the cursor is not inside the current node type
+ // do nothing and proceed
+ if (!isNodeActive(editor.state, name)) {
+ return false;
+ }
+
+ // if the cursor is not at the start of a node
+ // do nothing and proceed
+ if (!isAtStartOfNode(editor.state)) {
+ return false;
+ }
+
+ // is the paragraph node inside of the current list item (maybe with a hard break)
+ const isParaSibling = isCurrentParagraphASibling(editor.state);
+ const isCurrentListItemSublist = prevListIsHigher(name, editor.state);
+ const listItemPos = findListItemPos(name, editor.state);
+ const nextListItemIsSibling = nextListIsSibling(name, editor.state);
+
+ if (!listItemPos) {
+ return false;
+ }
+
+ const currentNode = listItemPos.$pos.node(listItemPos.depth);
+ const currentListItemHasSubList = listItemHasSubList(name, editor.state, currentNode);
+
+ if (currentListItemHasSubList && isCurrentListItemSublist && isParaSibling) {
+ return false;
+ }
+
+ if (currentListItemHasSubList && isCurrentListItemSublist) {
+ editor.chain().liftListItem(name).run();
+ return editor.commands.joinItemBackward();
+ }
+
+ if (isCurrentListItemSublist && nextListItemIsSibling) {
+ return false;
+ }
+
+ if (isCurrentListItemSublist) {
+ return false;
+ }
+
+ if (currentListItemHasSubList) {
+ return false;
+ }
+
+ if (hasListItemBefore(name, editor.state)) {
+ return editor.chain().liftListItem(name).run();
+ }
+
+ if (!currentListItemHasSubList) {
+ return false;
+ }
+
+ // otherwise in the end, a backspace should
+ // always just lift the list item if
+ // joining / merging is not possible
+ return editor.chain().liftListItem(name).run();
+};
+
+export const handleDelete = (editor: Editor, name: string) => {
+ // if the cursor is not inside the current node type
+ // do nothing and proceed
+ if (!isNodeActive(editor.state, name)) {
+ return false;
+ }
+
+ // if the cursor is not at the end of a node
+ // do nothing and proceed
+ if (!isAtEndOfNode(editor.state, name)) {
+ return false;
+ }
+
+ // check if the next node is a list with a deeper depth
+ if (nextListIsDeeper(name, editor.state)) {
+ return editor
+ .chain()
+ .focus(editor.state.selection.from + 4)
+ .lift(name)
+ .joinBackward()
+ .run();
+ }
+
+ if (nextListIsHigher(name, editor.state)) {
+ return editor.chain().joinForward().joinBackward().run();
+ }
+
+ return editor.commands.joinItemForward();
+};
+
+const hasListBefore = (editorState: EditorState, name: string, parentListTypes: string[]) => {
+ const { $anchor } = editorState.selection;
+
+ const previousNodePos = Math.max(0, $anchor.pos - 2);
+
+ const previousNode = editorState.doc.resolve(previousNodePos).node();
+
+ if (!previousNode || !parentListTypes.includes(previousNode.type.name)) {
+ return false;
+ }
+
+ return true;
+};
+
+const prevListIsHigher = (typeOrName: string, state: EditorState) => {
+ const listDepth = getPrevListDepth(typeOrName, state);
+ const listItemPos = findListItemPos(typeOrName, state);
+
+ if (!listItemPos || !listDepth) {
+ return false;
+ }
+
+ if (listDepth < listItemPos.depth) {
+ return true;
+ }
+
+ return false;
+};
+
+const nextListIsSibling = (typeOrName: string, state: EditorState) => {
+ const listDepth = getNextListDepth(typeOrName, state);
+ const listItemPos = findListItemPos(typeOrName, state);
+
+ if (!listItemPos || !listDepth) {
+ return false;
+ }
+
+ if (listDepth === listItemPos.depth) {
+ return true;
+ }
+
+ return false;
+};
+
+export const nextListIsHigher = (typeOrName: string, state: EditorState) => {
+ const listDepth = getNextListDepth(typeOrName, state);
+ const listItemPos = findListItemPos(typeOrName, state);
+
+ if (!listItemPos || !listDepth) {
+ return false;
+ }
+
+ if (listDepth < listItemPos.depth) {
+ return true;
+ }
+
+ return false;
+};
+
+const listItemHasSubList = (typeOrName: string, state: EditorState, node?: Node) => {
+ if (!node) {
+ return false;
+ }
+
+ const nodeType = getNodeType(typeOrName, state.schema);
+
+ let hasSubList = false;
+
+ node.descendants((child) => {
+ if (child.type === nodeType) {
+ hasSubList = true;
+ }
+ });
+
+ return hasSubList;
+};
+
+const isCurrentParagraphASibling = (state: EditorState): boolean => {
+ const { $from } = state.selection;
+ const listItemNode = $from.node(-1); // Get the parent node of the current selection, assuming it's a list item.
+ const currentParagraphNode = $from.parent; // Get the current node where the selection is.
+
+ // Ensure we're in a paragraph and the parent is a list item.
+ if (
+ currentParagraphNode.type.name === "paragraph" &&
+ (listItemNode.type.name === "listItem" || listItemNode.type.name === "taskItem")
+ ) {
+ let paragraphNodesCount = 0;
+ listItemNode.forEach((child) => {
+ if (child.type.name === "paragraph") {
+ paragraphNodesCount++;
+ }
+ });
+
+ // If there are more than one paragraph nodes, the current paragraph is a sibling.
+ return paragraphNodesCount > 1;
+ }
+
+ return false;
+};
+
+export function isCursorInSubList(editor: Editor) {
+ const { selection } = editor.state;
+ const { $from } = selection;
+
+ // Check if the current node is a list item
+ const listItem = editor.schema.nodes.listItem;
+ const taskItem = editor.schema.nodes.taskItem;
+
+ // Traverse up the document tree from the current position
+ for (let depth = $from.depth; depth > 0; depth--) {
+ const node = $from.node(depth);
+ if (node.type === listItem || node.type === taskItem) {
+ // If the parent of the list item is also a list, it's a sub-list
+ const parent = $from.node(depth - 1);
+ if (
+ parent &&
+ (parent.type === editor.schema.nodes.bulletList ||
+ parent.type === editor.schema.nodes.orderedList ||
+ parent.type === editor.schema.nodes.taskList)
+ ) {
+ return true;
+ }
+ }
+ }
+
+ return false;
+}
+
+const hasListItemBefore = (typeOrName: string, state: EditorState): boolean => {
+ const { $anchor } = state.selection;
+
+ const $targetPos = state.doc.resolve($anchor.pos - 2);
+
+ if ($targetPos.index() === 0) {
+ return false;
+ }
+
+ if ($targetPos.nodeBefore?.type.name !== typeOrName) {
+ return false;
+ }
+
+ return true;
+};
diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts
new file mode 100644
index 0000000..f2b6dd9
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts
@@ -0,0 +1,128 @@
+import { Extension } from "@tiptap/core";
+
+import { handleBackspace, handleDelete } from "src/ui/extensions/custom-list-keymap/list-helpers";
+
+export type ListKeymapOptions = {
+ listTypes: Array<{
+ itemName: string;
+ wrapperNames: string[];
+ }>;
+};
+
+export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
+ Extension.create({
+ name: "listKeymap",
+
+ addOptions() {
+ return {
+ listTypes: [
+ {
+ itemName: "listItem",
+ wrapperNames: ["bulletList", "orderedList"],
+ },
+ {
+ itemName: "taskItem",
+ wrapperNames: ["taskList"],
+ },
+ ],
+ };
+ },
+
+ addKeyboardShortcuts() {
+ return {
+ Tab: () => {
+ if (this.editor.isActive("listItem") || this.editor.isActive("taskItem")) {
+ if (this.editor.commands.sinkListItem("listItem")) {
+ return true;
+ } else if (this.editor.commands.sinkListItem("taskItem")) {
+ return true;
+ }
+ return true;
+ }
+ // if tabIndex is set, we don't want to handle Tab key
+ if (tabIndex !== undefined && tabIndex !== null) {
+ return false;
+ }
+ return true;
+ },
+ "Shift-Tab": () => {
+ if (this.editor.commands.liftListItem("listItem")) {
+ return true;
+ } else if (this.editor.commands.liftListItem("taskItem")) {
+ return true;
+ }
+ return true;
+ },
+ Delete: ({ editor }) => {
+ try {
+ let handled = false;
+
+ this.options.listTypes.forEach(({ itemName }) => {
+ if (editor.state.schema.nodes[itemName] === undefined) {
+ return;
+ }
+
+ if (handleDelete(editor, itemName)) {
+ handled = true;
+ }
+ });
+
+ return handled;
+ } catch (e) {
+ console.log("Error in handling Delete:", e);
+ return false;
+ }
+ },
+ "Mod-Delete": ({ editor }) => {
+ let handled = false;
+
+ this.options.listTypes.forEach(({ itemName }) => {
+ if (editor.state.schema.nodes[itemName] === undefined) {
+ return;
+ }
+
+ if (handleDelete(editor, itemName)) {
+ handled = true;
+ }
+ });
+
+ return handled;
+ },
+ Backspace: ({ editor }) => {
+ try {
+ let handled = false;
+
+ this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+ if (editor.state.schema.nodes[itemName] === undefined) {
+ return;
+ }
+
+ if (handleBackspace(editor, itemName, wrapperNames)) {
+ handled = true;
+ }
+ });
+
+ return handled;
+ } catch (e) {
+ console.log("Error in handling Backspace:", e);
+ return false;
+ }
+ },
+ "Mod-Backspace": ({ editor }) => {
+ let handled = false;
+
+ this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+ if (editor.state.schema.nodes[itemName] === undefined) {
+ return;
+ }
+
+ if (handleBackspace(editor, itemName, wrapperNames)) {
+ handled = true;
+ }
+ });
+
+ return handled;
+ },
+ };
+ },
+ });
diff --git a/packages/editor/core/src/ui/extensions/drop.tsx b/packages/editor/core/src/ui/extensions/drop.tsx
new file mode 100644
index 0000000..4bf4e26
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/drop.tsx
@@ -0,0 +1,45 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { UploadImage } from "src/types/upload-image";
+import { startImageUpload } from "src/ui/plugins/image/image-upload-handler";
+
+export const DropHandlerExtension = (uploadFile: UploadImage) =>
+ Extension.create({
+ name: "dropHandler",
+ priority: 1000,
+
+ addProseMirrorPlugins() {
+ return [
+ new Plugin({
+ key: new PluginKey("drop-handler-plugin"),
+ props: {
+ handlePaste: (view, event) => {
+ if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+ event.preventDefault();
+ const file = event.clipboardData.files[0];
+ const pos = view.state.selection.from;
+ startImageUpload(this.editor, file, view, pos, uploadFile);
+ return true;
+ }
+ return false;
+ },
+ handleDrop: (view, event, _slice, moved) => {
+ if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+ event.preventDefault();
+ const file = event.dataTransfer.files[0];
+ const coordinates = view.posAtCoords({
+ left: event.clientX,
+ top: event.clientY,
+ });
+ if (coordinates) {
+ startImageUpload(this.editor, file, view, coordinates.pos - 1, uploadFile);
+ }
+ return true;
+ }
+ return false;
+ },
+ },
+ }),
+ ];
+ },
+ });
diff --git a/packages/editor/core/src/ui/extensions/horizontal-rule/horizontal-rule.ts b/packages/editor/core/src/ui/extensions/horizontal-rule/horizontal-rule.ts
new file mode 100644
index 0000000..b9be1a3
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/horizontal-rule/horizontal-rule.ts
@@ -0,0 +1,122 @@
+import { isNodeSelection, mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+
+export interface HorizontalRuleOptions {
+ HTMLAttributes: Record;
+}
+
+declare module "@tiptap/core" {
+ interface Commands {
+ horizontalRule: {
+ /**
+ * Add a horizontal rule
+ */
+ setHorizontalRule: () => ReturnType;
+ };
+ }
+}
+
+export const CustomHorizontalRule = Node.create({
+ name: "horizontalRule",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ group: "block",
+
+ parseHTML() {
+ return [
+ {
+ tag: `div[data-type="${this.name}"]`,
+ },
+ { tag: "hr" },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "div",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+ "data-type": this.name,
+ }),
+ ["div", {}],
+ ];
+ },
+
+ addCommands() {
+ return {
+ setHorizontalRule:
+ () =>
+ ({ chain, state }) => {
+ const { selection } = state;
+ const { $from: $originFrom, $to: $originTo } = selection;
+
+ const currentChain = chain();
+
+ if ($originFrom.parentOffset === 0) {
+ currentChain.insertContentAt(
+ {
+ from: Math.max($originFrom.pos - 1, 0),
+ to: $originTo.pos,
+ },
+ {
+ type: this.name,
+ }
+ );
+ } else if (isNodeSelection(selection)) {
+ currentChain.insertContentAt($originTo.pos, {
+ type: this.name,
+ });
+ } else {
+ currentChain.insertContent({ type: this.name });
+ }
+
+ return (
+ currentChain
+ // set cursor after horizontal rule
+ .command(({ tr, dispatch }) => {
+ if (dispatch) {
+ const { $to } = tr.selection;
+ const posAfter = $to.end();
+
+ if ($to.nodeAfter) {
+ if ($to.nodeAfter.isTextblock) {
+ tr.setSelection(TextSelection.create(tr.doc, $to.pos + 1));
+ } else if ($to.nodeAfter.isBlock) {
+ tr.setSelection(NodeSelection.create(tr.doc, $to.pos));
+ } else {
+ tr.setSelection(TextSelection.create(tr.doc, $to.pos));
+ }
+ } else {
+ // add node after horizontal rule if it’s the end of the document
+ const node = $to.parent.type.contentMatch.defaultType?.create();
+
+ if (node) {
+ tr.insert(posAfter, node);
+ tr.setSelection(TextSelection.create(tr.doc, posAfter + 1));
+ }
+ }
+
+ tr.scrollIntoView();
+ }
+
+ return true;
+ })
+ .run()
+ );
+ },
+ };
+ },
+
+ addInputRules() {
+ return [
+ nodeInputRule({
+ find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+ type: this.type,
+ }),
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/image/image-extension-without-props.tsx b/packages/editor/core/src/ui/extensions/image/image-extension-without-props.tsx
new file mode 100644
index 0000000..838a6a1
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/image-extension-without-props.tsx
@@ -0,0 +1,33 @@
+import ImageExt from "@tiptap/extension-image";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
+
+export const ImageExtensionWithoutProps = () =>
+ ImageExt.extend({
+ addKeyboardShortcuts() {
+ return {
+ ArrowDown: insertLineBelowImageAction,
+ ArrowUp: insertLineAboveImageAction,
+ };
+ },
+
+ // storage to keep track of image states Map
+ addStorage() {
+ return {
+ images: new Map(),
+ uploadInProgress: false,
+ };
+ },
+
+ addAttributes() {
+ return {
+ ...this.parent?.(),
+ width: {
+ default: "35%",
+ },
+ height: {
+ default: null,
+ },
+ };
+ },
+ });
diff --git a/packages/editor/core/src/ui/extensions/image/image-resize.tsx b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
new file mode 100644
index 0000000..7f61cc9
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/image-resize.tsx
@@ -0,0 +1,76 @@
+import { Editor } from "@tiptap/react";
+import { useState } from "react";
+import Moveable from "react-moveable";
+
+export const ImageResizer = ({ editor }: { editor: Editor }) => {
+ const updateMediaSize = () => {
+ const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+ if (imageInfo) {
+ const selection = editor.state.selection;
+
+ // Use the style width/height if available, otherwise fall back to the element's natural width/height
+ const width = imageInfo.style.width
+ ? Number(imageInfo.style.width.replace("px", ""))
+ : imageInfo.getAttribute("width");
+ const height = imageInfo.style.height
+ ? Number(imageInfo.style.height.replace("px", ""))
+ : imageInfo.getAttribute("height");
+
+ editor.commands.setImage({
+ src: imageInfo.src,
+ width: width,
+ height: height,
+ } as any);
+ editor.commands.setNodeSelection(selection.from);
+ }
+ };
+
+ const [aspectRatio, setAspectRatio] = useState(1);
+
+ return (
+ <>
+ {
+ const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+ if (imageInfo) {
+ const originalWidth = Number(imageInfo.width);
+ const originalHeight = Number(imageInfo.height);
+ setAspectRatio(originalWidth / originalHeight);
+ }
+ }}
+ onResize={({ target, width, height, delta }) => {
+ if (delta[0] || delta[1]) {
+ let newWidth, newHeight;
+ if (delta[0]) {
+ // Width change detected
+ newWidth = Math.max(width, 100);
+ newHeight = newWidth / aspectRatio;
+ } else if (delta[1]) {
+ // Height change detected
+ newHeight = Math.max(height, 100);
+ newWidth = newHeight * aspectRatio;
+ }
+ target.style.width = `${newWidth}px`;
+ target.style.height = `${newHeight}px`;
+ }
+ }}
+ onResizeEnd={() => {
+ updateMediaSize();
+ }}
+ scalable
+ renderDirections={["se"]}
+ onScale={({ target, transform }) => {
+ target.style.transform = transform;
+ }}
+ />
+
+ );
+};
diff --git a/packages/editor/core/src/ui/extensions/image/index.tsx b/packages/editor/core/src/ui/extensions/image/index.tsx
new file mode 100644
index 0000000..7ea12fb
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/index.tsx
@@ -0,0 +1,64 @@
+import { UploadImagesPlugin } from "src/ui/plugins/image/upload-image";
+import ImageExt from "@tiptap/extension-image";
+import { TrackImageDeletionPlugin } from "src/ui/plugins/image/delete-image";
+import { DeleteImage } from "src/types/delete-image";
+import { RestoreImage } from "src/types/restore-image";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
+import { TrackImageRestorationPlugin } from "src/ui/plugins/image/restore-image";
+import { IMAGE_NODE_TYPE } from "src/ui/plugins/image/constants";
+import { ImageExtensionStorage } from "src/ui/plugins/image/types/image-node";
+
+export const ImageExtension = (deleteImage: DeleteImage, restoreImage: RestoreImage, cancelUploadImage?: () => void) =>
+ ImageExt.extend({
+ addKeyboardShortcuts() {
+ return {
+ ArrowDown: insertLineBelowImageAction,
+ ArrowUp: insertLineAboveImageAction,
+ };
+ },
+ addProseMirrorPlugins() {
+ return [
+ UploadImagesPlugin(this.editor, cancelUploadImage),
+ TrackImageDeletionPlugin(this.editor, deleteImage),
+ TrackImageRestorationPlugin(this.editor, restoreImage),
+ ];
+ },
+
+ onCreate(this) {
+ const imageSources = new Set();
+ this.editor.state.doc.descendants((node) => {
+ if (node.type.name === IMAGE_NODE_TYPE) {
+ imageSources.add(node.attrs.src);
+ }
+ });
+ imageSources.forEach(async (src) => {
+ try {
+ const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+ await restoreImage(assetUrlWithWorkspaceId);
+ } catch (error) {
+ console.error("Error restoring image: ", error);
+ }
+ });
+ },
+
+ // storage to keep track of image states Map
+ addStorage() {
+ return {
+ deletedImageSet: new Map(),
+ uploadInProgress: false,
+ };
+ },
+
+ addAttributes() {
+ return {
+ ...this.parent?.(),
+ width: {
+ default: "35%",
+ },
+ height: {
+ default: null,
+ },
+ };
+ },
+ });
diff --git a/packages/editor/core/src/ui/extensions/image/read-only-image.tsx b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx
new file mode 100644
index 0000000..8112eba
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx
@@ -0,0 +1,15 @@
+import Image from "@tiptap/extension-image";
+
+export const ReadOnlyImageExtension = Image.extend({
+ addAttributes() {
+ return {
+ ...this.parent?.(),
+ width: {
+ default: "35%",
+ },
+ height: {
+ default: null,
+ },
+ };
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts
new file mode 100644
index 0000000..205ec96
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-above-image.ts
@@ -0,0 +1,52 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { KeyboardShortcutCommand } from "@tiptap/core";
+
+export const insertLineAboveImageAction: KeyboardShortcutCommand = ({ editor }) => {
+ try {
+ const { selection, doc } = editor.state;
+ const { $from, $to } = selection;
+
+ let imageNode: ProseMirrorNode | null = null;
+ let imagePos: number | null = null;
+
+ // Check if the selection itself is an image node
+ doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+ if (node.type.name === "image") {
+ imageNode = node;
+ imagePos = pos;
+ return false; // Stop iterating once an image node is found
+ }
+ return true;
+ });
+
+ if (imageNode === null || imagePos === null) return false;
+
+ // Since we want to insert above the image, we use the imagePos directly
+ const insertPos = imagePos;
+
+ const docSize = editor.state.doc.content.size;
+
+ if (insertPos < 0 || insertPos > docSize) return false;
+
+ // Check for an existing node immediately before the image
+ if (insertPos === 0) {
+ // If the previous node doesn't exist or isn't a paragraph, create and insert a new empty node there
+ editor.chain().insertContentAt(insertPos, { type: "paragraph" }).run();
+ editor.chain().setTextSelection(insertPos).run();
+ } else {
+ const prevNode = doc.nodeAt(insertPos);
+
+ if (prevNode && prevNode.type.name === "paragraph") {
+ // If the previous node is a paragraph, move the cursor there
+ editor.chain().setTextSelection(insertPos).run();
+ } else {
+ return false;
+ }
+ }
+
+ return true;
+ } catch (error) {
+ console.error("An error occurred while inserting a line above the image:", error);
+ return false;
+ }
+};
diff --git a/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts
new file mode 100644
index 0000000..fe06ea0
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/image/utilities/insert-line-below-image.ts
@@ -0,0 +1,51 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { KeyboardShortcutCommand } from "@tiptap/core";
+
+export const insertLineBelowImageAction: KeyboardShortcutCommand = ({ editor }) => {
+ try {
+ const { selection, doc } = editor.state;
+ const { $from, $to } = selection;
+
+ let imageNode: ProseMirrorNode | null = null;
+ let imagePos: number | null = null;
+
+ // Check if the selection itself is an image node
+ doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+ if (node.type.name === "image") {
+ imageNode = node;
+ imagePos = pos;
+ return false; // Stop iterating once an image node is found
+ }
+ return true;
+ });
+
+ if (imageNode === null || imagePos === null) return false;
+
+ const guaranteedImageNode: ProseMirrorNode = imageNode;
+ const nextNodePos = imagePos + guaranteedImageNode.nodeSize;
+
+ // Check for an existing node immediately after the image
+ const nextNode = doc.nodeAt(nextNodePos);
+
+ if (nextNode && nextNode.type.name === "paragraph") {
+ // If the next node is a paragraph, move the cursor there
+ const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
+ editor.chain().setTextSelection(endOfParagraphPos).run();
+ } else if (!nextNode) {
+ // If the next node doesn't exist i.e. we're at the end of the document, create and insert a new empty node there
+ editor.chain().insertContentAt(nextNodePos, { type: "paragraph" }).run();
+ editor
+ .chain()
+ .setTextSelection(nextNodePos + 1)
+ .run();
+ } else {
+ // If the next node is not a paragraph, do not proceed
+ return false;
+ }
+
+ return true;
+ } catch (error) {
+ console.error("An error occurred while inserting a line below the image:", error);
+ return false;
+ }
+};
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
new file mode 100644
index 0000000..2507aca
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -0,0 +1,160 @@
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import Placeholder from "@tiptap/extension-placeholder";
+import StarterKit from "@tiptap/starter-kit";
+import { Markdown } from "tiptap-markdown";
+
+import { Table } from "src/ui/extensions/table/table";
+import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
+import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
+import { TableRow } from "src/ui/extensions/table/table-row/table-row";
+
+import { ImageExtension } from "src/ui/extensions/image";
+
+import { isValidHttpUrl } from "src/lib/utils";
+import { Mentions } from "src/ui/mentions";
+
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
+import { ListKeymap } from "src/ui/extensions/custom-list-keymap";
+import { CustomKeymap } from "src/ui/extensions/keymap";
+import { CustomQuoteExtension } from "src/ui/extensions/quote";
+
+import { DeleteImage } from "src/types/delete-image";
+import { IMentionHighlight, IMentionSuggestion } from "src/types/mention-suggestion";
+import { RestoreImage } from "src/types/restore-image";
+import { CustomLinkExtension } from "src/ui/extensions/custom-link";
+import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
+import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
+import { CustomCodeMarkPlugin } from "src/ui/extensions/custom-code-inline/inline-code-plugin";
+import { UploadImage } from "src/types/upload-image";
+import { DropHandlerExtension } from "src/ui/extensions/drop";
+
+type TArguments = {
+ mentionConfig: {
+ mentionSuggestions?: () => Promise;
+ mentionHighlights?: () => Promise;
+ };
+ fileConfig: {
+ deleteFile: DeleteImage;
+ restoreFile: RestoreImage;
+ cancelUploadImage?: () => void;
+ uploadFile: UploadImage;
+ };
+ placeholder?: string | ((isFocused: boolean, value: string) => string);
+ tabIndex?: number;
+};
+
+export const CoreEditorExtensions = ({
+ mentionConfig,
+ fileConfig: { deleteFile, restoreFile, cancelUploadImage, uploadFile },
+ placeholder,
+ tabIndex,
+}: TArguments) => [
+ StarterKit.configure({
+ bulletList: {
+ HTMLAttributes: {
+ class: "list-disc pl-7 space-y-2",
+ },
+ },
+ orderedList: {
+ HTMLAttributes: {
+ class: "list-decimal pl-7 space-y-2",
+ },
+ },
+ listItem: {
+ HTMLAttributes: {
+ class: "not-prose space-y-2",
+ },
+ },
+ code: false,
+ codeBlock: false,
+ horizontalRule: false,
+ blockquote: false,
+ dropcursor: {
+ color: "rgba(var(--color-text-100))",
+ width: 1,
+ },
+ }),
+ CustomQuoteExtension,
+ DropHandlerExtension(uploadFile),
+ CustomHorizontalRule.configure({
+ HTMLAttributes: {
+ class: "my-4 border-custom-border-400",
+ },
+ }),
+ CustomKeymap,
+ ListKeymap({ tabIndex }),
+ CustomLinkExtension.configure({
+ openOnClick: true,
+ autolink: true,
+ linkOnPaste: true,
+ protocols: ["http", "https"],
+ validate: (url: string) => isValidHttpUrl(url),
+ HTMLAttributes: {
+ class:
+ "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+ },
+ }),
+ CustomTypographyExtension,
+ ImageExtension(deleteFile, restoreFile, cancelUploadImage).configure({
+ HTMLAttributes: {
+ class: "rounded-md",
+ },
+ }),
+ TiptapUnderline,
+ TextStyle,
+ TaskList.configure({
+ HTMLAttributes: {
+ class: "not-prose pl-2 space-y-2",
+ },
+ }),
+ TaskItem.configure({
+ HTMLAttributes: {
+ class: "relative",
+ },
+ nested: true,
+ }),
+ CustomCodeBlockExtension.configure({
+ HTMLAttributes: {
+ class: "",
+ },
+ }),
+ CustomCodeMarkPlugin,
+ CustomCodeInlineExtension,
+ Markdown.configure({
+ html: true,
+ transformPastedText: true,
+ }),
+ Table,
+ TableHeader,
+ TableCell,
+ TableRow,
+ Mentions({
+ mentionSuggestions: mentionConfig.mentionSuggestions,
+ mentionHighlights: mentionConfig.mentionHighlights,
+ readonly: false,
+ }),
+ Placeholder.configure({
+ placeholder: ({ editor, node }) => {
+ if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+
+ if (editor.storage.image.uploadInProgress) return "";
+
+ const shouldHidePlaceholder =
+ editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");
+
+ if (shouldHidePlaceholder) return "";
+
+ if (placeholder) {
+ if (typeof placeholder === "string") return placeholder;
+ else return placeholder(editor.isFocused, editor.getHTML());
+ }
+
+ return "Press '/' for commands...";
+ },
+ includeChildren: true,
+ }),
+];
diff --git a/packages/editor/core/src/ui/extensions/keymap.tsx b/packages/editor/core/src/ui/extensions/keymap.tsx
new file mode 100644
index 0000000..43b4e34
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/keymap.tsx
@@ -0,0 +1,126 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
+import { canJoin } from "@tiptap/pm/transform";
+import { NodeType } from "@tiptap/pm/model";
+
+declare module "@tiptap/core" {
+ // eslint-disable-next-line no-unused-vars
+ interface Commands {
+ customkeymap: {
+ /**
+ * Select text between node boundaries
+ */
+ selectTextWithinNodeBoundaries: () => ReturnType;
+ };
+ }
+}
+
+function autoJoin(tr: Transaction, newTr: Transaction, nodeTypes: NodeType[]) {
+ // Find all ranges where we might want to join.
+ const ranges: Array = [];
+ for (let i = 0; i < tr.mapping.maps.length; i++) {
+ const map = tr.mapping.maps[i];
+ for (let j = 0; j < ranges.length; j++) ranges[j] = map.map(ranges[j]);
+ map.forEach((_s, _e, from, to) => ranges.push(from, to));
+ }
+
+ // Figure out which joinable points exist inside those ranges,
+ // by checking all node boundaries in their parent nodes.
+ const joinable: number[] = [];
+ for (let i = 0; i < ranges.length; i += 2) {
+ const from = ranges[i],
+ to = ranges[i + 1];
+ const $from = tr.doc.resolve(from),
+ depth = $from.sharedDepth(to),
+ parent = $from.node(depth);
+ for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+ const after = parent.maybeChild(index);
+ if (!after) break;
+ if (index && joinable.indexOf(pos) == -1) {
+ const before = parent.child(index - 1);
+ if (before.type == after.type && nodeTypes.includes(before.type)) joinable.push(pos);
+ }
+ pos += after.nodeSize;
+ }
+ }
+
+ let joined = false;
+
+ // Join the joinable points
+ joinable.sort((a, b) => a - b);
+ for (let i = joinable.length - 1; i >= 0; i--) {
+ if (canJoin(tr.doc, joinable[i])) {
+ newTr.join(joinable[i]);
+ joined = true;
+ }
+ }
+
+ return joined;
+}
+
+export const CustomKeymap = Extension.create({
+ name: "CustomKeymap",
+
+ addCommands() {
+ return {
+ selectTextWithinNodeBoundaries:
+ () =>
+ ({ editor, commands }) => {
+ const { state } = editor;
+ const { tr } = state;
+ const startNodePos = tr.selection.$from.start();
+ const endNodePos = tr.selection.$to.end();
+ return commands.setTextSelection({
+ from: startNodePos,
+ to: endNodePos,
+ });
+ },
+ };
+ },
+
+ addProseMirrorPlugins() {
+ return [
+ new Plugin({
+ key: new PluginKey("ordered-list-merging"),
+ appendTransaction(transactions, oldState, newState) {
+ // Create a new transaction.
+ const newTr = newState.tr;
+
+ const joinableNodes = [
+ newState.schema.nodes["orderedList"],
+ newState.schema.nodes["taskList"],
+ newState.schema.nodes["bulletList"],
+ ];
+
+ let joined = false;
+ for (const transaction of transactions) {
+ const anotherJoin = autoJoin(transaction, newTr, joinableNodes);
+ joined = anotherJoin || joined;
+ }
+ if (joined) {
+ return newTr;
+ }
+ },
+ }),
+ ];
+ },
+ addKeyboardShortcuts() {
+ return {
+ "Mod-a": ({ editor }) => {
+ const { state } = editor;
+ const { tr } = state;
+ const startSelectionPos = tr.selection.from;
+ const endSelectionPos = tr.selection.to;
+ const startNodePos = tr.selection.$from.start();
+ const endNodePos = tr.selection.$to.end();
+ const isCurrentTextSelectionNotExtendedToNodeBoundaries =
+ startSelectionPos > startNodePos || endSelectionPos < endNodePos;
+ if (isCurrentTextSelectionNotExtendedToNodeBoundaries) {
+ editor.chain().selectTextWithinNodeBoundaries().run();
+ return true;
+ }
+ return false;
+ },
+ };
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/quote/index.tsx b/packages/editor/core/src/ui/extensions/quote/index.tsx
new file mode 100644
index 0000000..4ae81ff
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/quote/index.tsx
@@ -0,0 +1,30 @@
+import Blockquote from "@tiptap/extension-blockquote";
+
+export const CustomQuoteExtension = Blockquote.extend({
+ addKeyboardShortcuts() {
+ return {
+ Enter: () => {
+ try {
+ const { $from, $to, $head } = this.editor.state.selection;
+ const parent = $head.node(-1);
+
+ if (!parent) return false;
+
+ if (parent.type.name !== "blockquote") {
+ return false;
+ }
+ if ($from.pos !== $to.pos) return false;
+ // if ($head.parentOffset < $head.parent.content.size) return false;
+
+ // this.editor.commands.insertContentAt(parent.ne);
+ this.editor.chain().splitBlock().lift(this.name).run();
+
+ return true;
+ } catch (error) {
+ console.error("Error handling Enter in blockquote:", error);
+ return false;
+ }
+ },
+ };
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/index.ts b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
new file mode 100644
index 0000000..68a25a9
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts
@@ -0,0 +1 @@
+export { TableCell } from "./table-cell";
diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
new file mode 100644
index 0000000..403bd3f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
@@ -0,0 +1,61 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableCellOptions {
+ HTMLAttributes: Record;
+}
+
+export const TableCell = Node.create({
+ name: "tableCell",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ content: "block+",
+
+ addAttributes() {
+ return {
+ colspan: {
+ default: 1,
+ },
+ rowspan: {
+ default: 1,
+ },
+ colwidth: {
+ default: null,
+ parseHTML: (element) => {
+ const colwidth = element.getAttribute("colwidth");
+ const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+ return value;
+ },
+ },
+ background: {
+ default: null,
+ },
+ textColor: {
+ default: null,
+ },
+ };
+ },
+
+ tableRole: "cell",
+
+ isolating: true,
+
+ parseHTML() {
+ return [{ tag: "td" }];
+ },
+
+ renderHTML({ node, HTMLAttributes }) {
+ return [
+ "td",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+ style: `background-color: ${node.attrs.background}; color: ${node.attrs.textColor}`,
+ }),
+ 0,
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/index.ts b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
new file mode 100644
index 0000000..290f37d
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
@@ -0,0 +1 @@
+export { TableHeader } from "./table-header";
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
new file mode 100644
index 0000000..bd994f4
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@@ -0,0 +1,58 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableHeaderOptions {
+ HTMLAttributes: Record;
+}
+
+export const TableHeader = Node.create({
+ name: "tableHeader",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ content: "paragraph+",
+
+ addAttributes() {
+ return {
+ colspan: {
+ default: 1,
+ },
+ rowspan: {
+ default: 1,
+ },
+ colwidth: {
+ default: null,
+ parseHTML: (element) => {
+ const colwidth = element.getAttribute("colwidth");
+ const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+ return value;
+ },
+ },
+ background: {
+ default: "none",
+ },
+ };
+ },
+
+ tableRole: "header_cell",
+
+ isolating: true,
+
+ parseHTML() {
+ return [{ tag: "th" }];
+ },
+
+ renderHTML({ node, HTMLAttributes }) {
+ return [
+ "th",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+ style: `background-color: ${node.attrs.background}`,
+ }),
+ 0,
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/index.ts b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
new file mode 100644
index 0000000..24dafb7
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
@@ -0,0 +1 @@
+export { TableRow } from "./table-row";
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
new file mode 100644
index 0000000..f961c05
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
@@ -0,0 +1,44 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableRowOptions {
+ HTMLAttributes: Record;
+}
+
+export const TableRow = Node.create({
+ name: "tableRow",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ addAttributes() {
+ return {
+ background: {
+ default: null,
+ },
+ textColor: {
+ default: null,
+ },
+ };
+ },
+
+ content: "(tableCell | tableHeader)*",
+
+ tableRole: "row",
+
+ parseHTML() {
+ return [{ tag: "tr" }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ const style = HTMLAttributes.background
+ ? `background-color: ${HTMLAttributes.background}; color: ${HTMLAttributes.textColor}`
+ : "";
+
+ const attributes = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { style });
+
+ return ["tr", attributes, 0];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts
new file mode 100644
index 0000000..51c7784
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@@ -0,0 +1,51 @@
+export const icons = {
+ colorPicker: ``,
+ deleteColumn: ``,
+ deleteRow: ``,
+ insertLeftTableIcon: `
+`,
+ insertRightTableIcon: `
+`,
+ insertTopTableIcon: `
+`,
+ toggleColumnHeader: ``,
+ toggleRowHeader: ``,
+ insertBottomTableIcon: `
+`,
+};
diff --git a/packages/editor/core/src/ui/extensions/table/table/index.ts b/packages/editor/core/src/ui/extensions/table/table/index.ts
new file mode 100644
index 0000000..8efc431
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/index.ts
@@ -0,0 +1 @@
+export { Table } from "./table";
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-controls.ts b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
new file mode 100644
index 0000000..34ad93f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
@@ -0,0 +1,112 @@
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { findParentNode } from "@tiptap/core";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+
+const key = new PluginKey("tableControls");
+
+export function tableControls() {
+ return new Plugin({
+ key,
+ state: {
+ init() {
+ return new TableControlsState();
+ },
+ apply(tr, prev) {
+ return prev.apply(tr);
+ },
+ },
+ props: {
+ handleDOMEvents: {
+ mousemove: (view, event) => {
+ const pluginState = key.getState(view.state);
+
+ if (!(event.target as HTMLElement).closest(".table-wrapper") && pluginState.values.hoveredTable) {
+ return view.dispatch(
+ view.state.tr.setMeta(key, {
+ setHoveredTable: null,
+ setHoveredCell: null,
+ })
+ );
+ }
+
+ const pos = view.posAtCoords({
+ left: event.clientX,
+ top: event.clientY,
+ });
+
+ if (!pos || pos.pos < 0 || pos.pos > view.state.doc.content.size) return;
+
+ const table = findParentNode((node) => node.type.name === "table")(
+ TextSelection.create(view.state.doc, pos.pos)
+ );
+ const cell = findParentNode((node) => node.type.name === "tableCell" || node.type.name === "tableHeader")(
+ TextSelection.create(view.state.doc, pos.pos)
+ );
+
+ if (!table || !cell) return;
+
+ if (pluginState.values.hoveredCell?.pos !== cell.pos) {
+ return view.dispatch(
+ view.state.tr.setMeta(key, {
+ setHoveredTable: table,
+ setHoveredCell: cell,
+ })
+ );
+ }
+ },
+ },
+ decorations: (state) => {
+ const pluginState = key.getState(state);
+ if (!pluginState) {
+ return null;
+ }
+
+ const { hoveredTable, hoveredCell } = pluginState.values;
+ const docSize = state.doc.content.size;
+ if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) {
+ const decorations = [
+ Decoration.node(
+ hoveredTable.pos,
+ hoveredTable.pos + hoveredTable.node.nodeSize,
+ {},
+ {
+ hoveredTable,
+ hoveredCell,
+ }
+ ),
+ ];
+
+ return DecorationSet.create(state.doc, decorations);
+ }
+
+ return null;
+ },
+ },
+ });
+}
+
+class TableControlsState {
+ values;
+
+ constructor(props = {}) {
+ this.values = {
+ hoveredTable: null,
+ hoveredCell: null,
+ ...props,
+ };
+ }
+
+ apply(tr: any) {
+ const actions = tr.getMeta(key);
+
+ if (actions?.setHoveredTable !== undefined) {
+ this.values.hoveredTable = actions.setHoveredTable;
+ }
+
+ if (actions?.setHoveredCell !== undefined) {
+ this.values.hoveredCell = actions.setHoveredCell;
+ }
+
+ return this;
+ }
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
new file mode 100644
index 0000000..d4dfcf5
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -0,0 +1,491 @@
+import { h } from "jsx-dom-cjs";
+import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
+import { Decoration, NodeView } from "@tiptap/pm/view";
+import tippy, { Instance, Props } from "tippy.js";
+
+import { Editor } from "@tiptap/core";
+import { CellSelection, TableMap, updateColumnsOnResize } from "@tiptap/pm/tables";
+
+import { icons } from "src/ui/extensions/table/table/icons";
+
+type ToolboxItem = {
+ label: string;
+ icon: string;
+ action: (args: any) => void;
+};
+
+export function updateColumns(
+ node: ProseMirrorNode,
+ colgroup: HTMLElement,
+ table: HTMLElement,
+ cellMinWidth: number,
+ overrideCol?: number,
+ overrideValue?: any
+) {
+ let totalWidth = 0;
+ let fixedWidth = true;
+ let nextDOM = colgroup.firstChild as HTMLElement;
+ const row = node.firstChild;
+
+ if (!row) return;
+
+ for (let i = 0, col = 0; i < row.childCount; i += 1) {
+ const { colspan, colwidth } = row.child(i).attrs;
+
+ for (let j = 0; j < colspan; j += 1, col += 1) {
+ const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j];
+ const cssWidth = hasWidth ? `${hasWidth}px` : "";
+
+ totalWidth += hasWidth || cellMinWidth;
+
+ if (!hasWidth) {
+ fixedWidth = false;
+ }
+
+ if (!nextDOM) {
+ colgroup.appendChild(document.createElement("col")).style.width = cssWidth;
+ } else {
+ if (nextDOM.style.width !== cssWidth) {
+ nextDOM.style.width = cssWidth;
+ }
+
+ nextDOM = nextDOM.nextSibling as HTMLElement;
+ }
+ }
+ }
+
+ while (nextDOM) {
+ const after = nextDOM.nextSibling;
+
+ nextDOM.parentNode?.removeChild(nextDOM);
+ nextDOM = after as HTMLElement;
+ }
+
+ if (fixedWidth) {
+ table.style.width = `${totalWidth}px`;
+ table.style.minWidth = "";
+ } else {
+ table.style.width = "";
+ table.style.minWidth = `${totalWidth}px`;
+ }
+}
+
+const defaultTippyOptions: Partial = {
+ allowHTML: true,
+ arrow: false,
+ trigger: "click",
+ animation: "scale-subtle",
+ theme: "light-border no-padding",
+ interactive: true,
+ hideOnClick: true,
+ placement: "right",
+};
+
+function setCellsBackgroundColor(editor: Editor, color: { backgroundColor: string; textColor: string }) {
+ return editor
+ .chain()
+ .focus()
+ .updateAttributes("tableCell", {
+ background: color.backgroundColor,
+ textColor: color.textColor,
+ })
+ .run();
+}
+
+function setTableRowBackgroundColor(editor: Editor, color: { backgroundColor: string; textColor: string }) {
+ const { state, dispatch } = editor.view;
+ const { selection } = state;
+ if (!(selection instanceof CellSelection)) {
+ return false;
+ }
+
+ // Get the position of the hovered cell in the selection to determine the row.
+ const hoveredCell = selection.$headCell || selection.$anchorCell;
+
+ // Find the depth of the table row node
+ let rowDepth = hoveredCell.depth;
+ while (rowDepth > 0 && hoveredCell.node(rowDepth).type.name !== "tableRow") {
+ rowDepth--;
+ }
+
+ // If we couldn't find a tableRow node, we can't set the background color
+ if (hoveredCell.node(rowDepth).type.name !== "tableRow") {
+ return false;
+ }
+
+ // Get the position where the table row starts
+ const rowStartPos = hoveredCell.start(rowDepth);
+
+ // Create a transaction that sets the background color on the tableRow node.
+ const tr = state.tr.setNodeMarkup(rowStartPos - 1, null, {
+ ...hoveredCell.node(rowDepth).attrs,
+ background: color.backgroundColor,
+ textColor: color.textColor,
+ });
+
+ dispatch(tr);
+ return true;
+}
+
+const columnsToolboxItems: ToolboxItem[] = [
+ {
+ label: "Toggle column header",
+ icon: icons.toggleColumnHeader,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderColumn().run(),
+ },
+ {
+ label: "Add column before",
+ icon: icons.insertLeftTableIcon,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().addColumnBefore().run(),
+ },
+ {
+ label: "Add column after",
+ icon: icons.insertRightTableIcon,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().addColumnAfter().run(),
+ },
+ {
+ label: "Pick color",
+ icon: "", // No icon needed for color picker
+ action: (args: any) => {}, // Placeholder action; actual color picking is handled in `createToolbox`
+ },
+ {
+ label: "Delete column",
+ icon: icons.deleteColumn,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().deleteColumn().run(),
+ },
+];
+
+const rowsToolboxItems: ToolboxItem[] = [
+ {
+ label: "Toggle row header",
+ icon: icons.toggleRowHeader,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderRow().run(),
+ },
+ {
+ label: "Add row above",
+ icon: icons.insertTopTableIcon,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().addRowBefore().run(),
+ },
+ {
+ label: "Add row below",
+ icon: icons.insertBottomTableIcon,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().addRowAfter().run(),
+ },
+ {
+ label: "Pick color",
+ icon: "",
+ action: (args: any) => {}, // Placeholder action; actual color picking is handled in `createToolbox`
+ },
+ {
+ label: "Delete row",
+ icon: icons.deleteRow,
+ action: ({ editor }: { editor: Editor }) => editor.chain().focus().deleteRow().run(),
+ },
+];
+
+function createToolbox({
+ triggerButton,
+ items,
+ tippyOptions,
+ onSelectColor,
+ onClickItem,
+ colors,
+}: {
+ triggerButton: Element | null;
+ items: ToolboxItem[];
+ tippyOptions: any;
+ onClickItem: (item: ToolboxItem) => void;
+ onSelectColor: (color: { backgroundColor: string; textColor: string }) => void;
+ colors: { [key: string]: { backgroundColor: string; textColor: string; icon?: string } };
+}): Instance {
+ // @ts-expect-error
+ const toolbox = tippy(triggerButton, {
+ content: h(
+ "div",
+ {
+ className:
+ "rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg min-w-[12rem] whitespace-nowrap",
+ },
+ items.map((item) => {
+ if (item.label === "Pick color") {
+ return h("div", { className: "flex flex-col" }, [
+ h("hr", { className: "my-2 border-custom-border-200" }),
+ h("div", { className: "text-custom-text-200 text-sm" }, item.label),
+ h(
+ "div",
+ { className: "grid grid-cols-6 gap-x-1 gap-y-2.5 mt-2" },
+ Object.entries(colors).map(([colorName, colorValue]) =>
+ h("div", {
+ className: "grid place-items-center size-6 rounded cursor-pointer",
+ style: `background-color: ${colorValue.backgroundColor};color: ${colorValue.textColor || "inherit"};`,
+ innerHTML:
+ colorValue.icon ?? `A`,
+ onClick: () => onSelectColor(colorValue),
+ })
+ )
+ ),
+ h("hr", { className: "my-2 border-custom-border-200" }),
+ ]);
+ } else {
+ return h(
+ "div",
+ {
+ className:
+ "flex items-center gap-2 px-1 py-1.5 bg-custom-background-100 hover:bg-custom-background-80 text-sm text-custom-text-200 rounded cursor-pointer",
+ itemType: "div",
+ onClick: () => onClickItem(item),
+ },
+ [
+ h("span", {
+ className: "h-3 w-3 flex-shrink-0",
+ innerHTML: item.icon,
+ }),
+ h("div", { className: "label" }, item.label),
+ ]
+ );
+ }
+ })
+ ),
+ ...tippyOptions,
+ });
+
+ return Array.isArray(toolbox) ? toolbox[0] : toolbox;
+}
+
+export class TableView implements NodeView {
+ node: ProseMirrorNode;
+ cellMinWidth: number;
+ decorations: Decoration[];
+ editor: Editor;
+ getPos: () => number;
+ hoveredCell: ResolvedPos | null = null;
+ map: TableMap;
+ root: HTMLElement;
+ table: HTMLTableElement;
+ colgroup: HTMLTableColElement;
+ tbody: HTMLElement;
+ rowsControl?: HTMLElement | null;
+ columnsControl?: HTMLElement | null;
+ columnsToolbox?: Instance;
+ rowsToolbox?: Instance