refactor: remove index files from components (#1086)

site/src/components/AuthAndFrame/AuthAndFrame.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Navbar } from "../Navbar"
+import { Navbar } from "../Navbar/Navbar"
 import { Footer } from "../Page/Footer"
 import { RequireAuth } from "../Page/RequireAuth"
 

site/src/components/Button/index.ts

@@ -1,3 +0,0 @@
-export * from "./CopyButton"
-export * from "./LoadingButton"
-export * from "./SplitButton"

site/src/components/CodeBlock/CodeBlock.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { CodeBlock, CodeBlockProps } from "./index"
+import { CodeBlock, CodeBlockProps } from "./CodeBlock"
 
 const sampleLines = `Successfully assigned coder/image-jcws7 to cluster-1
 Container image "gcr.io/coder-dogfood/master/coder-dev-ubuntu@sha256" already present on machine

site/src/components/CodeBlock/CodeBlock.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
 import { render } from "../../testHelpers"
-import { CodeBlock } from "./index"
+import { CodeBlock } from "./CodeBlock"
 
 describe("CodeBlock", () => {
   it("renders lines)", async () => {

site/src/components/CodeExample/CodeExample.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { CopyButton } from "../Button"
+import { CopyButton } from "../Button/CopyButton"
 
 export interface CodeExampleProps {
   code: string

site/src/components/CodeExample/index.ts

@@ -1 +0,0 @@
-export * from "./CodeExample"

site/src/components/EmptyState/EmptyState.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
 import { render } from "../../testHelpers"
-import { EmptyState } from "./index"
+import { EmptyState } from "./EmptyState"
 
 describe("EmptyState", () => {
   it("renders (smoke test)", async () => {

site/src/components/ErrorSummary/ErrorSummary.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
-import { ErrorSummary, ErrorSummaryProps } from "."
+import { ErrorSummary, ErrorSummaryProps } from "./ErrorSummary"
 
 export default {
   title: "components/ErrorSummary",

site/src/components/ErrorSummary/ErrorSummary.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react"
 import React from "react"
-import { ErrorSummary } from "./index"
+import { ErrorSummary } from "./ErrorSummary"
 
 describe("ErrorSummary", () => {
   it("renders", async () => {

site/src/components/Form/utils.test.tsx

@@ -1,5 +1,5 @@
 import { FormikContextType } from "formik/dist/types"
-import { getFormHelpers, onChangeTrimmed } from "./index"
+import { getFormHelpers, onChangeTrimmed } from "./utils"
 
 interface TestType {
   untouchedGoodField: string

site/src/components/Form/utils.ts

@@ -1,12 +1,6 @@
 import { FormikContextType, getIn } from "formik"
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler } from "react"
 
-export * from "./FormCloseButton"
-export * from "./FormDropdownField"
-export * from "./FormSection"
-export * from "./FormTextField"
-export * from "./FormTitle"
-
 interface FormHelpers {
   name: string
   onBlur: FocusEventHandler

site/src/components/Header/Header.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react"
 import React from "react"
 import { render } from "../../testHelpers"
-import { Header } from "./index"
+import { Header } from "./Header"
 
 describe("Header", () => {
   it("renders title and subtitle", async () => {

site/src/components/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { XServiceContext } from "../../xServices/StateContext"
-import { NavbarView } from "./NavbarView"
+import { NavbarView } from "./NavbarView/NavbarView"
 
 export const Navbar: React.FC = () => {
   const xServices = useContext(XServiceContext)

site/src/components/Navbar/NavbarView/NavbarView.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { NavbarView, NavbarViewProps } from "."
+import { NavbarView, NavbarViewProps } from "./NavbarView"
 
 export default {
   title: "components/NavbarView",

site/src/components/Navbar/NavbarView/NavbarView.test.tsx

@@ -1,8 +1,8 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { NavbarView } from "."
 import { render } from "../../../testHelpers"
 import { MockUser } from "../../../testHelpers/entities"
+import { NavbarView } from "./NavbarView"
 
 describe("NavbarView", () => {
   const noop = () => {

site/src/components/Navbar/NavbarView/NavbarView.tsx

@@ -7,7 +7,7 @@ import { UserResponse } from "../../../api/types"
 import { navHeight } from "../../../theme/constants"
 import { AdminDropdown } from "../../AdminDropdown/AdminDropdown"
 import { Logo } from "../../Icons/Logo"
-import { UserDropdown } from "../UserDropdown"
+import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export interface NavbarViewProps {
   user?: UserResponse

site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx

@@ -1,7 +1,7 @@
 import Box from "@material-ui/core/Box"
 import { Story } from "@storybook/react"
 import React from "react"
-import { UserDropdown, UserDropdownProps } from "."
+import { UserDropdown, UserDropdownProps } from "./UsersDropdown"
 
 export default {
   title: "components/UserDropdown",

site/src/components/Navbar/UserDropdown/UserDropdown.test.tsx

@@ -1,8 +1,8 @@
 import { screen } from "@testing-library/react"
 import React from "react"
-import { Language, UserDropdown, UserDropdownProps } from "."
 import { render } from "../../../testHelpers"
 import { MockUser } from "../../../testHelpers/entities"
+import { Language, UserDropdown, UserDropdownProps } from "./UsersDropdown"
 
 const renderAndClick = async (props: Partial<UserDropdownProps> = {}) => {
   render(<UserDropdown user={props.user ?? MockUser} onSignOut={props.onSignOut ?? jest.fn()} />)

site/src/components/Navbar/UserDropdown/UsersDropdown.tsx

@@ -12,7 +12,7 @@ import { BorderedMenu } from "../../BorderedMenu/BorderedMenu"
 import { CloseDropdown, OpenDropdown } from "../../DropdownArrows/DropdownArrows"
 import { DocsIcon } from "../../Icons/DocsIcon"
 import { LogoutIcon } from "../../Icons/LogoutIcon"
-import { UserAvatar } from "../../User"
+import { UserAvatar } from "../../User/UserAvatar"
 import { UserProfileCard } from "../../User/UserProfileCard"
 
 export const Language = {

site/src/components/Page/index.tsx

@@ -1,2 +0,0 @@
-export * from "./Footer"
-export * from "./RequireAuth"

site/src/components/Preferences/AccountForm.tsx

@@ -3,9 +3,9 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../Form"
+import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
 import { Stack } from "../Stack/Stack"
-import { LoadingButton } from "./../Button"
+import { LoadingButton } from "./../Button/LoadingButton"
 
 interface AccountFormValues {
   name: string

site/src/components/Preferences/Layout.tsx

@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import React from "react"
 import { Outlet } from "react-router-dom"
 import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
-import { TabPanel } from "../TabPanel"
+import { TabPanel } from "../TabPanel/TabPanel"
 
 export const Language = {
   accountLabel: "Account",

site/src/components/Section/SectionView.stories.tsx

@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
 import TextField from "@material-ui/core/TextField"
 import { Story } from "@storybook/react"
 import React from "react"
-import { Section, SectionProps } from "./"
+import { Section, SectionProps } from "./Section"
 
 export default {
   title: "components/Section",

site/src/components/SignIn/CliAuthToken.tsx

@@ -2,7 +2,7 @@ import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { CodeExample } from "../CodeExample"
+import { CodeExample } from "../CodeExample/CodeExample"
 
 export interface CliAuthTokenProps {
   sessionToken: string

site/src/components/SignIn/SignInForm.tsx

@@ -4,8 +4,8 @@ import TextField from "@material-ui/core/TextField"
 import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../Form"
-import { LoadingButton } from "./../Button"
+import { getFormHelpers, onChangeTrimmed } from "../Form/utils"
+import { LoadingButton } from "./../Button/LoadingButton"
 import { Welcome } from "./Welcome"
 
 /**

site/src/components/SignIn/index.tsx

@@ -1,2 +0,0 @@
-export * from "./CliAuthToken"
-export * from "./SignInForm"

site/src/components/Snackbar/GlobalSnackbar.tsx

@@ -1,5 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React, { useCallback, useState } from "react"
+import { useCustomEvent } from "../../hooks/events"
+import { CustomEventListener } from "../../util/events"
+import { ErrorIcon } from "../Icons/ErrorIcon"
+import { Typography } from "../Typography/Typography"
+import { EnterpriseSnackbar } from "./EnterpriseSnackbar"
 import {
   AdditionalMessage,
   isNotificationList,
@@ -8,12 +13,7 @@ import {
   MsgType,
   NotificationMsg,
   SnackbarEventType,
-} from "."
-import { useCustomEvent } from "../../hooks/events"
-import { CustomEventListener } from "../../util/events"
-import { ErrorIcon } from "../Icons/ErrorIcon"
-import { Typography } from "../Typography/Typography"
-import { EnterpriseSnackbar } from "./EnterpriseSnackbar"
+} from "./utils"
 
 export const GlobalSnackbar: React.FC = () => {
   const styles = useStyles()

site/src/components/Snackbar/utils.test.ts

@@ -1,4 +1,4 @@
-import { displaySuccess, isNotificationTextPrefixed, MsgType, NotificationMsg } from "./index"
+import { displaySuccess, isNotificationTextPrefixed, MsgType, NotificationMsg } from "./utils"
 
 describe("Snackbar", () => {
   describe("isNotificationTextPrefixed", () => {

site/src/components/Snackbar/utils.ts

@@ -1,11 +1,5 @@
 import { dispatchCustomEvent } from "../../util/events"
 
-///////////////////////////////////////////////////////////////////////////////
-// Notification Component
-///////////////////////////////////////////////////////////////////////////////
-
-export { GlobalSnackbar } from "./GlobalSnackbar"
-
 ///////////////////////////////////////////////////////////////////////////////
 // Notification Types
 ///////////////////////////////////////////////////////////////////////////////

site/src/components/TabPanel/TabPanel.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import React from "react"
-import { TabPanel, TabPanelProps } from "."
+import { TabPanel, TabPanelProps } from "./TabPanel"
 
 export default {
   title: "components/TabPanel",

site/src/components/Table/Cells/UserCell.tsx

@@ -3,7 +3,7 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { UserAvatar, UserAvatarProps } from "../../User"
+import { UserAvatar, UserAvatarProps } from "../../User/UserAvatar"
 
 export interface UserCellProps {
   Avatar: UserAvatarProps

site/src/components/Table/index.tsx

@@ -1 +0,0 @@
-export * from "./Table"

site/src/components/User/index.ts

@@ -1,2 +0,0 @@
-export * from "./UserAvatar"
-export * from "./UserProfileCard"

site/src/components/UsersTable/UsersTable.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { UserResponse } from "../../api/types"
-import { Column, Table } from "../../components/Table"
-import { EmptyState } from "../EmptyState"
+import { Column, Table } from "../../components/Table/Table"
+import { EmptyState } from "../EmptyState/EmptyState"
 import { UserCell } from "../Table/Cells/UserCell"
 
 const Language = {

site/src/components/Workspace/index.ts

@@ -1 +0,0 @@
-export * from "./Workspace"

site/src/components/index.tsx

@@ -1,3 +0,0 @@
-export * from "./Button"
-export * from "./EmptyState"
-export * from "./Page"