From 84de3b0c6529d12bd1f09d08786e7d104e6b399e Mon Sep 17 00:00:00 2001 From: cobycloud <25079070+cobycloud@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:04:37 -0600 Subject: [PATCH 001/168] 360-degree viewer --- .../360-DegreeImageViewer.css | 54 +++++++++++++++++++ .../360-DegreeImageViewer.stories.ts | 43 +++++++++++++++ .../360-DegreeImageViewer.tsx | 35 ++++++++++++ 3 files changed, 132 insertions(+) create mode 100644 libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.css create mode 100644 libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.stories.ts create mode 100644 libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.tsx diff --git a/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.css b/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.css new file mode 100644 index 00000000..4f72912b --- /dev/null +++ b/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.css @@ -0,0 +1,54 @@ + \ No newline at end of file diff --git a/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.stories.ts b/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.stories.ts new file mode 100644 index 00000000..52d5a34a --- /dev/null +++ b/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.stories.ts @@ -0,0 +1,43 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import DegreeImageViewer, { ImageViewerProps } from './360-DegreeImageViewer'; + +export default { + title: 'component/Media/360-DegreeImageViewer', + component: DegreeImageViewer, + tags: ['autodocs'], +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + images: Array.from({ length: 36 }, (_, i) => `/images/frame${i + 1}.jpg`), + isRotating: false, + isZoomed: false, + isLoading: false, +}; + +export const Rotating = Template.bind({}); +Rotating.args = { + ...Default.args, + isRotating: true, +}; + +export const Paused = Template.bind({}); +Paused.args = { + ...Default.args, + isRotating: false, +}; + +export const ZoomInOut = Template.bind({}); +ZoomInOut.args = { + ...Default.args, + isZoomed: true, +}; + +export const Loading = Template.bind({}); +Loading.args = { + ...Default.args, + isLoading: true, +}; \ No newline at end of file diff --git a/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.tsx b/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.tsx new file mode 100644 index 00000000..6288ed13 --- /dev/null +++ b/libs/react/src/components/360-DegreeImageViewer/360-DegreeImageViewer.tsx @@ -0,0 +1,35 @@ +import React, { useState, useEffect } from 'react'; + +interface ImageViewerProps { + images: string[]; + isRotating: boolean; + isZoomed: boolean; + isLoading: boolean; +} + +const DegreeImageViewer: React.FC = ({ images, isRotating, isZoomed, isLoading }) => { + const [currentIndex, setCurrentIndex] = useState(0); + + useEffect(() => { + if (isRotating) { + const interval = setInterval(() => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); + }, 100); + return () => clearInterval(interval); + } + }, [isRotating, images.length]); + + const zoomClass = isZoomed ? 'zoomed' : ''; + + return ( +
+ {isLoading ? ( +
Loading...
+ ) : ( + {`Frame + )} +
+ ); +}; + +export default DegreeImageViewer; \ No newline at end of file From d7f72cacf84b302b536d1a3354d476ed9bd808f5 Mon Sep 17 00:00:00 2001 From: cobycloud <25079070+cobycloud@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:04:46 -0600 Subject: [PATCH 002/168] accordion --- .../src/components/Accordion/Accordion.css | 67 +++++++++++++++++++ .../components/Accordion/Accordion.stories.ts | 39 +++++++++++ .../src/components/Accordion/Accordion.tsx | 35 ++++++++++ 3 files changed, 141 insertions(+) create mode 100644 libs/react/src/components/Accordion/Accordion.css create mode 100644 libs/react/src/components/Accordion/Accordion.stories.ts create mode 100644 libs/react/src/components/Accordion/Accordion.tsx diff --git a/libs/react/src/components/Accordion/Accordion.css b/libs/react/src/components/Accordion/Accordion.css new file mode 100644 index 00000000..9f4cc3e5 --- /dev/null +++ b/libs/react/src/components/Accordion/Accordion.css @@ -0,0 +1,67 @@ + \ No newline at end of file diff --git a/libs/react/src/components/Accordion/Accordion.stories.ts b/libs/react/src/components/Accordion/Accordion.stories.ts new file mode 100644 index 00000000..807cd964 --- /dev/null +++ b/libs/react/src/components/Accordion/Accordion.stories.ts @@ -0,0 +1,39 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Accordion from './Accordion'; + +export default { + title: 'component/Lists/Accordion', + component: Accordion, + tags: ['autodocs'], +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + title: 'Accordion Title', + content: 'This is the accordion content.', + isOpen: false, +}; + +export const Open = Template.bind({}); +Open.args = { + title: 'Accordion Title', + content: 'This is the accordion content.', + isOpen: true, +}; + +export const Closed = Template.bind({}); +Closed.args = { + title: 'Accordion Title', + content: 'This is the accordion content.', + isOpen: false, +}; + +export const Hover = Template.bind({}); +Hover.args = { + title: 'Accordion Title', + content: 'This is the accordion content.', + isOpen: false, +}; \ No newline at end of file diff --git a/libs/react/src/components/Accordion/Accordion.tsx b/libs/react/src/components/Accordion/Accordion.tsx new file mode 100644 index 00000000..12f3e9c8 --- /dev/null +++ b/libs/react/src/components/Accordion/Accordion.tsx @@ -0,0 +1,35 @@ +import React, { useState } from 'react'; + +interface AccordionProps { + title: string; + content: string; + isOpen?: boolean; +} + +const Accordion: React.FC = ({ title, content, isOpen = false }) => { + const [open, setOpen] = useState(isOpen); + + const toggleAccordion = () => { + setOpen(!open); + }; + + return ( +
+ + {open && ( +
+ {content} +
+ )} +
+ ); +}; + +export default Accordion; \ No newline at end of file From 4a79852e26dcb7319be2fde0591c9ab8cdb2cd82 Mon Sep 17 00:00:00 2001 From: cobycloud <25079070+cobycloud@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:04:54 -0600 Subject: [PATCH 003/168] react/ActionableList --- .../ActionableList/ActionableList.css | 66 +++++++++++++++++++ .../ActionableList/ActionableList.stories.ts | 45 +++++++++++++ .../ActionableList/ActionableList.tsx | 36 ++++++++++ 3 files changed, 147 insertions(+) create mode 100644 libs/react/src/components/ActionableList/ActionableList.css create mode 100644 libs/react/src/components/ActionableList/ActionableList.stories.ts create mode 100644 libs/react/src/components/ActionableList/ActionableList.tsx diff --git a/libs/react/src/components/ActionableList/ActionableList.css b/libs/react/src/components/ActionableList/ActionableList.css new file mode 100644 index 00000000..0d0c4a2a --- /dev/null +++ b/libs/react/src/components/ActionableList/ActionableList.css @@ -0,0 +1,66 @@ + \ No newline at end of file diff --git a/libs/react/src/components/ActionableList/ActionableList.stories.ts b/libs/react/src/components/ActionableList/ActionableList.stories.ts new file mode 100644 index 00000000..2e8e278e --- /dev/null +++ b/libs/react/src/components/ActionableList/ActionableList.stories.ts @@ -0,0 +1,45 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import ActionableList from './ActionableList'; + +export default { + title: 'component/Lists/ActionableList', + component: ActionableList, + tags: ['autodocs'], +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + items: [ + { id: 1, text: 'Item 1', actionLabel: 'Action' }, + { id: 2, text: 'Item 2', actionLabel: 'Action' }, + ], + onAction: (id) => alert(`Action triggered for item ${id}`), +}; + +export const Hover = Template.bind({}); +Hover.args = { + ...Default.args, +}; + +export const ActionTriggered = Template.bind({}); +ActionTriggered.args = { + ...Default.args, +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + items: [ + { id: 1, text: 'Item 1', actionLabel: 'Action', disabled: true }, + { id: 2, text: 'Item 2', actionLabel: 'Action', disabled: true }, + ], + onAction: (id) => alert(`Action triggered for item ${id}`), +}; + +export const Loading = Template.bind({}); +Loading.args = { + ...Default.args, + isLoading: true, +}; \ No newline at end of file diff --git a/libs/react/src/components/ActionableList/ActionableList.tsx b/libs/react/src/components/ActionableList/ActionableList.tsx new file mode 100644 index 00000000..1ca54354 --- /dev/null +++ b/libs/react/src/components/ActionableList/ActionableList.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +interface ActionableListItem { + id: number; + text: string; + actionLabel: string; + disabled?: boolean; +} + +interface ActionableListProps { + items: ActionableListItem[]; + onAction: (id: number) => void; + isLoading?: boolean; +} + +const ActionableList: React.FC = ({ items, onAction, isLoading = false }) => { + return ( +
    + {items.map((item) => ( +
  • + {item.text} + +
    • + ))} +
+ ); +}; + +export default ActionableList; \ No newline at end of file From 7c2cb2da0229eb062c7cb94029038606d27e3007 Mon Sep 17 00:00:00 2001 From: cobycloud <25079070+cobycloud@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:05:04 -0600 Subject: [PATCH 004/168] react/ActionSheet --- .../components/ActionSheet/ActionSheet.css | 73 +++++++++++++++++++ .../ActionSheet/ActionSheet.stories.ts | 51 +++++++++++++ .../components/ActionSheet/ActionSheet.tsx | 28 +++++++ 3 files changed, 152 insertions(+) create mode 100644 libs/react/src/components/ActionSheet/ActionSheet.css create mode 100644 libs/react/src/components/ActionSheet/ActionSheet.stories.ts create mode 100644 libs/react/src/components/ActionSheet/ActionSheet.tsx diff --git a/libs/react/src/components/ActionSheet/ActionSheet.css b/libs/react/src/components/ActionSheet/ActionSheet.css new file mode 100644 index 00000000..74ecba9c --- /dev/null +++ b/libs/react/src/components/ActionSheet/ActionSheet.css @@ -0,0 +1,73 @@ + \ No newline at end of file diff --git a/libs/react/src/components/ActionSheet/ActionSheet.stories.ts b/libs/react/src/components/ActionSheet/ActionSheet.stories.ts new file mode 100644 index 00000000..21b6301d --- /dev/null +++ b/libs/react/src/components/ActionSheet/ActionSheet.stories.ts @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import { Meta, Story } from '@storybook/react'; +import ActionSheet, { ActionSheetProps } from './ActionSheet'; + +export default { + title: 'component/Overlays/ActionSheet', + component: ActionSheet, + tags: ['autodocs'], +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + isOpen: true, + onClose: () => console.log('Closed'), + actions: [ + { label: 'Action 1', onClick: () => console.log('Action 1 clicked') }, + { label: 'Action 2', onClick: () => console.log('Action 2 clicked') }, + ], +}; + +export const Opened = Template.bind({}); +Opened.args = { + isOpen: true, + onClose: () => console.log('Closed'), + actions: [ + { label: 'Action 1', onClick: () => console.log('Action 1 clicked') }, + { label: 'Action 2', onClick: () => console.log('Action 2 clicked') }, + ], +}; + +export const Closed = Template.bind({}); +Closed.args = { + isOpen: false, + onClose: () => console.log('Closed'), + actions: [ + { label: 'Action 1', onClick: () => console.log('Action 1 clicked') }, + { label: 'Action 2', onClick: () => console.log('Action 2 clicked') }, + ], +}; + +export const Hover = Template.bind({}); +Hover.args = { + isOpen: true, + onClose: () => console.log('Closed'), + actions: [ + { label: 'Action 1', onClick: () => console.log('Action 1 clicked') }, + { label: 'Action 2', onClick: () => console.log('Action 2 clicked') }, + ], +}; \ No newline at end of file diff --git a/libs/react/src/components/ActionSheet/ActionSheet.tsx b/libs/react/src/components/ActionSheet/ActionSheet.tsx new file mode 100644 index 00000000..518a5aa6 --- /dev/null +++ b/libs/react/src/components/ActionSheet/ActionSheet.tsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react'; + +interface ActionSheetProps { + isOpen: boolean; + onClose: () => void; + actions: { label: string; onClick: () => void }[]; +} + +const ActionSheet: React.FC = ({ isOpen, onClose, actions }) => { + return ( +
+
+
+
    + {actions.map((action, index) => ( +
  • + +
    • + ))} +
+
+
+ ); +}; + +export default ActionSheet; \ No newline at end of file From 15bd6a6936327225779c3735252988acbf7c93d3 Mon Sep 17 00:00:00 2001 From: cobycloud <25079070+cobycloud@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:05:12 -0600 Subject: [PATCH 005/168] ActivityIndicators --- .../ActivityIndicators/ActivityIndicators.css | 55 +++++++++++++++++++ .../ActivityIndicators.stories.ts | 26 +++++++++ .../ActivityIndicators/ActivityIndicators.tsx | 17 ++++++ 3 files changed, 98 insertions(+) create mode 100644 libs/react/src/components/ActivityIndicators/ActivityIndicators.css create mode 100644 libs/react/src/components/ActivityIndicators/ActivityIndicators.stories.ts create mode 100644 libs/react/src/components/ActivityIndicators/ActivityIndicators.tsx diff --git a/libs/react/src/components/ActivityIndicators/ActivityIndicators.css b/libs/react/src/components/ActivityIndicators/ActivityIndicators.css new file mode 100644 index 00000000..0cfc8a70 --- /dev/null +++ b/libs/react/src/components/ActivityIndicators/ActivityIndicators.css @@ -0,0 +1,55 @@ + \ No newline at end of file diff --git a/libs/react/src/components/ActivityIndicators/ActivityIndicators.stories.ts b/libs/react/src/components/ActivityIndicators/ActivityIndicators.stories.ts new file mode 100644 index 00000000..32b7dedf --- /dev/null +++ b/libs/react/src/components/ActivityIndicators/ActivityIndicators.stories.ts @@ -0,0 +1,26 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import ActivityIndicators from './ActivityIndicators'; + +export default { + title: 'component/Indicators/ActivityIndicators', + component: ActivityIndicators, + tags: ['autodocs'], +} as Meta; + +const Template: Story = (args) => ; + +export const Loading = Template.bind({}); +Loading.args = { + state: 'loading', +}; + +export const Success = Template.bind({}); +Success.args = { + state: 'success', +}; + +export const Error = Template.bind({}); +Error.args = { + state: 'error', +}; \ No newline at end of file diff --git a/libs/react/src/components/ActivityIndicators/ActivityIndicators.tsx b/libs/react/src/components/ActivityIndicators/ActivityIndicators.tsx new file mode 100644 index 00000000..14a6e1cc --- /dev/null +++ b/libs/react/src/components/ActivityIndicators/ActivityIndicators.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +interface ActivityIndicatorsProps { + state: 'loading' | 'success' | 'error'; +} + +const ActivityIndicators: React.FC = ({ state }) => { + return ( +
+ {state === 'loading' && Loading...} + {state === 'success' && Success!} + {state === 'error' && Error!} +
+ ); +}; + +export default ActivityIndicators; \ No newline at end of file From 7c29d6094ef21dddabf108f209da7cc0e4a59f73 Mon Sep 17 00:00:00 2001 From: cobycloud <25079070+cobycloud@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:05:24 -0600 Subject: [PATCH 006/168] AddMemberButton --- .../AddMemberButton/AddMemberButton.css | 42 +++++++++++++++++++ .../AddMemberButton.stories.ts | 41 ++++++++++++++++++ .../AddMemberButton/AddMemberButton.tsx | 21 ++++++++++ 3 files changed, 104 insertions(+) create mode 100644 libs/react/src/components/AddMemberButton/AddMemberButton.css create mode 100644 libs/react/src/components/AddMemberButton/AddMemberButton.stories.ts create mode 100644 libs/react/src/components/AddMemberButton/AddMemberButton.tsx diff --git a/libs/react/src/components/AddMemberButton/AddMemberButton.css b/libs/react/src/components/AddMemberButton/AddMemberButton.css new file mode 100644 index 00000000..2502f3df --- /dev/null +++ b/libs/react/src/components/AddMemberButton/AddMemberButton.css @@ -0,0 +1,42 @@ + \ No newline at end of file diff --git a/libs/react/src/components/AddMemberButton/AddMemberButton.stories.ts b/libs/react/src/components/AddMemberButton/AddMemberButton.stories.ts new file mode 100644 index 00000000..2a80ea95 --- /dev/null +++ b/libs/react/src/components/AddMemberButton/AddMemberButton.stories.ts @@ -0,0 +1,41 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import AddMemberButton, { AddMemberButtonProps } from './AddMemberButton'; + +export default { + title: 'component/Chat/AddMemberButton', + component: AddMemberButton, + tags: ['autodocs'], +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + isEnabled: true, + onClick: () => console.log('Button clicked'), +}; + +export const Enabled = Template.bind({}); +Enabled.args = { + ...Default.args, + isEnabled: true, +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + ...Default.args, + isEnabled: false, +}; + +export const Hovered = Template.bind({}); +Hovered.args = { + ...Default.args, + isEnabled: true, +}; + +export const Clicked = Template.bind({}); +Clicked.args = { + ...Default.args, + isEnabled: true, +}; \ No newline at end of file diff --git a/libs/react/src/components/AddMemberButton/AddMemberButton.tsx b/libs/react/src/components/AddMemberButton/AddMemberButton.tsx new file mode 100644 index 00000000..9fec8a46 --- /dev/null +++ b/libs/react/src/components/AddMemberButton/AddMemberButton.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +interface AddMemberButtonProps { + isEnabled: boolean; + onClick: () => void; +} + +const AddMemberButton: React.FC = ({ isEnabled, onClick }) => { + return ( + + ); +}; + +export default AddMemberButton; \ No newline at end of file From 1cc2f6f196d78499c23ca678b2bf3639b9086c22 Mon Sep 17 00:00:00 2001 From: cobycloud <25079070+cobycloud@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:05:34 -0600 Subject: [PATCH 007/168] AdminViewScheduler --- .../AdminViewScheduler/AdminViewScheduler.css | 84 +++++++++++++++ .../AdminViewScheduler.stories.ts | 52 +++++++++ .../AdminViewScheduler/AdminViewScheduler.tsx | 100 ++++++++++++++++++ 3 files changed, 236 insertions(+) create mode 100644 libs/react/src/components/AdminViewScheduler/AdminViewScheduler.css create mode 100644 libs/react/src/components/AdminViewScheduler/AdminViewScheduler.stories.ts create mode 100644 libs/react/src/components/AdminViewScheduler/AdminViewScheduler.tsx diff --git a/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.css b/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.css new file mode 100644 index 00000000..595bf08a --- /dev/null +++ b/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.css @@ -0,0 +1,84 @@ + \ No newline at end of file diff --git a/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.stories.ts b/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.stories.ts new file mode 100644 index 00000000..0a04e666 --- /dev/null +++ b/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.stories.ts @@ -0,0 +1,52 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import AdminViewScheduler, { AdminViewSchedulerProps } from './AdminViewScheduler'; + +export default { + title: 'component/Scheduling/AdminViewScheduler', + component: AdminViewScheduler, + tags: ['autodocs'], +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + initialEvents: [ + { + id: '1', + title: 'Team Meeting', + category: 'Work', + location: 'Conference Room', + time: '9:00 AM - 10:00 AM', + description: 'Monthly team meeting.', + }, + { + id: '2', + title: 'Project Deadline', + category: 'Deadline', + location: 'Office', + time: 'All Day', + description: 'Final project submission date.', + }, + ], +}; + +export const EventAdded = Template.bind({}); +EventAdded.args = { + initialEvents: [...Default.args.initialEvents], +}; + +export const EventEdited = Template.bind({}); +EventEdited.args = { + initialEvents: [ + ...Default.args.initialEvents.map(event => + event.id === '1' ? { ...event, title: 'Updated Team Meeting' } : event + ), + ], +}; + +export const EventDeleted = Template.bind({}); +EventDeleted.args = { + initialEvents: Default.args.initialEvents.filter(event => event.id !== '1'), +}; \ No newline at end of file diff --git a/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.tsx b/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.tsx new file mode 100644 index 00000000..719ddc56 --- /dev/null +++ b/libs/react/src/components/AdminViewScheduler/AdminViewScheduler.tsx @@ -0,0 +1,100 @@ +import React, { useState } from 'react'; +import './AdminViewScheduler.css'; + +interface Event { + id: string; + title: string; + category: string; + location: string; + time: string; + description: string; +} + +interface AdminViewSchedulerProps { + initialEvents: Event[]; +} + +const AdminViewScheduler: React.FC = ({ initialEvents }) => { + const [events, setEvents] = useState(initialEvents); + const [selectedEvent, setSelectedEvent] = useState(null); + const [newEvent, setNewEvent] = useState({ + id: '', + title: '', + category: '', + location: '', + time: '', + description: '', + }); + + const handleAddEvent = () => { + setEvents([...events, { ...newEvent, id: String(Date.now()) }]); + setNewEvent({ id: '', title: '', category: '', location: '', time: '', description: '' }); + }; + + const handleEditEvent = (updatedEvent: Event) => { + setEvents(events.map(event => (event.id === updatedEvent.id ? updatedEvent : event))); + setSelectedEvent(null); + }; + + const handleDeleteEvent = (eventId: string) => { + setEvents(events.filter(event => event.id !== eventId)); + setSelectedEvent(null); + }; + + return ( +
+
+ setNewEvent({ ...newEvent, title: e.target.value })} + /> + setNewEvent({ ...newEvent, category: e.target.value })} + /> + setNewEvent({ ...newEvent, location: e.target.value })} + /> + setNewEvent({ ...newEvent, time: e.target.value })} + /> +