refactor: reorganize code

1 files changed, 33 insertions, 32 deletions

diff --git a/src/components/StyleGuide.tsx b/src/components/StyleGuide.tsx
index 7b5cf6d..0e5d2a5 100644
--- a/src/components/StyleGuide.tsx
+++ b/src/components/StyleGuide.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { Zap } from 'react-feather';
 
 import Loading from '~/components/Loading';
@@ -22,14 +22,21 @@ const optionsRule = [
   { label: 'Direct', value: 'Direct' },
 ];
 
-const Pane = ({ children, style }) => <div style={{ ...paneStyle, ...style }}>{children}</div>;
+type PaneProps = {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+};
+
+const Pane = ({ children, style }: PaneProps) => (
+  <div style={{ ...paneStyle, ...style }}>{children}</div>
+);
 
 function useToggle(initialState = false) {
   const [onoff, setonoff] = React.useState(initialState);
   const handleChange = React.useCallback(() => {
     setonoff((x) => !x);
   }, []);
-  return [onoff, handleChange];
+  return [onoff, handleChange] as const;
 }
 
 function SwitchExample() {
@@ -37,35 +44,29 @@ function SwitchExample() {
   return <SwitchThemed checked={checked} onChange={handleChange} />;
 }
 
-class StyleGuide extends PureComponent {
-  render() {
-    return (
-      <div>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
-        <Pane>
-          <SwitchExample />
-        </Pane>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
-        <Pane>
-          <Input />
-        </Pane>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
-        <Pane>
-          <ToggleSwitch name="test" options={optionsRule} value="Rule" onChange={noop} />
-        </Pane>
-        {/* @ts-expect-error ts-migrate(2741) FIXME: Property 'style' is missing in type '{ children: E... Remove this comment to see the full error message */}
-        <Pane>
-          <Button text="Test Latency" start={<Zap size={16} />} />
-          <Button text="Test Latency" start={<Zap size={16} />} isLoading />
-          <Button label="Test Latency" />
-          <Button label="Button Plain" kind="minimal" />
-        </Pane>
-        <Pane style={{ paddingLeft: 20 }}>
-          <Loading />
-        </Pane>
-      </div>
-    );
-  }
+function StyleGuide() {
+  return (
+    <div>
+      <Pane>
+        <SwitchExample />
+      </Pane>
+      <Pane>
+        <Input />
+      </Pane>
+      <Pane>
+        <ToggleSwitch name="test" options={optionsRule} value="Rule" onChange={noop} />
+      </Pane>
+      <Pane>
+        <Button text="Test Latency" start={<Zap size={16} />} />
+        <Button text="Test Latency" start={<Zap size={16} />} isLoading />
+        <Button label="Test Latency" />
+        <Button label="Button Plain" kind="minimal" />
+      </Pane>
+      <Pane style={{ paddingLeft: 20 }}>
+        <Loading />
+      </Pane>
+    </div>
+  );
 }
 
 export default StyleGuide;