diff --git a/src/Components/Users/SkillsSlideOverComponents.tsx b/src/Components/Users/SkillsSlideOverComponents.tsx
index c5d58b67d6b..cc1e937e6b5 100644
--- a/src/Components/Users/SkillsSlideOverComponents.tsx
+++ b/src/Components/Users/SkillsSlideOverComponents.tsx
@@ -11,7 +11,7 @@ export const AddSkillsPlaceholder = () => {
diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx
index dbe3c3a9b03..1278a51ea6d 100644
--- a/src/Redux/api.tsx
+++ b/src/Redux/api.tsx
@@ -10,7 +10,7 @@ interface Routes {
const routes: Routes = {
config: {
- path: process.env.REACT_APP_CONFIG || "/config.json",
+ path: import.meta.env.REACT_APP_CONFIG || "/config.json",
method: "GET",
noAuth: true,
},
diff --git a/src/Router/SessionRouter.tsx b/src/Router/SessionRouter.tsx
index 4dfb1504a28..f8f44896372 100644
--- a/src/Router/SessionRouter.tsx
+++ b/src/Router/SessionRouter.tsx
@@ -3,7 +3,7 @@ import { Login, ResetPassword } from "../Components/Auth";
import { useRoutes } from "raviger";
import SessionExpired from "../Components/ErrorPages/SessionExpired";
import InvalidReset from "../Components/ErrorPages/InvalidReset";
-const TopBar = loadable(() => import("../Components/Common/TopBar"));
+import TopBar from "../Components/Common/TopBar";
const routes = {
"/": () =>
,
diff --git a/src/index.tsx b/src/index.tsx
index 7ea6d185e1a..5033736f9c0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,14 +7,17 @@ import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
import * as Sentry from "@sentry/browser";
-import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
-
import "./style/index.css";
+import { registerSW } from "virtual:pwa-register"
+
+if (import.meta.env.PROD) {
+ registerSW({ immediate: false })
+}
const store = createStore(reducer, applyMiddleware(thunk));
-if (process.env.NODE_ENV === "production") {
+if (import.meta.env.PROD) {
Sentry.init({
- environment: process.env.NODE_ENV,
+ environment: import.meta.env.MODE,
dsn: "https://8801155bd0b848a09de9ebf6f387ebc8@sentry.io/5183632",
});
}
@@ -35,13 +38,3 @@ ReactDOM.render(
,
document.getElementById("root")
);
-
-/*
-if ("serviceWorker" in navigator) {
- window.addEventListener("load", () => {
- navigator.serviceWorker.register("/service-worker.js");
- });
-}
-*/
-
-serviceWorkerRegistration.register();
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc6b..00000000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
diff --git a/src/service-worker.ts b/src/service-worker.ts
index 292c85b8f74..d3690cdd2b2 100644
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -62,7 +62,7 @@ precacheAndRoute(toPrecache);
// // Return true to signal that we want to use the handler.
// return true;
// },
-// createHandlerBoundToURL(process.env.PUBLIC_URL + "/index.html")
+// createHandlerBoundToURL(import.meta.env.REACT_PUBLIC_URL + "/index.html")
// );
registerRoute(
diff --git a/src/serviceWorkerRegistration.ts b/src/serviceWorkerRegistration.ts
deleted file mode 100644
index 6d59991799a..00000000000
--- a/src/serviceWorkerRegistration.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://cra.link/PWA
-
-const isLocalhost = Boolean(
- window.location.hostname === "localhost" ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === "[::1]" ||
- // 127.0.0.0/8 are considered localhost for IPv4.
- window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
- )
-);
-
-type Config = {
- onSuccess?: (registration: ServiceWorkerRegistration) => void;
- onUpdate?: (registration: ServiceWorkerRegistration) => void;
-};
-
-export function register(config?: Config) {
- if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
- // The URL constructor is available in all browsers that support SW.
- const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
- if (publicUrl.origin !== window.location.origin) {
- // Our service worker won't work if PUBLIC_URL is on a different origin
- // from what our page is served on. This might happen if a CDN is used to
- // serve assets; see https://github.com/facebook/create-react-app/issues/2374
- return;
- }
-
- window.addEventListener("load", () => {
- const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
- if (isLocalhost) {
- // This is running on localhost. Let's check if a service worker still exists or not.
- checkValidServiceWorker(swUrl, config);
-
- // Add some additional logging to localhost, pointing developers to the
- // service worker/PWA documentation.
- navigator.serviceWorker.ready.then(() => {
- console.log(
- "This web app is being served cache-first by a service " +
- "worker. To learn more, visit https://cra.link/PWA"
- );
- });
- } else {
- // Is not localhost. Just register service worker
- registerValidSW(swUrl, config);
- }
- });
- }
-}
-
-function registerValidSW(swUrl: string, config?: Config) {
- navigator.serviceWorker
- .register(swUrl)
- .then((registration) => {
- registration.onupdatefound = () => {
- const installingWorker = registration.installing;
- if (installingWorker == null) {
- return;
- }
- installingWorker.onstatechange = () => {
- if (installingWorker.state === "installed") {
- if (navigator.serviceWorker.controller) {
- // At this point, the updated precached content has been fetched,
- // but the previous service worker will still serve the older
- // content until all client tabs are closed.
- console.log(
- "New content is available and will be used when all " +
- "tabs for this page are closed. See https://cra.link/PWA."
- );
-
- // Execute callback
- if (config && config.onUpdate) {
- config.onUpdate(registration);
- }
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log("Content is cached for offline use.");
-
- // Execute callback
- if (config && config.onSuccess) {
- config.onSuccess(registration);
- }
- }
- }
- };
- };
- })
- .catch((error) => {
- console.error("Error during service worker registration:", error);
- });
-}
-
-function checkValidServiceWorker(swUrl: string, config?: Config) {
- // Check if the service worker can be found. If it can't reload the page.
- fetch(swUrl, {
- headers: { "Service-Worker": "script" },
- })
- .then((response) => {
- // Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get("content-type");
- if (
- response.status === 404 ||
- (contentType != null && contentType.indexOf("javascript") === -1)
- ) {
- // No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then((registration) => {
- registration.unregister().then(() => {
- window.location.reload();
- });
- });
- } else {
- // Service worker found. Proceed as normal.
- registerValidSW(swUrl, config);
- }
- })
- .catch(() => {
- console.log(
- "No internet connection found. App is running in offline mode."
- );
- });
-}
-
-export function unregister() {
- if ("serviceWorker" in navigator) {
- navigator.serviceWorker.ready
- .then((registration) => {
- registration.unregister();
- })
- .catch((error) => {
- console.error(error.message);
- });
- }
-}
diff --git a/src/setupTests.ts b/src/setupTests.ts
deleted file mode 100644
index 5fdf001693f..00000000000
--- a/src/setupTests.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";
diff --git a/src/stories/Care UI/ButtonV2.stories.tsx b/src/stories/Care UI/ButtonV2.stories.tsx
new file mode 100644
index 00000000000..512bedf9e2a
--- /dev/null
+++ b/src/stories/Care UI/ButtonV2.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ButtonV2 from "../../Components/Common/components/ButtonV2";
+
+const meta: Meta
= {
+ component: ButtonV2,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: (args) => Click Me,
+};
diff --git a/src/stories/Care UI/Form Fields/DateFormField.stories.tsx b/src/stories/Care UI/Form Fields/DateFormField.stories.tsx
new file mode 100644
index 00000000000..c9555c9c04d
--- /dev/null
+++ b/src/stories/Care UI/Form Fields/DateFormField.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import DateFormField from "../../../Components/Form/FormFields/DateFormField";
+
+const meta: Meta = {
+ component: DateFormField,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const WithState = (args: any) => {
+ const [value, setValue] = useState();
+
+ return (
+ setValue(value)}
+ />
+ );
+};
+
+export const Default: Story = {
+ args: {
+ name: "date",
+ label: "Select a date",
+ },
+ render: (args) => (
+
+
+
+ ),
+};
diff --git a/src/stories/Care UI/Form Fields/DateRangeFormField.stories.tsx b/src/stories/Care UI/Form Fields/DateRangeFormField.stories.tsx
new file mode 100644
index 00000000000..6e4e1a9d29d
--- /dev/null
+++ b/src/stories/Care UI/Form Fields/DateRangeFormField.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { DateRange } from "../../../Components/Common/DateRangeInputV2";
+import DateRangeFormField from "../../../Components/Form/FormFields/DateRangeFormField";
+
+const meta: Meta = {
+ component: DateRangeFormField,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const WithState = (args: any) => {
+ const [value, setValue] = useState();
+
+ return (
+ setValue(value)}
+ />
+ );
+};
+
+export const Default: Story = {
+ args: {
+ name: "date-range",
+ label: "Select a date range",
+ },
+ render: (args) => (
+
+
+
+ ),
+};
diff --git a/src/stories/Care UI/Form Fields/MultiSelectFormField.stories.tsx b/src/stories/Care UI/Form Fields/MultiSelectFormField.stories.tsx
new file mode 100644
index 00000000000..43b10627ff4
--- /dev/null
+++ b/src/stories/Care UI/Form Fields/MultiSelectFormField.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { MultiSelectFormField } from "../../../Components/Form/FormFields/SelectFormField";
+
+const meta: Meta = {
+ component: MultiSelectFormField,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const WithState = (args: any) => {
+ const [value, setValue] = useState();
+
+ return (
+ setValue(value)}
+ />
+ );
+};
+
+export const Default: Story = {
+ args: {
+ name: "select",
+ label: "Pick items",
+ placeholder: "Select multiple options",
+ options: [
+ { label: "Item 1", value: "item1" },
+ { label: "Item 2", value: "item2" },
+ { label: "Item 3", value: "item3" },
+ { label: "Item 4", value: "item4" },
+ ],
+ optionLabel: (option: any) => option.label,
+ optionValue: (option: any) => option.value,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
diff --git a/src/stories/Care UI/Form Fields/SelectFormField.stories.tsx b/src/stories/Care UI/Form Fields/SelectFormField.stories.tsx
new file mode 100644
index 00000000000..73fe54ff034
--- /dev/null
+++ b/src/stories/Care UI/Form Fields/SelectFormField.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { SelectFormField } from "../../../Components/Form/FormFields/SelectFormField";
+
+const meta: Meta = {
+ component: SelectFormField,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const WithState = (args: any) => {
+ const [value, setValue] = useState();
+
+ return (
+ setValue(value)}
+ />
+ );
+};
+
+export const Default: Story = {
+ args: {
+ name: "select",
+ label: "Pick an item",
+ placeholder: "Select an option",
+ options: [
+ { label: "Item 1", value: "item1" },
+ { label: "Item 2", value: "item2" },
+ { label: "Item 3", value: "item3" },
+ { label: "Item 4", value: "item4" },
+ ],
+ optionLabel: (option: any) => option.label,
+ optionValue: (option: any) => option.value,
+ },
+ render: (args) => (
+
+
+
+ ),
+};
diff --git a/src/stories/Care UI/Slideover.stories.tsx b/src/stories/Care UI/Slideover.stories.tsx
new file mode 100644
index 00000000000..0c13d3e6111
--- /dev/null
+++ b/src/stories/Care UI/Slideover.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import SlideOver from "../../CAREUI/interactive/SlideOver";
+import ButtonV2 from "../../Components/Common/components/ButtonV2";
+
+const meta: Meta = {
+ component: SlideOver,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const WithState = (args: any) => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+ setOpen(true)}>Open SlideOver
+
+ Content
+
+
+ );
+};
+
+export const Default: Story = {
+ args: {
+ slideFrom: "right",
+ title: "Title",
+ dialogClass: "md:w-[400px]",
+ },
+ render: (args) => ,
+};
diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.mdx
similarity index 86%
rename from src/stories/Introduction.stories.mdx
rename to src/stories/Introduction.mdx
index 987b18f51a2..ff7fc71fbf8 100644
--- a/src/stories/Introduction.stories.mdx
+++ b/src/stories/Introduction.mdx
@@ -1,12 +1,12 @@
-import { Meta } from "@storybook/addon-docs";
-import Code from "./assets/code-brackets.svg";
-import Colors from "./assets/colors.svg";
-import Comments from "./assets/comments.svg";
-import Direction from "./assets/direction.svg";
-import Flow from "./assets/flow.svg";
-import Plugin from "./assets/plugin.svg";
-import Repo from "./assets/repo.svg";
-import StackAlt from "./assets/stackalt.svg";
+import { Meta } from '@storybook/blocks';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
@@ -14,7 +14,7 @@ import StackAlt from "./assets/stackalt.svg";
{`
.subheading {
--mediumdark: '#999999';
- font-weight: 900;
+ font-weight: 700;
font-size: 13px;
color: #999;
letter-spacing: 6px;
@@ -49,7 +49,7 @@ import StackAlt from "./assets/stackalt.svg";
.link-item {
display: block;
- padding: 20px 30px 20px 15px;
+ padding: 20px;
border: 1px solid #00000010;
border-radius: 5px;
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
@@ -82,7 +82,9 @@ import StackAlt from "./assets/stackalt.svg";
flex: none;
}
- .link-item span {
+ .link-item span,
+ .link-item p {
+ margin: 0;
font-size: 14px;
line-height: 20px;
}
@@ -182,22 +184,14 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
Configure, customize, and extend
-
+
In-depth guides
Best practices from leading teams
-
+
GitHub project
@@ -214,6 +208,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
- TipEdit the Markdown in{" "}
+ TipEdit the Markdown in{' '}
stories/Introduction.stories.mdx
diff --git a/src/stories/assets/code-brackets.svg b/src/stories/assets/code-brackets.svg
index 60d5e329945..73de9477600 100644
--- a/src/stories/assets/code-brackets.svg
+++ b/src/stories/assets/code-brackets.svg
@@ -1,33 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/assets/colors.svg b/src/stories/assets/colors.svg
index 2f467039199..17d58d516e1 100644
--- a/src/stories/assets/colors.svg
+++ b/src/stories/assets/colors.svg
@@ -1,62 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/assets/comments.svg b/src/stories/assets/comments.svg
index 3badc42ea9a..6493a139f52 100644
--- a/src/stories/assets/comments.svg
+++ b/src/stories/assets/comments.svg
@@ -1,33 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/assets/direction.svg b/src/stories/assets/direction.svg
index b51f74354da..65676ac2722 100644
--- a/src/stories/assets/direction.svg
+++ b/src/stories/assets/direction.svg
@@ -1,28 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/assets/flow.svg b/src/stories/assets/flow.svg
index 7f61d0c282d..8ac27db403c 100644
--- a/src/stories/assets/flow.svg
+++ b/src/stories/assets/flow.svg
@@ -1,31 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/assets/plugin.svg b/src/stories/assets/plugin.svg
index e475d8d2fac..29e5c690c0a 100644
--- a/src/stories/assets/plugin.svg
+++ b/src/stories/assets/plugin.svg
@@ -1,28 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/assets/repo.svg b/src/stories/assets/repo.svg
index 427ee47faef..f386ee902c1 100644
--- a/src/stories/assets/repo.svg
+++ b/src/stories/assets/repo.svg
@@ -1,34 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/assets/stackalt.svg b/src/stories/assets/stackalt.svg
index 4ec6e2ed36d..9b7ad274350 100644
--- a/src/stories/assets/stackalt.svg
+++ b/src/stories/assets/stackalt.svg
@@ -1,45 +1 @@
-
;
+
\ No newline at end of file
diff --git a/src/stories/care_ui/Button.stories.tsx b/src/stories/care_ui/Button.stories.tsx
deleted file mode 100644
index d5b38d09965..00000000000
--- a/src/stories/care_ui/Button.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ComponentStory } from "@storybook/react";
-import ButtonV2 from "../../Components/Common/components/ButtonV2";
-
-export default {
- title: "Care UI / Button",
- component: ButtonV2,
-};
-
-const Template: ComponentStory
= (args) => (
- Label
-);
-
-export const primary = Template.bind({});
-primary.args = {
- variant: "primary",
-};
-
-export const secondary = Template.bind({});
-secondary.args = {
- variant: "secondary",
-};
-
-export const danger = Template.bind({});
-danger.args = {
- variant: "danger",
-};
-
-export const warning = Template.bind({});
-warning.args = {
- variant: "warning",
-};
-
-export const alert = Template.bind({});
-alert.args = {
- variant: "alert",
-};
-
-export const primaryGhost = Template.bind({});
-primaryGhost.args = {
- variant: "primary",
- ghost: true,
-};
-
-export const secondaryGhost = Template.bind({});
-secondaryGhost.args = {
- variant: "secondary",
- ghost: true,
-};
-
-export const dangerGhost = Template.bind({});
-dangerGhost.args = {
- variant: "danger",
- ghost: true,
-};
-
-export const warningGhost = Template.bind({});
-warningGhost.args = {
- variant: "warning",
- ghost: true,
-};
-
-export const alertGhost = Template.bind({});
-alertGhost.args = {
- variant: "alert",
- ghost: true,
-};
diff --git a/src/stories/care_ui/DateRangeInput.stories.tsx b/src/stories/care_ui/DateRangeInput.stories.tsx
deleted file mode 100644
index 4f0641cf04e..00000000000
--- a/src/stories/care_ui/DateRangeInput.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ComponentStory } from "@storybook/react";
-import Component from "../../Components/Common/DateRangeInputV2";
-
-export default {
- title: "Care UI / DateRangeInput",
- component: Component,
-};
-
-const Template: ComponentStory = (args) => (
-
-);
-
-export const DateRangeInput = Template.bind({});
diff --git a/src/stories/care_ui/FormElements/TextAreaFormField.stories.tsx b/src/stories/care_ui/FormElements/TextAreaFormField.stories.tsx
deleted file mode 100644
index f55a521e848..00000000000
--- a/src/stories/care_ui/FormElements/TextAreaFormField.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentStory } from "@storybook/react";
-import Component from "../../../Components/Form/FormFields/TextAreaFormField";
-
-export default {
- title: "Care UI / Form Elements",
- component: Component,
-};
-
-const Template: ComponentStory = (args) => (
-
-);
-
-export const TextAreaFormField = Template.bind({});
-
-TextAreaFormField.args = {
- className: "w-72",
- placeholder: "Type something",
-};
diff --git a/src/stories/care_ui/FormElements/TextFormField.stories.tsx b/src/stories/care_ui/FormElements/TextFormField.stories.tsx
deleted file mode 100644
index 5ae6a84c9f9..00000000000
--- a/src/stories/care_ui/FormElements/TextFormField.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentStory } from "@storybook/react";
-import Component from "../../../Components/Form/FormFields/TextFormField";
-
-export default {
- title: "Care UI / Form Elements",
- component: Component,
-};
-
-const Template: ComponentStory = (args) => (
-
-);
-
-export const TextFormField = Template.bind({});
-
-TextFormField.args = {
- className: "w-72",
- placeholder: "Type something",
-};
diff --git a/src/stories/care_ui/MultiSelectMenu.stories.tsx b/src/stories/care_ui/MultiSelectMenu.stories.tsx
deleted file mode 100644
index ba7ba0e2fb2..00000000000
--- a/src/stories/care_ui/MultiSelectMenu.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentStory } from "@storybook/react";
-import { useState } from "react";
-import { ADMITTED_TO } from "../../Common/constants";
-import MultiSelectMenuV2 from "../../Components/Form/MultiSelectMenuV2";
-
-export default {
- title: "Care UI / Select",
- component: MultiSelectMenuV2,
-};
-
-const Template: ComponentStory = (args) => {
- const [state, setState] = useState(undefined);
-
- return (
- setState(option)}
- />
- );
-};
-
-export const MultiSelectMenu = Template.bind({});
-MultiSelectMenu.args = {
- placeholder: "Show all",
- className: "w-72",
- options: ADMITTED_TO,
- optionLabel: (option: any) => option.text,
- optionIcon: (option: any) => {option.icon},
- optionValue: (option: any) => option.id,
-};
diff --git a/src/stories/care_ui/SelectMenu.stories.tsx b/src/stories/care_ui/SelectMenu.stories.tsx
deleted file mode 100644
index fa029b6a00a..00000000000
--- a/src/stories/care_ui/SelectMenu.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentStory } from "@storybook/react";
-import { useState } from "react";
-import { GENDER_TYPES } from "../../Common/constants";
-import SelectMenuV2 from "../../Components/Form/SelectMenuV2";
-
-export default {
- title: "CARE UI / Select",
- component: SelectMenuV2,
-};
-
-const Template: ComponentStory = (args) => {
- const [state, setState] = useState(undefined);
-
- return (
- setState(option)}
- />
- );
-};
-
-export const SelectMenu = Template.bind({});
-SelectMenu.args = {
- placeholder: "Show all",
- className: "w-72",
- options: GENDER_TYPES,
- optionLabel: (option: any) => option.text,
- optionIcon: (option: any) => {option.icon},
- optionValue: (option: any) => option.id,
-};
diff --git a/src/style/index.css b/src/style/index.css
index ba65d8322e9..9cb33742ffd 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -1,9 +1,9 @@
-@tailwind base;
-@tailwind components;
@import "@pnotify/core/dist/PNotify.css";
@import "@pnotify/mobile/dist/PNotifyMobile.css";
@import "@pnotify/core/dist/BrightTheme.css";
@import "./CAREUI.css";
+@tailwind base;
+@tailwind components;
html {
@apply w-full h-full;
@@ -959,7 +959,7 @@ button:disabled,
width: 100%;
height: 100%;
z-index: -2;
- background: url('../../public/images/wave_scene.svg'), linear-gradient(to bottom right, #057a55, #03543f);
+ background: url('/images/wave_scene.svg'), linear-gradient(to bottom right, #057a55, #03543f);
background-position: top right;
background-size: cover;
}
@@ -972,11 +972,11 @@ button:disabled,
top: 0;
width: 50%;
height: 50%;
- /*background: url('../../public/images/circle.svg') no-repeat center;*/
+ /*background: url('/images/circle.svg') no-repeat center;*/
}
.login-hero{
- background: linear-gradient(to bottom right, rgba(4, 78, 55, 0.466), rgba(2, 54, 40, 0.521)), url('../../public/images/wave_scene_square.png');
+ background: linear-gradient(to bottom right, rgba(4, 78, 55, 0.466), rgba(2, 54, 40, 0.521)), url('/images/wave_scene_square.png');
background-size: cover;
background-position: center;
animation: alternate-reverse 30s linear infinite herobg;
@@ -990,7 +990,7 @@ button:disabled,
right: 0px;
width: 200px;
z-index: 2;
- background: url('../../public/images/wave_long_2.png');
+ background: url('/images/wave_long_2.png');
background-position: top right;
transition: 0.2s;
animation: 120s linear infinite wave alternate-reverse;
@@ -1005,7 +1005,7 @@ button:disabled,
right: 10px;
width: 200px;
z-index: 1;
- background: url('../../public/images/wave_long.png');
+ background: url('/images/wave_long.png');
opacity: 0.5;
background-position: bottom right;
animation: 120s linear infinite wave_2 alternate-reverse;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000000..a2c741bc4e0
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,15 @@
+///
+interface ImportMetaEnv {
+ readonly REACT_APP_TITLE: string;
+ readonly REACT_APP_META_DESCRIPTION: string;
+ readonly REACT_APP_COVER_IMAGE: string;
+ readonly REACT_APP_COVER_IMAGE_ALT: string;
+ readonly REACT_APP_CONFIG: string;
+ readonly REACT_PUBLIC_URL: string;
+ readonly REACT_APP_SITE_URL: string;
+ readonly REACT_APP_ANALYTICS_SERVER_URL: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 55b8dc26af8..e0cc7b598a1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,7 @@
const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");
+
const gray = {
100: "#FBFAFC",
200: "#F7F5FA",
@@ -14,6 +15,7 @@ const gray = {
900: "#453C52",
};
+/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
theme: {
@@ -84,7 +86,7 @@ module.exports = {
corePlugins: {
aspectRatio: false,
},
- content: ["./src/**/*.{html,md,js,jsx,ts,tsx,res}"],
+ content: ["./src/**/*.{html,md,js,jsx,ts,tsx,res}", "./index.html"],
safelist: [
{
pattern: /^(bg-[^/]+|text-[^/]+|border-.+)$/,
diff --git a/tsconfig.json b/tsconfig.json
index 50c70d6519b..12ba5a5dc56 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "target": "es5",
+ "target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
@@ -15,7 +15,7 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
- "types": ["google.maps"]
+ "types": ["google.maps", "vite/client", "vite-plugin-pwa/client"]
},
"include": ["src"]
}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000000..c0bc2b91dcc
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,137 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { VitePWA } from "vite-plugin-pwa";
+import { resolve } from "path";
+import { promises as fs } from "fs";
+
+
+export default defineConfig({
+ envPrefix: "REACT_",
+ plugins: [
+ react(),
+ VitePWA({
+ strategies: 'injectManifest',
+ srcDir: 'src',
+ filename: 'service-worker.ts',
+ injectRegister: null,
+ injectManifest: {
+ maximumFileSizeToCacheInBytes: 7000000
+ },
+ manifest: {
+ name: "Care",
+ short_name: "Care",
+ theme_color: "#33bb17",
+ background_color: "#2196f3",
+ icons: [
+ {
+ src: "https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ purpose: "any maskable",
+ },
+ {
+ src: "https://cdn.coronasafe.network/care-manifest/images/icons/icon-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ },
+ {
+ src: "https://cdn.coronasafe.network/care-manifest/images/icons/icon-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ }
+ ],
+ },
+ }),
+ ],
+ build: {
+ outDir: "build",
+ rollupOptions: {
+ output: {
+ manualChunks(id) {
+ if (id.includes("node_modules")) {
+ return "vendor";
+ }
+ },
+ },
+ },
+ commonjsOptions: {
+ // workaround for react-phone-input-2 https://github.com/vitejs/vite/issues/2139#issuecomment-1405624744
+ defaultIsModuleExports(id) {
+ try {
+ const module = require(id);
+ if (module?.default) {
+ return false;
+ }
+ return "auto";
+ } catch (error) {
+ return "auto";
+ }
+ },
+ transformMixedEsModules: true,
+ },
+ },
+ server: {
+ port: 4000,
+ proxy: {
+ "/api": {
+ target: "https://careapi.coronasafe.in",
+ changeOrigin: true,
+ },
+ },
+ },
+ esbuild: {
+ loader: "tsx",
+ include: [/src\/.*\.[tj]sx?$/],
+ exclude: [/src\/stories/],
+ },
+
+ define: {
+ // for unconventional usage of global by third party libraries
+ global: "window",
+ },
+ resolve: {
+ alias: [
+ {
+ // to revert the above workaround for jss-plugin used by material-ui
+ find: /^jss-plugin-(.*)$/,
+ replacement: "$1",
+ customResolver: (id) => {
+ if (id === "window") {
+ id = "global";
+ }
+ return resolve(
+ __dirname,
+ `./node_modules/jss-plugin-${id}/src/index.js`
+ );
+ },
+ },
+ {
+ // to revert the above wokraround for global-cache used by react-dates
+ find: /^(.*)-cache$/,
+ replacement: "$1",
+ customResolver: (id) => {
+ if (id === "window") {
+ id = "global";
+ }
+ return resolve(__dirname, `./node_modules/${id}-cache/index.js`);
+ },
+ },
+ ],
+ },
+ optimizeDeps: {
+ esbuildOptions: {
+ plugins: [
+ // again thanks to thirdparty libraries for using jsx in js files
+ {
+ name: "load-js-files-as-jsx",
+ setup(build) {
+ build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
+ loader: "jsx",
+ contents: await fs.readFile(args.path, "utf8"),
+ }));
+ },
+ },
+ ],
+ },
+ },
+});
diff --git a/src/Components/ErrorPages/SessionExpired.tsx b/src/Components/ErrorPages/SessionExpired.tsx
index f224f084d4e..761d2bdca11 100644
--- a/src/Components/ErrorPages/SessionExpired.tsx
+++ b/src/Components/ErrorPages/SessionExpired.tsx
@@ -12,7 +12,7 @@ export default function SessionExpired() {
diff --git a/src/Components/Resource/ResourceDetails.tsx b/src/Components/Resource/ResourceDetails.tsx
index 0e6e10b13bf..9c8a9049d02 100644
--- a/src/Components/Resource/ResourceDetails.tsx
+++ b/src/Components/Resource/ResourceDetails.tsx
@@ -104,7 +104,7 @@ export default function ResourceDetails(props: { id: string }) {