refactor: Remove styled components

serlo · Dec 14, 2023 · ab2fd8b · ab2fd8b
1 parent a9a68fc
commit ab2fd8b
Show file tree

Hide file tree

Showing 82 changed files with 71 additions and 925 deletions.
diff --git a/.yarn/cache/@babel-code-frame-npm-7.21.4-5db83e65be-e5390e6ec1.zip b/.yarn/cache/@babel-code-frame-npm-7.21.4-5db83e65be-e5390e6ec1.zip
diff --git a/.yarn/cache/@babel-compat-data-npm-7.22.3-7b67f6cb95-eb001646f4.zip b/.yarn/cache/@babel-compat-data-npm-7.22.3-7b67f6cb95-eb001646f4.zip
diff --git a/.yarn/cache/@babel-core-npm-7.22.1-4ec1915241-bbe45e791f.zip b/.yarn/cache/@babel-core-npm-7.22.1-4ec1915241-bbe45e791f.zip
diff --git a/.yarn/cache/@babel-generator-npm-7.22.3-da14afacf5-ccb6426ca5.zip b/.yarn/cache/@babel-generator-npm-7.22.3-da14afacf5-ccb6426ca5.zip
diff --git a/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.18.6-36e25293d8-88ccd15ced.zip b/.yarn/cache/@babel-helper-annotate-as-pure-npm-7.18.6-36e25293d8-88ccd15ced.zip
diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.22.1-4f7cfd1a17-a686a01bd3.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.22.1-4f7cfd1a17-a686a01bd3.zip
diff --git a/.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.22.1-cdcf9e038d-52d8757621.zip b/.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.22.1-cdcf9e038d-52d8757621.zip
diff --git a/.yarn/cache/@babel-helper-environment-visitor-npm-7.22.1-e00fbc528d-a6b4bb5505.zip b/.yarn/cache/@babel-helper-environment-visitor-npm-7.22.1-e00fbc528d-a6b4bb5505.zip
diff --git a/.yarn/cache/@babel-helper-function-name-npm-7.21.0-a17ce5a05a-d63e63c3e0.zip b/.yarn/cache/@babel-helper-function-name-npm-7.21.0-a17ce5a05a-d63e63c3e0.zip
diff --git a/.yarn/cache/@babel-helper-hoist-variables-npm-7.18.6-6eb061f405-fd9c35bb43.zip b/.yarn/cache/@babel-helper-hoist-variables-npm-7.18.6-6eb061f405-fd9c35bb43.zip
diff --git a/.yarn/cache/@babel-helper-module-imports-npm-7.21.4-e4cd6b4e21-bd330a2eda.zip b/.yarn/cache/@babel-helper-module-imports-npm-7.21.4-e4cd6b4e21-bd330a2eda.zip
diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.22.1-bd7615b6f7-dfa084211a.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.22.1-bd7615b6f7-dfa084211a.zip
diff --git a/.yarn/cache/@babel-helper-plugin-utils-npm-7.21.5-b310faa7aa-6f086e9a84.zip b/.yarn/cache/@babel-helper-plugin-utils-npm-7.21.5-b310faa7aa-6f086e9a84.zip
diff --git a/.yarn/cache/@babel-helper-simple-access-npm-7.21.5-adbdd3a62b-ad212beaa2.zip b/.yarn/cache/@babel-helper-simple-access-npm-7.21.5-adbdd3a62b-ad212beaa2.zip
diff --git a/.yarn/cache/@babel-helper-split-export-declaration-npm-7.18.6-53ebf8ad4c-c6d3dede53.zip b/.yarn/cache/@babel-helper-split-export-declaration-npm-7.18.6-53ebf8ad4c-c6d3dede53.zip
diff --git a/.yarn/cache/@babel-helper-string-parser-npm-7.21.5-9fa0e56f04-36c0ded452.zip b/.yarn/cache/@babel-helper-string-parser-npm-7.21.5-9fa0e56f04-36c0ded452.zip
diff --git a/.yarn/cache/@babel-helper-validator-identifier-npm-7.19.1-d84f19e1dc-0eca5e86a7.zip b/.yarn/cache/@babel-helper-validator-identifier-npm-7.19.1-d84f19e1dc-0eca5e86a7.zip
diff --git a/.yarn/cache/@babel-helper-validator-option-npm-7.21.0-fbe86866e3-8ece4c78ff.zip b/.yarn/cache/@babel-helper-validator-option-npm-7.21.0-fbe86866e3-8ece4c78ff.zip
diff --git a/.yarn/cache/@babel-helpers-npm-7.22.3-0e890dfceb-385289ee8b.zip b/.yarn/cache/@babel-helpers-npm-7.22.3-0e890dfceb-385289ee8b.zip
diff --git a/.yarn/cache/@babel-highlight-npm-7.18.6-9d35ad2e27-92d8ee6154.zip b/.yarn/cache/@babel-highlight-npm-7.18.6-9d35ad2e27-92d8ee6154.zip
diff --git a/.yarn/cache/@babel-parser-npm-7.22.4-32183c89ee-0ca6d3a2d9.zip b/.yarn/cache/@babel-parser-npm-7.22.4-32183c89ee-0ca6d3a2d9.zip
diff --git a/.yarn/cache/@babel-plugin-syntax-jsx-npm-7.21.4-52d55c7a43-bb7309402a.zip b/.yarn/cache/@babel-plugin-syntax-jsx-npm-7.21.4-52d55c7a43-bb7309402a.zip
diff --git a/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.21.4-bcb1097f7e-a59ce2477b.zip b/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.21.4-bcb1097f7e-a59ce2477b.zip
diff --git a/.yarn/cache/@babel-runtime-npm-7.22.10-2771d0ecab-524d41517e.zip b/.yarn/cache/@babel-runtime-npm-7.22.10-2771d0ecab-524d41517e.zip
diff --git a/.yarn/cache/@babel-template-npm-7.21.9-4016aa4c60-6ec2c60d4d.zip b/.yarn/cache/@babel-template-npm-7.21.9-4016aa4c60-6ec2c60d4d.zip
diff --git a/.yarn/cache/@babel-traverse-npm-7.22.4-7501c8e8f8-9560ae2209.zip b/.yarn/cache/@babel-traverse-npm-7.22.4-7501c8e8f8-9560ae2209.zip
diff --git a/.yarn/cache/@babel-types-npm-7.22.4-7dadf03e9d-ffe36bb4f4.zip b/.yarn/cache/@babel-types-npm-7.22.4-7dadf03e9d-ffe36bb4f4.zip
diff --git a/.yarn/cache/@emotion-is-prop-valid-npm-1.2.0-332d343e3d-cc7a19850a.zip b/.yarn/cache/@emotion-is-prop-valid-npm-1.2.0-332d343e3d-cc7a19850a.zip
diff --git a/.yarn/cache/@emotion-memoize-npm-0.8.0-c5dd451828-c87bb110b8.zip b/.yarn/cache/@emotion-memoize-npm-0.8.0-c5dd451828-c87bb110b8.zip
diff --git a/.yarn/cache/@emotion-stylis-npm-0.8.5-3e9db8959f-67ff595844.zip b/.yarn/cache/@emotion-stylis-npm-0.8.5-3e9db8959f-67ff595844.zip
diff --git a/.yarn/cache/@emotion-unitless-npm-0.7.5-14e1171640-f976e5345b.zip b/.yarn/cache/@emotion-unitless-npm-0.7.5-14e1171640-f976e5345b.zip
diff --git a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip b/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip
diff --git a/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip b/.yarn/cache/@types-styled-components-npm-5.1.26-aabda06611-84f53b3101.zip
diff --git a/.yarn/cache/acorn-npm-8.8.1-20e4aea981-4079b67283.zip b/.yarn/cache/acorn-npm-8.8.1-20e4aea981-4079b67283.zip
diff --git a/.yarn/cache/array-includes-npm-3.1.6-d0ff9d248b-f22f8cd8ba.zip b/.yarn/cache/array-includes-npm-3.1.6-d0ff9d248b-f22f8cd8ba.zip
diff --git a/.yarn/cache/array.prototype.flatmap-npm-1.3.1-c65186ca34-8c1c43a499.zip b/.yarn/cache/array.prototype.flatmap-npm-1.3.1-c65186ca34-8c1c43a499.zip
diff --git a/.yarn/cache/babel-plugin-styled-components-npm-2.0.7-543710bd48-80b06b10db.zip b/.yarn/cache/babel-plugin-styled-components-npm-2.0.7-543710bd48-80b06b10db.zip
diff --git a/.yarn/cache/babel-plugin-syntax-jsx-npm-6.18.0-fcf0a98a71-0c7ce5b81d.zip b/.yarn/cache/babel-plugin-syntax-jsx-npm-6.18.0-fcf0a98a71-0c7ce5b81d.zip
diff --git a/.yarn/cache/browserslist-npm-4.21.7-36caf91554-3d0d025e6d.zip b/.yarn/cache/browserslist-npm-4.21.7-36caf91554-3d0d025e6d.zip
diff --git a/.yarn/cache/call-bind-npm-1.0.2-c957124861-f8e31de9d1.zip b/.yarn/cache/call-bind-npm-1.0.2-c957124861-f8e31de9d1.zip
diff --git a/.yarn/cache/camelize-npm-1.0.1-d86ebe085a-91d8611d09.zip b/.yarn/cache/camelize-npm-1.0.1-d86ebe085a-91d8611d09.zip
diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001495-4b9e0263f7-c0a139a2e6.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001495-4b9e0263f7-c0a139a2e6.zip
diff --git a/.yarn/cache/css-color-keywords-npm-1.0.0-fc176df58b-8f125e3ad4.zip b/.yarn/cache/css-color-keywords-npm-1.0.0-fc176df58b-8f125e3ad4.zip
diff --git a/.yarn/cache/css-to-react-native-npm-3.0.0-ab07d67d74-98a2e9d4fb.zip b/.yarn/cache/css-to-react-native-npm-3.0.0-ab07d67d74-98a2e9d4fb.zip
diff --git a/.yarn/cache/deepmerge-npm-4.2.2-112165ced2-a8c43a1ed8.zip b/.yarn/cache/deepmerge-npm-4.2.2-112165ced2-a8c43a1ed8.zip
diff --git a/.yarn/cache/define-properties-npm-1.1.4-85ee575655-ce0aef3f9e.zip b/.yarn/cache/define-properties-npm-1.1.4-85ee575655-ce0aef3f9e.zip
diff --git a/.yarn/cache/electron-to-chromium-npm-1.4.423-69a83103e9-24af6be35b.zip b/.yarn/cache/electron-to-chromium-npm-1.4.423-69a83103e9-24af6be35b.zip
diff --git a/.yarn/cache/es-abstract-npm-1.20.5-48876743a4-00564779dd.zip b/.yarn/cache/es-abstract-npm-1.20.5-48876743a4-00564779dd.zip
diff --git a/.yarn/cache/eslint-import-resolver-node-npm-0.3.6-d9426786c6-6266733af1.zip b/.yarn/cache/eslint-import-resolver-node-npm-0.3.6-d9426786c6-6266733af1.zip
diff --git a/.yarn/cache/eslint-visitor-keys-npm-3.3.0-d329af7c8c-d59e68a7c5.zip b/.yarn/cache/eslint-visitor-keys-npm-3.3.0-d329af7c8c-d59e68a7c5.zip
diff --git a/.yarn/cache/function-bind-npm-1.1.1-b56b322ae9-b32fbaebb3.zip b/.yarn/cache/function-bind-npm-1.1.1-b56b322ae9-b32fbaebb3.zip
diff --git a/.yarn/cache/function.prototype.name-npm-1.1.5-e776a642bb-acd21d733a.zip b/.yarn/cache/function.prototype.name-npm-1.1.5-e776a642bb-acd21d733a.zip
diff --git a/.yarn/cache/get-intrinsic-npm-1.1.3-b6c7bd1010-152d79e872.zip b/.yarn/cache/get-intrinsic-npm-1.1.3-b6c7bd1010-152d79e872.zip
diff --git a/.yarn/cache/internal-slot-npm-1.0.3-9e05eea002-1944f92e98.zip b/.yarn/cache/internal-slot-npm-1.0.3-9e05eea002-1944f92e98.zip
diff --git a/.yarn/cache/is-core-module-npm-2.13.0-e444c50225-053ab101fb.zip b/.yarn/cache/is-core-module-npm-2.13.0-e444c50225-053ab101fb.zip
diff --git a/.yarn/cache/jsx-ast-utils-npm-3.3.3-3d3171e1e4-a2ed78cac4.zip b/.yarn/cache/jsx-ast-utils-npm-3.3.3-3d3171e1e4-a2ed78cac4.zip
diff --git a/.yarn/cache/minimist-npm-1.2.7-51d33b1371-7346574a10.zip b/.yarn/cache/minimist-npm-1.2.7-51d33b1371-7346574a10.zip
diff --git a/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-7d0eda6570.zip b/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-7d0eda6570.zip
diff --git a/.yarn/cache/node-fetch-npm-2.6.11-160e4174c3-249d0666a9.zip b/.yarn/cache/node-fetch-npm-2.6.11-160e4174c3-249d0666a9.zip
diff --git a/.yarn/cache/node-releases-npm-2.0.12-888ed1398a-b8c56db82c.zip b/.yarn/cache/node-releases-npm-2.0.12-888ed1398a-b8c56db82c.zip
diff --git a/.yarn/cache/object-inspect-npm-1.12.2-f125a822c0-a534fc1b85.zip b/.yarn/cache/object-inspect-npm-1.12.2-f125a822c0-a534fc1b85.zip
diff --git a/.yarn/cache/object.entries-npm-1.1.6-5f9ba14b46-0f8c47517e.zip b/.yarn/cache/object.entries-npm-1.1.6-5f9ba14b46-0f8c47517e.zip
diff --git a/.yarn/cache/object.fromentries-npm-2.0.6-424cf4cd3c-453c6d6941.zip b/.yarn/cache/object.fromentries-npm-2.0.6-424cf4cd3c-453c6d6941.zip
diff --git a/.yarn/cache/object.values-npm-1.1.6-ab9b67ccd3-f6fff9fd81.zip b/.yarn/cache/object.values-npm-1.1.6-ab9b67ccd3-f6fff9fd81.zip
diff --git a/.yarn/cache/postcss-npm-8.4.28-ce7cf45f10-f605c24a36.zip b/.yarn/cache/postcss-npm-8.4.28-ce7cf45f10-f605c24a36.zip
diff --git a/.yarn/cache/regexp.prototype.flags-npm-1.4.3-df1c08b65d-51228bae73.zip b/.yarn/cache/regexp.prototype.flags-npm-1.4.3-df1c08b65d-51228bae73.zip
diff --git a/.yarn/cache/resolve-npm-1.22.4-faa4f32bdd-23f25174c2.zip b/.yarn/cache/resolve-npm-1.22.4-faa4f32bdd-23f25174c2.zip
diff --git a/.yarn/cache/resolve-patch-efbbaf0edd-c45f2545fd.zip b/.yarn/cache/resolve-patch-efbbaf0edd-c45f2545fd.zip
diff --git a/.yarn/cache/semver-npm-6.3.0-b3eace8bfd-1b26ecf6db.zip b/.yarn/cache/semver-npm-6.3.0-b3eace8bfd-1b26ecf6db.zip
diff --git a/.yarn/cache/semver-npm-7.3.8-25a996cb4f-ba9c7cbbf2.zip b/.yarn/cache/semver-npm-7.3.8-25a996cb4f-ba9c7cbbf2.zip
diff --git a/.yarn/cache/shallowequal-npm-1.1.0-6688d419cb-f4c1de0837.zip b/.yarn/cache/shallowequal-npm-1.1.0-6688d419cb-f4c1de0837.zip
diff --git a/.yarn/cache/slate-react-npm-0.98.1-542a779943-df887a3a68.zip b/.yarn/cache/slate-react-npm-0.98.1-542a779943-df887a3a68.zip
diff --git a/.yarn/cache/sshpk-npm-1.17.0-95f17f597f-ba109f65c8.zip b/.yarn/cache/sshpk-npm-1.17.0-95f17f597f-ba109f65c8.zip
diff --git a/.yarn/cache/string.prototype.trimend-npm-1.0.6-304246ecc1-0fdc34645a.zip b/.yarn/cache/string.prototype.trimend-npm-1.0.6-304246ecc1-0fdc34645a.zip
diff --git a/.yarn/cache/string.prototype.trimstart-npm-1.0.6-0926caea6c-89080feef4.zip b/.yarn/cache/string.prototype.trimstart-npm-1.0.6-0926caea6c-89080feef4.zip
diff --git a/.yarn/cache/styled-components-npm-5.3.8-6714c3226a-60148083f4.zip b/.yarn/cache/styled-components-npm-5.3.8-6714c3226a-60148083f4.zip
diff --git a/.yarn/cache/tslib-npm-2.5.3-7756051e02-88902b309a.zip b/.yarn/cache/tslib-npm-2.5.3-7756051e02-88902b309a.zip
diff --git a/.yarn/cache/update-browserslist-db-npm-1.0.11-2c8e64258f-b98327518f.zip b/.yarn/cache/update-browserslist-db-npm-1.0.11-2c8e64258f-b98327518f.zip
diff --git a/package.json b/package.json
@@ -104,7 +104,6 @@
     "shortid": "^2.0.0",
     "slate": "^0.94.1",
     "slate-react": "^0.99.0",
-    "styled-components": "^5.3.8",
     "swr": "^2.2.4",
     "ts-key-enum": "^2.0.12",
     "ts-node": "^10.9.1",
@@ -130,7 +129,6 @@
     "@types/react-syntax-highlighter": "^15.5.8",
     "@types/shortid": "^0.0.29",
     "@types/slate-react": "^0.50.1",
-    "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9.0.5",
     "autoprefixer": "^10.4.16",
     "cypress": "^12.17.4",

diff --git a/src/frontend/plugins/serlo-injection/editor.tsx b/src/frontend/plugins/serlo-injection/editor.tsx
@@ -14,12 +14,6 @@ import { SerloInjectionRenderer } from './renderer'
 import { PluginToolbar } from '@/serlo-editor/editor-ui/plugin-toolbar'
 import { PluginDefaultTools } from '@/serlo-editor/editor-ui/plugin-toolbar/plugin-tool-menu/plugin-default-tools'
 
-const PlaceholderWrapper = styled.div({
-  position: 'relative',
-  width: '100%',
-  textAlign: 'center',
-})
-
 export const SerloInjectionEditor = (props: SerloInjectionProps) => {
   const { focused, id } = props
   const config = useSerloInjectionConfig(props.config)
@@ -41,7 +35,8 @@ export const SerloInjectionEditor = (props: SerloInjectionProps) => {
       {cache ? (
         <PreviewOverlay
           focused={props.focused || false}
-          onChange={(nextActive) => {
+          // Todo: nextActive should be of type SetStateAction<boolean>
+          onChange={(nextActive: boolean | ((x: boolean) => boolean)) => {
             setPreview(nextActive)
             if (nextActive) {
               setCache(props.state.value)
@@ -51,12 +46,12 @@ export const SerloInjectionEditor = (props: SerloInjectionProps) => {
           <SerloInjectionRenderer contentId={cache} />
         </PreviewOverlay>
       ) : (
-        <PlaceholderWrapper>
+        <div className="relative w-full text-center">
           <FaIcon
             icon={faNewspaper}
             className="relative w-full text-center text-[5rem] text-gray-400"
           />
-        </PlaceholderWrapper>
+        </div>
       )}
 
       {props.focused && !preview ? (
@@ -70,6 +65,7 @@ export const SerloInjectionEditor = (props: SerloInjectionProps) => {
             }}
             width="30%"
             inputWidth="100%"
+            tw={undefined}
           />
         </div>
       ) : null}

diff --git a/src/frontend/plugins/serlo-injection/renderer.tsx b/src/frontend/plugins/serlo-injection/renderer.tsx
@@ -1,26 +1,23 @@
 import IframeResizer from 'iframe-resizer-react'
 
-import styled from 'styled-components'
-
-const Iframe = styled(IframeResizer)({
-  width: '1px',
-  minWidth: '100%',
-  border: '1px solid #ddd',
-  borderRadius: '2px',
-})
-
 export function SerloInjectionRenderer(props: {
   contentId: string | undefined
 }) {
   const url = createURL(props.contentId)
 
   return (
-    <Iframe
+    <IframeResizer
       key={url}
       src={url}
       checkOrigin={false}
       heightCalculationMethod="lowestElement"
       sizeHeight
+      style={{
+        width: '1px',
+        minWidth: '100%',
+        border: '1px solid #ddd',
+        borderRadius: '2px',
+      }}
     />
   )
 }