From f034500403c358fa2ae644453ff367022848a828 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Fri, 10 May 2024 12:20:57 -0400 Subject: [PATCH 1/3] Add TeamGeneral block --- docs/blocks/Introduction.mdx | 1 + docs/blocks/administration/Introduction.mdx | 1 + docs/blocks/administration/Team.mdx | 230 ++++++++++++++++++++ docs/blocks/administration/TeamGeneral.tsx | 210 ++++++++++++++++++ src/form/Checkbox/CheckboxTheme.ts | 2 +- 5 files changed, 443 insertions(+), 1 deletion(-) create mode 100644 docs/blocks/administration/Team.mdx create mode 100644 docs/blocks/administration/TeamGeneral.tsx 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..f887a0ce --- /dev/null +++ b/docs/blocks/administration/Team.mdx @@ -0,0 +1,230 @@ +import { Meta, Unstyled } from '@storybook/addon-docs'; +import { TeamGeneral } from './TeamGeneral'; +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 + + + + + + + + +
+ +
+ + + ); +}; + + ``` + + + diff --git a/docs/blocks/administration/TeamGeneral.tsx b/docs/blocks/administration/TeamGeneral.tsx new file mode 100644 index 00000000..e47886cd --- /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/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' } From 51198aaa3099b235a2711f82be5d59eebaf168e1 Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Mon, 13 May 2024 12:52:25 -0400 Subject: [PATCH 2/3] Add TeamRoles block --- docs/blocks/administration/Team.mdx | 356 +++++++++++++++++++++ docs/blocks/administration/TeamGeneral.tsx | 4 +- docs/blocks/administration/TeamRoles.tsx | 343 ++++++++++++++++++++ 3 files changed, 701 insertions(+), 2 deletions(-) create mode 100644 docs/blocks/administration/TeamRoles.tsx diff --git a/docs/blocks/administration/Team.mdx b/docs/blocks/administration/Team.mdx index f887a0ce..76f53ab9 100644 --- a/docs/blocks/administration/Team.mdx +++ b/docs/blocks/administration/Team.mdx @@ -1,5 +1,6 @@ import { Meta, Unstyled } from '@storybook/addon-docs'; import { TeamGeneral } from './TeamGeneral'; +import { TeamRoles } from './TeamRoles'; import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; @@ -228,3 +229,358 @@ export const TeamGeneral: FC = () => { +
+ + + + + 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} +
+ 		+ + + + + + + + + + + + +
+
+
+
+ + + ); +}; + + ``` + + + diff --git a/docs/blocks/administration/TeamGeneral.tsx b/docs/blocks/administration/TeamGeneral.tsx index e47886cd..57ccb2b0 100644 --- a/docs/blocks/administration/TeamGeneral.tsx +++ b/docs/blocks/administration/TeamGeneral.tsx @@ -85,8 +85,8 @@ export const TeamGeneral: FC = () => {
- - +
+ {Array(10) .fill({ name: 'Austin McDaniel', diff --git a/docs/blocks/administration/TeamRoles.tsx b/docs/blocks/administration/TeamRoles.tsx new file mode 100644 index 00000000..2a0d2e93 --- /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} +
+ 		+ + + + + + + + + + + + +
+
+
+ + + + ); +}; From ba636fe90147750543690646a0505238a04c554d Mon Sep 17 00:00:00 2001 From: Grant Steffen Date: Mon, 13 May 2024 16:00:17 -0400 Subject: [PATCH 3/3] Add TeamMinimal block --- docs/blocks/administration/Team.mdx | 265 +++++++++++++++++++++ docs/blocks/administration/TeamGeneral.tsx | 8 +- docs/blocks/administration/TeamMinimal.tsx | 249 +++++++++++++++++++ docs/blocks/administration/TeamRoles.tsx | 42 ++-- 4 files changed, 539 insertions(+), 25 deletions(-) create mode 100644 docs/blocks/administration/TeamMinimal.tsx diff --git a/docs/blocks/administration/Team.mdx b/docs/blocks/administration/Team.mdx index 76f53ab9..2cc0c403 100644 --- a/docs/blocks/administration/Team.mdx +++ b/docs/blocks/administration/Team.mdx @@ -1,6 +1,7 @@ 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'; @@ -584,3 +585,267 @@ export const TeamRoles: FC = () => { +
+ + + + + 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 index 57ccb2b0..89b2a115 100644 --- a/docs/blocks/administration/TeamGeneral.tsx +++ b/docs/blocks/administration/TeamGeneral.tsx @@ -99,7 +99,7 @@ export const TeamGeneral: FC = () => { className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-panel-secondary-content" key={index} > - + { }} /> - +
{user.name}
- +
{ {user.email}
- +
( + + + + + + + + + + + + + + + + + + +); + +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 index 2a0d2e93..7034cb8f 100644 --- a/docs/blocks/administration/TeamRoles.tsx +++ b/docs/blocks/administration/TeamRoles.tsx @@ -79,7 +79,7 @@ export const TeamRoles: FC = () => { - - - - - + + + + @@ -115,7 +115,7 @@ export const TeamRoles: FC = () => { className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-panel-secondary-content" key={index} > - - - - -
+ { } /> NameEmailDate AddedNameEmailDate Added
+ { }} /> +
{user.name}
+
{ {user.email}
+
{ {user.dateAdded}
+ { -
+
Users (12)

@@ -214,7 +214,7 @@ export const TeamRoles: FC = () => { - - - - - + + + + @@ -250,7 +250,7 @@ export const TeamRoles: FC = () => { className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-panel-secondary-content" key={index} > - - - - -
+ { } /> NameEmailDate AddedNameEmailDate Added
+ { }} /> +
{user.name}
+
{ {user.email}
+
{ {user.dateAdded}
+