• AuthProfile (Depending on ArtCard, CreateArtForm, Hero)
• CategoryFilter (Talip) #11
• HomeAbout
• HomeProjects
• HomeHero
• ProjectList (Talip) #29
• LAYOUT
  • Layout
  • Header
  • Footer
  • Hero
  • ProfileMenu
  • LocaleSwitcher
• FORMS
  • FormItem (priority) (Talip) #5
  • WSelect (Talip) #7
  • CommentForm (Mustafa) #31
  • ContactForm (Mustafa) #15
  • CreateArtForm (Mustafa) #36
  • FileUploadForm (Ekrem)#20
  • ForgotPasswordForm (Ekrem) #6
  • JoinForm (Ekrem)#18
  • LoginForm (Mustafa) #10
  • ResetPasswordForm (Ekrem) #6
  • SearchForm (Mustafa) #33
  • SignupForm (Mustafa) #16
• SHARED
  • AnimatedBox
  • ArtContent (Talip) #17
  • ArtDetail (Talip) #17
  • WImage (ChakraNextImage) (Talip)
  • CollectionBook (Talip) #8
  • CommentItem(Yhtyyar) #24
  • CommentList(Yhtyyar) #25
  • Markdown (Talip) #30
  • MasonryGrid (Yhtyyar) #23
  • Navigate
  • PageTitle (Yhtyyar) #22
  • Pagination (Talip) #21
  • ShareButtons (Talip) #17
  • SocialButtons
• CARDS
  • ArtCard (Talip) #34
  • UserCard (Talip) #28
  • BlogCard (Talip) #27
  • Card(Yhtyyar) #26

Current page: https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/pages/club/collection/%5Bslug%5D.js

Tasks

• Use CollectionBook component in monorepo for Collection
• Create services getCollection and getCollectionPaths in libs/utils/src/services/collection
• You can create CollectionTemplate without the Layout like we have done for other templates.

Move this page from wsvvrijheid to monorepo

Move the following serverless pages from wsvvrijheid to monorepo.

• api/auth
  • social-auth/[provider].js
  • forgot-password.js
  • login.js
  • logout.js
  • register.js
  • reset-password.js
  • user.js

Reference for API Routes in TypeScript: https://nextjs.org/docs/basic-features/typescript#api-routes

Note: As we will be using some of these pages in other projects as well, I would recommend this approach:

We can import the request parts of the handler from services. For example

const loginRoute = async (req, res) => {
  const { identifier, password } = req.body

  try {
    // create getAuth in libs/services/auth/getAuth.ts
    const auth = getAuth(identifier, password)  // from service

    req.session = auth
    await req.session.save()
    res.json(auth)
  } catch (error) {
    console.error('error', error.response?.data || error)
    ...
}

This modal will be triggered when an editor clicks on an ArtCard.

Design link: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=802%3A10309

Tasks

• Create component in folder libs/ui/src/admin/ArtApprovalModal
• Create ArtApprovalForm component in separate file in the same folder.
• Image must be objectFit='contain', because editor should always be able to see whole image.
• All actions should be given via props
  • onReject - onApprove - onDelete
  • onReject and onApprove mutations should receive art id, feedback, editor id parameters.
• Create a component story and just show window.alert for each mutation. Just put a button in the story to open ArtApprovalModal

Tasks

• Create AdminLoginForm in libs/ui/src/admin/AdminLoginForm
  It's a simpler version of shared LoginForm. We don't need SocialLogin
• Create AdminLoginTemplate and story for it in libs/ui/templates/AdminLoginTemplate
  LoginForm + fullheight Image. Think about mobile size.
• Move AdminLoginTemplate to login.tsx page

Important: Do not apply custom styles, colors for the buttons and inputs as we will later adjust the design through the global theme. You can just specify the variants as ghost, solid etc. We consider primary color as green for the admin theme.

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=806%3A9983
Related: #37

We have NewsCardBase component. We need to add functionality based on this component. We can do it in 2 ways:

1. Create NewsCard component as a wrapper of the base component:

const NewsCard = ({ news, userId, ...rest }) => {
  const recommendMutation = useMutation({
    mutationKey: ['recommend-topic'],
    // props.news can be passed as mutation body
    mutationFn: () => createMutation<RecommendedTopic, RecommendedTopicCreateInput>(`api/recommended-topics`, { 
      ...news, recommender: userId
    })
  })

  return (
    <NewsCardBase news={news} {...rest} onRecommend={bookmarkMutation.mutate} />
  )
}

2. Put all the functionality and mutations in NewsCardBase

<ActionButton onClick={recommendMutation.mutate}>
  Recommend
</ActionButton>

You can modify the component by adding all the functionalities needed. Then you need to rename NewsCardBase to NewsCard in this case.

In both cases you need to update the stories and especially in Grid view, we need to be able to use all the functionalities on the card.

We need to implement the following functionalities:

• Share (onShare)
• Recommend to admin (onRecommend)
• Bookmark for yourself (onBookmark)
• View in a window (onView)

Move join form from wsvvrijheid to monorepo
url: https://wsvvrijheid.nl/terms
current page :https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/pages/terms.js

• use Markdown
• Data fetching and mutation operations will be done with request

1- Create News

2- Recreate twit

3- Create user for human right page

4- Create caps

5- Administrator page
No Design

6- Bookmark page (saved news and tweets)
No Design

7- Super Admin page
İncludes rolles and persons
No Design

Move publish.js and unpublish.js to libs/utils/services/art. Convert them to TS

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=1053%3A11843

This component is quite complex. Plase check the prototype for the expecting result.

Tasks

• ...

React query announced v4. It's better to keep it up to date.

Migration notes https://tanstack.com/query/v4/docs/guides/migrating-to-react-query-4

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=806%3A9983

Tasks

• Create component in libs/ui/src/admin/NewsCard
• Component has 2 variants: horizontal, vertical
• Horizontal variant should always look like vertical variant in small viewports.
• Description should be able to be hidden
• Open the news in a new small window instead of iframe.

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=836%3A11573

Tasks

• Create component in libs/ui/src/admin/CardBase folder
• Create story file. Show Single card and CardGrid examples. Story can have the following decorator:

decorators: [
  Story => (
    <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={4}>
      <Story />
    </SimpleGrid>
  )
]

Design: https://wsvvrijheid.nl/platforms

• The old site's Platforms page will be migrated to the new repo as typescript.
• Platforms will be taken from the Strapi and listed.

See the template is created libs/ui/templates/PlatformTemplate and how it is used in apps/foundation/pages/platform/[code]. You should do the similar thing.

Clicking on each card will go to the relevant detail page

• academy
• samenvvv
• lotus
• art-stop

TODOS

• Convert platform/inde.js to libs/ui/templates/PlatformsTemplate/PlatformsTemplate.tsx without Layout
• Create PlatformsTemplate.stories.tsx and test it with
• Create apps/foundation/pages/platform/index.tsx and put your PlatformsTemplate inside Layout

Club page in the current site: https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/pages/club/index.js

Tasks

Services

• Create getArtCategories and useArtCategories in libs/utils/src/services/category
  This functions should return all the categories that are related to approved arts. We want to allow user to be able to filter the arts by category.
• Skip useAuth for now. You can use auth as const auth = { user: null, isLoggedIn: false, token: null }
• Create service instead of collection query useCollections and getAllCollections in libs/utils/src/services/collection
• Create useArts in typescript.
  (This seems a bit complex. It can fetch arts by category, by artist name or art title, page etc)

Hooks

• Move useChangeParams hook to libs/ui/src/hooks (It can be improved)

Components

• Create CategoryFilterSkeleton and its story in libs/ui/src/components/CategoryFilter
• Create ArtClubSidebar component in libs/ui/src/components/ArtsSidebar and create story for it
• Create ArtClubTemplate and create story for it

In Admin layout, we have reusable PageHeader component in which we can render search, filter, sort and language swithc elements.

• Review and try to get familiar with useArts and getArts functions.
• Add extra filter (status). The field corresponding to status is approvalStatus in the backend.

Filtering in Strapi

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=851%3A11634

Tasks

• Create component in libs/ui/src/admin/TweetCard/TweetCardBase.tsx
• Create stories in libs/ui/src/admin/TweetCard/TweetCardBase.stories.tsx

• The old site's activities page will be migrated to the new repo as typescript.
• React-Query activities will be taken from the Strapi and listed.
  Design: https://wsvvrijheid.nl/activities

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=1120%3A11928

Tasks

• Create branch <username>/responsive-card
• Create a single responsive card component matches the design above
• Use packages/ui/src/examples/E0_ResponsiveCard.tsx
• Use yarn storybook and check your result inResponsiveCard.stories.tsx.
• Dimensions/spaces do not have to be the same as specified in the design. If you still want to apply exactly the same design, you can log in to be able to see more details on Figma

You can read #47 (comment) to learn more about how ChakraUI responsive styles are being used.

Waiting for #111

CollectionCreateFrom

• create collection
• edit collection
• delete collection
• A form will be created to create and update the collection. Design and details will be added later

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=1150%3A12569

Tasks

1. AdminNavItem

• Create AdminNav components in libs/ui/src/admin/AdminNav and AdminNav folder includes
• AdminNavItem.tsx
• AdminNavItem.stories.tsx
• AdminNav.tsx
• AdminNav.stories.tsx
• types.ts
• index.ts
• Create AdminNavItem component. If menu has submenu, the component can be an Accordion or the best using Collapse Transition
• Nav Buttons are ghosts variant with gray.500 color (active button ise colorScheme='primary')

• Bonus: You can investigate how to change colorScheme based on the current link with next/router (active state)

export type AdminNavItemProps = {
  label: string
  link: string
  submenu?: NavItemProps[]
} & ButtonProps // This will allow us to use `leftIcon` and other chakra props

2. AdminNav
You can create a navItems array to render NavItemProps in a map.

const navItems = [
  {
    label: 'Dashboard',
    link: '/',
    icon: MdOutlineSpaceDashboard
  },
  // ... other menu items
]

3. AdminSidebar

• Create AdminSidebar component in libs/ui/src/admin/AdminSidebar. Use AdminNav in the sidebar component
• Sidebar is a Stack with props w={300} py={8} px={4} bg="white" spacing={8}

• Homepage
• #75
• #73
• #78
• #77
• #79
• #76
• Avtivities
  • index #65
  • [slug] #94
• Blog
  • index. #80
  • [slug]. #81
• Club
  • index #102
  • art
    • [slug] #74
  • Artist
    • [username]
  • Collection
    • index #103
    • [slug] #104
• Platforms
  • index #67
  • [code]
• #162
• User
  • login
  • register#166

We need a table component on some admin pages (post, general translations etc).

TanStack Table (formerly react-table) provides a table component with built-in advanced features.

There is also an example of chakra-ui integration: https://chakra-ui.com/getting-started/with-react-table

Tasks

• ...

Move privacy page from wsvvrijheid to monorepo
url: https://wsvvrijheid.nl/privacy

Current page :https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/pages/privacy.js
Example page: https://github.com/wsvvrijheid/monorepo/blob/main/apps/foundation/pages/terms.tsx

Move blog page from wsvvrijheid to monorepo
url: https://wsvvrijheid.nl/tr/blog
current page : https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/pages/blog/index.js

• AnimatedBox component will be used.
  - https://github.com/wsvvrijheid/monorepo/tree/main/libs/ui/src/components/AnimatedBox
• BlogCard component will be used.
  - https://github.com/wsvvrijheid/monorepo/tree/main/libs/ui/src/components/BlogCard
• Data fetching and mutation operations will be done with react-query

Desing: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=974%3A12136

This issue is prepared in the branch feat/example-chakra-react-query. You need to rename the branch by adding your username before creating a pull request.

Tasks

1. Chakra Playground

• Pull the branch origin/feat/example-chakra-react-query
  (git checkout -q --track origin/feat/example-chakra-react-query)
• Rename the branch with your username:
  git branch -m feat/example-chakra-react-query feat/example-chakra-react-query-<username>
• Button sizes are md (default) in desktop and lg in small devices.
  (Keep in mind, responsive styling are only valid for plain css attributes, like width, margin, color etc. size is a custom non-css chakra prop. You can use useBreakpointValue to make non-css props responsive.
  const size = useBreakpointValue({ base: "md", lg: "lg" }) or
  const size = useBreakpointValue(["md", null, null, "lg"])
• onSend action should be passed through prop. You will be testing onSend action in story.
• Alert component will be shown after the form is submitted (error or success statuses).

2. React Query

• Review how react-query useMutation is used in ChakraBreakpointReactQueryExample.stories.tsx

Move volunteer page from wsvvvrijheid to monorepo
url:https://wsvvrijheid.nl/volunteers
current page : https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/pages/volunteers.js

• Use VolunteerCard for UserCard component
• Move useVolunteers and getVolunteers services in libs/utils/services/volunteer/getAll.ts
• Create VolunteersTemplate.tsx in libs/ui/templates/VolunteersTemplate/VolunteersTemplate.tsx. Write volunteers.js page in TypeScript in VolunteersTemplate.tsx without Layout. (Layout will be wrapper in foundation/pages/volunteers.tsx)
• In getStaticProps replace the following line with getVolunteers service:

// const volunteersResponse = await request({ url: 'api/volunteers', filters: { approved: { $eq: true } } })
const volunteersResponse = await getVolunteers()

Design: https://wsvvrijheid.nl/club/art/snow-1

• The old site's single art page will be written in TS.

See the template is created libs/ui/templates/PlatformTemplate and how it is used in apps/foundation/pages/platform/[code]. You should do the similar thing.

TODOS

• Convert club/art/[slug].js to libs/ui/templates/ArtTemplate/ArtTemplate.tsx without Layout
• Write useGetArts in TS and move to libs/utils/src/services/art/getBySlug.ts
  • I included other arts (by category) into the current art like { ...art, arts, . . . }. But it will be cleaner if you separate them out in different files (getArtBySlug and getArtsByCategory).
  • So I would move getArtsByCategory in a separate file and also I would add useArtsByCategory query in it. In the component you will fetch current art and category arts with different queries.
  • You should also prefetch getArtsByCategory in getStaticProps
• Don't include useViewArt in this issue.
• Create ArtTemplate.stories.tsx. (Story might not work if we can provide router.query.slug in the story in a proper way. So just create a query and we will figure out how can we provide router later)
• Create apps/foundation/pages/club/art/[slug].tsx and put your ArtsTemplate inside Layout
• Write getArtPaths function in TS and move it to libs/utils/src/services/art/getStaticPaths.ts. (Platforms service is an example)
• You can test if the page is working by running yarn start

Move Join Page from wsvvrijheid to monorepo
URL: https://wsvvrijheid.nl/join

Tasks

• Use PlatformList.tsx component for project-list.js (Project is renamed to Platform)
• Use JoinForm from ui components
• Create JoinTemplate in libs/ui/templates/JoinTemplate/JoinTemplate.tsx. Move join.js page to JoinTemplate without Layout (Layout will be wrapper in apps/foundation/pages/join.tsx)
• Create JoinTemplate.stories.tsx. Your mutations and queries should be inside the template. You can test them in story before using the template in app's join.tsx page.

Bonus:

 const projectsQuery = useQuery({
  queryKey: 'projects',
  queryFn: () => request({ url: `api/projects` }),
})

You can move it to services as getPlatforms and usePlatforms in libs/utils/services/platform/getAll.ts

IMPORTANT: This component has already been created. (see libs/ui/src/examples/StackExample) You can see how ChakraUI is used in our components. You can, however, create a new component in your own way.

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=835%3A11555

Create a responsive component by using ChakraUI Stack

• Image sizes:
  • Desktop = 400 x 300
  • Mobile = 100% x 200
• Box areas height
  • Blue 40px
  • Green 100% (fill)
  • Orange 40px
• Hide green area on mobile

• The old site's landing page will be migrated to the new repo as typescript.
  Design: https://wsvvrijheid.nl/

Move about us page from wsvvvrijeid to monorepo;
url: https://wsvvrijheid.nl/about-us
current page : https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/pages/about-us.js

about-us.json data is in libs/config/data

Move https://github.com/wsvvrijheid/wsvvrijheid/blob/develop/src/services/art/find.js to libs/utils/services/art/find.ts

ArtApprovalModal

• approve art

  • mandatory comment
  • sent email to user when approve

• reject art

  • mandatory comment
  • sent email to user when reject

• delete art

  • show dialog before the deleted (alert())
  • mandatory comment
  • sent email to user when delete

• edit art content

  • sent email to user when edit art content

• After the all of the event show dialog (You approved/rejected/deleted this art. Whould you like to go next art?(Button next art or cancel)) After the button pressed go to next artapprovalmodal

Design: https://www.figma.com/file/2KeHIr9IOh0HoCO89akiLn/WsvvUI?node-id=833%3A11557

This component is considered to be a reusable header component for some table and grid pages.

Component has the following parts:

• Title
• Search bar
• Filter menu button
• Sort menu button
• Action menu buttons

type PageHeaderProps = {
  title: string
  onSearch?: (value: string) => void
  filters?: Array<{ label: string; onClick: () => void }>
  sorts?: Array<{ label: string; onClick: () => void }>
  buttons?: Array<{ label: string; onClick: () => void }>
}

Tasks:

• Show component parts according to given props.
  • For example, show the search bar only if there is onSearch prop.
• Show menu list for filter and sort buttons. List array should be given as props. You can see an example filters prop for news page:

filters = [
  {
    label: "Bold",
    onClick: () => alert("Filter Bold news")
  },
   {
    label: "Nos",
    onClick: () => alert("Filter Nos news")
  }
]

Waiting for #111

We want to have generic zoomable image component. For now it's going to be used in ArtApprovalModal but we may use it somewhere else too.

I found an example repo. https://github.com/rpearce/react-medium-image-zoom. But there are many alternatives. You need to find a NextImage compatible zoom library. Otherwise you can use ChakraImage (import { Image } from '@chakra-ui/react') for zoom option in WImage. Make a conclusion with @MustafaTRKYLMZ about which library will meet our needs before starting implementation.

Tasks

• Extend WImage component with zoom feature. Activate zoom option if hasZoom prop is provided.
• Make sure if the zoom library is compatible with NextImage. We use NextImage in WImage. If the zoom library won't work with NextImage you should investigate to fix the problem. Two possibilities to fix it:
  1. Find NextImage compatible zoom library
  2. Use ChakraImage
• Add Zoom option in WImage.stories.tsx
• Update ArtApprovalModal with zoom feature
• Add Grid example in story

CollectionCreateFrom

• create collection
• edit collection
• delete collection
• A form will be created to create and update the collection. Design and details will be added later

ART PAGE

• Art Page
  • Header
    • No button
    • Search
    • LocaleSwitcher
    • Filter (user)
    • Sort (time, title)
  • Content
    • Tabs (approved - pending - rejected)
    • Pagination

COLLECTION PAGE

• Collection Page
  • Header
    • Button: Create Collection
    • Search
    • LocaleSwitcher
  • Content
    • Collection List
    • Pagination

COLLECTION MUTATIONS

TODO