feat: twitter clone pivot app (#96)

* feat: add username to user schema

* feat: generate username on account creation

* feat: rename /dashboard route to /home

* wip: tweet on dashboard

* feat: update to design system alpha.12

* refactor: move /profile to /profile/[id] route

* feat: separate profile page and edit profile page

* fix: import set

* feat: add profile router and add error handling for update profile

* feat: update app layouts

* feat: add update profile page according to new design

* refactor: move `me` and `settings` related files into own feature dir

* refactor: rename user.* to me.*

since we now have profiles, should distinguish between procedures and services relating to currently logged in user vs other users

* feat: clean up redundant Avatar component props

* feat: fetch and display user profiles

* feat: add NavigationalTab component

* feat: add ProfileLayout and profile tabs

* feat: add initial profile tweet view

* feat: add TweetActions component placeholder

* feat: add procedure to handle liking of posts

* refactor: rename tweet -> post to better align with purpose

* feat: enable replying in profile view

* fix: only fetch posts without parent posts

* feat: add procedure for retrieving liked posts

* feat: use local state instead of invalidating query

* feat: enable delete

* fix: relative date calculation

* feat: add handling of navigation to thread view

* feat: extract BackBannerLink component

* feat: rename PROFILE_ grid column constants to APP_

* feat: update styling for app's navbar and sidebar

* feat: add thread view

* feat: remove old feedback routes

not needed in new app anymore, but cannot post anymore haha

* feat: add new post functionality on profile and home page

* feat: remove unused files and functions

* feat: fetch all posts user has replied

* feat: add custom image upload button

* feat: add images field to Post table in db

* feat: update r2 bucket hierarchy and env vars, add image upload feat

now using single-bucket architecture to reduce number of env vars needed for each feature (avatars, images). The images uploaded will be nested under the single bucket.

Some drawbacks though: No more finer grained access control, but should be ok for our use case, since all images should be public.

* feat: render images in posts

* fix: correctly hide deleted posts in thread replies

* feat: stop retrying 404s

* feat: return to home page on 404 in thread

* fix: properly check image types of uploaded files

* feat: remove ssr on index page

* fix: lint fix

* fix: swc autofix swc packages

* fix: render AppNavbar correctly

* feat: generate username for sgid login if not set

* feat: clean up exports, import from feature's /component directory

* fix: correct landing page styling after merge

AppGrid padding has changed in this branch

* fix: clear session on SGID route call regardless

* feat: display SGID errors in email field

* fix: AppNavbar stickiness

* feat: add responsive sidebar

* feat: add mobile app layout

* feat: add mobile styling to post view

* feat: add mobile responsiveness to profile page

* feat: add responsiveness to profile settings

* feat: allow updating of email address in profile

* feat: remove mock repost button (for now)

* feat: add link copy functionality

* feat: remove unused ogp-logo asset

* feat: remove unused imports

* fix: add cuid2 package left out from branch merge

* fix: remove now-unneeded ts-expect-error directive

* feat: remove read post feature

unneeded, cutting down complexity

* fix(profile): styling

* feat: update padding again

* feat: use suspense for profile fetch, add post skeletons

* feat: add empty states for profile

* feat: add empty state for home page

* refactor: move SkeletonPostList to common component

* feat: add empty and skeleton states for home page

* feat: add skeleton state to thread view

* feat: remove default useErrorBoundary on trpc query client

it will be automatically set when users use `useSuspenseQuery` hook

* feat: update storybook

* fix(FileButton): incorrect displayname

* fix: correctly mock trpc-msw with superjson

* feat: update storybook preview for new suspense setup

* feat: add initial empty homepage story

* feat(story): add mockdate decorator, posts and mobile story

* fix: await or void promises with new lint rule

* feat(PostActions): set empty box if not owner of post

* feat(PostActions): use tooltip to denote copy action

* feat: synchronise avatar display in posts with navbar

* feat: extract NewPostModal to own component and add story

* feat: correctly hide upload button if image uploads are not enabled

* feat: move feature available in application into a provider

* fix(storybook): add feature flag decorator

allows setting of features to rendered stories

* feat(signin): add story to show sgID login

* feat: update empty post text

* feat: remove avatar display on create modal

* feat: update and lock tiptap packages to 2.0.3

* feat: focus on rich text editor in compose modals

* feat: disable buttons if no content is entered yet

* fix: incorrect margins when replying to comment

* fix(ComposePost): avatar colouring consistency

* feat: add ResponsiveModal, use in post modals

* feat: add fontFeatureSettings to tiptap editor

* feat: update toast description when creating post

* feat: add back all Restricted components

* feat: update layout of application

* feat: update reply post toast copy

* fix(ResponsiveModal): remove isCentered prop

* fix: zIndex of adminlayout fixed areas

* feat: add breathing space to app outlet

* feat: use chakra image for non-caching image load

* feat: add better spacing for profile tabs

* fix(RichText): prevent editor from focusing if is readonly

was causing content jumps due to focusing when the editor is created

* feat: appnavbar logo to return to homepage instead of landing

* fix: update alignment of post body

* feat: update mobile views of modals

* feat: clamp upload image preview to 1 column on mobile

* feat: move bottom padding into the pages themselves

* fix: modal styling

* fix: correct padding of postview on mobile

* feat: fix image sizing according to design

* fix: update modal buttons for add comment modal too

* feat: remove govtmasthead on admin layout

* feat(editProfile): fill white bg to whole of page

* feat: remove logout button on side dashbar

* feat(AddCommentModal): add missing close button

* feat(ResponsiveModal): add isCentered, set scroll behavior to inside

* fix: correctly add back stack divider when rendering post list

* feat: add missing dividers in thread view

* feat: add app-specific modal styling example

* feat: clean up and update PostSkeleton, rename to SkeletonPost

* fix: correct rendering of PostList

* feat: add skeleton for thread view

* fix: remove react component spreading in skeletons

* feat: change sgid login button variant to clear

.env.example

@@ -36,6 +36,8 @@ SENDGRID_FROM_ADDRESS=
 NEXT_PUBLIC_ENABLE_STORAGE=
 R2_ACCOUNT_ID=
 R2_BUCKET_NAME=
+R2_AVATARS_DIRECTORY=avatars
+R2_IMAGES_DIRECTORY=images
 R2_ACCESS_KEY_ID=
 R2_SECRET_ACCESS_KEY=
 R2_PUBLIC_HOSTNAME=

.storybook/preview.tsx

@@ -1,19 +1,26 @@
 import '@fontsource/ibm-plex-mono'
 import 'inter-ui/inter.css'
 
-import type { Preview, Decorator } from '@storybook/react'
 import { withThemeFromJSXProvider } from '@storybook/addon-styling'
+import type { Args, Decorator, Preview } from '@storybook/react'
+import mockdate from 'mockdate'
 
+import { ThemeProvider } from '@opengovsg/design-system-react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { httpBatchLink } from '@trpc/client'
-import { PropsWithChildren, useState } from 'react'
 import { createTRPCReact } from '@trpc/react-query'
-import { AppRouter } from '~/server/modules/_app'
+import { useMemo, useState } from 'react'
 import superjson from 'superjson'
-import { ThemeProvider } from '@opengovsg/design-system-react'
+import { AppRouter } from '~/server/modules/_app'
 import { theme } from '~/theme'
 
+import { Box, Skeleton } from '@chakra-ui/react'
 import { initialize, mswDecorator } from 'msw-storybook-addon'
+import ErrorBoundary from '~/components/ErrorBoundary'
+import Suspense from '~/components/Suspense'
+import { format } from 'date-fns'
+import { FeatureContext } from '~/components/AppProviders'
+import { z } from 'zod'
 
 // Initialize MSW
 initialize({
@@ -22,7 +29,7 @@ initialize({
 
 const trpc = createTRPCReact<AppRouter>()
 
-const StorybookTrpcProvider = ({ children }: PropsWithChildren) => {
+const SetupDecorator: Decorator = (page) => {
  const [queryClient] = useState(
  new QueryClient({
  defaultOptions: {
@@ -41,9 +48,66 @@ const StorybookTrpcProvider = ({ children }: PropsWithChildren) => {
  })
  )
  return (
- <trpc.Provider client={trpcClient} queryClient={queryClient}>
- <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
- </trpc.Provider>
+ <ErrorBoundary>
+ <Suspense fallback={<Skeleton width="100vw" height="100vh" />}>
+ <trpc.Provider client={trpcClient} queryClient={queryClient}>
+ <QueryClientProvider client={queryClient}>
+ {page()}
+ </QueryClientProvider>
+ </trpc.Provider>
+ </Suspense>
+ </ErrorBoundary>
+ )
+}
+
+export const mockFeatureFlagsDecorator: Decorator<Args> = (
+ storyFn,
+ { parameters }
+) => {
+ const featureSchema = z
+ .object({
+ storage: z.boolean().default(false),
+ sgid: z.boolean().default(false),
+ })
+ .default({})
+ const features = useMemo(() => {
+ return featureSchema.parse(parameters.features)
+ }, [])
+
+ return (
+ <FeatureContext.Provider value={features}>
+ {storyFn()}
+ </FeatureContext.Provider>
+ )
+}
+
+export const mockDateDecorator: Decorator<Args> = (storyFn, { parameters }) => {
+ mockdate.reset()
+
+ if (!parameters.mockdate) {
+ return storyFn()
+ }
+
+ mockdate.set(parameters.mockdate)
+
+ const mockedDate = format(parameters.mockdate, 'dd-mm-yyyy HH:mma')
+
+ return (
+ <Box>
+ <Box
+ pos="fixed"
+ top={0}
+ right={0}
+ bg="white"
+ p="0.25rem"
+ fontSize="0.75rem"
+ lineHeight={1}
+ zIndex="docked"
+ >
+ Mocking date: {mockedDate}
+ </Box>
+ {storyFn()}
+ </Box>
  )
 }
 
@@ -55,11 +119,9 @@ const decorators: Decorator[] = [
  },
  Provider: ThemeProvider,
  }),
- (Story) => (
- <StorybookTrpcProvider>
- <Story />
- </StorybookTrpcProvider>
- ),
+ mockDateDecorator,
+ mockFeatureFlagsDecorator,
+ SetupDecorator,
 ]
 
 const preview: Preview = {