diff --git a/Composer/packages/client/__tests__/components/CreationFlow/CreateOptions/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlow/CreateOptions/index.test.tsx
index a95d39733c..d8e6f1f249 100644
--- a/Composer/packages/client/__tests__/components/CreationFlow/CreateOptions/index.test.tsx
+++ b/Composer/packages/client/__tests__/components/CreationFlow/CreateOptions/index.test.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
import { fireEvent } from '@bfc/test-utils';
import { renderWithStore } from '../../../testUtils';
-import { CreateOptions } from '../../../../src/components/CreationFlow/CreateOptions';
+import { CreateOptions } from '../../../../src/components/CreationFlow/CreateOptions/CreateOptions';
describe('', () => {
const handleDismissMock = jest.fn();
diff --git a/Composer/packages/client/__tests__/components/CreationFlow/DefineConversation/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlow/DefineConversation/index.test.tsx
index 93e1508fe1..e1995dba1f 100644
--- a/Composer/packages/client/__tests__/components/CreationFlow/DefineConversation/index.test.tsx
+++ b/Composer/packages/client/__tests__/components/CreationFlow/DefineConversation/index.test.tsx
@@ -6,7 +6,7 @@ import { fireEvent } from '@bfc/test-utils';
import { renderWithStore } from '../../../testUtils';
import { StorageFolder } from '../../../../src/store/types';
-import DefineConversation from '../../../../src/components/CreationFlow/DefineConversation';
+import DefineConversation from '../../../../src/components/CreationFlow/DefineConversation/DefineConversation';
describe('', () => {
const onCurrentPathUpdateMock = jest.fn();
diff --git a/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx b/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
index 125f6879ed..aa9574eee5 100644
--- a/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
+++ b/Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx
@@ -6,10 +6,10 @@ import { render, fireEvent } from '@bfc/test-utils';
import { createHistory, createMemorySource, LocationProvider } from '@reach/router';
import { StoreContext } from '../../../src/store';
-import CreationFlow from '../../../src/components/CreationFlow/index';
+import CreationFlow from '../../../src/components/CreationFlow/CreationFlow';
import { CreationFlowStatus } from '../../../src/constants';
-jest.mock('../../../src/components/DialogWrapper', () => {
+jest.mock('../../../src/components/DialogWrapper/DialogWrapper', () => {
return {
DialogWrapper: jest.fn((props) => {
return props.children;
diff --git a/Composer/packages/client/__tests__/components/DialogWrapper/index.test.tsx b/Composer/packages/client/__tests__/components/DialogWrapper/index.test.tsx
index b7ffbfeb9f..6f1e7f95f7 100644
--- a/Composer/packages/client/__tests__/components/DialogWrapper/index.test.tsx
+++ b/Composer/packages/client/__tests__/components/DialogWrapper/index.test.tsx
@@ -4,7 +4,7 @@
import React from 'react';
import { render } from '@bfc/test-utils';
-import { DialogWrapper } from '../../../src/components/DialogWrapper';
+import { DialogWrapper } from '../../../src/components/DialogWrapper/DialogWrapper';
import { DialogTypes } from '../../../src/components/DialogWrapper/styles';
describe('', () => {
diff --git a/Composer/packages/client/__tests__/components/TestController/emulatorOpenButton.test.tsx b/Composer/packages/client/__tests__/components/TestController/emulatorOpenButton.test.tsx
index d93ff3e35b..5cd7cd2294 100644
--- a/Composer/packages/client/__tests__/components/TestController/emulatorOpenButton.test.tsx
+++ b/Composer/packages/client/__tests__/components/TestController/emulatorOpenButton.test.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
import { render, fireEvent } from '@bfc/test-utils';
import { EmulatorOpenButton } from '../../../src/components/TestController/emulatorOpenButton';
-import { BotStatus } from '../../../src/constants/index';
+import { BotStatus } from '../../../src/constants';
describe('', () => {
it('should show the button to open emulator', () => {
diff --git a/Composer/packages/client/__tests__/components/appUpdater.test.tsx b/Composer/packages/client/__tests__/components/appUpdater.test.tsx
index 3973fdef04..bea9d98311 100644
--- a/Composer/packages/client/__tests__/components/appUpdater.test.tsx
+++ b/Composer/packages/client/__tests__/components/appUpdater.test.tsx
@@ -3,7 +3,7 @@
import React from 'react';
-import { AppUpdater } from '../../src/components/AppUpdater';
+import { AppUpdater } from '../../src/components/AppUpdater/AppUpdater';
import { AppUpdaterStatus } from '../../src/constants';
import { renderWithStore } from '../testUtils';
diff --git a/Composer/packages/client/__tests__/components/conversation.test.jsx b/Composer/packages/client/__tests__/components/conversation.test.jsx
index 723f32b6ad..dd9ed19fc8 100644
--- a/Composer/packages/client/__tests__/components/conversation.test.jsx
+++ b/Composer/packages/client/__tests__/components/conversation.test.jsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { render } from '@bfc/test-utils';
-import '../../src/components/Conversation';
+import '../../src/components/Conversation/Conversation';
describe('', () => {
it('should render the conversation', async () => {
diff --git a/Composer/packages/client/__tests__/components/design.test.jsx b/Composer/packages/client/__tests__/components/design.test.jsx
index 9e438f6af5..6f620b4d9f 100644
--- a/Composer/packages/client/__tests__/components/design.test.jsx
+++ b/Composer/packages/client/__tests__/components/design.test.jsx
@@ -6,9 +6,9 @@ import { render, fireEvent } from '@bfc/test-utils';
import { renderWithStore } from '../testUtils';
import { dialogs } from '../constants.json';
+import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
import { TriggerCreationModal } from './../../src/components/ProjectTree/TriggerCreationModal';
-import { ProjectTree } from './../../src/components/ProjectTree';
import { CreateDialogModal } from './../../src/pages/design/createDialogModal';
jest.mock('@bfc/code-editor', () => {
diff --git a/Composer/packages/client/__tests__/components/errorBoundary.test.jsx b/Composer/packages/client/__tests__/components/errorBoundary.test.jsx
index c35a8d7738..a4a759220f 100644
--- a/Composer/packages/client/__tests__/components/errorBoundary.test.jsx
+++ b/Composer/packages/client/__tests__/components/errorBoundary.test.jsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { render } from '@bfc/test-utils';
-import { ErrorBoundary } from '../../src/components/ErrorBoundary/index';
+import { ErrorBoundary } from '../../src/components/ErrorBoundary/ErrorBoundary';
const Store = React.createContext({
actions: {
diff --git a/Composer/packages/client/__tests__/components/header.test.jsx b/Composer/packages/client/__tests__/components/header.test.jsx
index 68c28604b7..163d406596 100644
--- a/Composer/packages/client/__tests__/components/header.test.jsx
+++ b/Composer/packages/client/__tests__/components/header.test.jsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { render } from '@bfc/test-utils';
-import { Header } from '../../src/components/Header';
+import { Header } from '../../src/components/Header/Header';
describe('', () => {
it('should render the header', () => {
diff --git a/Composer/packages/client/__tests__/components/home.test.jsx b/Composer/packages/client/__tests__/components/home.test.jsx
index ff99ab4472..1c8cbddb19 100644
--- a/Composer/packages/client/__tests__/components/home.test.jsx
+++ b/Composer/packages/client/__tests__/components/home.test.jsx
@@ -6,7 +6,7 @@ import { fireEvent, render } from '@bfc/test-utils';
import { RecentBotList } from '../../src/pages/home/RecentBotList';
import { ExampleList } from '../../src/pages/home/ExampleList';
-import { ToolBar } from '../../src/components/ToolBar/index';
+import { ToolBar } from '../../src/components/ToolBar/ToolBar';
describe('', () => {
it('should dispatch onSelectionChanged event when clicked on a link on ', () => {
const recentProjects = [
diff --git a/Composer/packages/client/__tests__/components/onboarding.test.jsx b/Composer/packages/client/__tests__/components/onboarding.test.jsx
index 962ab8f53e..05cdd351cc 100644
--- a/Composer/packages/client/__tests__/components/onboarding.test.jsx
+++ b/Composer/packages/client/__tests__/components/onboarding.test.jsx
@@ -4,11 +4,11 @@
import React from 'react';
import { render } from '@bfc/test-utils';
-import OnboardingContext from '../../src/Onboarding/context';
+import OnboardingContext from '../../src/Onboarding/OnboardingContext';
import { StoreContext } from '../../src/store';
-import TeachingBubbles from '../../src/Onboarding/TeachingBubbles';
-import { stepSets as defaultStepSets } from '../../src/Onboarding/onboarding';
-import WelcomeModal from '../../src/Onboarding/WelcomeModal';
+import TeachingBubbles from '../../src/Onboarding/TeachingBubbles/TeachingBubbles';
+import { stepSets as defaultStepSets } from '../../src/Onboarding/onboardingUtils';
+import WelcomeModal from '../../src/Onboarding/WelcomeModal/WelcomeModal';
describe('', () => {
let value;
diff --git a/Composer/packages/client/__tests__/components/projecttree.test.jsx b/Composer/packages/client/__tests__/components/projecttree.test.jsx
index 7ba45df4d2..b3a2a12db9 100644
--- a/Composer/packages/client/__tests__/components/projecttree.test.jsx
+++ b/Composer/packages/client/__tests__/components/projecttree.test.jsx
@@ -5,7 +5,7 @@ import * as React from 'react';
import { fireEvent } from '@bfc/test-utils';
import { dialogs } from '../constants.json';
-import { ProjectTree } from '../../src/components/ProjectTree/index.tsx';
+import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree.tsx';
import { renderWithStore } from '../testUtils';
describe('', () => {
diff --git a/Composer/packages/client/__tests__/components/skill.test.tsx b/Composer/packages/client/__tests__/components/skill.test.tsx
index e5fd077501..4f248503cf 100644
--- a/Composer/packages/client/__tests__/components/skill.test.tsx
+++ b/Composer/packages/client/__tests__/components/skill.test.tsx
@@ -7,7 +7,7 @@ import { Skill } from '@bfc/shared';
import Skills from '../../src/pages/skills';
import SkillList from '../../src/pages/skills/skill-list';
-import CreateSkillModal from '../../src/components/SkillForm/CreateSkillModal';
+import CreateSkillModal from '../../src/components/SkillForm/CreateSkillModal/CreateSkillModal';
import { renderWithStore } from '../testUtils';
jest.mock('../../src/components/SkillForm/CreateSkillModal/validateManifestUrl', () => ({
diff --git a/Composer/packages/client/__tests__/components/toolbar.test.jsx b/Composer/packages/client/__tests__/components/toolbar.test.jsx
index 1e3cc618ec..073f7acf03 100644
--- a/Composer/packages/client/__tests__/components/toolbar.test.jsx
+++ b/Composer/packages/client/__tests__/components/toolbar.test.jsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { fireEvent, render } from '@bfc/test-utils';
-import { ToolBar } from '../../src/components/ToolBar';
+import { ToolBar } from '../../src/components/ToolBar/ToolBar';
const toolbarItems = (onClick) => [
{
diff --git a/Composer/packages/client/__tests__/navItem.test.jsx b/Composer/packages/client/__tests__/navItem.test.jsx
index 284268c04f..f952c97bdc 100644
--- a/Composer/packages/client/__tests__/navItem.test.jsx
+++ b/Composer/packages/client/__tests__/navItem.test.jsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { render } from '@bfc/test-utils';
-import { NavItem } from '../src/components/NavItem';
+import { NavItem } from '../src/components/NavItem/NavItem';
import { StoreProvider } from '../src/store';
describe('', () => {
diff --git a/Composer/packages/client/__tests__/notFound.test.jsx b/Composer/packages/client/__tests__/notFound.test.jsx
index 61f2d2198c..8b8ab477c3 100644
--- a/Composer/packages/client/__tests__/notFound.test.jsx
+++ b/Composer/packages/client/__tests__/notFound.test.jsx
@@ -4,8 +4,8 @@
import * as React from 'react';
import { render } from '@bfc/test-utils';
-import { BASEPATH } from '../src/constants/index';
-import { NotFound } from '../src/components/NotFound';
+import { BASEPATH } from '../src/constants';
+import { NotFound } from '../src/components/NotFound/NotFound';
describe('', () => {
it('should render a not found page', async () => {
diff --git a/Composer/packages/client/__tests__/store/index.test.ts b/Composer/packages/client/__tests__/store/index.test.ts
index aced221079..04127e38da 100644
--- a/Composer/packages/client/__tests__/store/index.test.ts
+++ b/Composer/packages/client/__tests__/store/index.test.ts
@@ -1,8 +1,9 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
+import { ActionTypes } from '../../src/constants';
+
import { applyMiddleware } from './../../src/store';
import { Store, State } from './../../src/store/types';
-import { ActionTypes } from './../../src/constants';
describe('applyMiddleware', () => {
it('warns when dispatching during middleware setup', () => {
diff --git a/Composer/packages/client/__tests__/store/persistence/filePersistence.test.ts b/Composer/packages/client/__tests__/store/persistence/filePersistence.test.ts
index 4d99b0aa94..b08bf13a62 100644
--- a/Composer/packages/client/__tests__/store/persistence/filePersistence.test.ts
+++ b/Composer/packages/client/__tests__/store/persistence/filePersistence.test.ts
@@ -2,7 +2,8 @@
// Licensed under the MIT License.
import { DialogInfo, LgFile, LuFile } from '@bfc/shared';
-import { ActionTypes } from './../../../src/constants';
+import { ActionTypes } from '../../../src/constants';
+
import filePersistence from './../../../src/store/persistence/FilePersistence';
import { State } from './../../../src/store/types';
diff --git a/Composer/packages/client/__tests__/store/reducer/createReducer.test.js b/Composer/packages/client/__tests__/store/reducer/createReducer.test.js
index e6df07e185..45876451aa 100644
--- a/Composer/packages/client/__tests__/store/reducer/createReducer.test.js
+++ b/Composer/packages/client/__tests__/store/reducer/createReducer.test.js
@@ -3,7 +3,7 @@
import createReducer from '../../../src/store/reducer/createReducer';
-jest.mock('../../../src/constants/index', () => {
+jest.mock('../../../src/constants', () => {
return {
ActionTypes: {
mockActionType: 'mockActionType',
diff --git a/Composer/packages/client/__tests__/store/reducer/reducer.test.js b/Composer/packages/client/__tests__/store/reducer/reducer.test.js
index 48c8f6f247..c244d84acc 100644
--- a/Composer/packages/client/__tests__/store/reducer/reducer.test.js
+++ b/Composer/packages/client/__tests__/store/reducer/reducer.test.js
@@ -1,7 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
-import { ActionTypes, FileTypes } from '../../../src/constants/index';
+import { ActionTypes, FileTypes } from '../../../src/constants';
import { reducer } from '../../../src/store/reducer/index';
const mockResponse = {
diff --git a/Composer/packages/client/src/App.tsx b/Composer/packages/client/src/App.tsx
index a9c439f414..7082ac3e5d 100644
--- a/Composer/packages/client/src/App.tsx
+++ b/Composer/packages/client/src/App.tsx
@@ -10,24 +10,24 @@ import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
import formatMessage from 'format-message';
-import { Header } from './components/Header';
-import { NavItem } from './components/NavItem';
+import { Header } from './components/Header/Header';
+import { NavItem } from './components/NavItem/NavItem';
import { BASEPATH } from './constants';
import Routes from './router';
import { StoreContext } from './store';
import { main, sideBar, content, divider, globalNav, leftNavBottom, rightPanel, dividerTop } from './styles';
import { resolveToBasePath } from './utils/fileUtil';
-import { ErrorBoundary } from './components/ErrorBoundary';
-import { RequireAuth } from './components/RequireAuth';
+import { ErrorBoundary } from './components/ErrorBoundary/ErrorBoundary';
+import { RequireAuth } from './components/RequireAuth/RequireAuth';
import onboardingState from './utils/onboardingStorage';
import { isElectron } from './utils/electronUtil';
import { useLinks } from './utils/hooks';
initializeIcons(undefined, { disableWarnings: true });
-const Onboarding = React.lazy(() => import('./Onboarding'));
+const Onboarding = React.lazy(() => import('./Onboarding/Onboarding'));
const AppUpdater = React.lazy(() =>
- import('./components/AppUpdater').then((module) => ({ default: module.AppUpdater }))
+ import('./components/AppUpdater/AppUpdater').then((module) => ({ default: module.AppUpdater }))
);
// eslint-disable-next-line react/display-name
diff --git a/Composer/packages/client/src/Onboarding/index.tsx b/Composer/packages/client/src/Onboarding/Onboarding.tsx
similarity index 94%
rename from Composer/packages/client/src/Onboarding/index.tsx
rename to Composer/packages/client/src/Onboarding/Onboarding.tsx
index 562c1f5ec0..d3a1bf84b7 100644
--- a/Composer/packages/client/src/Onboarding/index.tsx
+++ b/Composer/packages/client/src/Onboarding/Onboarding.tsx
@@ -6,14 +6,14 @@ import { navigate } from '@reach/router';
import formatMessage from 'format-message';
import onboardingState from '../utils/onboardingStorage';
-import { OpenConfirmModal } from '../components/Modal';
+import { OpenConfirmModal } from '../components/Modal/ConfirmDialog';
import { StoreContext } from '../store';
import { useLocation } from '../utils/hooks';
-import OnboardingContext from './context';
-import TeachingBubbles from './TeachingBubbles';
-import WelcomeModal from './WelcomeModal';
-import { IStepSet, stepSets as defaultStepSets } from './onboarding';
+import OnboardingContext from './OnboardingContext';
+import TeachingBubbles from './TeachingBubbles/TeachingBubbles';
+import WelcomeModal from './WelcomeModal/WelcomeModal';
+import { IStepSet, stepSets as defaultStepSets } from './onboardingUtils';
const getCurrentSet = (stepSets) => stepSets.findIndex(({ id }) => id === onboardingState.getCurrentSet('setUpBot'));
diff --git a/Composer/packages/client/src/Onboarding/context.tsx b/Composer/packages/client/src/Onboarding/OnboardingContext.tsx
similarity index 95%
rename from Composer/packages/client/src/Onboarding/context.tsx
rename to Composer/packages/client/src/Onboarding/OnboardingContext.tsx
index 4dd5a8930f..2a11587dc6 100644
--- a/Composer/packages/client/src/Onboarding/context.tsx
+++ b/Composer/packages/client/src/Onboarding/OnboardingContext.tsx
@@ -3,7 +3,7 @@
import { createContext } from 'react';
-import { IStep, IStepSet } from './onboarding';
+import { IStep, IStepSet } from './onboardingUtils';
interface OnboardingContext {
actions: {
diff --git a/Composer/packages/client/src/Onboarding/TeachingBubbles/index.tsx b/Composer/packages/client/src/Onboarding/TeachingBubbles/TeachingBubbles.tsx
similarity index 95%
rename from Composer/packages/client/src/Onboarding/TeachingBubbles/index.tsx
rename to Composer/packages/client/src/Onboarding/TeachingBubbles/TeachingBubbles.tsx
index 6b4172e6c1..c11d0b64b7 100644
--- a/Composer/packages/client/src/Onboarding/TeachingBubbles/index.tsx
+++ b/Composer/packages/client/src/Onboarding/TeachingBubbles/TeachingBubbles.tsx
@@ -6,8 +6,8 @@ import formatMessage from 'format-message';
import debounce from 'lodash/debounce';
import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
-import OnboardingContext from '../context';
-import { getTeachingBubble } from '../onboarding';
+import OnboardingContext from '../OnboardingContext';
+import { getTeachingBubble } from '../onboardingUtils';
import { StoreContext } from '../../store';
import { teachingBubbleStyles, teachingBubbleTheme } from './styles';
diff --git a/Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/index.tsx b/Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/CollapsedWelcomeModal.tsx
similarity index 94%
rename from Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/index.tsx
rename to Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/CollapsedWelcomeModal.tsx
index 014f1b4dbc..dab70da036 100644
--- a/Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/index.tsx
+++ b/Composer/packages/client/src/Onboarding/WelcomeModal/Collapsed/CollapsedWelcomeModal.tsx
@@ -7,7 +7,7 @@ import { useContext } from 'react';
import formatMessage from 'format-message';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import OnboardingContext from '../../context';
+import OnboardingContext from '../../OnboardingContext';
import { palette } from '../../palette';
import { buttonStyles, content } from './styles';
diff --git a/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/index.tsx b/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/ExpandedWelcomeModal.tsx
similarity index 97%
rename from Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/index.tsx
rename to Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/ExpandedWelcomeModal.tsx
index 394aae21f3..48b00b5c08 100644
--- a/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/index.tsx
+++ b/Composer/packages/client/src/Onboarding/WelcomeModal/Expanded/ExpandedWelcomeModal.tsx
@@ -8,7 +8,7 @@ import formatMessage from 'format-message';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { IconButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import OnboardingContext from '../../context';
+import OnboardingContext from '../../OnboardingContext';
import {
buttonStyle,
diff --git a/Composer/packages/client/src/Onboarding/WelcomeModal/index.tsx b/Composer/packages/client/src/Onboarding/WelcomeModal/WelcomeModal.tsx
similarity index 78%
rename from Composer/packages/client/src/Onboarding/WelcomeModal/index.tsx
rename to Composer/packages/client/src/Onboarding/WelcomeModal/WelcomeModal.tsx
index 8c1d6b4ce6..66f6db8dbe 100644
--- a/Composer/packages/client/src/Onboarding/WelcomeModal/index.tsx
+++ b/Composer/packages/client/src/Onboarding/WelcomeModal/WelcomeModal.tsx
@@ -4,10 +4,10 @@
import React, { useContext } from 'react';
import { Modal } from 'office-ui-fabric-react/lib/Modal';
-import OnboardingContext from '../context';
+import OnboardingContext from '../OnboardingContext';
-import CollapsedWelcomeModal from './Collapsed';
-import ExpandedWelcomeModal from './Expanded';
+import CollapsedWelcomeModal from './Collapsed/CollapsedWelcomeModal';
+import ExpandedWelcomeModal from './Expanded/ExpandedWelcomeModal';
import { collapsedStyles, expandedStyles } from './style';
const WelcomeModal = () => {
diff --git a/Composer/packages/client/src/Onboarding/onboarding.tsx b/Composer/packages/client/src/Onboarding/onboardingUtils.tsx
similarity index 100%
rename from Composer/packages/client/src/Onboarding/onboarding.tsx
rename to Composer/packages/client/src/Onboarding/onboardingUtils.tsx
diff --git a/Composer/packages/client/src/components/AppUpdater/index.tsx b/Composer/packages/client/src/components/AppUpdater/AppUpdater.tsx
similarity index 100%
rename from Composer/packages/client/src/components/AppUpdater/index.tsx
rename to Composer/packages/client/src/components/AppUpdater/AppUpdater.tsx
diff --git a/Composer/packages/client/src/components/Conversation/index.jsx b/Composer/packages/client/src/components/Conversation/Conversation.jsx
similarity index 100%
rename from Composer/packages/client/src/components/Conversation/index.jsx
rename to Composer/packages/client/src/components/Conversation/Conversation.jsx
diff --git a/Composer/packages/client/src/components/CreationFlow/CreateOptions/index.tsx b/Composer/packages/client/src/components/CreationFlow/CreateOptions/CreateOptions.tsx
similarity index 99%
rename from Composer/packages/client/src/components/CreationFlow/CreateOptions/index.tsx
rename to Composer/packages/client/src/components/CreationFlow/CreateOptions/CreateOptions.tsx
index 0452d9091a..8c4347dadb 100644
--- a/Composer/packages/client/src/components/CreationFlow/CreateOptions/index.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/CreateOptions/CreateOptions.tsx
@@ -23,7 +23,7 @@ import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
import { ProjectTemplate } from '@bfc/shared';
import { DialogCreationCopy, EmptyBotTemplateId } from '../../../constants';
-import { DialogWrapper } from '../../DialogWrapper';
+import { DialogWrapper } from '../../DialogWrapper/DialogWrapper';
import { DialogTypes } from '../../DialogWrapper/styles';
import {
diff --git a/Composer/packages/client/src/components/CreationFlow/index.tsx b/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
similarity index 95%
rename from Composer/packages/client/src/components/CreationFlow/index.tsx
rename to Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
index 3ee7dd14ca..7423ec7a2e 100644
--- a/Composer/packages/client/src/components/CreationFlow/index.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx
@@ -11,9 +11,9 @@ import { CreationFlowStatus } from '../../constants';
import { StoreContext } from '../../store';
import Home from '../../pages/home';
-import { CreateOptions } from './CreateOptions';
-import { OpenProject } from './OpenProject';
-import DefineConversation from './DefineConversation';
+import { CreateOptions } from './CreateOptions/CreateOptions';
+import { OpenProject } from './OpenProject/OpenProject';
+import DefineConversation from './DefineConversation/DefineConversation';
type CreationFlowProps = RouteComponentProps<{}>;
diff --git a/Composer/packages/client/src/components/CreationFlow/DefineConversation/index.tsx b/Composer/packages/client/src/components/CreationFlow/DefineConversation/DefineConversation.tsx
similarity index 98%
rename from Composer/packages/client/src/components/CreationFlow/DefineConversation/index.tsx
rename to Composer/packages/client/src/components/CreationFlow/DefineConversation/DefineConversation.tsx
index 59b4cb498c..53938b17f6 100644
--- a/Composer/packages/client/src/components/CreationFlow/DefineConversation/index.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/DefineConversation/DefineConversation.tsx
@@ -14,11 +14,11 @@ import { RouteComponentProps } from '@reach/router';
import querystring from 'query-string';
import { DialogCreationCopy, nameRegex } from '../../../constants';
-import { DialogWrapper } from '../../DialogWrapper';
+import { DialogWrapper } from '../../DialogWrapper/DialogWrapper';
import { DialogTypes } from '../../DialogWrapper/styles';
import { LocationSelectContent } from '../LocationBrowser/LocationSelectContent';
import { StorageFolder } from '../../../store/types';
-import { FieldConfig, useForm } from '../../../hooks';
+import { FieldConfig, useForm } from '../../../hooks/useForm';
import { name, description, halfstack, stackinput } from './styles';
const MAXTRYTIMES = 10000;
diff --git a/Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx b/Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx
index a4df87cde0..55af1da19a 100644
--- a/Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx
@@ -26,8 +26,7 @@ import { ComboBox, IComboBox, IComboBoxOption } from 'office-ui-fabric-react/lib
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import moment from 'moment';
-import { nameRegex } from '../../../constants';
-import { FileTypes } from '../../../constants/index';
+import { FileTypes, nameRegex } from '../../../constants';
import { StorageFolder, File } from '../../../store/types';
import { getFileIconName, calculateTimeDiff } from '../../../utils';
diff --git a/Composer/packages/client/src/components/CreationFlow/OpenProject/index.tsx b/Composer/packages/client/src/components/CreationFlow/OpenProject/OpenProject.tsx
similarity index 96%
rename from Composer/packages/client/src/components/CreationFlow/OpenProject/index.tsx
rename to Composer/packages/client/src/components/CreationFlow/OpenProject/OpenProject.tsx
index f4293e89e0..e428828596 100644
--- a/Composer/packages/client/src/components/CreationFlow/OpenProject/index.tsx
+++ b/Composer/packages/client/src/components/CreationFlow/OpenProject/OpenProject.tsx
@@ -10,7 +10,7 @@ import formatMessage from 'format-message';
import { RouteComponentProps } from '@reach/router';
import { DialogCreationCopy } from '../../../constants';
-import { DialogWrapper } from '../../DialogWrapper';
+import { DialogWrapper } from '../../DialogWrapper/DialogWrapper';
import { DialogTypes } from '../../DialogWrapper/styles';
import { LocationSelectContent } from '../LocationBrowser/LocationSelectContent';
import { StorageFolder } from '../../../store/types';
diff --git a/Composer/packages/client/src/components/DialogWrapper/index.tsx b/Composer/packages/client/src/components/DialogWrapper/DialogWrapper.tsx
similarity index 100%
rename from Composer/packages/client/src/components/DialogWrapper/index.tsx
rename to Composer/packages/client/src/components/DialogWrapper/DialogWrapper.tsx
diff --git a/Composer/packages/client/src/components/ErrorBoundary/index.tsx b/Composer/packages/client/src/components/ErrorBoundary/ErrorBoundary.tsx
similarity index 98%
rename from Composer/packages/client/src/components/ErrorBoundary/index.tsx
rename to Composer/packages/client/src/components/ErrorBoundary/ErrorBoundary.tsx
index ebf6e9f580..6818ec29d1 100644
--- a/Composer/packages/client/src/components/ErrorBoundary/index.tsx
+++ b/Composer/packages/client/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -7,7 +7,7 @@ import React, { Component } from 'react';
import formatMessage from 'format-message';
import { StoreContext } from '../../store';
-import { ErrorPopup } from '../ErrorPopup';
+import { ErrorPopup } from '../ErrorPopup/ErrorPopup';
const githubIssueUrl = `https://github.com/microsoft/BotFramework-Composer/issues`;
const errorToShow = {
diff --git a/Composer/packages/client/src/components/ErrorPopup/index.tsx b/Composer/packages/client/src/components/ErrorPopup/ErrorPopup.tsx
similarity index 100%
rename from Composer/packages/client/src/components/ErrorPopup/index.tsx
rename to Composer/packages/client/src/components/ErrorPopup/ErrorPopup.tsx
diff --git a/Composer/packages/client/src/components/Header/index.tsx b/Composer/packages/client/src/components/Header/Header.tsx
similarity index 100%
rename from Composer/packages/client/src/components/Header/index.tsx
rename to Composer/packages/client/src/components/Header/Header.tsx
diff --git a/Composer/packages/client/src/components/LoadingSpinner/index.tsx b/Composer/packages/client/src/components/LoadingSpinner/LoadingSpinner.tsx
similarity index 100%
rename from Composer/packages/client/src/components/LoadingSpinner/index.tsx
rename to Composer/packages/client/src/components/LoadingSpinner/LoadingSpinner.tsx
diff --git a/Composer/packages/client/src/components/MainContent/index.tsx b/Composer/packages/client/src/components/MainContent/MainContent.tsx
similarity index 100%
rename from Composer/packages/client/src/components/MainContent/index.tsx
rename to Composer/packages/client/src/components/MainContent/MainContent.tsx
diff --git a/Composer/packages/client/src/components/Modal/Alert.tsx b/Composer/packages/client/src/components/Modal/AlertDialog.tsx
similarity index 95%
rename from Composer/packages/client/src/components/Modal/Alert.tsx
rename to Composer/packages/client/src/components/Modal/AlertDialog.tsx
index 1b89cee6a0..88d56f0f8d 100644
--- a/Composer/packages/client/src/components/Modal/Alert.tsx
+++ b/Composer/packages/client/src/components/Modal/AlertDialog.tsx
@@ -7,7 +7,8 @@ import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dia
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import ReactDOM from 'react-dom';
-import { dialogStyle, builtInStyles } from './styles';
+import { builtInStyles } from './styles';
+import { dialogStyle } from './dialogStyle';
type Props = {
setting: {
diff --git a/Composer/packages/client/src/components/Modal/Confirm.tsx b/Composer/packages/client/src/components/Modal/ConfirmDialog.tsx
similarity index 95%
rename from Composer/packages/client/src/components/Modal/Confirm.tsx
rename to Composer/packages/client/src/components/Modal/ConfirmDialog.tsx
index c84767aa93..19d8a03bc9 100644
--- a/Composer/packages/client/src/components/Modal/Confirm.tsx
+++ b/Composer/packages/client/src/components/Modal/ConfirmDialog.tsx
@@ -9,7 +9,8 @@ import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import ReactDOM from 'react-dom';
-import { dialogStyle, builtInStyles, dialog, dialogModal, confirmationContainer } from './styles';
+import { builtInStyles, dialog, dialogModal, confirmationContainer } from './styles';
+import { dialogStyle } from './dialogStyle';
interface ConfirmDialogProps {
onCancel: () => void;
diff --git a/Composer/packages/client/src/components/Modal/DisplayManifest.tsx b/Composer/packages/client/src/components/Modal/DisplayManifestModal.tsx
similarity index 100%
rename from Composer/packages/client/src/components/Modal/DisplayManifest.tsx
rename to Composer/packages/client/src/components/Modal/DisplayManifestModal.tsx
diff --git a/Composer/packages/client/src/components/Modal/dialogStyle.ts b/Composer/packages/client/src/components/Modal/dialogStyle.ts
new file mode 100644
index 0000000000..276cdeeecc
--- /dev/null
+++ b/Composer/packages/client/src/components/Modal/dialogStyle.ts
@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/**
+ * Well known style names for the AlertDialog and ConfirmDialog.
+ */
+export const dialogStyle = {
+ normal: 'NORMAL',
+ console: 'CONSOLE',
+};
diff --git a/Composer/packages/client/src/components/Modal/index.ts b/Composer/packages/client/src/components/Modal/index.ts
deleted file mode 100644
index b0354576dc..0000000000
--- a/Composer/packages/client/src/components/Modal/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-export * from './Confirm';
-export * from './Alert';
-export * from './styles';
diff --git a/Composer/packages/client/src/components/Modal/styles.ts b/Composer/packages/client/src/components/Modal/styles.ts
index 32299353d4..8bd4516217 100644
--- a/Composer/packages/client/src/components/Modal/styles.ts
+++ b/Composer/packages/client/src/components/Modal/styles.ts
@@ -7,6 +7,8 @@ import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
import { IDialogContentStyles } from 'office-ui-fabric-react/lib/Dialog';
import { IModalStyles } from 'office-ui-fabric-react/lib/Modal';
+import { dialogStyle } from './dialogStyle';
+
export const displayManifest: { content: any; dialog: Partial; modal: Partial } = {
content: css`
height: 675px;
@@ -29,11 +31,6 @@ export const displayManifest: { content: any; dialog: Partial = ({ completeStep, editJson, value, setSchema }) => {
diff --git a/Composer/packages/client/src/pages/design/exportSkillModal/content/ReviewManifest.tsx b/Composer/packages/client/src/pages/design/exportSkillModal/content/ReviewManifest.tsx
index 6e12afa144..40619a6796 100644
--- a/Composer/packages/client/src/pages/design/exportSkillModal/content/ReviewManifest.tsx
+++ b/Composer/packages/client/src/pages/design/exportSkillModal/content/ReviewManifest.tsx
@@ -5,7 +5,7 @@ import React from 'react';
import { JsonEditor } from '@bfc/code-editor';
import { ContentProps } from '../constants';
-import { useStoreContext } from '../../../../hooks';
+import { useStoreContext } from '../../../../hooks/useStoreContext';
export const ReviewManifest: React.FC = ({ setErrors, value, onChange }) => {
const {
diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
index 2f49fad013..7b93262ba1 100644
--- a/Composer/packages/client/src/pages/design/index.tsx
+++ b/Composer/packages/client/src/pages/design/index.tsx
@@ -8,27 +8,26 @@ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcru
import formatMessage from 'format-message';
import { globalHistory, RouteComponentProps } from '@reach/router';
import get from 'lodash/get';
-import { PromptTab } from '@bfc/shared';
-import { DialogFactory, SDKKinds, DialogInfo } from '@bfc/shared';
+import { DialogFactory, SDKKinds, DialogInfo, PromptTab } from '@bfc/shared';
import { ActionButton } from 'office-ui-fabric-react/lib/Button';
import { JsonEditor } from '@bfc/code-editor';
import { useTriggerApi } from '@bfc/extension';
-import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { TestController } from '../../components/TestController';
+import { LoadingSpinner } from '../../components/LoadingSpinner/LoadingSpinner';
+import { TestController } from '../../components/TestController/TestController';
import { DialogDeleting } from '../../constants';
import { createSelectedPath, deleteTrigger, getbreadcrumbLabel } from '../../utils';
import { LuFilePayload } from '../../components/ProjectTree/TriggerCreationModal';
-import { Conversation } from '../../components/Conversation';
-import { dialogStyle } from '../../components/Modal/styles';
-import { OpenConfirmModal } from '../../components/Modal/Confirm';
-import { ProjectTree } from '../../components/ProjectTree';
-import { ToolBar, IToolBarItem } from '../../components/ToolBar/index';
+import { Conversation } from '../../components/Conversation/Conversation';
+import { dialogStyle } from '../../components/Modal/dialogStyle';
+import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
+import { ProjectTree } from '../../components/ProjectTree/ProjectTree';
+import { ToolBar, IToolBarItem } from '../../components/ToolBar/ToolBar';
import { clearBreadcrumb } from '../../utils/navigation';
import undoHistory from '../../store/middlewares/undo/history';
import { navigateTo } from '../../utils';
import { useShell } from '../../shell';
-import { useStoreContext } from '../../hooks';
+import { useStoreContext } from '../../hooks/useStoreContext';
import { VisualEditorAPI } from './FrameAPI';
import {
@@ -43,9 +42,9 @@ import {
import { VisualEditor } from './VisualEditor';
import { PropertyEditor } from './PropertyEditor';
-const CreateSkillModal = React.lazy(() => import('../../components/SkillForm/CreateSkillModal'));
+const CreateSkillModal = React.lazy(() => import('../../components/SkillForm/CreateSkillModal/CreateSkillModal'));
const CreateDialogModal = React.lazy(() => import('./createDialogModal'));
-const DisplayManifestModal = React.lazy(() => import('../../components/Modal/DisplayManifest'));
+const DisplayManifestModal = React.lazy(() => import('../../components/Modal/DisplayManifestModal'));
const ExportSkillModal = React.lazy(() => import('./exportSkillModal'));
const TriggerCreationModal = React.lazy(() => import('../../components/ProjectTree/TriggerCreationModal'));
diff --git a/Composer/packages/client/src/pages/home/index.tsx b/Composer/packages/client/src/pages/home/index.tsx
index b1f6e8103b..850ed5534c 100644
--- a/Composer/packages/client/src/pages/home/index.tsx
+++ b/Composer/packages/client/src/pages/home/index.tsx
@@ -12,7 +12,7 @@ import { navigate } from '@reach/router';
import { StoreContext } from '../../store';
import { CreationFlowStatus } from '../../constants';
-import { ToolBar, IToolBarItem } from '../../components/ToolBar/index';
+import { ToolBar, IToolBarItem } from '../../components/ToolBar/ToolBar';
import * as home from './styles';
import { ItemContainer } from './ItemContainer';
diff --git a/Composer/packages/client/src/pages/language-generation/index.tsx b/Composer/packages/client/src/pages/language-generation/index.tsx
index b747e701df..dbaa324bb1 100644
--- a/Composer/packages/client/src/pages/language-generation/index.tsx
+++ b/Composer/packages/client/src/pages/language-generation/index.tsx
@@ -8,13 +8,13 @@ import formatMessage from 'format-message';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { RouteComponentProps, Router } from '@reach/router';
-import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { LoadingSpinner } from '../../components/LoadingSpinner/LoadingSpinner';
import { StoreContext } from '../../store';
import { actionButton } from '../language-understanding/styles';
import { navigateTo } from '../../utils';
-import { TestController } from '../../components/TestController';
-import { INavTreeItem } from '../../components/NavTree';
-import { Page } from '../../components/Page';
+import { TestController } from '../../components/TestController/TestController';
+import { INavTreeItem } from '../../components/NavTree/NavTree';
+import { Page } from '../../components/Page/Page';
import TableView from './table-view';
const CodeEditor = React.lazy(() => import('./code-editor'));
diff --git a/Composer/packages/client/src/pages/language-understanding/index.tsx b/Composer/packages/client/src/pages/language-understanding/index.tsx
index 7da95d730a..cb434fa19f 100644
--- a/Composer/packages/client/src/pages/language-understanding/index.tsx
+++ b/Composer/packages/client/src/pages/language-understanding/index.tsx
@@ -9,10 +9,10 @@ import { RouteComponentProps, Router } from '@reach/router';
import { StoreContext } from '../../store';
import { navigateTo } from '../../utils';
-import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { TestController } from '../../components/TestController';
-import { INavTreeItem } from '../../components/NavTree';
-import { Page } from '../../components/Page';
+import { LoadingSpinner } from '../../components/LoadingSpinner/LoadingSpinner';
+import { TestController } from '../../components/TestController/TestController';
+import { INavTreeItem } from '../../components/NavTree/NavTree';
+import { Page } from '../../components/Page/Page';
import TableView from './table-view';
import { actionButton } from './styles';
diff --git a/Composer/packages/client/src/pages/language-understanding/publish-luis-modal.jsx b/Composer/packages/client/src/pages/language-understanding/publish-luis-modal.jsx
index 2fba209564..2cefcbb538 100644
--- a/Composer/packages/client/src/pages/language-understanding/publish-luis-modal.jsx
+++ b/Composer/packages/client/src/pages/language-understanding/publish-luis-modal.jsx
@@ -12,13 +12,13 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
import { Stack } from 'office-ui-fabric-react/lib/Stack';
import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
-import formatMessage from 'format-message';
import { PropTypes } from 'prop-types';
+import formatMessage from 'format-message';
import keys from 'lodash/keys';
import { StoreContext } from '../../store';
+import { Text, Tips, Links, nameRegex } from '../../constants';
-import { Text, Tips, Links, nameRegex } from './../../constants';
import { textFieldLabel, dialog, dialogModal, dialogSubTitle, dialogContent, consoleStyle } from './styles';
const STATE = {
diff --git a/Composer/packages/client/src/pages/notifications/NotificationList.tsx b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
index 47a9ad59a7..65636cb2d7 100644
--- a/Composer/packages/client/src/pages/notifications/NotificationList.tsx
+++ b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
@@ -17,7 +17,7 @@ import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
import { useMemo, useState } from 'react';
import formatMessage from 'format-message';
-import { Pagination } from '../../components/Pagination';
+import { Pagination } from '../../components/Pagination/Pagination';
import { INotification } from './types';
import { notification, typeIcon, listRoot, icons, tableView, detailList, tableCell, content } from './styles';
diff --git a/Composer/packages/client/src/pages/notifications/index.tsx b/Composer/packages/client/src/pages/notifications/index.tsx
index b2832a07bd..bd4451c284 100644
--- a/Composer/packages/client/src/pages/notifications/index.tsx
+++ b/Composer/packages/client/src/pages/notifications/index.tsx
@@ -6,7 +6,8 @@ import { jsx } from '@emotion/core';
import { useState } from 'react';
import { RouteComponentProps } from '@reach/router';
-import { ToolBar } from './../../components/ToolBar/index';
+import { ToolBar } from '../../components/ToolBar/ToolBar';
+
import useNotifications from './useNotifications';
import { NotificationList } from './NotificationList';
import { NotificationHeader } from './NotificationHeader';
diff --git a/Composer/packages/client/src/pages/publish/createPublishTarget.tsx b/Composer/packages/client/src/pages/publish/createPublishTarget.tsx
index f0137b783b..3b846c4092 100644
--- a/Composer/packages/client/src/pages/publish/createPublishTarget.tsx
+++ b/Composer/packages/client/src/pages/publish/createPublishTarget.tsx
@@ -12,7 +12,7 @@ import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'
import { JsonEditor } from '@bfc/code-editor';
import { PublishTarget, PublishType } from '../../store/types';
-import { useStoreContext } from '../../hooks';
+import { useStoreContext } from '../../hooks/useStoreContext';
import { label } from './styles';
diff --git a/Composer/packages/client/src/pages/publish/index.tsx b/Composer/packages/client/src/pages/publish/index.tsx
index 2d2b375f83..41bf64d9f8 100644
--- a/Composer/packages/client/src/pages/publish/index.tsx
+++ b/Composer/packages/client/src/pages/publish/index.tsx
@@ -14,11 +14,11 @@ import { projectContainer } from '../design/styles';
import { StoreContext } from '../../store';
import { navigateTo } from '../../utils';
import { PublishTarget } from '../../store/types';
+import { ToolBar, IToolBarItem } from '../../components/ToolBar/ToolBar';
+import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
import { TargetList } from './targetList';
import { PublishDialog } from './publishDialog';
-import { ToolBar, IToolBarItem } from './../../components/ToolBar/index';
-import { OpenConfirmModal } from './../../components/Modal/Confirm';
import { ContentHeaderStyle, HeaderText, ContentStyle, contentEditor, overflowSet, targetSelected } from './styles';
import { CreatePublishTarget } from './createPublishTarget';
import { PublishStatusList, IStatus } from './publishStatusList';
diff --git a/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx b/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx
index 42c1bf27c3..36fdf7901e 100644
--- a/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx
+++ b/Composer/packages/client/src/pages/setting/dialog-settings/index.tsx
@@ -9,7 +9,7 @@ import formatMessage from 'format-message';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { RouteComponentProps } from '@reach/router';
-import { useStoreContext } from '../../../hooks';
+import { useStoreContext } from '../../../hooks/useStoreContext';
import { hostedSettings, hostedControls, settingsEditor } from './style';
diff --git a/Composer/packages/client/src/pages/setting/index.tsx b/Composer/packages/client/src/pages/setting/index.tsx
index eb4768927a..65b35a10be 100644
--- a/Composer/packages/client/src/pages/setting/index.tsx
+++ b/Composer/packages/client/src/pages/setting/index.tsx
@@ -10,11 +10,11 @@ import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { StoreContext } from '../../store';
-import { TestController } from '../../components/TestController';
-import { OpenConfirmModal } from '../../components/Modal/Confirm';
+import { TestController } from '../../components/TestController/TestController';
+import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
import { navigateTo } from '../../utils';
-import { Page } from '../../components/Page';
-import { INavTreeItem } from '../../components/NavTree';
+import { Page } from '../../components/Page/Page';
+import { INavTreeItem } from '../../components/NavTree/NavTree';
import { useLocation } from '../../utils/hooks';
import { SettingsRoutes } from './router';
diff --git a/Composer/packages/client/src/pages/setting/router.tsx b/Composer/packages/client/src/pages/setting/router.tsx
index 66b0d14acc..797fd69c4d 100644
--- a/Composer/packages/client/src/pages/setting/router.tsx
+++ b/Composer/packages/client/src/pages/setting/router.tsx
@@ -4,7 +4,7 @@
import * as React from 'react';
import { Router, Redirect } from '@reach/router';
-import { ErrorBoundary } from '../../components/ErrorBoundary';
+import { ErrorBoundary } from '../../components/ErrorBoundary/ErrorBoundary';
import { About } from '../about';
import { DialogSettings } from './dialog-settings';
diff --git a/Composer/packages/client/src/pages/setting/runtime-settings/index.tsx b/Composer/packages/client/src/pages/setting/runtime-settings/index.tsx
index 3c4dd2cd5d..ca3c554e77 100644
--- a/Composer/packages/client/src/pages/setting/runtime-settings/index.tsx
+++ b/Composer/packages/client/src/pages/setting/runtime-settings/index.tsx
@@ -10,7 +10,7 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { RouteComponentProps } from '@reach/router';
-import { LoadingSpinner } from '../../../components/LoadingSpinner';
+import { LoadingSpinner } from '../../../components/LoadingSpinner/LoadingSpinner';
import { StoreContext } from '../../../store';
import { EjectModal } from './ejectModal';
diff --git a/Composer/packages/client/src/pages/skills/index.tsx b/Composer/packages/client/src/pages/skills/index.tsx
index b74ab7f3c8..6697051dbd 100644
--- a/Composer/packages/client/src/pages/skills/index.tsx
+++ b/Composer/packages/client/src/pages/skills/index.tsx
@@ -7,11 +7,11 @@ import { RouteComponentProps } from '@reach/router';
import React, { useContext, useCallback, useState } from 'react';
import formatMessage from 'format-message';
-import { ToolBar, IToolBarItem } from '../../components/ToolBar/index';
-import { TestController } from '../../components/TestController';
+import { ToolBar, IToolBarItem } from '../../components/ToolBar/ToolBar';
+import { TestController } from '../../components/TestController/TestController';
import { StoreContext } from '../../store';
import { ISkillFormData } from '../../components/SkillForm/types';
-import CreateSkillModal from '../../components/SkillForm/CreateSkillModal';
+import CreateSkillModal from '../../components/SkillForm/CreateSkillModal/CreateSkillModal';
import { ContainerStyle, ContentHeaderStyle, HeaderText } from './styles';
import SkillSettings from './skill-settings';
diff --git a/Composer/packages/client/src/pages/skills/skill-list.tsx b/Composer/packages/client/src/pages/skills/skill-list.tsx
index 8f75d023a9..0a311a9835 100644
--- a/Composer/packages/client/src/pages/skills/skill-list.tsx
+++ b/Composer/packages/client/src/pages/skills/skill-list.tsx
@@ -20,7 +20,7 @@ import { FontSizes } from '@uifabric/fluent-theme';
import formatMessage from 'format-message';
import { Skill } from '@bfc/shared';
-import { DisplayManifestModal } from '../../components/Modal/DisplayManifest';
+import { DisplayManifestModal } from '../../components/Modal/DisplayManifestModal';
import { TableView, TableCell } from './styles';
diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx
index c97f3c7337..f221691f6c 100644
--- a/Composer/packages/client/src/router.tsx
+++ b/Composer/packages/client/src/router.tsx
@@ -8,10 +8,10 @@ import { Router, Redirect, RouteComponentProps } from '@reach/router';
import { resolveToBasePath } from './utils/fileUtil';
import { data } from './styles';
-import { NotFound } from './components/NotFound';
+import { NotFound } from './components/NotFound/NotFound';
import { BASEPATH } from './constants';
import { StoreContext } from './store';
-import { LoadingSpinner } from './components/LoadingSpinner';
+import { LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner';
const DesignPage = React.lazy(() => import('./pages/design'));
const LUPage = React.lazy(() => import('./pages/language-understanding'));
@@ -20,7 +20,7 @@ const SettingPage = React.lazy(() => import('./pages/setting'));
const Notifications = React.lazy(() => import('./pages/notifications'));
const Publish = React.lazy(() => import('./pages/publish'));
const Skills = React.lazy(() => import('./pages/skills'));
-const BotCreationFlowRouter = React.lazy(() => import('./components/CreationFlow'));
+const BotCreationFlowRouter = React.lazy(() => import('./components/CreationFlow/CreationFlow'));
const Routes = (props) => {
const { state } = useContext(StoreContext);
diff --git a/Composer/packages/client/src/shell/useShell.ts b/Composer/packages/client/src/shell/useShell.ts
index fe1fd65349..44721a8a31 100644
--- a/Composer/packages/client/src/shell/useShell.ts
+++ b/Composer/packages/client/src/shell/useShell.ts
@@ -8,7 +8,8 @@ import isEqual from 'lodash/isEqual';
import { updateRegExIntent } from '../utils/dialogUtil';
import { StoreContext } from '../store';
import { getDialogData, setDialogData, sanitizeDialogData } from '../utils';
-import { openAlertModal, dialogStyle } from '../components/Modal';
+import { openAlertModal } from '../components/Modal/AlertDialog';
+import { dialogStyle } from '../components/Modal/dialogStyle';
import { getFocusPath } from '../utils/navigation';
import { isAbsHosted } from '../utils/envUtil';
diff --git a/Composer/packages/client/src/store/action/appUpdate.ts b/Composer/packages/client/src/store/action/appUpdate.ts
index 97631fcf94..e28440ecc2 100644
--- a/Composer/packages/client/src/store/action/appUpdate.ts
+++ b/Composer/packages/client/src/store/action/appUpdate.ts
@@ -1,8 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { ActionCreator } from '../types';
-
-import { ActionTypes } from './../../constants';
+import { ActionTypes } from '../../constants';
export const setAppUpdateError: ActionCreator = ({ dispatch }, error) => {
dispatch({
diff --git a/Composer/packages/client/src/store/action/dialog.ts b/Composer/packages/client/src/store/action/dialog.ts
index 3d5330b5bc..8db5ce5297 100644
--- a/Composer/packages/client/src/store/action/dialog.ts
+++ b/Composer/packages/client/src/store/action/dialog.ts
@@ -2,8 +2,8 @@
// Licensed under the MIT License.
import { ActionCreator, State } from '../types';
import { undoable } from '../middlewares/undo';
+import { ActionTypes } from '../../constants';
-import { ActionTypes } from './../../constants/index';
import { Store } from './../types';
export const removeDialog: ActionCreator = (store, id) => {
diff --git a/Composer/packages/client/src/store/action/editors.ts b/Composer/packages/client/src/store/action/editors.ts
index 8a9b01a2cd..44e0094778 100644
--- a/Composer/packages/client/src/store/action/editors.ts
+++ b/Composer/packages/client/src/store/action/editors.ts
@@ -1,8 +1,7 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { ActionCreator } from '../types';
-
-import { ActionTypes } from './../../constants';
+import { ActionTypes } from '../../constants';
export const resetVisualEditor: ActionCreator = ({ dispatch }, isReset) => {
dispatch({
diff --git a/Composer/packages/client/src/store/action/eject.ts b/Composer/packages/client/src/store/action/eject.ts
index 2c3d7f8042..73512d7d66 100644
--- a/Composer/packages/client/src/store/action/eject.ts
+++ b/Composer/packages/client/src/store/action/eject.ts
@@ -2,8 +2,8 @@
// Licensed under the MIT License.
import { ActionCreator } from '../types';
+import { ActionTypes } from '../../constants';
-import { ActionTypes } from './../../constants/index';
import httpClient from './../../utils/httpUtil';
import { setSettings } from './setting';
diff --git a/Composer/packages/client/src/store/action/error.ts b/Composer/packages/client/src/store/action/error.ts
index 28e369ec42..f556e8666b 100644
--- a/Composer/packages/client/src/store/action/error.ts
+++ b/Composer/packages/client/src/store/action/error.ts
@@ -4,8 +4,7 @@
import debounce from 'lodash/debounce';
import { ActionCreator } from '../types';
-
-import { ActionTypes } from './../../constants';
+import { ActionTypes } from '../../constants';
export const setError: ActionCreator = ({ dispatch }, error) => {
dispatch({
diff --git a/Composer/packages/client/src/store/action/lu.ts b/Composer/packages/client/src/store/action/lu.ts
index 01b42959d9..297d9a5569 100644
--- a/Composer/packages/client/src/store/action/lu.ts
+++ b/Composer/packages/client/src/store/action/lu.ts
@@ -9,9 +9,9 @@ import { ActionCreator, State, Store } from '../types';
import luFileStatusStorage from '../../utils/luFileStatusStorage';
import { Text } from '../../constants';
import LuWorker from '../parsers/luWorker';
+import { ActionTypes } from '../../constants';
import httpClient from './../../utils/httpUtil';
-import { ActionTypes } from './../../constants/index';
export const updateLuFile: ActionCreator = async (store, { id, projectId, content }) => {
const result = (await LuWorker.parse(id, content)) as LuFile;
diff --git a/Composer/packages/client/src/store/action/navigation.ts b/Composer/packages/client/src/store/action/navigation.ts
index 958a5cf0fb..187480b4da 100644
--- a/Composer/packages/client/src/store/action/navigation.ts
+++ b/Composer/packages/client/src/store/action/navigation.ts
@@ -2,9 +2,9 @@
// Licensed under the MIT License.
import { getSelected } from '../../utils';
+import { ActionTypes } from '../../constants';
import { ActionCreator } from './../types';
-import { ActionTypes } from './../../constants';
import { updateBreadcrumb, navigateTo, checkUrl, getUrlSearch, BreadcrumbUpdateType } from './../../utils/navigation';
export const setDesignPageLocation: ActionCreator = (
diff --git a/Composer/packages/client/src/store/action/onboarding.ts b/Composer/packages/client/src/store/action/onboarding.ts
index 29adf4702f..c7c7070065 100644
--- a/Composer/packages/client/src/store/action/onboarding.ts
+++ b/Composer/packages/client/src/store/action/onboarding.ts
@@ -3,8 +3,7 @@
import { ActionCreator } from '../types';
import OnboardingState from '../../utils/onboardingStorage';
-
-import { ActionTypes } from './../../constants';
+import { ActionTypes } from '../../constants';
export const onboardingAddCoachMarkRef: ActionCreator = ({ dispatch }, ref) => {
dispatch({
diff --git a/Composer/packages/client/src/store/action/project.ts b/Composer/packages/client/src/store/action/project.ts
index bc305554cc..73470666d0 100644
--- a/Composer/packages/client/src/store/action/project.ts
+++ b/Composer/packages/client/src/store/action/project.ts
@@ -7,8 +7,8 @@ import { ActionCreator } from '../types';
import filePersistence from '../persistence/FilePersistence';
import lgWorker from '../parsers/lgWorker';
import luWorker from '../parsers/luWorker';
+import { ActionTypes, BASEPATH, BotStatus } from '../../constants';
-import { ActionTypes, BASEPATH, BotStatus } from './../../constants/index';
import { navigateTo } from './../../utils/navigation';
import { navTo } from './navigation';
import settingStorage from './../../utils/dialogSettingStorage';
diff --git a/Composer/packages/client/src/store/action/publisher.ts b/Composer/packages/client/src/store/action/publisher.ts
index 685d36c66f..c21ac4d530 100644
--- a/Composer/packages/client/src/store/action/publisher.ts
+++ b/Composer/packages/client/src/store/action/publisher.ts
@@ -5,8 +5,8 @@ import formatMessage from 'format-message';
import { ActionCreator } from '../types';
import filePersistence from '../persistence/FilePersistence';
+import { ActionTypes } from '../../constants';
-import { ActionTypes } from './../../constants/index';
import httpClient from './../../utils/httpUtil';
export const getPublishTargetTypes: ActionCreator = async ({ dispatch }) => {
try {
diff --git a/Composer/packages/client/src/store/action/setting.ts b/Composer/packages/client/src/store/action/setting.ts
index e3b38ca806..a756073a6e 100644
--- a/Composer/packages/client/src/store/action/setting.ts
+++ b/Composer/packages/client/src/store/action/setting.ts
@@ -2,8 +2,7 @@
// Licensed under the MIT License.
import { ActionCreator, DialogSetting } from '../types';
-
-import { ActionTypes } from './../../constants/index';
+import { ActionTypes } from '../../constants';
export const setSettings: ActionCreator = async ({ dispatch }, projectId: string, settings: DialogSetting) => {
dispatch({
diff --git a/Composer/packages/client/src/store/action/storage.ts b/Composer/packages/client/src/store/action/storage.ts
index 65a3debcac..7051421ce5 100644
--- a/Composer/packages/client/src/store/action/storage.ts
+++ b/Composer/packages/client/src/store/action/storage.ts
@@ -4,8 +4,8 @@
import formatMessage from 'format-message';
import { ActionCreator } from '../types';
+import { ActionTypes } from '../../constants';
-import { ActionTypes } from './../../constants';
import httpClient from './../../utils/httpUtil';
export const fetchStorages: ActionCreator = async ({ dispatch }) => {
diff --git a/Composer/packages/client/src/store/index.tsx b/Composer/packages/client/src/store/index.tsx
index 89bb706e87..6ead1e5b4a 100644
--- a/Composer/packages/client/src/store/index.tsx
+++ b/Composer/packages/client/src/store/index.tsx
@@ -10,11 +10,11 @@ import merge from 'lodash/merge';
import { prepareAxios } from '../utils/auth';
import storage from '../utils/storage';
import { isElectron } from '../utils/electronUtil';
+import { CreationFlowStatus, BotStatus, AppUpdaterStatus } from '../constants';
import { reducer } from './reducer';
import bindActions from './action/bindActions';
import * as actions from './action';
-import { CreationFlowStatus, BotStatus, AppUpdaterStatus } from './../constants';
import {
BotState,
AppState,
diff --git a/Composer/packages/client/src/store/middlewares/undo/actions.ts b/Composer/packages/client/src/store/middlewares/undo/actions.ts
index f70a8c3961..0df2029e2d 100644
--- a/Composer/packages/client/src/store/middlewares/undo/actions.ts
+++ b/Composer/packages/client/src/store/middlewares/undo/actions.ts
@@ -2,8 +2,7 @@
// Licensed under the MIT License.
import { Store } from '../../types';
-
-import { ActionTypes } from './../../../constants/index';
+import { ActionTypes } from '../../../constants';
export const undo = (store: Store) => store.dispatch({ type: ActionTypes.UNDO });
export const redo = (store: Store) => store.dispatch({ type: ActionTypes.REDO });
diff --git a/Composer/packages/client/src/store/middlewares/undo/index.ts b/Composer/packages/client/src/store/middlewares/undo/index.ts
index 9851ac9364..5562c8b8e1 100644
--- a/Composer/packages/client/src/store/middlewares/undo/index.ts
+++ b/Composer/packages/client/src/store/middlewares/undo/index.ts
@@ -1,7 +1,8 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
-import { ActionTypes } from './../../../constants/index';
+import { ActionTypes } from '../../../constants';
+
import { Store, ActionCreator, State } from './../../types';
import { ActionType } from './../../action/types';
import undoHistory from './history';
diff --git a/Composer/packages/client/src/store/reducer/createReducer.ts b/Composer/packages/client/src/store/reducer/createReducer.ts
index 8601609cfa..c9d562a790 100644
--- a/Composer/packages/client/src/store/reducer/createReducer.ts
+++ b/Composer/packages/client/src/store/reducer/createReducer.ts
@@ -5,8 +5,7 @@ import producer from 'immer';
import { State, ReducerFunc } from '../types';
import { ActionType, GenericActionType } from '../action/types';
-
-import { ActionTypes } from './../../constants';
+import { ActionTypes } from '../../constants';
type CreateReducerFunc = (
handlers: {
diff --git a/Composer/packages/client/src/utils/navigation.ts b/Composer/packages/client/src/utils/navigation.ts
index 7eee429854..b0a3cb8ea6 100644
--- a/Composer/packages/client/src/utils/navigation.ts
+++ b/Composer/packages/client/src/utils/navigation.ts
@@ -5,9 +5,9 @@ import cloneDeep from 'lodash/cloneDeep';
import { navigate, NavigateOptions } from '@reach/router';
import { BreadcrumbItem, DesignPageLocation } from '../store/types';
+import { BASEPATH } from '../constants';
import { parsePathToFocused, parsePathToSelected, parseTypeToFragment } from './convertUtils';
-import { BASEPATH } from './../constants/index';
import { resolveToBasePath } from './fileUtil';
export const BreadcrumbUpdateType = {
Selected: 'selected',