Epic 2 UI: My Organizations user table, Inviting new users (fixed package.json)

frontend/.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": ["next", "next/core-web-vitals", "prettier"]
+  "extends": ["next", "next/core-web-vitals", "prettier"],
+  "rules": {
+    "react/no-unescaped-entities": "off",
+    "@next/next/no-page-custom-font": "off",
+    "@next/next/no-img-element": "off"
+  }
 }

frontend/compositions/dashboard-header/dashboard-header.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react"
-import { ComponentStory, ComponentMeta } from "@storybook/react"
+import { StoryFn, Meta } from "@storybook/react"
 import { DashboardHeader } from ".."
 
 export default {
   title: "Compositions/Header",
   component: DashboardHeader
-} as ComponentMeta<typeof DashboardHeader>
+} as Meta<typeof DashboardHeader>
 
-const Template: ComponentStory<typeof DashboardHeader> = (args) => <DashboardHeader {...args} />
+const Template: StoryFn<typeof DashboardHeader> = (args: any) => <DashboardHeader {...args} />
 
 export const Default = Template.bind({})
 Default.parameters = {

frontend/compositions/profile-info/profile-info.stories.tsx

@@ -8,7 +8,7 @@ export default {
   component: ProfileInfo
 } as ComponentMeta<typeof ProfileInfo>
 
-const Template: ComponentStory<typeof ProfileInfo> = (args) => <ProfileInfo {...args} />
+const Template: ComponentStory<typeof ProfileInfo> = (args: any) => <ProfileInfo {...args} />
 
 export const Default = Template.bind({})
 Default.args = {

frontend/compositions/profile-orguser/invite-user/invite-user-btn.tsx

@@ -0,0 +1,26 @@
+import classNames from "classnames"
+import { Dialog as D, PrimaryButton } from "../../../shared-components"
+import styles from "./invite-user-button.module.css"
+import InviteUserForm from "./invite-user-form"
+
+interface InviteUserBtnProps {
+  btnClassName?: string
+}
+
+export default function InviteUserBtn({ btnClassName }: InviteUserBtnProps) {
+  const { triggerBtn } = styles
+
+  return (
+    <D.Root>
+      <D.Trigger asChild>
+        <PrimaryButton className={classNames(triggerBtn, btnClassName)}>Invite User</PrimaryButton>
+      </D.Trigger>
+      <D.Content>
+        <D.Header>
+          <D.Title>Invite User</D.Title>
+        </D.Header>
+        <InviteUserForm />
+      </D.Content>
+    </D.Root>
+  )
+}

frontend/compositions/profile-orguser/invite-user/invite-user-button.module.css

@@ -0,0 +1,5 @@
+.triggerBtn {
+  font-size: var(--size16);
+  font-weight: bold;
+  min-width: max-content;
+}

frontend/compositions/profile-orguser/invite-user/invite-user-form.tsx

@@ -0,0 +1,80 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useState } from "react"
+import { FieldValues, useForm } from "react-hook-form"
+import { z } from "zod"
+import { Dialog as D, Form as F, Input, PrimaryButton } from "../../../shared-components"
+import styles from "./create-organization-form.module.css"
+import { Select as S } from "../../../shared-components"
+
+interface SelectRoleProps {
+  value: string
+  onChange(...event: any[]): void
+}
+
+function SelectRole({ value, onChange }: SelectRoleProps) {
+  return (
+    <S.Root value={value} onValueChange={onChange}>
+      <S.Trigger>
+        <S.Value placeholder="Pick a role" />
+      </S.Trigger>
+      <S.Content>
+        <S.Item value="Publisher">Publisher</S.Item>
+        <S.Item value="Member">Member</S.Item>
+        <S.Item value="Admin">Admin</S.Item>
+        <S.Item value="Subscriber">Subscriber</S.Item>
+      </S.Content>
+    </S.Root>
+  )
+}
+
+type InviteUserSchema = z.infer<typeof inviteUserSchema>
+
+const inviteUserSchema = z.object({
+  userEmail: z.string().min(1, "Enter user email"),
+  role: z.string()
+})
+
+export default function InviteUserForm() {
+  const formMethods = useForm<InviteUserSchema>({
+    resolver: zodResolver(inviteUserSchema),
+    defaultValues: {
+      userEmail: "",
+      role: ""
+    }
+  })
+  const [formCanSubmit, setFormCanSubmit] = useState(true)
+
+  return (
+    <F.Root formMethods={formMethods}>
+      <F.Field
+        control={formMethods.control}
+        name="userEmail"
+        render={({ field }) => (
+          <F.Item>
+            <F.Label>User Email</F.Label>
+            <F.Control>
+              <Input type="text" {...field} />
+            </F.Control>
+            <F.Message />
+          </F.Item>
+        )}
+      />
+      <F.Field
+        control={formMethods.control}
+        name="role"
+        render={({ field }) => (
+          <F.Item>
+            <F.Label>Choose a role</F.Label>
+            <F.Control>
+              <SelectRole value={field.value} onChange={field.onChange} />
+            </F.Control>
+            <F.Message />
+          </F.Item>
+        )}
+      />
+      <D.Footer>
+        <PrimaryButton type="submit">Invite User</PrimaryButton>
+      </D.Footer>
+    </F.Root>
+  )
+}

frontend/compositions/profile-orguser/profile-orguser.module.css

@@ -0,0 +1,48 @@
+.container {
+  flex: 1;
+}
+
+.buttonrow {
+  display: flex;
+}
+.buttonrow1 {
+  display: inline-flex;
+}
+.buttonrow1 > * {
+  margin-right: 10px; /* Add margin to all child elements */
+}
+
+.buttonrow1 > *:last-child {
+  margin-right: 0; /* Remove margin from the last child */
+}
+
+.buttonrow2 {
+  display: inline-flex;
+  margin-left: auto;
+}
+.invisiblebtn {
+  border: none;
+  font-size: var(--size16);
+  font-weight: bold;
+  /* padding: 5% 10%; */
+  background-color: var(--white);
+  color: darkblue;
+}
+
+.visiblebtn {
+  align-items: center;
+  border: none;
+  font-size: var(--size16);
+  font-weight: bold;
+  padding: 5% 10%;
+  background-color: var(--darkBlue);
+  color: white;
+}
+
+.invitebtn {
+  margin: 0;
+  font-size: var(--size16);
+  /* padding: 5% 10%; */
+  background-color: var(--darkBlue);
+  color: white;
+}

frontend/compositions/profile-orguser/profile-orguser.tsx

@@ -0,0 +1,115 @@
+import styles from "./profile-orguser.module.css"
+import { DataTable } from "../../shared-components/data-table/data-table"
+import { Column } from "react-table"
+import ToggleDropDown from "../../shared-components/toggle-dropdown/toggle-dropdown"
+import { useState } from "react"
+import InviteUserBtn from "./invite-user/invite-user-btn"
+import {
+  orgUsers,
+  CurrentOrgUsers,
+  actionOptions,
+  changeRoleOptions,
+  organizationOptions,
+  userOptions
+} from "../../models/organization-user"
+
+export default function OrgUserTable() {
+  //to show or not to show toggle button
+  const [showToggle, setShowToggle] = useState<boolean>(false)
+
+  const [selectedRowsId, setSelectedRowsId] = useState<CurrentOrgUsers["id"][]>([])
+
+  function handleSelected(id: CurrentOrgUsers["id"]) {
+    if (selectedRowsId.includes(id)) {
+      setSelectedRowsId(selectedRowsId.filter((rowId) => rowId !== id))
+      if (selectedRowsId.length === 1) {
+        setShowToggle(false)
+      }
+    } else {
+      setSelectedRowsId([...selectedRowsId, id])
+      setShowToggle(true)
+    }
+  }
+
+  const lawyerUserColumns: Column<CurrentOrgUsers>[] = [
+    {
+      Header: "Select",
+      accessor: "select",
+      Cell: ({ row }) => {
+        return (
+          <input
+            type="checkbox"
+            checked={selectedRowsId.includes(row.original.id)}
+            onChange={() => handleSelected(row.original.id)}
+          />
+        )
+      },
+      id: "select"
+    },
+    {
+      Header: "User",
+      accessor: "user",
+      id: "user"
+    },
+    {
+      Header: "Role",
+      accessor: "role",
+      id: "role"
+    },
+    {
+      Header: "Status",
+      accessor: "status",
+      id: "status"
+    },
+    {
+      Header: "Action",
+      accessor: "action",
+      id: "action"
+    }
+  ]
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}></div>
+      <div className={styles.buttonrow}>
+        <div className={styles.buttonrow1}>
+          <ToggleDropDown
+            className={styles.visiblebtn}
+            title="Organizations"
+            options={organizationOptions}
+            editChange={null}
+          />
+          <ToggleDropDown
+            className={styles.visiblebtn}
+            title="Users"
+            options={userOptions}
+            editChange={null}
+          />
+        </div>
+        <div className={styles.buttonrow2}>
+          {showToggle && (
+            <>
+              <ToggleDropDown
+                className={styles.invisiblebtn}
+                title="Action"
+                options={actionOptions}
+                editChange={null}
+              />
+              <ToggleDropDown
+                className={styles.invisiblebtn}
+                title="Change Roles"
+                options={changeRoleOptions}
+                editChange={null}
+              />
+            </>
+          )}
+
+          <InviteUserBtn btnClassName={styles.invitebtn} />
+        </div>
+      </div>
+      <div className={styles.table}>
+        <DataTable tableName="Users" columns={lawyerUserColumns} data={orgUsers} />
+      </div>
+    </div>
+  )
+}

frontend/compositions/profile-type/profile-type.stories.tsx

@@ -7,6 +7,6 @@ export default {
   component: ProfileType
 } as ComponentMeta<typeof ProfileType>
 
-const Template: ComponentStory<typeof ProfileType> = (args) => <ProfileType {...args} />
+const Template: ComponentStory<typeof ProfileType> = (args: any) => <ProfileType {...args} />
 
 export const Default = Template.bind({})

frontend/models/mock-data/orgusers.tsx

@@ -0,0 +1,40 @@
+import { Row } from "react-table"
+
+export const userRows = [
+  {
+    select: false,
+    user: "Angel Z",
+    role: "",
+    dateJoin: "",
+    status: "",
+    Action: "",
+    id: 1
+  },
+  {
+    select: false,
+    user: "Angel Z",
+    role: "",
+    dateJoin: "",
+    status: "",
+    Action: "",
+    id: 2
+  },
+  {
+    select: false,
+    user: "",
+    role: "",
+    dateJoin: "",
+    status: "",
+    Action: "",
+    id: 3
+  },
+  {
+    select: false,
+    user: "",
+    role: "",
+    dateJoin: "",
+    status: "",
+    Action: "",
+    id: 4
+  }
+]