From fd1c54cacdbd1798d806bd7ff91e60b3f0149420 Mon Sep 17 00:00:00 2001
From: mhatvan <markus_hatvan@aon.at>
Date: Sat, 24 Jul 2021 10:44:18 +0200
Subject: - updated classnames to 2.3.1 to use added type definitions - remove
 stub type definitions from package.json - set 'noImplicitAny' false until jss
 and react-jss packages are upgraded to use own type definitions - add missing
 csstype to package/forms and update code to v3

---
 uidev/src/app.tsx | 98 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 50 insertions(+), 48 deletions(-)

(limited to 'uidev/src')

diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index 593019c35..c025e8825 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -1,4 +1,4 @@
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 import { Classes } from 'jss';
 import { observer } from 'mobx-react';
 import DevTools from 'mobx-react-devtools';
@@ -27,7 +27,7 @@ const styles = {
   '@global body': {
     margin: 0,
     fontSize: defaultTheme.uiFontSize,
-    fontFamily: '\'Open Sans\', sans-serif',
+    fontFamily: "'Open Sans', sans-serif",
   },
   container: {
     display: 'flex',
@@ -35,7 +35,7 @@ const styles = {
   },
   menu: {
     width: 300,
-    position: 'fixed' as CSS.PositionProperty,
+    position: 'fixed' as CSS.Property.Position,
     listStyleType: 'none',
     fontSize: 14,
     overflow: 'scroll',
@@ -66,7 +66,7 @@ const styles = {
     borderBottom: '1px solid #CFCFCF',
   },
   sectionLink: {
-    fontWeight: 'bold' as CSS.FontWeightProperty,
+    fontWeight: 'bold' as CSS.Property.FontWeight,
     color: '#000',
     textDecoration: 'none',
   },
@@ -76,51 +76,53 @@ const styles = {
   },
 };
 
-export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
-  <div className={classes.container}>
-    <ul className={classes.menu}>
-      {store.stories.sections.map((section, key) => (
-        <li key={key}>
-          <a href={`#section-${key}`} className={classes.sectionLink}>{
-            section.name}
-          </a>
-          <ul className={classes.storyList}>
+export const App = injectSheet(styles)(
+  observer(({ classes }: { classes: Classes }) => (
+    <div className={classes.container}>
+      <ul className={classes.menu}>
+        {store.stories.sections.map((section, key) => (
+          <li key={key}>
+            <a href={`#section-${key}`} className={classes.sectionLink}>
+              {section.name}
+            </a>
+            <ul className={classes.storyList}>
+              {section.stories.map((story, storyKey) => (
+                <li key={storyKey}>
+                  <a
+                    href={`#section-${key}-story-${storyKey}`}
+                    className={classes.storyLink}
+                  >
+                    {story.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+      <div className={classes.stories}>
+        {store.stories.sections.map((section, key) => (
+          <div key={key}>
+            <h1 id={`section-${key}`} className={classes.sectionHeadline}>
+              {section.name}
+            </h1>
             {section.stories.map((story, storyKey) => (
-              <li key={storyKey}>
-                <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}>
+              <div className={classes.story} key={storyKey}>
+                <h2
+                  id={`section-${key}-story-${storyKey}`}
+                  className={classes.storyHeadline}
+                >
                   {story.name}
-                </a>
-              </li>
+                </h2>
+                <WithTheme>
+                  <story.component />
+                </WithTheme>
+              </div>
             ))}
-          </ul>
-        </li>
-      ))}
-    </ul>
-    <div className={classes.stories}>
-      {store.stories.sections.map((section, key) => (
-        <div key={key}>
-          <h1
-            id={`section-${key}`}
-            className={classes.sectionHeadline}
-          >
-            {section.name}
-          </h1>
-          {section.stories.map((story, storyKey) => (
-            <div className={classes.story} key={storyKey}>
-              <h2
-                id={`section-${key}-story-${storyKey}`}
-                className={classes.storyHeadline}
-              >
-                {story.name}
-              </h2>
-              <WithTheme>
-                <story.component />
-              </WithTheme>
-            </div>
-          ))}
-        </div>
-      ))}
+          </div>
+        ))}
+      </div>
+      <DevTools />
     </div>
-    <DevTools />
-  </div>
-)));
+  )),
+);
-- 
cgit v1.2.3-54-g00ecf