fix: fix documentation TSC errors

cratebind · Nov 2, 2020 · f51b813 · f51b813
1 parent 67e1a0f
commit f51b813
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 24 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,7 +14,8 @@ module.exports = {
         "unusedExports": true,
       }
     ],
-    'react/display-name': 1
+    'react/display-name': 1,
+    'react/react-in-jsx-scope': 0
   },
   settings: {
     "import/resolver": {

diff --git a/docs/components/CopyButton.tsx b/docs/components/CopyButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Button } from 'minerva-ui';
 
 const copyToClipboard = (str: string) => {

diff --git a/docs/components/callout.tsx b/docs/components/callout.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+// import React from 'react';
 
 const Callout = ({ children, background = 'bg-orange-100', emoji = '💡' }) => {
   return (
     <p className={`${background} flex rounded-lg`}>
       <span className="pl-3 pr-2 py-2 select-none text-xl">{emoji}</span>
       <span className="pr-4 py-2">{children}</span>
-      <style jsx>{`
+      {/* <style jsx>{`
         span > :global(p) {
           margin-top: 0;
         }
-      `}</style>
+      `}</style> */}
     </p>
   );
 };

diff --git a/docs/components/theme-builder/AppContext.js → docs/components/theme-builder/AppContext.tsx b/docs/components/theme-builder/AppContext.js → docs/components/theme-builder/AppContext.tsx
@@ -44,7 +44,7 @@ const initialState = {
   Heading: { customProps: { children: 'Heading' } },
   Cards: { customProps: {} },
   Forms: { customProps: {} },
-};
+} as any;
 
 const AppContext = React.createContext({
   ...initialState,
@@ -60,6 +60,13 @@ const useMergeState = initialMergeState => {
   return [state, mergeState];
 };
 
+export interface AppContextValue {
+  state: any;
+  setContext: React.SetStateAction<any>;
+  resetTheme: () => void;
+  // setContext: React.
+}
+
 const AppProvider = ({ children }) => {
   const [state, setState] = useMergeState(initialState);
 
@@ -79,7 +86,7 @@ const AppProvider = ({ children }) => {
 };
 
 // const AppConsumer = AppContext.Consumer;
-const useAppContext = () => useContext(AppContext);
+const useAppContext = () => useContext<AppContextValue>(AppContext);
 
 export { AppProvider, useAppContext };
 // export default AppContext;
diff --git a/docs/components/theme-builder/Inspector.tsx b/docs/components/theme-builder/Inspector.tsx
@@ -91,7 +91,7 @@ const Inspector = React.memo(function Inspector() {
   // const themeContext = useTheme();
 
   const [activeSections, setActiveSections] = useState([
-    ...new Array(fieldSectionCount).fill().map((_, index) => index),
+    ...new Array(fieldSectionCount).fill(null).map((_, index) => index),
   ]);
 
   function toggleItem(toggledIndex) {
@@ -135,8 +135,8 @@ const Inspector = React.memo(function Inspector() {
                           name={key}
                           value={value}
                           type="text"
-                          componentProps={componentProps}
-                          activeComponent={activeComponent}
+                          // componentProps={componentProps}
+                          // activeComponent={activeComponent}
                           onChange={e =>
                             setContext({
                               [activeComponent]: {
@@ -183,14 +183,15 @@ const Inspector = React.memo(function Inspector() {
                     />
                   </InnerContainer>
                 ) : (
+                  // @ts-ignore
                   fields.map(({ name, type }) => (
                     <InnerContainer key={name}>
                       <InspectorField
                         key={name}
                         name={name}
                         type={type}
                         value={state[activeComponent][name]}
-                        activeComponent={activeComponent}
+                        // activeComponent={activeComponent}
                         onChange={e =>
                           setContext({
                             [activeComponent]: {
@@ -226,7 +227,7 @@ const Inspector = React.memo(function Inspector() {
                             name={key}
                             type="color"
                             value={state[activeComponent][key]}
-                            activeComponent={activeComponent}
+                            // activeComponent={activeComponent}
                             onChange={e => {
                               setContext({
                                 [activeComponent]: {

diff --git a/docs/components/theme-builder/LayoutEditor.tsx b/docs/components/theme-builder/LayoutEditor.tsx
@@ -8,7 +8,7 @@ function Area({
   containerProps,
   backgroundSize = 250,
   ...props
-}) {
+}: any) {
   return (
     <Box
       // display="flex"
@@ -79,7 +79,7 @@ export default function LayoutEditor({
   handleChange,
   values,
 }: LayoutEditorProps) {
-  console.log({ values });
+  // console.log({ values });
   const outerEditorSize = 300;
   const innerEditorSize = 185;
 

diff --git a/docs/components/theme-builder/ThemeBuilder.tsx b/docs/components/theme-builder/ThemeBuilder.tsx
@@ -29,7 +29,7 @@ import ThemeModal from './ThemeModal';
 import UtilityTable from './UtilityTable';
 import { ModalExample, CardExamples, FormExamples } from './examples';
 
-const ColorTag = ({ number, code, ...props }) => (
+const ColorTag = ({ number, code, ...props }: any) => (
   <Block
     borderRadius="9999px"
     height="48px"

diff --git a/docs/theme/callout.tsx b/docs/theme/callout.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+// import React from 'react';
 
 const Callout = ({ children, background = 'bg-orange-100', emoji = '💡' }) => {
   return (
     <p className={`${background} flex rounded-lg`}>
       <span className="pl-3 pr-2 py-2 select-none text-xl">{emoji}</span>
       <span className="pr-4 py-2">{children}</span>
-      <style jsx>{`
+      {/* <style jsx>{`
         span > :global(p) {
           margin-top: 0;
         }
-      `}</style>
+      `}</style> */}
     </p>
   );
 };

diff --git a/docs/types.d.ts b/docs/types.d.ts
@@ -1,3 +1,5 @@
+export * from 'react';
+
 declare module 'react' {
   interface DOMAttributes<T> {
     css?: InterpolationWithTheme<any>;

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -6821,9 +6821,9 @@ react-color@^2.18.1:
     tinycolor2 "^1.4.1"
 
 react-dom@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
+  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -6912,9 +6912,9 @@ react-style-singleton@^2.1.0:
     tslib "^1.0.0"
 
 react@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"