📖 Storybook + 🛠 Tailwind Patient Filters (#3744)

* tailwind colors as per figma

* implement select menu with new interface

* use select menu v2 for ordering

* update tailwind colors as per figma

* facility types

* support option value

* gender

* gender icons

* is antenatal field

* kasp

* category

* disease status

* vaccinated

* declared

* telemedicine

* top buttons

* persistent filter buttons

* update color pallete as per figma

* import form fields from consultation redesign PR

* consume new text input

* remove range

* fix

* `npx init storybook`

* update `@storybook/preset-create-react-app`

* install storybook postcss for tailwind

* fix issues with tailwind and reload

* fix magically value prop gone missing

* `npm install tw-elements`

* Rename new to `SelectMenuV2`

* add tw-elements to package lock file

* implements multi select menu

* last admitted to bed type

* remove unused code

* imporve select menus

* update placeholder colors

* show chips below multi select

* consistent `form-input`, `form-textarea` styling

* wip, to let khavin try

* Revert "add tw-elements to package lock file"

This reverts commit eba6368.

* revert `tw-elements` for datepicker

* add `serve-storybook`

* fix colors as per figma color scheme

* implements basic buttons

* update button styles

* button shape circle as boolean attribute

* update filter buttons

* fix button styling when `circle`

* remove comments

* feat: added custom AutoCompleteAsync component

* Merge `package-lock.json` of `develop` to tailwind/storybook

* `npm install --legacy-peer-deps` post merge `develop` to tailwind/storybook

* storybook: remove default stories

* eslint: ignore '*.stories.mdx' files

* storybook: add-on `storybook-dark-mode`

* button stories

* add DateInputV2 and DateRangeInputV2

* make datepicker css consistent

* fix (AutoCompleteAsync): fixed debounce issue

* ui (AsyncAutoComplete): changed bg color

* refactor out `DropdownMenuTransition` for consistent experience across all dropdown components

* add validators

* fix validator issue

* update field validators

* DateFormField and DateRangeFormField wrappers

* use consistent transition for date picker as used in other components

* fix typo

* fix datepicker focus issue, by wrapping it with Popover

* replace material icons with font awesom

* fix asyncautocomplete field placeholder color

* storybook: fontawesome and inter font scripts

* storybook: DateFormField

* storybook: text area and text form fields

* fix styling issue with phone input

* rename `ButtonStyle` to `ButtonVariant`

* storybook: complete button story

* fix property error missing issue

* storybook: `SelectMenuV2`

* storybook: `MultiSelectMenuV2`

* storybook: move care ui elements to care ui dir

* fix title

* select year in datepicker

* disable increment year btn

* Patient Review feature fixes (#3584)

* Add review_interval and review badges

* Change label to Review before

* Update src/Components/Patient/DailyRounds.tsx

Co-authored-by: Khavin Shankar <[email protected]>

* Keep loading spinner during redirect (#3754)

* Cypress: Fixes & Refactoring (#3798)

* Create main.yml

* Fix main.yml errors

* Update main.yml

* Update and rename main.yml to merge_upstream.yml

* Update merge_upstream.yml

* Update merge_upstream.yml

* Refactor cypress workflow

- Change to ubuntu-latest
- Switch to npm from yarn
- Give appropriate names for each step in workflow

* Fix patient crud error on Add Patient button

* Remove accidentally added workflow

* Delete stale.yml (#3782)

* feat: added github stale action (#3785)

* Made the teleicuvitalcard responsive (#3669)

* Made TeleViatlsCard responsive

* Minor enhancement

* fix buggy redirect after clicking on cancel button in add more bed types (#3710)

* fix buggy redirect after clicking on cancel button in add more bed types

* fix: deepscan issues

* Update packages and remove obsolete dependencies (#3748)

* Remove nonessential packages

* Update packages having a minor version change

* Add back autoprefixer

* Fix for google maps

* Change error message for offline camera (#3789)

* Minor UI enhacement in Patients page for extreme small devices and some ranges (#3779)

* Use `Inter` font as the sans font (#3683)

* Adds `Inter` as sans font

* fix overweighted font usages

* correct font weights

* correct font weights

* Fix login page title overflow

* Adds fallback to `sans-serif`

Co-authored-by: Bodhish Thomas <[email protected]>

* Update src/style/index.css

Co-authored-by: Bodhish Thomas <[email protected]>

* fix syntax

* fix typo

Co-authored-by: Bodhish Thomas <[email protected]>

* Patient Category Colors (#3728)

* patient category type

* show category in patient list page

* move colors to tailwind config for app wide access

* category on info card

* fix issue with classes skipped from build

* category on patient profile

* patient info card, move category above patient photo

* Revert "patient info card, move category above patient photo"

This reverts commit 9dc5d55.

* Patient Review feature fixes (#3584)

* Add review_interval and review badges

* Change label to Review before

* Update src/Components/Patient/DailyRounds.tsx

Co-authored-by: Khavin Shankar <[email protected]>

* Upgrade cypress to v10.10.0

* Fix Error in facility create with adding doctor

* Fix `parseInt` parameter error in patient crud

* Add emojis

Co-authored-by: Khavin Shankar <[email protected]>
Co-authored-by: ARYAN PATEL <[email protected]>
Co-authored-by: Pragati Bhattad <[email protected]>
Co-authored-by: Ashesh <[email protected]>
Co-authored-by: Rithvik Nishad <[email protected]>
Co-authored-by: Bodhish Thomas <[email protected]>

* `AutoCompleteAsync` fix `multiple` overload type

* fix (AutoCompleteAsync): fixed input issue

Co-authored-by: Ashesh3 <[email protected]>
Co-authored-by: Khavin Shankar <[email protected]>
Co-authored-by: Ritesh-Aggarwal <[email protected]>
Co-authored-by: Mohammed Rabil <[email protected]>
Co-authored-by: ARYAN PATEL <[email protected]>
Co-authored-by: Pragati Bhattad <[email protected]>
Co-authored-by: Bodhish Thomas <[email protected]>

.storybook/main.js

@@ -0,0 +1,32 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+  webpackFinal: (config) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            postcssOptions: {
+              plugins: [require("tailwindcss"), require("autoprefixer")],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
+    return config;
+  },
+};

.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<script
+  src="https://kit.fontawesome.com/d69454c2e7.js"
+  crossorigin="anonymous"
+></script>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet"
+/>

.storybook/preview.js

@@ -0,0 +1,11 @@
+import "../src/style/index.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};