diff --git a/docs/blocks/Introduction.mdx b/docs/blocks/Introduction.mdx index 2a3ee895..ddeb8fcf 100644 --- a/docs/blocks/Introduction.mdx +++ b/docs/blocks/Introduction.mdx @@ -22,3 +22,4 @@ We offer the following blocks: - [Profile](?path=/docs/blocks-administration-profile--docs) - [Pricing](?path=/docs/blocks-administration-pricing--docs) - [Billing](?path=/docs/blocks-administration-billing--docs) + - [Team](?path=/docs/blocks-administration-team--docs) diff --git a/docs/blocks/administration/Introduction.mdx b/docs/blocks/administration/Introduction.mdx index 851c4db8..a58fc9e9 100644 --- a/docs/blocks/administration/Introduction.mdx +++ b/docs/blocks/administration/Introduction.mdx @@ -9,3 +9,4 @@ We offer the following blocks to help you build your administration pages: - [Profile](?path=/docs/blocks-administration-profile--docs) - [Pricing](?path=/docs/blocks-administration-pricing--docs) - [Billing](?path=/docs/blocks-administration-billing--docs) +- [Team](?path=/docs/blocks-administration-team--docs) diff --git a/docs/blocks/administration/Team.mdx b/docs/blocks/administration/Team.mdx new file mode 100644 index 00000000..2cc0c403 --- /dev/null +++ b/docs/blocks/administration/Team.mdx @@ -0,0 +1,851 @@ +import { Meta, Unstyled } from '@storybook/addon-docs'; +import { TeamGeneral } from './TeamGeneral'; +import { TeamRoles } from './TeamRoles'; +import { TeamMinimal } from './TeamMinimal'; +import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; + + + +# Team +The Team blocks provide a comprehensive view of team members and their roles within the organization. This block can be used manage team and assign roles and permissions. + + + + + + Demo + + + Code + + + +
+ +
+ + + ```tsx +import React, { FC, useState } from 'react'; +import { motion } from 'framer-motion'; +import { Card, Tabs, Tab, TabList, TabPanel, Avatar, Button, IconButton, Checkbox, CheckboxTheme, checkboxTheme as defaultCheckboxTheme, Stack } from 'reablocks'; + +export const TeamGeneral: FC = () => { + const [checkedUsers, setCheckedUsers] = useState([]); + + const checkboxTheme: CheckboxTheme = { + ...defaultCheckboxTheme, + check: 'stroke-white', + boxVariants: { + ...defaultCheckboxTheme.boxVariants, + checked: { + fill: 'hsl(var(--twc-primary))', + stroke: 'hsla(var(--twc-primary))' + }, + unchecked: { + fill: 'transparent', + stroke: 'hsl(var(--twc-surface))' + } + } + }; + + return ( + + +
+
+

General

+

+ Effectively manage your team's workflow with our intuitive + application. Streamline task delegation, monitor progress, and + foster seamless collaboration among team members. Stay informed, + stay connected, and drive productivity with ease. +

+
+ + + Account Details + Users + Billing + Integrations + Notifications + + + +
+
+ Users + + Manage user accounts, permissions, and access levels within + the app to ensure smooth operation and security. + +
+ +
+
+ + + {Array(10) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + role: 'Admin' + }) + .map((user, index) => ( + <> + + + + + + + + ))} + +
+ { + if (checked) { + setCheckedUsers([...checkedUsers, index]); + } else { + setCheckedUsers( + checkedUsers.filter(i => i !== index) + ); + } + }} + /> + +
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+
+ + + + {user.role} +
+
+
+
+ + Showing 10 of 25 + + + + + + + + + + 1 + + + 2 + + + 3 + + + + + + + + +
+ +
+ + + ); +}; + + ``` + + + +
+ + + + + Demo + + + Code + + + +
+ +
+ + + ```tsx +import { motion } from 'framer-motion'; +import React, { FC, useState } from 'react'; +import { Avatar, Button, Card, Checkbox, CheckboxTheme, checkboxTheme as defaultCheckboxTheme, Divider, IconButton, Stack } from 'reablocks'; + +export const TeamRoles: FC = () => { + const [checkedUsers, setCheckedUsers] = useState([]); + const [checkedAdmins, setCheckedAdmins] = useState([]); + + const checkboxTheme: CheckboxTheme = { + ...defaultCheckboxTheme, + check: 'stroke-white', + boxVariants: { + ...defaultCheckboxTheme.boxVariants, + checked: { + fill: 'hsl(var(--twc-primary))', + stroke: 'hsla(var(--twc-primary))' + }, + unchecked: { + fill: 'transparent', + stroke: 'hsl(var(--twc-surface))' + } + } + }; + + return ( + + +
+
+
+

Team Members

+ + Manage user accounts, permissions, and access levels within the + app to ensure smooth operation and security. + +
+ +
+ +
+
+ Admins (3) +

+ Manage user accounts, permissions, and access levels within the + app to ensure smooth operation and security. +

+
+
+ + + + + + + + + + + + {Array(3) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + dateAdded: new Date().toLocaleDateString() + }) + .map((user, index) => ( + <> + + + + + + + + + ))} + +
+ + setCheckedAdmins( + checked + ? Array(3) + .fill(0) + .map((_, i) => i) + : [] + ) + } + /> + NameEmailDate Added
+ { + if (checked) { + setCheckedAdmins([...checkedAdmins, index]); + } else { + setCheckedAdmins( + checkedAdmins.filter(i => i !== index) + ); + } + }} + /> + +
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+
+ + + + {user.dateAdded} +
+ 		+ + + + + + + + + + + + +
+
+
+ +
+
+ Users (12) +

+ Manage user accounts, permissions, and access levels within the + app to ensure smooth operation and security. +

+
+
+ + + + + + + + + + + + {Array(12) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + dateAdded: new Date().toLocaleDateString() + }) + .map((user, index) => ( + <> + + + + + + + + + ))} + +
+ + setCheckedUsers( + checked + ? Array(12) + .fill(0) + .map((_, i) => i) + : [] + ) + } + /> + NameEmailDate Added
+ { + if (checked) { + setCheckedUsers([...checkedUsers, index]); + } else { + setCheckedUsers( + checkedUsers.filter(i => i !== index) + ); + } + }} + /> + +
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+
+ + + + {user.dateAdded} +
+ 		+ + + + + + + + + + + + +
+
+
+
+ + + ); +}; + + ``` + + + +
+ + + + + Demo + + + Code + + + +
+ +
+ + + ```tsx +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; +import { Avatar, Button, IconButton, Input, Card, Divider, Stack, Tab, TabList, TabPanel, Tabs } from 'reablocks' + +const GoodCodeLogo = () => ( + + + + + + + + + + + + + + + + + + +); + +export const TeamMinimal: FC = () => { + return ( + + +
+ + + Account + Users + Billing + Integrations + Notifications + + + + + + } + containerClassname="max-w-[200px]" + placeholder="Search teams, users..." + /> +
+ +
+
+ On teams + + You're currently on these teams. + +
+ +
+
+
+
+ + Good Code +
+ +
+ +
+
+ + Good Code +
+ +
+
+
+ Your team + + Manage your existing team and change roles/permissions. + +
+
+ + + + + + + + + + {Array(12) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + dateAdded: new Date().toLocaleDateString() + }) + .map((user, index) => ( + <> + + + + + + + ))} + +
NameEmail
+
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+ + + + +
+
+
+ + Showing 10 of 25 + + + + + + + + + + 1 + + + 2 + + + 3 + + + + + + + + +
+ + + + ); +}; + + ``` + + + diff --git a/docs/blocks/administration/TeamGeneral.tsx b/docs/blocks/administration/TeamGeneral.tsx new file mode 100644 index 00000000..89b2a115 --- /dev/null +++ b/docs/blocks/administration/TeamGeneral.tsx @@ -0,0 +1,210 @@ +import React, { FC, useState } from 'react'; +import { motion } from 'framer-motion'; + +import { Card } from '../../../src/layout/Card'; +import { Tabs, Tab, TabList, TabPanel } from '../../../src/layout/Tabs'; +import { Avatar } from '../../../src/elements/Avatar'; +import { Button } from '../../../src/elements/Button'; +import { IconButton } from '../../../src/elements/IconButton'; +import { + Checkbox, + CheckboxTheme, + checkboxTheme as defaultCheckboxTheme +} from '../../../src/form/Checkbox'; +import { Stack } from '../../../src/layout/Stack'; + +export const TeamGeneral: FC = () => { + const [checkedUsers, setCheckedUsers] = useState([]); + + const checkboxTheme: CheckboxTheme = { + ...defaultCheckboxTheme, + check: 'stroke-white', + boxVariants: { + ...defaultCheckboxTheme.boxVariants, + checked: { + fill: 'hsl(var(--twc-primary))', + stroke: 'hsla(var(--twc-primary))' + }, + unchecked: { + fill: 'transparent', + stroke: 'hsl(var(--twc-surface))' + } + } + }; + + return ( + + +
+
+

General

+

+ Effectively manage your team's workflow with our intuitive + application. Streamline task delegation, monitor progress, and + foster seamless collaboration among team members. Stay informed, + stay connected, and drive productivity with ease. +

+
+ + + Account Details + Users + Billing + Integrations + Notifications + + + +
+
+ Users + + Manage user accounts, permissions, and access levels within + the app to ensure smooth operation and security. + +
+ +
+
+ + + {Array(10) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + role: 'Admin' + }) + .map((user, index) => ( + <> + + + + + + + + ))} + +
+ { + if (checked) { + setCheckedUsers([...checkedUsers, index]); + } else { + setCheckedUsers( + checkedUsers.filter(i => i !== index) + ); + } + }} + /> + +
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+
+ + + + {user.role} +
+
+
+
+ + Showing 10 of 25 + + + + + + + + + + 1 + + + 2 + + + 3 + + + + + + + + +
+ +
+ + + ); +}; diff --git a/docs/blocks/administration/TeamMinimal.tsx b/docs/blocks/administration/TeamMinimal.tsx new file mode 100644 index 00000000..ed213886 --- /dev/null +++ b/docs/blocks/administration/TeamMinimal.tsx @@ -0,0 +1,249 @@ +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; + +import { Avatar } from '../../../src/elements/Avatar'; +import { Button } from '../../../src/elements/Button'; +import { IconButton } from '../../../src/elements/IconButton'; +import { Input } from '../../../src/form/Input'; +import { Card } from '../../../src/layout/Card'; +import { Divider } from '../../../src/layout/Divider'; +import { Stack } from '../../../src/layout/Stack'; +import { Tab, TabList, TabPanel, Tabs } from '../../../src/layout/Tabs'; + +const GoodCodeLogo = () => ( + + + + + + + + + + + + + + + + + + +); + +export const TeamMinimal: FC = () => { + return ( + + +
+ + + Account + Users + Billing + Integrations + Notifications + + + + + + } + containerClassname="max-w-[200px]" + placeholder="Search teams, users..." + /> +
+ +
+
+ On teams + + You're currently on these teams. + +
+ +
+
+
+
+ + Good Code +
+ +
+ +
+
+ + Good Code +
+ +
+
+
+ Your team + + Manage your existing team and change roles/permissions. + +
+
+ + + + + + + + + + {Array(12) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + dateAdded: new Date().toLocaleDateString() + }) + .map((user, index) => ( + <> + + + + + + + ))} + +
NameEmail
+
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+ + + + +
+
+
+ + Showing 10 of 25 + + + + + + + + + + 1 + + + 2 + + + 3 + + + + + + + + +
+ + + + ); +}; diff --git a/docs/blocks/administration/TeamRoles.tsx b/docs/blocks/administration/TeamRoles.tsx new file mode 100644 index 00000000..7034cb8f --- /dev/null +++ b/docs/blocks/administration/TeamRoles.tsx @@ -0,0 +1,343 @@ +import { motion } from 'framer-motion'; +import React, { FC, useState } from 'react'; + +import { Avatar } from '../../../src/elements/Avatar'; +import { Button } from '../../../src/elements/Button'; +import { IconButton } from '../../../src/elements/IconButton'; +import { + Checkbox, + CheckboxTheme, + checkboxTheme as defaultCheckboxTheme +} from '../../../src/form/Checkbox'; +import { Card } from '../../../src/layout/Card'; +import { Divider } from '../../../src/layout/Divider'; +import { Stack } from '../../../src/layout/Stack'; + +export const TeamRoles: FC = () => { + const [checkedUsers, setCheckedUsers] = useState([]); + const [checkedAdmins, setCheckedAdmins] = useState([]); + + const checkboxTheme: CheckboxTheme = { + ...defaultCheckboxTheme, + check: 'stroke-white', + boxVariants: { + ...defaultCheckboxTheme.boxVariants, + checked: { + fill: 'hsl(var(--twc-primary))', + stroke: 'hsla(var(--twc-primary))' + }, + unchecked: { + fill: 'transparent', + stroke: 'hsl(var(--twc-surface))' + } + } + }; + + return ( + + +
+
+
+

Team Members

+ + Manage user accounts, permissions, and access levels within the + app to ensure smooth operation and security. + +
+ +
+ +
+
+ Admins (3) +

+ Manage user accounts, permissions, and access levels within the + app to ensure smooth operation and security. +

+
+
+ + + + + + + + + + + + {Array(3) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + dateAdded: new Date().toLocaleDateString() + }) + .map((user, index) => ( + <> + + + + + + + + + ))} + +
+ + setCheckedAdmins( + checked + ? Array(3) + .fill(0) + .map((_, i) => i) + : [] + ) + } + /> + NameEmailDate Added
+ { + if (checked) { + setCheckedAdmins([...checkedAdmins, index]); + } else { + setCheckedAdmins( + checkedAdmins.filter(i => i !== index) + ); + } + }} + /> + +
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+
+ + + + {user.dateAdded} +
+ 		+ + + + + + + + + + + + +
+
+
+ +
+
+ Users (12) +

+ Manage user accounts, permissions, and access levels within the + app to ensure smooth operation and security. +

+
+
+ + + + + + + + + + + + {Array(12) + .fill({ + name: 'Austin McDaniel', + email: 'austin@goodcode.us', + dateAdded: new Date().toLocaleDateString() + }) + .map((user, index) => ( + <> + + + + + + + + + ))} + +
+ + setCheckedUsers( + checked + ? Array(12) + .fill(0) + .map((_, i) => i) + : [] + ) + } + /> + NameEmailDate Added
+ { + if (checked) { + setCheckedUsers([...checkedUsers, index]); + } else { + setCheckedUsers( + checkedUsers.filter(i => i !== index) + ); + } + }} + /> + +
+ + {user.name} +
+ 		+
+ + + + {user.email} +
+ 		+
+ + + + {user.dateAdded} +
+ 		+ + + + + + + + + + + + +
+
+
+
+ + + ); +}; diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts index c949b016..2e9ca70f 100644 --- a/src/form/Checkbox/CheckboxTheme.ts +++ b/src/form/Checkbox/CheckboxTheme.ts @@ -57,7 +57,7 @@ const baseTheme: Partial = { 'flex items-center justify-center cursor-pointer focus-visible:outline-none', disabled: 'opacity-60 cursor-not-allowed', sizes: { - small: '[&>svg]:w-3 [&>svg]:min-h-3', + small: '[&>svg]:w-3 [&>svg]:h-3', medium: '[&>svg]:w-4 [&>svg]:h-4', large: '[&>svg]:w-5 [&>svg]:h-5' }