Stencil migration NisAI Web

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<typeof DynamicCard> = {
+  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<typeof DynamicCard>;
+
+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,
+  },
+};

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<Theme> | undefined;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => 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 (
+    <Accordion key={outerAccordion.title}>
+      <AccordionSummary
+        expandIcon={<ExpandMore />}
+        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',
+        }}
+      >
+        <Box display={'flex'} flexDirection={'column'}>
+          <Typography fontSize={'16px'} color={'#06753C'} fontWeight={600}>
+            {outerAccordion.title}
+          </Typography>
+          <Typography fontSize={'10px'} color={'#06753C'}>
+            आकलन : {outerAccordion.date}
+          </Typography>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails
+        sx={{
+          backgroundColor: 'var(--successSecondary)',
+        }}
+      >
+        {results?.length &&
+          results?.map((el: any) => {
+            return (
+              <ResultCard
+                key={el?.competency_id}
+                bgcolor={
+                  el?.grade == 'Passed' ? 'var(--successSecondary)' : 'var(--failureSecondary)'
+                }
+                icon={el?.track === 'Hindi' ? '/hindiIcon.svg' : '/mathIcon.svg'}
+                textColor={el?.grade == 'Passed' ? 'var(--success)' : 'var(--failure)'}
+                name={el?.track === 'Hindi' ? 'कहानी आधारित प्रश्न' : 'गणित के प्रश्न'}
+                buttonText={`${el?.results?.scored}/${el?.results?.max_score} सही`}
+                buttonStyle={{
+                  color: '#fff',
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  backgroundColor: el?.grade == 'Passed' ? 'var(--success)' : 'var(--failure)',
+                  '&:hover': {
+                    backgroundColor: el?.grade == 'Passed' ? 'var(--success)' : 'var(--failure)',
+                  },
+                }}
+                InfoCard={<InfoCard />}
+                isAccordion
+              />
+            );
+          })}
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default DynamicCard;

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<typeof ExamSection> = {
+  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<typeof ExamSection>;
+
+export const Default: Story = {
+  args: {
+    title: 'Title',
+    description: 'Description',
+    primaryButton: <Button>Primary Button</Button>,
+    secondaryButton: <Button>Secondary Button</Button>,
+  },
+};
+
+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,
+  },
+};