Added the new components after refactor

packages/attendance/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# environment
+.env

packages/attendance/.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -10,4 +10,20 @@ module.exports = {
   core: {
     builder: "webpack5",
   },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.alias = {
+      "react-native$": "react-native-web",
+    };
+    return config;
+  },
+  typescript: {
+    check: true,
+    checkOptions: {},
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
 };

packages/attendance/package.json

@@ -9,14 +9,17 @@
     "@mui/material": "^5.4.0",
     "@react-navigation/drawer": "^6.1.8",
     "@shiksha/common-lib": "^1.0.0",
+    "@storybook/client-api": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.24.0",
     "expo-font": "^10.0.3",
     "i18next": "^21.6.7",
+    "ip": "^1.1.8",
     "moment": "^2.29.1",
     "native-base": "^3.2.2",
+    "prettier": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.15.3",
@@ -77,19 +80,22 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.4.3",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/node-logger": "^6.4.19",
-    "@storybook/preset-create-react-app": "^4.0.1",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-library": "^0.0.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-react-native-web": "^0.0.18",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/node-logger": "^6.5.9",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/react-native": "0.69.3",
     "craco-module-federation": "^1.1.0",
     "external-remotes-plugin": "^1.0.0",
     "prettier": "^2.5.1",
+    "typescript": "^4.7.4",
     "webpack": "^5.69.1"
   }
 }

packages/attendance/src/components/composite/AttendanceComponent.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useEffect, Suspense } from "react";
+import { VStack, Box, Stack } from "native-base";
+import { useTranslation } from "react-i18next";
+import { calendar } from "@shiksha/common-lib";
+
+import { colorTheme } from "utils/functions/ColorTheme";
+
+// Components
+// @ts-ignore
+const Card = React.lazy(() => import("students/Card"));
+import { CalendarComponent } from "components/simple/CalendarComponent";
+import { SmsModal } from "components/simple/SmsModal";
+import { MarkAttendanceModal } from "components/simple/MarkAttendanceModal";
+import {
+  CreateAttendance,
+  UpdateAttendance,
+} from "services/calls/registryCalls";
+
+export default function AttendanceComponent({
+  type,
+  page,
+  student,
+  attendanceProp,
+  hidePopUpButton,
+  sms,
+  _card,
+  isEditDisabled,
+  _weekBox,
+  appName,
+  manifest,
+}) {
+  const { t } = useTranslation();
+  const teacherId = localStorage.getItem("id");
+  const [attendance, setAttendance] = React.useState([]);
+  const [attendanceObject, setAttendanceObject] = React.useState<any>({});
+  const [days, setDays] = useState([]);
+
+  const [showModal, setShowModal] = React.useState(false);
+  const [smsShowModal, setSmsShowModal] = React.useState(false);
+  const [loading, setLoading] = React.useState({});
+  useEffect(() => {
+    if (typeof page === "object") {
+      setDays(
+        page.map((e) =>
+          calendar(
+            e,
+            type,
+            manifest?.[
+              "class_attendance.no_of_day_display_on_attendance_screen"
+            ]
+          )
+        )
+      );
+    } else {
+      setDays([
+        calendar(
+          page,
+          type,
+          manifest?.["class_attendance.no_of_day_display_on_attendance_screen"]
+        ),
+      ]);
+    }
+    async function getData() {
+      if (attendanceProp) {
+        setAttendance(attendanceProp);
+      }
+      setLoading({});
+    }
+    getData();
+  }, [page, attendanceProp, type]);
+  const markAttendance = async (dataObject) => {
+    setLoading({
+      [dataObject.date + dataObject.id]: true,
+    });
+    if (dataObject.attendanceId) {
+      await UpdateAttendance(dataObject);
+      const newData = attendance.filter(
+        (e) =>
+          !(e.date === dataObject.date && e.studentId === dataObject.studentId)
+      );
+      setAttendance([
+        ...newData,
+        { ...dataObject, id: dataObject.attendanceId },
+      ]);
+      setLoading({});
+      setShowModal(false);
+    } else {
+      await CreateAttendance({ dataObject, student, teacherId });
+      setAttendance([...attendance, dataObject]);
+      setLoading({});
+      setShowModal(false);
+    }
+  };
+  return (
+    <Stack space={type !== "day" ? "15px" : ""}>
+      <VStack space={type !== "day" ? "15px" : "2"}>
+        {!_card?.isHideStudentCard ? (
+          <Suspense fallback="loading">
+            <Card
+              attendanceProp={attendance ? attendance : []}
+              appName={appName}
+              href={"/students/" + student.id}
+              item={student}
+              _arrow={{ _icon: { fontSize: "large" } }}
+              type="attendance"
+              hidePopUpButton={hidePopUpButton}
+              {...(type === "day" ? { _textTitle: { fontSize: "xl" } } : {})}
+              {..._card}
+              rightComponent={
+                type === "day"
+                  ? days.map((day, index) => (
+                      // @ts-ignore
+                      <CalendarComponent
+                        manifest={manifest}
+                        key={index}
+                        monthDays={[[day]]}
+                        isIconSizeSmall={true}
+                        isEditDisabled={isEditDisabled}
+                        {...{
+                          attendance,
+                          student,
+                          markAttendance,
+                          setAttendanceObject,
+                          setShowModal,
+                          setSmsShowModal,
+                          loading,
+                          type,
+                          _weekBox: _weekBox?.[index] ? _weekBox[index] : {},
+                        }}
+                      />
+                    ))
+                  : false
+              }
+            />
+          </Suspense>
+        ) : (
+          ""
+        )}
+        {type !== "day" ? (
+          <Box borderWidth={1} borderColor={colorTheme.coolGray} rounded="xl">
+            {days.map((day, index) => (
+              // @ts-ignore
+              <CalendarComponent
+                manifest={manifest}
+                key={index}
+                monthDays={day}
+                isEditDisabled={isEditDisabled}
+                {...{
+                  sms,
+                  attendance,
+                  student,
+                  markAttendance,
+                  setAttendanceObject,
+                  setShowModal,
+                  setSmsShowModal,
+                  loading,
+                  type,
+                  _weekBox: _weekBox?.[index] ? _weekBox[index] : {},
+                }}
+              />
+            ))}
+          </Box>
+        ) : (
+          <></>
+        )}
+        <MarkAttendanceModal
+          manifest={manifest}
+          showModal={showModal}
+          setShowModal={setShowModal}
+          attendanceObject={attendanceObject}
+          markAttendance={markAttendance}
+        />
+        <SmsModal
+          smsShowModal={smsShowModal}
+          setSmsShowModal={setSmsShowModal}
+          t={t}
+        />
+      </VStack>
+      <></>
+    </Stack>
+  );
+}

packages/attendance/src/components/composite/CalendarBar.tsx

@@ -0,0 +1,35 @@
+// Lib
+import React, { FC } from "react";
+import { TimeBar } from "components/simple/TimeBar/TimeBar";
+
+export interface ICalendarBar {
+  view?: string;
+  type?: string;
+  page?: number;
+  setPage?: Function;
+  activeColor?: string;
+  _box?: Object;
+}
+
+export const CalendarBar: FC<ICalendarBar> = ({ view, ...props }) => {
+  let CalendarBar = <></>;
+  switch (view) {
+    case "month":
+    case "monthInDays":
+      props.type = "monthInDays";
+      break;
+    case "week":
+      props.type = "week";
+      break;
+    default:
+      props.type = "days";
+      break;
+  }
+  // @ts-ignore
+  CalendarBar = <TimeBar {...props} />;
+  return CalendarBar;
+};
+
+CalendarBar.defaultProps = {
+  view: "days",
+};