[#1869] Create widgets alias in Webpack, update .flowconfig, and alia…

…s cleanup
ifmeorg · Oct 3, 2020 · 647d563 · 647d563
1 parent 5c16649
commit 647d563
Show file tree

Hide file tree

Showing 110 changed files with 170 additions and 161 deletions.
diff --git a/client/.flowconfig b/client/.flowconfig
@@ -13,6 +13,11 @@
 [options]
 
 module.name_mapper='^libs\(.*\)$' -> '<PROJECT_ROOT>/app/libs\1'
+module.name_mapper='^styles\(.*\)$' -> '<PROJECT_ROOT>/app/styles\1'
+module.name_mapper='^components\(.*\)$' -> '<PROJECT_ROOT>/app/components\1'
+module.name_mapper='^utils\(.*\)$' -> '<PROJECT_ROOT>/app/utils\1'
+module.name_mapper='^mocks\(.*\)$' -> '<PROJECT_ROOT>/app/mocks\1'
+module.name_mapper='^widgets\(.*\)$' -> '<PROJECT_ROOT>/app/widgets\1'
 
 module.name_mapper='.*\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)' -> '<PROJECT_ROOT>/flow/media.js'
 module.name_mapper='.*\.\(css\|sass\|scss\)' -> '<PROJECT_ROOT>/flow/stylesheets.js'

diff --git a/client/.storybook/stories.scss b/client/.storybook/stories.scss
@@ -1,4 +1,4 @@
-@import "../app/styles/global.scss";
+@import "~styles/global.scss";
 
 /* This file is to override Storybook default styles */
 

diff --git a/client/app/components/Accordion/__tests__/Accordion.spec.jsx b/client/app/components/Accordion/__tests__/Accordion.spec.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { Accordion } from '../index';
+import { Accordion } from 'components/Accordion';
 
 const id = 'some-id';
 const title = 'Accordions have pianos';

diff --git a/client/app/components/Accordion/index.jsx b/client/app/components/Accordion/index.jsx
@@ -4,7 +4,7 @@ import renderHTML from 'react-render-html';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
 import globalCss from 'styles/_global.scss';
-import css from '../Input/Input.scss';
+import css from 'components/Input/Input.scss';
 
 export type Props = {
   id: string,

diff --git a/client/app/components/Avatar/Avatar.scss b/client/app/components/Avatar/Avatar.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .avatar {
   @include setFontSize($size-20);

diff --git a/client/app/components/Avatar/__tests__/Avatar.spec.jsx b/client/app/components/Avatar/__tests__/Avatar.spec.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Avatar } from '../index';
+import { Avatar } from 'components/Avatar';
 
 const name = 'Julia Nguyen';
 const src = '/some-img-url';

diff --git a/client/app/components/BaseContainer/StoryContainer.jsx b/client/app/components/BaseContainer/StoryContainer.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
-import { Story } from '../Story';
-import type { Props as StoryProps } from '../Story';
+import { Story } from 'components/Story';
+import type { Props as StoryProps } from 'components/Story';
 
 export type Props = {
   data: StoryProps[],

diff --git a/client/app/components/BaseContainer/__tests__/StoryContainer.spec.jsx b/client/app/components/BaseContainer/__tests__/StoryContainer.spec.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { render } from '@testing-library/react';
-import { StoryContainer } from '../StoryContainer';
+import { StoryContainer } from 'components/BaseContainer/StoryContainer';
 
 describe('StoryContainer', () => {
   it('renders correctly', () => {

diff --git a/client/app/components/BaseContainer/__tests__/index.spec.jsx b/client/app/components/BaseContainer/__tests__/index.spec.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import axios from 'axios';
 import { render, fireEvent } from '@testing-library/react';
-import BaseContainer from '../index';
+import BaseContainer from 'components/BaseContainer';
 
 const response = {
   data: {

diff --git a/client/app/components/BaseContainer/index.jsx b/client/app/components/BaseContainer/index.jsx
@@ -1,9 +1,9 @@
 // @flow
 import React, { useState } from 'react';
 import axios from 'axios';
-import { StoryContainer } from './StoryContainer';
-import { LoadMoreButton } from '../LoadMoreButton';
 import { Utils } from 'utils';
+import { StoryContainer } from 'components/BaseContainer/StoryContainer';
+import { LoadMoreButton } from 'components/LoadMoreButton';
 
 export type Props = {
   container: string,

diff --git a/client/app/components/Blockquote/Blockquote.scss b/client/app/components/Blockquote/Blockquote.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .text {
   @include setFontSize($size-24);

diff --git a/client/app/components/Chart/ChartControl.jsx b/client/app/components/Chart/ChartControl.jsx
@@ -1,8 +1,8 @@
 // @flow
 import React, { useState } from 'react';
 import { I18n } from 'libs/i18n';
-import { Chart } from './index';
 import globalCss from 'styles/_global.scss';
+import { Chart } from 'components/Chart';
 import css from './ChartControl.scss';
 
 type chartControlProps = {

diff --git a/client/app/components/Chart/ChartControl.scss b/client/app/components/Chart/ChartControl.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .chartControl {
   > div:first-of-type {

diff --git a/client/app/components/Chart/__tests__/Chart.spec.jsx b/client/app/components/Chart/__tests__/Chart.spec.jsx
@@ -1,7 +1,7 @@
 // @flow
 import { shallow } from 'enzyme';
 import React from 'react';
-import { Chart } from '../index';
+import { Chart } from 'components/Chart';
 
 function getComponent(options) {
   return shallow(

diff --git a/client/app/components/Chart/__tests__/ChartControl.spec.jsx b/client/app/components/Chart/__tests__/ChartControl.spec.jsx
@@ -4,7 +4,7 @@
  */
 import { shallow } from 'enzyme';
 import React from 'react';
-import { ChartControl } from '../ChartControl';
+import { ChartControl } from 'components/Chart/ChartControl';
 
 describe('ChartControl', () => {
   it('renders', () => {

diff --git a/client/app/components/Form/DynamicForm.jsx b/client/app/components/Form/DynamicForm.jsx
@@ -1,8 +1,8 @@
 // @flow
 import React, { useState } from 'react';
 import axios from 'axios';
-import Input from '../Input';
-import { TYPES as INPUT_TYPES } from '../Input/utils';
+import Input from 'components/Input';
+import { TYPES as INPUT_TYPES } from 'components/Input/utils';
 import css from './Form.scss';
 import { getNewInputs } from './utils';
 import type { Errors, MyInputProps, FormProps } from './utils';

diff --git a/client/app/components/Form/Form.scss b/client/app/components/Form/Form.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .form {
   > div {

diff --git a/client/app/components/Form/__tests__/DynamicForm.spec.jsx b/client/app/components/Form/__tests__/DynamicForm.spec.jsx
@@ -2,8 +2,8 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import DynamicForm from '../DynamicForm';
 import { InputMocks } from 'mocks/InputMocks';
+import DynamicForm from 'components/Form/DynamicForm';
 
 // TODO (julianguyen): Include InputTextarea after writing stubs for pell editor
 

diff --git a/client/app/components/Form/__tests__/Form.spec.jsx b/client/app/components/Form/__tests__/Form.spec.jsx
@@ -2,8 +2,8 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import Form from '../index';
 import { InputMocks } from 'mocks/InputMocks';
+import Form from 'components/Form';
 
 // TODO (julianguyen): Include InputTextarea after writing stubs for pell editor
 

diff --git a/client/app/components/Form/index.jsx b/client/app/components/Form/index.jsx
@@ -1,9 +1,9 @@
 // @flow
 import React, { useState, type Node } from 'react';
-import Input from '../Input';
-import { TYPES as INPUT_TYPES } from '../Input/utils';
-import { QuickCreate } from '../../widgets/QuickCreate';
-import type { Props as QuickCreateProps } from '../../widgets/QuickCreate';
+import Input from 'components/Input';
+import { TYPES as INPUT_TYPES } from 'components/Input/utils';
+import { QuickCreate } from 'widgets/QuickCreate';
+import type { Props as QuickCreateProps } from 'widgets/QuickCreate';
 import css from './Form.scss';
 import { getNewInputs } from './utils';
 import type { Errors, MyInputProps, FormProps as Props } from './utils';

diff --git a/client/app/components/Form/utils.js b/client/app/components/Form/utils.js
@@ -1,7 +1,7 @@
 // @flow
-import { REQUIRES_DEFAULT } from '../Input/InputDefault';
 import { Utils } from 'utils';
-import type { Props as InputProps } from '../Input/utils';
+import { REQUIRES_DEFAULT } from 'components/Input/InputDefault';
+import type { Props as InputProps } from 'components/Input/utils';
 
 type KeyProps = { myKey?: string };
 

diff --git a/client/app/components/Header/Header.scss b/client/app/components/Header/Header.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 @mixin linkStyle() {
   a {

diff --git a/client/app/components/Header/HeaderProfile.jsx b/client/app/components/Header/HeaderProfile.jsx
@@ -2,12 +2,12 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
-import type { Profile } from './types';
-import { Notifications } from '../../widgets/Notifications';
 import { Utils } from 'utils';
-import { Avatar } from '../Avatar';
-import css from './HeaderProfile.scss';
 import globalCSS from 'styles/_global.scss';
+import { Notifications } from 'widgets/Notifications';
+import { Avatar } from 'components/Avatar';
+import type { Profile } from './types';
+import css from './HeaderProfile.scss';
 
 export type Props = {
   profile: Profile,

diff --git a/client/app/components/Header/HeaderProfile.scss b/client/app/components/Header/HeaderProfile.scss
@@ -1,8 +1,8 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
   .header {
     z-index: $z-index-front;
-  
+
     > div {
       display: flex;
       flex-direction: column;
@@ -41,5 +41,5 @@
           text-align: center;
           justify-content: center;
         }
-      } 
-    }    
+      }
+    }
diff --git a/client/app/components/Header/__tests__/Header.spec.jsx b/client/app/components/Header/__tests__/Header.spec.jsx
@@ -1,7 +1,7 @@
 // @flow
 import { mount } from 'enzyme';
 import React from 'react';
-import Header from '../index';
+import Header from 'components/Header';
 
 const getComponent = () => (
   <Header

diff --git a/client/app/components/Header/index.jsx b/client/app/components/Header/index.jsx
@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons';
 import ReactHtmlParser from 'react-html-parser';
 import { I18n } from 'libs/i18n';
-import { Logo } from '../Logo';
-import { HeaderProfile } from './HeaderProfile';
+import { Logo } from 'components/Logo';
+import { HeaderProfile } from 'components/Header/HeaderProfile';
 import type { Profile, Link } from './types';
 import css from './Header.scss';
 

diff --git a/client/app/components/Input/Input.scss b/client/app/components/Input/Input.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 @mixin paddingForSelectIcon($padding) {
   padding-right: $padding * 2 + $size-12;

diff --git a/client/app/components/Input/InputCheckbox.jsx b/client/app/components/Input/InputCheckbox.jsx
@@ -3,10 +3,10 @@ import React from 'react';
 import renderHTML from 'react-render-html';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
-import css from './Input.scss';
 import globalCss from 'styles/_global.scss';
+import { Tooltip } from 'components/Tooltip';
+import css from './Input.scss';
 import type { Checkbox as Props } from './utils';
-import { Tooltip } from '../Tooltip';
 
 const displayUnchecked = (name: ?string, uncheckedValue: ?any) => (
   <input name={name} type="hidden" value={uncheckedValue} />

diff --git a/client/app/components/Input/InputCheckboxGroup.jsx b/client/app/components/Input/InputCheckboxGroup.jsx
@@ -1,7 +1,7 @@
 // @flow
 import React, { useState } from 'react';
+import { InputCheckbox } from 'components/Input/InputCheckbox';
 import type { Checkbox } from './utils';
-import { InputCheckbox } from './InputCheckbox';
 
 export type Props = {
   checkboxes: Checkbox[],

diff --git a/client/app/components/Input/InputLabel.jsx b/client/app/components/Input/InputLabel.jsx
@@ -2,9 +2,9 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAsterisk, faQuestion } from '@fortawesome/free-solid-svg-icons';
-import { Tooltip } from '../Tooltip';
-import css from './Input.scss';
 import globalCss from 'styles/_global.scss';
+import { Tooltip } from 'components/Tooltip';
+import css from './Input.scss';
 
 export type Props = {
   label: string,

diff --git a/client/app/components/Input/InputPassword.jsx b/client/app/components/Input/InputPassword.jsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { I18n } from 'libs/i18n';
-import css from './InputPassword.scss';
+import css from 'components/Input/InputPassword.scss';
 import inputCss from './Input.scss';
 
 export type Props = {

diff --git a/client/app/components/Input/InputPassword.scss b/client/app/components/Input/InputPassword.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .password {
   display: flex;

diff --git a/client/app/components/Input/InputRadioGroup.scss b/client/app/components/Input/InputRadioGroup.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .wrapper {
   display: flex;

diff --git a/client/app/components/Input/InputSwitch.jsx b/client/app/components/Input/InputSwitch.jsx
@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { I18n } from 'libs/i18n';
 import { Utils } from 'utils';
+import { InputCheckbox } from 'components/Input/InputCheckbox';
 import css from './InputSwitch.scss';
-import { InputCheckbox } from './InputCheckbox';
 
 export type Props = {
   id: string,

diff --git a/client/app/components/Input/InputSwitch.scss b/client/app/components/Input/InputSwitch.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .switch {
   @include setFontSize($size-16);

diff --git a/client/app/components/Input/InputTag.jsx b/client/app/components/Input/InputTag.jsx
@@ -1,9 +1,9 @@
 // @flow
 import React, { useState } from 'react';
 import Autosuggest from 'react-autosuggest';
-import type { Checkbox } from './utils';
 import { Utils } from 'utils';
-import { InputCheckbox } from './InputCheckbox';
+import { InputCheckbox } from 'components/Input/InputCheckbox';
+import type { Checkbox } from './utils';
 import inputCss from './Input.scss';
 import css from './InputTag.scss';
 

diff --git a/client/app/components/Input/InputTag.scss b/client/app/components/Input/InputTag.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .tag {
   &Checkboxes {

diff --git a/client/app/components/Input/InputTextarea.scss b/client/app/components/Input/InputTextarea.scss
@@ -1,4 +1,4 @@
-@import "../../styles/_global.scss";
+@import "~styles/_global.scss";
 
 .button {
   @include setFontSize($size-24);

diff --git a/client/app/components/Input/__tests__/InputCheckbox.spec.jsx b/client/app/components/Input/__tests__/InputCheckbox.spec.jsx
@@ -1,7 +1,7 @@
 // @flow
 import { shallow } from 'enzyme';
 import React from 'react';
-import { InputCheckbox } from '../InputCheckbox';
+import { InputCheckbox } from 'components/Input/InputCheckbox';
 
 const id = 'some-id';
 const name = 'some-name';

diff --git a/client/app/components/Input/__tests__/InputCheckboxGroup.spec.jsx b/client/app/components/Input/__tests__/InputCheckboxGroup.spec.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import { InputCheckboxGroup } from '../InputCheckboxGroup';
+import { InputCheckboxGroup } from 'components/Input/InputCheckboxGroup';
 
 const id = 'some-id';
 const name = 'some-name';

diff --git a/client/app/components/Input/__tests__/InputDefault.spec.jsx b/client/app/components/Input/__tests__/InputDefault.spec.jsx
@@ -1,8 +1,8 @@
 // @flow
 import { shallow } from 'enzyme';
 import React from 'react';
-import { InputDefault } from '../InputDefault';
 import { InputMocks } from 'mocks/InputMocks';
+import { InputDefault } from 'components/Input/InputDefault';
 
 const { id } = InputMocks.inputTextProps;
 const { name } = InputMocks.inputTextProps;

diff --git a/client/app/components/Input/__tests__/InputError.spec.jsx b/client/app/components/Input/__tests__/InputError.spec.jsx
@@ -1,7 +1,7 @@
 // @flow
 import { shallow } from 'enzyme';
 import React from 'react';
-import { InputError } from '../InputError';
+import { InputError } from 'components/Input/InputError';
 
 describe('InputError', () => {
   it('renders correctly when error does not exist', () => {