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
2022-02-10 14:08:34 -05:00
1 parent eb77cb76b6
commit 5c8ee7f906
@@ -0,0 +1,3 @@
+export const AnchorListItem = ({ children }) => {
+  return <li className="text-gray-800">{children}</li>;
+};
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Footer = ({ componentRelativePath }) => {
+  return (
+    <div>
+      <p className="my-2 text-gray-800 font-inter">
+        We always welcome feedback and suggestions. If you are interested to add
+        additional usecases, please send us a pull request. Edit this page on{' '}
+        <a
+          className="text-blue-400"
+          href={`https://github.com/OHIF/Viewers/edit/v3-stable/platform/ui/src/components/${componentRelativePath}`}
+        >
+          Github
+        </a>
+        .
+      </p>
+    </div>
+  );
+};
@@ -0,0 +1,46 @@
+import React from 'react';
+
+function GitHubLogo() {
+  return (
+    <svg
+      className="inline"
+      width="18"
+      height="18"
+      viewBox="0 0 1024 1024"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+        transform="scale(64)"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export const Heading = ({ title, componentRelativePath }) => {
+  return (
+    <div className="flex items-center w-full">
+      <div>
+        <h1 className="text-4xl font-normal text-blue-600 font-inter">
+          {title}
+        </h1>
+      </div>
+      {componentRelativePath && (
+        <div className="ml-4">
+          <a
+            href={`https://github.com/OHIF/Viewers/blob/v3-stable/platform/ui/src/components/${componentRelativePath}`}
+            className="text-sm font-normal text-blue-600"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GitHubLogo />
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1,17 @@
+import React from 'react';
+
+// centers the image in the container in the page
+export const WithImage = ({ children, image, alt, className }) => (
+  <div className={className}>
+    <img
+      src={image}
+      alt={alt}
+      style={{
+        display: 'block',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      }}
+    />
+    {children}
+  </div>
+);
@@ -0,0 +1,17 @@
+// https://github.com/mondaycom/monday-ui-react-core/tree/master/src/storybook
+//
+import { Heading } from './heading/heading';
+import { AnchorListItem } from './anchor-list-item/anchor-list-item';
+import { LinkComponent } from './link-component/link-component';
+import { SectionName } from './section-name/section-name';
+import { Footer } from './footer/footer';
+import { WithImage } from './image/image';
+
+export {
+  Heading,
+  AnchorListItem,
+  LinkComponent,
+  SectionName,
+  Footer,
+  WithImage,
+};
@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const LinkComponent = ({
+  children,
+  href,
+  target: originalTarget,
+  rel,
+}) => {
+  const onClick = (event) => {
+    if (originalTarget) {
+      return;
+    }
+
+    const target = document.querySelector(href);
+    if (target) {
+      event.preventDefault();
+      event.stopPropagation();
+      target.scrollIntoView();
+    }
+  };
+  return (
+    <a
+      className="text-blue-600"
+      onClick={onClick}
+      target={originalTarget}
+      rel={rel}
+      href={href}
+    >
+      {children}
+    </a>
+  );
+};
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+
+export const SectionName = ({ className, children, ...props }) => {
+  const id = useMemo(
+    () =>
+      children
+        .toLowerCase()
+        .split(' ')
+        .join('-'),
+    [children]
+  );
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  return (
+    <h2 id={id} {...props} className="mt-4 text-3xl text-blue-600">
+      {children}
+    </h2>
+  );
+};
+
+SectionName.propTypes = {
+  children: PropTypes.string.isRequired,
+};