📖 Storybook + 🛠 Tailwind Patient Filters

[rithviknishad]

• Part of the epic 🛠 Tailwinding Care #3742
• Storybook preview deployment for this branch until its merged can be viewed at: https://care-fe-storybook.vercel.app

⚠️ There are additional packages in this PR, for the storybook.
Working on this PR may require you to run npm i --legacy-peer-deps or yarn install again.

Post Merge Tasks

• Update vercel deploy config to use develop branch instead of this PR branch.
• Update README.md with the storybook staging deploy URL.

Proposed Changes

• Deploy to vercel. (will change to deploy for develop branch once merged)
• Closes Storybook integration to document, visualize and test individual components. #3743
• Closes Revamp Advanced Filters in Patients #2880
• Resolves Improve SelectMenu tailwind component. #3686
• Add existing tailwind components to storybook.
• Make Apply/Cancel/Clear filter buttons persistent in advanced filters when scrolling.
• Closes Unable to select a year with DateInputV2 tailwind component #3784

Storybook

Write stories of components inside src/stories directory, ending with *.stories.tsx or *.stories.mdx.

Example:

// Button.stories.tsx

import { ComponentStory } from "@storybook/react";
import ButtonV2 from "../Components/Common/components/ButtonV2";

export default {
  title: "Care UI / Button", // having '/' in title organizes the stories in a grouped/directory structure.
  component: ButtonV2,
};

const Template: ComponentStory<typeof ButtonV2> = (args) => (
  <ButtonV2 {...args}>Label</ButtonV2>
);

export const Button = Template.bind({});

References

• Install storybook
• PostCSS 8 Wiki
• Configuring for tailwind

To run storybook locally:

npm install --legacy-peer-deps # install new packages required
npm run storybook # launch storybook

open http://localhost:6006 in your browser

Storybook preview deployment for this branch until its merged can be viewed at: https://care-fe-storybook.vercel.app

VS Code Extensions that might be helpful when working with Storybook .mdx stories:

• MDX unifiedjs.vscode-mdx

Additional add-ons in Storybook

• storybook-dark-mode

New Components

See storybook for component API documentation.

SelectMenuV2

Rebuilt to be consistent with other components' API and support for option icons.

MultiSelectMenuV2

AutoCompleteAsync

by @khavinshankar

TextFormField and TextAreaFormField

DatePicker and DateRangePicker

by @Ritesh-Aggarwal

Patient Filters Redesigned

As per figma design

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	fc3268a
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/6358ee810f22770008a61326
😎 Deploy Preview	https://deploy-preview-3744--care-egov-staging.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[nihal467]

@khavinshankar can you check this

[nihal467]

@rithviknishad

unable to type in the lsg body filters or any other filters

[github-actions]

👋 Hi, @rithviknishad,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[github-actions]

👋 Hi, @rithviknishad,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[github-actions]

👋 Hi, @rithviknishad,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
17 Code Smells

No Coverage information
0.0% Duplication

[nihal467]

Patient Filter LGTM @khavinshankar go through story book

[khavinshankar]

@rithviknishad

• shouldn't we remove or customize the introduction page in the storybook?
• and in storybook, can't pick a date in date range component

merging this pr, pickup the issues in a new pr