feat(attendance): added support for react storybook, along with the r…

…equired config files * recommended to revert to LTS node version for consistent performance and dealing with issues related to ip * make sure to use the wrapper to ensure that the storybook is able to find the context for react native web components
shiksha-platform · Jul 26, 2022 · c2ca824 · c2ca824
1 parent 516af2c
commit c2ca824
Show file tree

Hide file tree

Showing 8 changed files with 570 additions and 550 deletions.
diff --git a/packages/attendance/.storybook/main.js b/packages/attendance/.storybook/main.js
@@ -14,7 +14,6 @@ module.exports = {
     config.resolve.alias = {
       "react-native$": "react-native-web",
     };
-
     return config;
   },
   typescript: {

diff --git a/packages/attendance/package.json b/packages/attendance/package.json
@@ -80,22 +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/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.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/node-logger": "^6.4.19",
-    "@storybook/preset-create-react-app": "^4.0.1",
+    "@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.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",
-    "@types/react-native": "0.69.3",
     "webpack": "^5.69.1"
   }
 }
diff --git a/packages/attendance/src/stories/Wrapper.tsx b/packages/attendance/src/stories/Wrapper.tsx
@@ -0,0 +1,10 @@
+// A simple wrapper, the role is to provide the context
+// needed by react native web
+import * as React from "react";
+import { NativeBaseProvider } from "native-base";
+
+const Wrapper = (props) => {
+  return <NativeBaseProvider>{props.children}</NativeBaseProvider>;
+};
+
+export default Wrapper;
diff --git a/packages/attendance/src/stories/composite/CalendarBar.stories.tsx b/packages/attendance/src/stories/composite/CalendarBar.stories.tsx
@@ -1,12 +1,16 @@
 import * as React from "react";
 import { CalendarBar } from "components/composite/CalendarBar";
 import { useState } from "@storybook/addons";
+import Wrapper from "stories/Wrapper";
 
 const Template = (args) => {
   const [page, setPage] = useState<number>(0);
-  return <CalendarBar {...args} page={page} setPage={setPage} />;
+  return (
+    <Wrapper>
+      <CalendarBar {...args} page={page} setPage={setPage} />;
+    </Wrapper>
+  );
 };
-
 export default {
   title: "Attendance/Composite/Calendar Bar",
   component: CalendarBar,

diff --git a/packages/attendance/src/stories/composite/PresentStudentsSummary.stories.tsx b/packages/attendance/src/stories/composite/PresentStudentsSummary.stories.tsx
@@ -3,6 +3,7 @@ import { PresentStudentsSummary } from "components/composite/PresentStudentsSumm
 
 // Mock data
 import { attendance, compareAttendance, students } from "../mockData";
+import Wrapper from "stories/Wrapper";
 
 export default {
   title: "Attendance/composite/PresentStudentsSummary",
@@ -16,7 +17,11 @@ const defaultArgs = {
   page: 0,
   presentCount: 7,
 };
-const Template = (args) => <PresentStudentsSummary {...args} />;
+const Template = (args) => (
+  <Wrapper>
+    <PresentStudentsSummary {...args} />
+  </Wrapper>
+);
 
 export const WeekSummary = Template.bind({});
 WeekSummary.args = {

diff --git a/packages/attendance/src/stories/simple/CompareAttendanceModal.stories.tsx b/packages/attendance/src/stories/simple/CompareAttendanceModal.stories.tsx
@@ -1,6 +1,7 @@
 // Lib
 import * as React from "react";
 import { CompareAttendanceModal } from "components/simple/CompareAttendanceModal";
+import Wrapper from "stories/Wrapper";
 
 export default {
   title: "Attendance/simple/CompareAttendanceModal",
@@ -12,11 +13,13 @@ const Template = (args) => {
   const [compare, setCompare] = React.useState<string>("week");
   const navigate = () => {};
   return (
-    <CompareAttendanceModal
-      {...args}
-      setCompare={setCompare}
-      navigate={navigate}
-    />
+    <Wrapper>
+      <CompareAttendanceModal
+        {...args}
+        setCompare={setCompare}
+        navigate={navigate}
+      />
+    </Wrapper>
   );
 };
 

diff --git a/packages/attendance/src/stories/simple/CompareReportHeading.stories.tsx b/packages/attendance/src/stories/simple/CompareReportHeading.stories.tsx
@@ -1,12 +1,17 @@
 import * as React from "react";
 import { CompareReportHeading } from "components/simple/CompareReportHeading";
+import Wrapper from "stories/Wrapper";
 
 export default {
   title: "Attendance/simple/CompareReportHeading",
   component: CompareReportHeading,
 };
 
-const Template = (args) => <CompareReportHeading {...args} />;
+const Template = (args) => (
+  <Wrapper>
+    <CompareReportHeading {...args} />
+  </Wrapper>
+);
 
 export const Main = Template.bind({});
 Main.args = {