refactor: remove index files from components (#1086)

site/src/AppRouter.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Route, Routes } from "react-router-dom"
-import { RequireAuth } from "./components"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
+import { RequireAuth } from "./components/Page/RequireAuth"
 import { PreferencesLayout } from "./components/Preferences/Layout"
 import { IndexPage } from "./pages"
 import { NotFoundPage } from "./pages/404"

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"

site/src/forms/CreateTemplateForm.tsx

@@ -4,15 +4,12 @@ import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateTemplateRequest, Organization, Provisioner, Template } from "../api/types"
-import { LoadingButton } from "../components/Button"
-import {
-  DropdownItem,
-  FormCloseButton,
-  FormDropdownField,
-  FormSection,
-  FormTextField,
-  FormTitle,
-} from "../components/Form"
+import { LoadingButton } from "../components/Button/LoadingButton"
+import { FormCloseButton } from "../components/Form/FormCloseButton"
+import { DropdownItem, FormDropdownField } from "../components/Form/FormDropdownField"
+import { FormSection } from "../components/Form/FormSection"
+import { FormTextField } from "../components/Form/FormTextField"
+import { FormTitle } from "../components/Form/FormTitle"
 
 export interface CreateTemplateFormProps {
   provisioners: Provisioner[]

site/src/forms/CreateWorkspaceForm.tsx

@@ -4,8 +4,11 @@ import { FormikContextType, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
 import { CreateWorkspaceRequest, Template, Workspace } from "../api/types"
-import { LoadingButton } from "../components/Button"
-import { FormCloseButton, FormSection, FormTextField, FormTitle } from "../components/Form"
+import { LoadingButton } from "../components/Button/LoadingButton"
+import { FormCloseButton } from "../components/Form/FormCloseButton"
+import { FormSection } from "../components/Form/FormSection"
+import { FormTextField } from "../components/Form/FormTextField"
+import { FormTitle } from "../components/Form/FormTitle"
 
 export interface CreateWorkspaceForm {
   template: Template

site/src/pages/UsersPage/UsersPage.tsx

@@ -1,6 +1,6 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { ErrorSummary } from "../../components/ErrorSummary"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"
 

site/src/pages/UsersPage/UsersPageView.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { Pager, UserResponse } from "../../api/types"
-import { Header } from "../../components/Header"
+import { Header } from "../../components/Header/Header"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 
 export const Language = {

site/src/pages/cli-auth.tsx

@@ -3,7 +3,7 @@ import { useActor } from "@xstate/react"
 import React, { useContext, useEffect, useState } from "react"
 import { getApiKey } from "../api"
 import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
-import { CliAuthToken } from "../components/SignIn"
+import { CliAuthToken } from "../components/SignIn/CliAuthToken"
 import { XServiceContext } from "../xServices/StateContext"
 
 export const CliAuthenticationPage: React.FC = () => {

site/src/pages/login.tsx

@@ -5,7 +5,7 @@ import { Navigate, useLocation } from "react-router-dom"
 import { Footer } from "../components/Page/Footer"
 import { retrieveRedirect } from "../util/redirect"
 import { XServiceContext } from "../xServices/StateContext"
-import { SignInForm } from "./../components/SignIn"
+import { SignInForm } from "./../components/SignIn/SignInForm"
 
 export const useStyles = makeStyles((theme) => ({
   root: {

site/src/pages/preferences/account.tsx

@@ -2,7 +2,7 @@ import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { isApiError, mapApiErrorToFieldErrors } from "../../api/errors"
 import { AccountForm } from "../../components/Preferences/AccountForm"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 import { XServiceContext } from "../../xServices/StateContext"
 
 export const Language = {

site/src/pages/preferences/linkedAccounts.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 
 const Language = {
   title: "Linked Accounts",

site/src/pages/preferences/security.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 
 const Language = {
   title: "Security",

site/src/pages/preferences/sshKeys.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Section } from "../../components/Section"
+import { Section } from "../../components/Section/Section"
 
 const Language = {
   title: "SSH Keys",

site/src/pages/templates/[organization]/[template]/create.tsx

@@ -4,7 +4,7 @@ import { useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
 import * as API from "../../../../api"
 import * as Types from "../../../../api/types"
-import { ErrorSummary } from "../../../../components/ErrorSummary"
+import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
 import { CreateWorkspaceForm } from "../../../../forms/CreateWorkspaceForm"
 import { unsafeSWRArgument } from "../../../../util"

site/src/pages/templates/[organization]/[template]/index.tsx

@@ -4,11 +4,11 @@ import React from "react"
 import { Link, useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
 import { Organization, Template, Workspace } from "../../../../api/types"
-import { EmptyState } from "../../../../components/EmptyState"
-import { ErrorSummary } from "../../../../components/ErrorSummary"
-import { Header } from "../../../../components/Header"
+import { EmptyState } from "../../../../components/EmptyState/EmptyState"
+import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
+import { Header } from "../../../../components/Header/Header"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
-import { Column, Table } from "../../../../components/Table"
+import { Column, Table } from "../../../../components/Table/Table"
 import { unsafeSWRArgument } from "../../../../util"
 import { firstOrItem } from "../../../../util/array"
 

site/src/pages/templates/index.tsx

@@ -4,12 +4,12 @@ import React from "react"
 import { Link } from "react-router-dom"
 import useSWR from "swr"
 import { Organization, Template } from "../../api/types"
-import { EmptyState } from "../../components"
 import { CodeExample } from "../../components/CodeExample/CodeExample"
-import { ErrorSummary } from "../../components/ErrorSummary"
-import { Header } from "../../components/Header"
+import { EmptyState } from "../../components/EmptyState/EmptyState"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
+import { Header } from "../../components/Header/Header"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-import { Column, Table } from "../../components/Table"
+import { Column, Table } from "../../components/Table/Table"
 
 export const TemplatesPage: React.FC = () => {
   const styles = useStyles()

site/src/pages/workspaces/[workspace].tsx

@@ -3,9 +3,9 @@ import React from "react"
 import { useParams } from "react-router-dom"
 import useSWR from "swr"
 import * as Types from "../../api/types"
-import { ErrorSummary } from "../../components/ErrorSummary"
+import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
-import { Workspace } from "../../components/Workspace"
+import { Workspace } from "../../components/Workspace/Workspace"
 import { unsafeSWRArgument } from "../../util"
 import { firstOrItem } from "../../util/array"
 

site/src/testHelpers/index.tsx

@@ -3,7 +3,7 @@ import { render as wrappedRender, RenderResult } from "@testing-library/react"
 import { createMemoryHistory } from "history"
 import React from "react"
 import { MemoryRouter, Route, Routes, unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
-import { RequireAuth } from "../components"
+import { RequireAuth } from "../components/Page/RequireAuth"
 import { dark } from "../theme"
 import { XServiceProvider } from "../xServices/StateContext"
 import { MockUser } from "./entities"

site/src/xServices/auth/authXService.ts

@@ -1,7 +1,7 @@
 import { assign, createMachine } from "xstate"
 import * as API from "../../api"
 import * as Types from "../../api/types"
-import { displaySuccess } from "../../components/Snackbar"
+import { displaySuccess } from "../../components/Snackbar/utils"
 
 export const Language = {
   successProfileUpdate: "Updated preferences.",