refactor: separate base components into their own folder

jamaljsr · jamaljsr · commit 802fff3082b2 · 2020-05-27T16:45:57.000-04:00
diff --git a/app/src/__stories__/AlertContainer.stories.tsx b/app/src/__stories__/AlertContainer.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStore } from 'store';
+import { Button } from 'components/base';
 import AlertContainer from 'components/common/AlertContainer';
-import { Button } from 'components/common/base';
 
 export default {
   title: 'Components/Alerts',
diff --git a/app/src/__stories__/StoryWrapper.tsx b/app/src/__stories__/StoryWrapper.tsx
@@ -4,7 +4,7 @@ import { BalanceMode, Unit } from 'util/constants';
 import { sampleApiResponses } from 'util/tests/sampleData';
 import { createStore, StoreProvider } from 'store';
 import { PersistentSettings } from 'store/stores/settingsStore';
-import { Background } from 'components/common/base';
+import { Background } from 'components/base';
 import { ThemeProvider } from 'components/theme';
 
 // mock the GRPC client to return sample data instead of making an actual request
diff --git a/app/src/components/NodeStatus.tsx b/app/src/components/NodeStatus.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { HeaderFour, Jumbo, Small } from 'components/common/text';
-import { Bitcoin, Bolt } from './common/icons';
+import { HeaderFour, Jumbo, Small } from 'components/base';
+import { Bitcoin, Bolt } from './base';
 import Tip from './common/Tip';
 import Unit from './common/Unit';
 import { styled } from './theme';
diff --git a/app/src/components/base/grid.tsx b/app/src/components/base/grid.tsx
diff --git a/app/src/components/base/icons.tsx b/app/src/components/base/icons.tsx
diff --git a/app/src/components/base/index.ts b/app/src/components/base/index.ts
@@ -0,0 +1,4 @@
+export * from './grid';
+export * from './icons';
+export * from './shared';
+export * from './text';
diff --git a/app/src/components/base/shared.tsx b/app/src/components/base/shared.tsx
diff --git a/app/src/components/base/text.tsx b/app/src/components/base/text.tsx
diff --git a/app/src/components/common/AlertContainer.tsx b/app/src/components/common/AlertContainer.tsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { Alert } from 'types/state';
 import { useStore } from 'store';
 import { styled } from 'components/theme';
-import { Close } from './icons';
+import { Close } from '../base';
 
 const Styled = {
   Body: styled.div`
diff --git a/app/src/components/common/Checkbox.tsx b/app/src/components/common/Checkbox.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { styled } from 'components/theme';
-import { Check } from './icons';
+import { Check } from '../base';
 
 const Styled = {
   Box: styled.span<{ disabled?: boolean }>`
diff --git a/app/src/components/common/PageHeader.tsx b/app/src/components/common/PageHeader.tsx
@@ -3,8 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { styled } from 'components/theme';
-import { ArrowLeft, Clock, Download } from './icons';
-import { HeaderThree } from './text';
+import { ArrowLeft, Clock, Download, HeaderThree } from '../base';
 import Tip from './Tip';
 
 const Styled = {
diff --git a/app/src/components/common/Radio.tsx b/app/src/components/common/Radio.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { styled } from 'components/theme';
-import { Small } from './text';
+import { Small } from '../base';
 
 const Styled = {
   Wrapper: styled.div<{ right?: boolean }>`
diff --git a/app/src/components/common/Range.tsx b/app/src/components/common/Range.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useCallback } from 'react';
 import { styled } from 'components/theme';
-import { RangeInput } from './base';
+import { RangeInput } from '../base';
 import Radio from './Radio';
 import Unit from './Unit';
 
diff --git a/app/src/components/common/StatusDot.tsx b/app/src/components/common/StatusDot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from 'components/theme';
-import { Dot } from './icons';
+import { Dot } from '../base';
 
 const Styled = {
   DotIcon: styled(Dot)`
diff --git a/app/src/components/common/Tile.tsx b/app/src/components/common/Tile.tsx
@@ -1,8 +1,7 @@
 import React, { ReactNode } from 'react';
 import { usePrefixedTranslation } from 'hooks';
 import { styled } from 'components/theme';
-import { Maximize } from './icons';
-import { HeaderFour } from './text';
+import { HeaderFour, Maximize } from '../base';
 import Tip from './Tip';
 
 const Styled = {
diff --git a/app/src/components/history/HistoryList.tsx b/app/src/components/history/HistoryList.tsx
@@ -3,7 +3,7 @@ import { AutoSizer, List, WindowScroller } from 'react-virtualized';
 import { observer, Observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
 import { useStore } from 'store';
-import { ListContainer } from 'components/common/base';
+import { ListContainer } from 'components/base';
 import HistoryRow, { HistoryRowHeader, ROW_HEIGHT } from './HistoryRow';
 
 const Styled = {
diff --git a/app/src/components/history/HistoryRow.tsx b/app/src/components/history/HistoryRow.tsx
@@ -2,8 +2,7 @@ import React, { CSSProperties } from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { Swap } from 'store/models';
-import { Column, Row } from 'components/common/grid';
-import { HeaderFour } from 'components/common/text';
+import { Column, HeaderFour, Row } from 'components/base';
 import Unit from 'components/common/Unit';
 import SwapDot from 'components/loop/SwapDot';
 import { styled } from 'components/theme';
diff --git a/app/src/components/layout/Layout.tsx b/app/src/components/layout/Layout.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'store';
-import { Background } from 'components/common/base';
-import { Menu } from 'components/common/icons';
+import { Background, Menu } from 'components/base';
 import { styled } from 'components/theme';
 import Sidebar from './Sidebar';
 
diff --git a/app/src/components/layout/NavMenu.tsx b/app/src/components/layout/NavMenu.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { HeaderFour } from 'components/common/text';
+import { HeaderFour } from 'components/base';
 import { styled } from 'components/theme';
 
 const Styled = {
diff --git a/app/src/components/loop/ChannelRow.tsx b/app/src/components/loop/ChannelRow.tsx
@@ -5,10 +5,9 @@ import { BalanceStatus } from 'util/constants';
 import { ellipseInside } from 'util/strings';
 import { useStore } from 'store';
 import { Channel } from 'store/models';
+import { Column, HeaderFour, Row } from 'components/base';
 import Checkbox from 'components/common/Checkbox';
-import { Column, Row } from 'components/common/grid';
 import StatusDot from 'components/common/StatusDot';
-import { HeaderFour } from 'components/common/text';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import ChannelBalance from './ChannelBalance';
diff --git a/app/src/components/loop/LoopActions.tsx b/app/src/components/loop/LoopActions.tsx
@@ -3,8 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { SwapDirection } from 'types/state';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Button, Pill } from 'components/common/base';
-import { Close, Refresh } from 'components/common/icons';
+import { Button, Close, Pill, Refresh } from 'components/base';
 import { styled } from 'components/theme';
 
 const Styled = {
diff --git a/app/src/components/loop/LoopHistory.tsx b/app/src/components/loop/LoopHistory.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Column, Row } from 'components/common/grid';
-import { Small } from 'components/common/text';
+import { Column, Row, Small } from 'components/base';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import SwapDot from './SwapDot';
diff --git a/app/src/components/loop/LoopTiles.tsx b/app/src/components/loop/LoopTiles.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Column, Row } from 'components/common/grid';
+import { Column, Row } from 'components/base';
 import Tile from 'components/common/Tile';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
diff --git a/app/src/components/loop/processing/FailedSwap.tsx b/app/src/components/loop/processing/FailedSwap.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Swap } from 'store/models';
-import { Close } from 'components/common/icons';
+import { Close } from 'components/base';
 import Tip from 'components/common/Tip';
 import { styled } from 'components/theme';
 
diff --git a/app/src/components/loop/processing/ProcessingSwapRow.tsx b/app/src/components/loop/processing/ProcessingSwapRow.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Swap } from 'store/models';
-import { Column, Row } from 'components/common/grid';
+import { Column, Row } from 'components/base';
 import { styled } from 'components/theme';
 import FailedSwap from './FailedSwap';
 import SwapInfo from './SwapInfo';
diff --git a/app/src/components/loop/processing/ProcessingSwaps.tsx b/app/src/components/loop/processing/ProcessingSwaps.tsx
@@ -3,9 +3,8 @@ import { observer } from 'mobx-react-lite';
 import confirmJson from 'assets/animations/confirm.json';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
+import { HeaderFour, Minimize } from 'components/base';
 import Animation from 'components/common/Animation';
-import { Minimize } from 'components/common/icons';
-import { HeaderFour } from 'components/common/text';
 import Tip from 'components/common/Tip';
 import { styled } from 'components/theme';
 import ProcessingSwapRow from './ProcessingSwapRow';
diff --git a/app/src/components/loop/processing/SwapInfo.tsx b/app/src/components/loop/processing/SwapInfo.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Swap } from 'store/models';
-import { HeaderFour } from 'components/common/text';
+import { HeaderFour } from 'components/base';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import SwapDot from '../SwapDot';
diff --git a/app/src/components/loop/swap/StepButtons.tsx b/app/src/components/loop/swap/StepButtons.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
-import { Button } from 'components/common/base';
+import { Button } from 'components/base';
 
 const Styled = {
   Wrapper: styled.div`
diff --git a/app/src/components/loop/swap/StepSummary.tsx b/app/src/components/loop/swap/StepSummary.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { Pill } from 'components/common/base';
-import { HeaderFive, HeaderFour, Small } from 'components/common/text';
+import { HeaderFive, HeaderFour, Pill, Small } from 'components/base';
 import { styled } from 'components/theme';
 
 const Styled = {
diff --git a/app/src/components/loop/swap/SwapProcessing.tsx b/app/src/components/loop/swap/SwapProcessing.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import loadingJson from 'assets/animations/loading.json';
 import { usePrefixedTranslation } from 'hooks';
+import { HeaderFour } from 'components/base';
 import Animation from 'components/common/Animation';
-import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 
 const Styled = {
diff --git a/app/src/components/loop/swap/SwapReviewStep.tsx b/app/src/components/loop/swap/SwapReviewStep.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { HeaderFour, Jumbo } from 'components/common/text';
+import { HeaderFour, Jumbo } from 'components/base';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
 import StepButtons from './StepButtons';
diff --git a/app/src/components/loop/swap/SwapWizard.tsx b/app/src/components/loop/swap/SwapWizard.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { BuildSwapSteps } from 'types/state';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import { ArrowLeft } from 'components/common/icons';
+import { ArrowLeft } from 'components/base';
 import Tip from 'components/common/Tip';
 import { styled } from 'components/theme';
 import SwapConfigStep from './SwapConfigStep';
diff --git a/app/src/components/settings/BalanceSettings.tsx b/app/src/components/settings/BalanceSettings.tsx
@@ -3,8 +3,8 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { BalanceMode } from 'util/constants';
 import { useStore } from 'store';
+import { HeaderFour } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
-import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 import SettingItem from './SettingItem';
 
diff --git a/app/src/components/settings/GeneralSettings.tsx b/app/src/components/settings/GeneralSettings.tsx
@@ -3,8 +3,8 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { formatUnit } from 'util/formatters';
 import { useStore } from 'store';
+import { HeaderFour } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
-import { HeaderFour } from 'components/common/text';
 import { styled } from 'components/theme';
 import SettingItem from './SettingItem';
 
diff --git a/app/src/components/settings/SettingItem.tsx b/app/src/components/settings/SettingItem.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import { RadioButton } from 'components/common/base';
-import { ArrowRight } from 'components/common/icons';
+import { ArrowRight, RadioButton } from 'components/base';
 import { styled } from 'components/theme';
 
 const Styled = {
