From da852fc49924d852e23543800355f950818f221c Mon Sep 17 00:00:00 2001 From: Tirth Gajjar Date: Fri, 2 Aug 2024 15:45:40 +0530 Subject: [PATCH 1/2] stencil migration --- .../src/dynamic-card/index.stories.tsx | 101 +++++++++++++ packages/molecules/src/dynamic-card/index.tsx | 102 +++++++++++++ .../src/exam-section/index.stories.tsx | 74 +++++++++ packages/molecules/src/exam-section/index.tsx | 128 ++++++++++++++++ .../src/result-card/index.stories.tsx | 57 +++++++ packages/molecules/src/result-card/index.tsx | 143 ++++++++++++++++++ 6 files changed, 605 insertions(+) create mode 100644 packages/molecules/src/dynamic-card/index.stories.tsx create mode 100644 packages/molecules/src/dynamic-card/index.tsx create mode 100644 packages/molecules/src/exam-section/index.stories.tsx create mode 100644 packages/molecules/src/exam-section/index.tsx create mode 100644 packages/molecules/src/result-card/index.stories.tsx create mode 100644 packages/molecules/src/result-card/index.tsx diff --git a/packages/molecules/src/dynamic-card/index.stories.tsx b/packages/molecules/src/dynamic-card/index.stories.tsx new file mode 100644 index 0000000..2b05650 --- /dev/null +++ b/packages/molecules/src/dynamic-card/index.stories.tsx @@ -0,0 +1,101 @@ +import { Meta, StoryObj } from '@storybook/react'; +import DynamicCard from './index'; +const meta: Meta = { + title: 'Components/DynamicCard', + component: DynamicCard, + argTypes: { + outerAccordion: { + control: 'object', + description: 'Outer accordion props', + }, + results: { + control: 'object', + description: 'Array of card props', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +const outerAccordion = { + title: 'Accordion Title', + date: '2023-02-20', + index: 1, +}; + +const results = [ + { + assessee_id: '101943588', + assessor_id: '651f26dc-2081-472d-b46a-60001ad91b04', + competency_id: '63b673df-ece9-442d-961a-81763253d434', + isAccordion: true, + grade: 'failed', + level: 3, + metadata: { + start_time: '2024-07-31T16:43:15.769+05:30', + end_time: '2024-07-31T16:43:23.258+05:30', + type: 'non-verbal', + }, + player_id: 'ff839ec7-2c6c-4931-bedd-7dd7a378ab62', + results: { + group_id: '9kLswRFIlcrB', + max_score: '4', + scored: '4', + answered_right: [], + answered_wrong: [], + track: 'Hindi', + }, + }, + { + assessee_id: '101943588', + assessor_id: '651f26dc-2081-472d-b46a-60001ad91b04', + competency_id: '63b673df-ece9-442d-961a-81763253d434', + grade: 'Passed', + isAccordion: true, + level: 3, + metadata: { + start_time: '2024-07-31T16:43:15.769+05:30', + end_time: '2024-07-31T16:43:23.258+05:30', + type: 'non-verbal', + }, + player_id: 'ff839ec7-2c6c-4931-bedd-7dd7a378ab62', + results: { + group_id: '9kLswRFIlcrB', + max_score: '4', + scored: '4', + answered_right: [], + answered_wrong: [], + track: 'Hindi', + }, + }, +]; + +export const Default: Story = { + args: { + outerAccordion, + results, + }, +}; + +export const WithMultipleResults: Story = { + args: { + outerAccordion, + results: results, + }, +}; + +export const WithNoResults: Story = { + args: { + outerAccordion, + results: [], + }, +}; + +export const CustomStyledCard: Story = { + args: { + outerAccordion, + results, + }, +}; diff --git a/packages/molecules/src/dynamic-card/index.tsx b/packages/molecules/src/dynamic-card/index.tsx new file mode 100644 index 0000000..1898986 --- /dev/null +++ b/packages/molecules/src/dynamic-card/index.tsx @@ -0,0 +1,102 @@ +import { ExpandMore } from '@mui/icons-material'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + SxProps, + Theme, + Typography, +} from '@mui/material'; +import React from 'react'; +import { ResultCard } from '../result-card/index'; +type OuterAccordion = { + title: string; + date: string; + index: number; +}; +interface CardProps { + key?: string | number; + bgcolor?: string; + textColor?: string; + name?: string; + secondaryText?: string; + onButtonClick?: () => void; + buttonText?: string; + buttonVariant?: 'text' | 'outlined' | 'contained'; + buttonStyle?: SxProps | undefined; + onClick?: (e: React.MouseEvent) => void; + icon?: string; + InfoCard?: React.ReactNode; + isAccordion?: boolean; +} +type Props = { + outerAccordion: OuterAccordion; + results: CardProps[]; + InfoCard: (props: CardProps) => React.ReactNode; +}; + +const DynamicCard = ({ outerAccordion, results, InfoCard }: Props) => { + return ( + + } + aria-controls="panel1a-content" + id="panel1a-header" + sx={{ + cursor: 'pointer', + width: '100%', + marginTop: '14px', + borderRadius: '8px', + boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)', + backgroundColor: 'var(--successSecondary)', + border: 'none', + maxHeight: '64px', + }} + > + + + {outerAccordion.title} + + + आकलन : {outerAccordion.date} + + + + + {results?.length && + results?.map((el: any) => { + return ( + } + isAccordion + /> + ); + })} + + + ); +}; + +export default DynamicCard; diff --git a/packages/molecules/src/exam-section/index.stories.tsx b/packages/molecules/src/exam-section/index.stories.tsx new file mode 100644 index 0000000..0e20a2d --- /dev/null +++ b/packages/molecules/src/exam-section/index.stories.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { Meta, StoryObj } from '@storybook/react'; +import ExamSection from './index'; +import { Button } from '@mui/material'; + +const meta: Meta = { + title: 'Components/ExamSection', + component: ExamSection, + argTypes: { + isBackdrop: { control: 'boolean' }, + image: { control: 'text' }, + imageWidth: { control: 'number' }, + imageHeight: { control: 'number' }, + title: { control: 'text' }, + description: { control: 'text' }, + primaryButton: { control: 'object' }, + secondaryButton: { control: 'object' }, + showStudyBird: { control: 'boolean' }, + showResultSection: { control: 'boolean' }, + progressValue: { control: 'number' }, + resultValue: { control: 'text' }, + resultCardData: { control: 'object' }, + resultDescription: { control: 'text' }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Title', + description: 'Description', + primaryButton: , + secondaryButton: , + }, +}; + +export const WithBackdrop: Story = { + args: { + ...Default.args, + isBackdrop: true, + }, +}; + +export const WithImage: Story = { + args: { + ...Default.args, + image: 'https://via.placeholder.com/98x98', + }, +}; + +export const WithResultSection: Story = { + args: { + ...Default.args, + showResultSection: true, + progressValue: 50, + resultValue: 'Result Value', + resultCardData: { + rightAnswer: 10, + total: 20, + wrongAnswer: 5, + }, + resultDescription: 'Result Description', + }, +}; + +export const WithStudyBird: Story = { + args: { + ...Default.args, + showStudyBird: true, + }, +}; diff --git a/packages/molecules/src/exam-section/index.tsx b/packages/molecules/src/exam-section/index.tsx new file mode 100644 index 0000000..38904f4 --- /dev/null +++ b/packages/molecules/src/exam-section/index.tsx @@ -0,0 +1,128 @@ +import { Backdrop, Box, Typography, LinearProgress } from '@mui/material'; +import React, { ReactElement } from 'react'; +// import ResultCard from "../Card/ResultCard"; + +type ButtonProps = { + text: string; + onClick: () => void; +}; + +type ResultCardProps = { + rightAnswer: number; + total: number; + wrongAnswer: number; +}; + +type Props = { + isBackdrop?: boolean; + image?: string; + imageWidth?: number; + imageHeight?: number; + title?: string; + description?: string; + primaryButton?: ReactElement; + secondaryButton?: ReactElement; + showStudyBird?: boolean; + showResultSection?: boolean; + progressValue?: number; + resultValue?: string; + resultCardData?: ResultCardProps; + resultDescription?: string; +}; + +const ExamSection = ({ + isBackdrop = false, + image, + imageWidth = 98, + imageHeight = 98, + title, + description, + primaryButton, + secondaryButton, + showStudyBird = false, + showResultSection = false, + progressValue, + resultValue, + // resultCardData, + resultDescription, +}: Props) => { + const content = ( + + {image && study} + + {showResultSection ? ( + <> + + + + {resultValue} + + + {/* {resultCardData && } */} + + {resultDescription} + + + ) : ( + + + {title} + + + {description} + + + )} + + {showStudyBird && ( + + study + + )} + + + {primaryButton} + {secondaryButton} + + + ); + + return isBackdrop ? {content} : content; +}; + +export default ExamSection; diff --git a/packages/molecules/src/result-card/index.stories.tsx b/packages/molecules/src/result-card/index.stories.tsx new file mode 100644 index 0000000..f0babbd --- /dev/null +++ b/packages/molecules/src/result-card/index.stories.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { Meta, StoryObj } from '@storybook/react'; +import { ResultCard } from './index'; // Adjust the import path as needed + +const meta: Meta = { + title: 'Components/Card', + component: ResultCard, + argTypes: { + bgcolor: { control: 'color' }, + textColor: { control: 'color' }, + name: { control: 'text' }, + secondaryText: { control: 'text' }, + onButtonClick: { action: 'clicked' }, + buttonText: { control: 'text' }, + buttonVariant: { + control: { type: 'select', options: ['text', 'outlined', 'contained'] }, + }, + isAccordion: { control: 'boolean' }, + icon: { control: 'text' }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + key: '1', + bgcolor: '#f0f0f0', + textColor: '#000000', + name: 'Card Title', + secondaryText: 'Secondary Text', + buttonText: 'Click Me', + buttonVariant: 'contained', + isAccordion: false, + icon: '/path/to/icon.png', + }, +}; + +export const AccordionCard: Story = { + args: { + ...Default.args, + isAccordion: true, + InfoCard:
Accordion Content
, + }, +}; + +export const CustomStyledCard: Story = { + args: { + ...Default.args, + bgcolor: '#e0e0ff', + textColor: '#0000ff', + buttonVariant: 'outlined', + buttonStyle: { borderColor: '#0000ff', color: '#0000ff' }, + }, +}; diff --git a/packages/molecules/src/result-card/index.tsx b/packages/molecules/src/result-card/index.tsx new file mode 100644 index 0000000..e7c8fdf --- /dev/null +++ b/packages/molecules/src/result-card/index.tsx @@ -0,0 +1,143 @@ +import React, { useState } from 'react'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Button, + SxProps, + Theme, + Typography, +} from '@mui/material'; +import { ExpandMore } from '@mui/icons-material'; +export interface CardProps { + key: string | number; + bgcolor: string; + textColor: string; + name: string; + secondaryText?: string; + onButtonClick?: () => void; + buttonText?: string; + buttonVariant?: 'text' | 'outlined' | 'contained'; + buttonStyle?: SxProps | undefined; + onClick?: (e: React.MouseEvent) => void; + icon?: string; + InfoCard: (props: CardProps) => React.ReactNode; + isAccordion?: boolean; +} + +const ResultCard: React.FC = ({ + key, + bgcolor, + textColor, + name, + secondaryText, + buttonText, + buttonVariant, + buttonStyle, + onClick, + icon, + isAccordion = false, + InfoCard, +}) => { + const [expanded, setExpanded] = useState(false); + + return ( + + + + + {icon && ( + + icon + + )} + + + {name} + + + {secondaryText} + + + + {buttonText && !isAccordion && ( + + + + )} + {isAccordion && ( + setExpanded(!expanded)} + display="flex" + justifyContent="center" + alignItems="center" + borderRadius="6px" + borderColor={bgcolor} + > + {buttonText}{' '} + + + )} + + + + + + + ); +}; + +export { ResultCard }; From 3f6363fb2bb1e90c2eddcc336d6ba03d5153a783 Mon Sep 17 00:00:00 2001 From: Tirth Gajjar Date: Fri, 2 Aug 2024 16:07:04 +0530 Subject: [PATCH 2/2] stencil migration --- packages/molecules/src/dynamic-card/index.tsx | 4 +- packages/molecules/src/exam-section/index.tsx | 170 +++++++------- packages/molecules/src/result-card/index.tsx | 208 +++++++++--------- 3 files changed, 196 insertions(+), 186 deletions(-) diff --git a/packages/molecules/src/dynamic-card/index.tsx b/packages/molecules/src/dynamic-card/index.tsx index 1898986..632d968 100644 --- a/packages/molecules/src/dynamic-card/index.tsx +++ b/packages/molecules/src/dynamic-card/index.tsx @@ -36,7 +36,7 @@ type Props = { InfoCard: (props: CardProps) => React.ReactNode; }; -const DynamicCard = ({ outerAccordion, results, InfoCard }: Props) => { +const DynamicCard = React.memo(({ outerAccordion, results, InfoCard }: Props) => { return ( { ); -}; +}); export default DynamicCard; diff --git a/packages/molecules/src/exam-section/index.tsx b/packages/molecules/src/exam-section/index.tsx index 38904f4..c9f0910 100644 --- a/packages/molecules/src/exam-section/index.tsx +++ b/packages/molecules/src/exam-section/index.tsx @@ -30,99 +30,101 @@ type Props = { resultDescription?: string; }; -const ExamSection = ({ - isBackdrop = false, - image, - imageWidth = 98, - imageHeight = 98, - title, - description, - primaryButton, - secondaryButton, - showStudyBird = false, - showResultSection = false, - progressValue, - resultValue, - // resultCardData, - resultDescription, -}: Props) => { - const content = ( - - {image && study} +const ExamSection = React.memo( + ({ + isBackdrop = false, + image, + imageWidth = 98, + imageHeight = 98, + title, + description, + primaryButton, + secondaryButton, + showStudyBird = false, + showResultSection = false, + progressValue, + resultValue, + // resultCardData, + resultDescription, + }: Props) => { + const content = ( + + {image && study} - {showResultSection ? ( - <> - - + {showResultSection ? ( + <> + + + + {resultValue} + + + {/* {resultCardData && } */} + {resultDescription} + + + ) : ( + + + {title} + + - {resultValue} + {description} - {/* {resultCardData && } */} - - {resultDescription} - - - ) : ( - - - {title} - - - {description} - - - )} + )} - {showStudyBird && ( - - study - - )} + {showStudyBird && ( + + study + + )} - - {primaryButton} - {secondaryButton} + + {primaryButton} + {secondaryButton} + - - ); + ); - return isBackdrop ? {content} : content; -}; + return isBackdrop ? {content} : content; + }, +); export default ExamSection; diff --git a/packages/molecules/src/result-card/index.tsx b/packages/molecules/src/result-card/index.tsx index e7c8fdf..e6209b9 100644 --- a/packages/molecules/src/result-card/index.tsx +++ b/packages/molecules/src/result-card/index.tsx @@ -26,118 +26,126 @@ export interface CardProps { isAccordion?: boolean; } -const ResultCard: React.FC = ({ - key, - bgcolor, - textColor, - name, - secondaryText, - buttonText, - buttonVariant, - buttonStyle, - onClick, - icon, - isAccordion = false, - InfoCard, -}) => { - const [expanded, setExpanded] = useState(false); +const ResultCard: React.FC = React.memo( + ({ + key, + bgcolor, + textColor, + name, + secondaryText, + buttonText, + buttonVariant, + buttonStyle, + onClick, + icon, + isAccordion = false, + InfoCard, + }) => { + const [expanded, setExpanded] = useState(false); - return ( - - - - - {icon && ( + + + + {icon && ( + + icon + + )} - icon + + {name} + + + {secondaryText} + - )} - - - {name} - - - {secondaryText} - - - {buttonText && !isAccordion && ( - - + + )} + {isAccordion && ( + setExpanded(!expanded)} + display="flex" + justifyContent="center" + alignItems="center" + borderRadius="6px" + borderColor={bgcolor} > - {buttonText} - - - )} - {isAccordion && ( - setExpanded(!expanded)} - display="flex" - justifyContent="center" - alignItems="center" - borderRadius="6px" - borderColor={bgcolor} - > - {buttonText}{' '} - - - )} - - - - - - - ); -}; + {buttonText}{' '} + + + )} + + + + + + + ); + }, +); export { ResultCard };