feat: OHIF-v3 UI Component Library (#2653)

* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems

* fix: storybook webpack config

* feat: add more stories

* feat: add more stories

* feat: add more stories

* feat: fix logo and babel runtime error

* feat: move to mdx docs for ui

* feat: enhanced mdx for header and styles

* feat: Add button usecases

* feat: Add buttonGroup docs

* feat: Add docs and use case to cine and contex menu

* feat: fix decorators

* feat: add header and dropdown docs

* feat: add Icon and input docs

* feat: add more docs

* feat: add more stories

* fix: feedback section

* feat: Add doc page

* feat: Add typography and color stories

* yarn lock

* add analytics to v3-ui

* new banner image

* new viewport component

* update review comments

platform/ui/src/components/DateRange/__stories__/dateRange.stories.mdx

@@ -0,0 +1,46 @@
+import DateRange from '../DateRange';
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+
+export const argTypes = {
+  component: DateRange,
+  title: 'Components/DateRange',
+};
+
+<Meta title="Components/DateRange" component={DateRange} />
+
+export const DateRangeTemplate = (args) => (
+  <div className="h-96">
+    <DateRange {...args} />
+  </div>
+);
+
+<Heading title="DateRange" componentRelativePath="DateRange/DateRange.jsx" />
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+DateRange is a component that allows you to select a range of dates.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      id: 'date-range-1',
+      startDate: '1990-05-01',
+      endDate: '2022-01-01',
+    }}
+  >
+    {DateRangeTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={DateRange} />
+
+## Contribute
+
+<Footer componentRelativePath="DateRange/__stories__/dateRange.stories.mdx" />