Don't re-export components

src/components/App/App.tsx

@@ -1,7 +1,10 @@
 import React, { Suspense } from "react";
 
-import { Toolbar, IconGrid, Header, Footer } from "../";
 import "./App.css";
+import Header from "../Header/Header";
+import Toolbar from "../Toolbar/Toolbar";
+import IconGrid from "../IconGrid/IconGrid";
+import Footer from "../Footer/Footer";
 
 const App: React.FC<any> = () => {
   return (

src/components/Info/Info.css

@@ -1,49 +0,0 @@
-section.info {
-  margin: 72px auto 96px;
-  width: 66.67%;
-}
-
-h2 {
-  font-size: 48px;
-  font-weight: 400;
-  line-height: 60px;
-  margin: 0 0 96px;
-}
-
-h4 {
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 40px;
-  margin: 0 0 8px;
-}
-
-p {
-  margin-top: 0;
-}
-
-ul {
-  margin: 0 0 32px;
-  list-style: circle outside;
-  padding-left: 32px;
-}
-
-.feature {
-  display: flex;
-  margin-bottom: 96px;
-}
-
-.feature h3 {
-  flex: 1;
-  margin: 0;
-  padding-right: 40px;
-  font-size: 32px;
-  font-weight: 400;
-  line-height: 40px;
-}
-
-.feature-contents {
-  flex: 3;
-  padding-top: 6px;
-  font-size: 20px;
-  line-height: 30px;
-}

src/components/Info/Info.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import "./Info.css";
-
-type InfoProps = { id: string, role?: string };
-
-const Info: React.FC<InfoProps> = ({ id, role, children }) => {
-  return <section id={id} role={role} className="info">{children}</section>;
-};
-
-export default Info;

src/components/Panorama/Panorama.css

@@ -1,5 +0,0 @@
-figure {
-  height: 400px;
-  margin: 0;
-  background-color: #FFD171;
-}

src/components/Panorama/Panorama.tsx

@@ -1,28 +0,0 @@
-// @ts-nocheck
-import React from "react";
-import "./Panorama.css";
-
-type PanoramaProps = {};
-
-const Panorama: React.FC<PanoramaProps> = () => {
-  return (
-    <section id="panorama">
-      {/* <figure></figure> */}
-      <img width="100%" src={require("../../assets/pano.gif")} alt="Loading" />
-      <div style={{ display: "flex", justifyContent: "center" }}>
-        <div
-          style={{
-            marginTop: 12,
-            border: "1px solid black",
-            borderRadius: 4,
-            width: 222,
-            height: 8,
-            backgroundColor: "gainsborough",
-          }}
-        ></div>
-      </div>
-    </section>
-  );
-};
-
-export default Panorama;

src/components/Toolbar/Toolbar.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 
-import { SearchInput, SizeInput, StyleInput, ColorInput } from "../";
 import "./Toolbar.css";
+import StyleInput from "../StyleInput/StyleInput";
+import SearchInput from "../SearchInput/SearchInput";
+import SizeInput from "../SizeInput/SizeInput";
+import ColorInput from "../ColorInput/ColorInput";
 
 type ToolbarProps = {};
 

src/components/index.ts

@@ -1,11 +0,0 @@
-export { default as App } from "./App/App";
-export { default as Header } from "./Header/Header";
-export { default as Panorama } from "./Panorama/Panorama";
-export { default as Info } from "./Info/Info";
-export { default as Toolbar } from "./Toolbar/Toolbar";
-export { default as IconGrid } from "./IconGrid/IconGrid";
-export { default as ColorInput } from "./ColorInput/ColorInput";
-export { default as SearchInput } from "./SearchInput/SearchInput";
-export { default as SizeInput } from "./SizeInput/SizeInput";
-export { default as StyleInput } from "./StyleInput/StyleInput";
-export { default as Footer } from "./Footer/Footer";

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import * as serviceWorker from "./serviceWorker";
-import { App } from "./components";
+import App from "./components/App/App";
 import { RecoilRoot } from "recoil";
 
 ReactDOM.render(