Organize components paths (#270)

Our import paths were not organized efficiently. Some of them export as default and some didn't which caused such problems such as #265.

I've managed to export all of them in `main/index.ts` restructuring each necessary imports.

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,7 +18,6 @@ will likely get reverted accidentally sooner or later. PRs must include tests fo
 Before you create this PR confirms that it meets all requirements listed below by checking the relevant checkboxes (`[x]`). This will ensure a smooth and quick review process.
 
 - [ ] I read the [Contributor Guide](https://github.com/dooboolab/dooboo-ui/blob/master/CONTRIBUTING.md) and followed the process outlined there for submitting PRs.
-- [ ] I signed the [CLA].
 - [ ] Run `yarn test` or `yarn test -u` if you need to update snapshot.
 - [ ] Run `yarn lint`
 - [ ] I am willing to follow-up on review comments in a timely manner.

CHANGELOGS.md

@@ -1,8 +1,8 @@
 ## Changelogs
-- **[0.0.13]**
+- **[0.0.15]**
   * Add `contentStyle` to [EditText] [#264](https://github.com/dooboolab/dooboo-ui/pull/264)
-
-- **[0.0.12]**
+  * Types fixes
+  * Changed all the import paths in more concise way [#270](https://github.com/dooboolab/dooboo-ui/pull/270).
   * Renamed `Item` to `SelectItem` and fixes import pathes [#265](https://github.com/dooboolab/dooboo-ui/issues/265)
 
 - **[0.0.11]**

CONTRIBUTING.md

@@ -119,4 +119,33 @@ array.forEach((e) => {
 ```
 
 - Space before `(` and after `)`.
+
+*** Important ***
+- testID should be written in `kebab-case`
+  `testID = "my-test-id"`
+- Class name should be a `PascalCase`
+- Enum type should be a `PascalCase`
+- Constants should be written in `UPPER_SNAKE_CASE`
+   * Note that this is for `number`, `string` and constant `array`.
+   * Unformed data type like object or class variable should be written in `camelCase`.
+- Variables and functions should be written in `camelCase`
+- Assets name should be written in `lower_snake_case`
+  `const imgUrl = 'assets/icons/icon_add.png'`
+
+
 - **If you find code that does not fit in the coding convention, do not ever try to fix code that is not related to your purpose.**
+
+- [how to use prettier extension for the eslint code rules](https://medium.com/dooboolab/using-eslint-prettier-and-sort-imports-vscode-extensions-for-formatting-open-source-project-16edf317129d)
+- while you are using prettier extension, you may encounter **ternary operator** indentation problems
+
+  ![error](https://i.imgur.com/RhGrbLo.png)
+
+  you can use
+
+  ```
+  // prettier-ignore
+  ```
+
+  like below
+
+  ![fixes](https://i.imgur.com/x3bL5kf.png)

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dooboo-ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "main": "index.js",
   "types": "index.d.ts",
   "author": "dooboolab",

main/Accordion/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+
 import AccrordionItem from './AccordionItem';
 import { ViewStyle } from 'react-native';
 import styled from 'styled-components/native';
@@ -8,25 +9,25 @@ const Container = styled.View`
   align-items: center;
 `;
 
-type titleType = {
+type TitleType = {
   leftElement?: React.ReactElement;
   name: React.ReactElement;
   rightElement?: React.ReactElement;
 };
 
-type bodyType = {
+type BodyType = {
   leftElement?: React.ReactElement;
   name: React.ReactElement;
   rightElement?: React.ReactElement;
 };
 
-type datumType = {
-  title: titleType;
-  bodies: Array<bodyType>;
+type DatumType = {
+  title: TitleType;
+  bodies: Array<BodyType>;
 };
 
 interface Props {
-  data: Array<datumType>;
+  data: Array<DatumType>;
   isAnimated?: boolean;
   collapseOnStart: boolean;
   animDuration?: number;
@@ -72,4 +73,5 @@ const Accordion: FC<Props> = (props) => {
     </Container>
   );
 };
-export default Accordion;
+
+export { Accordion };

main/Button/index.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
-import React, { useRef } from 'react';
+import React, { FC, useRef } from 'react';
 
 import styled from 'styled-components/native';
 import { useHover } from './hooks';
@@ -59,7 +59,7 @@ interface Props {
   secondaryStyle?: ViewStyle;
 }
 
-function Button(props: Props): React.ReactElement {
+const Button: FC<Props> = (props) => {
   const {
     isDisabled,
     testID,
@@ -126,6 +126,6 @@ function Button(props: Props): React.ReactElement {
       </StyledButton>
     </TouchableOpacity>
   );
-}
+};
 
-export default Button;
+export { Button };

main/ButtonGroup/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { FC, useState } from 'react';
 import {
   StyleProp,
   StyleSheet,
@@ -23,7 +23,7 @@ interface Props {
   initialIndex?: number;
 }
 
-function Shared(props: Props): React.ReactElement {
+const ButtonGroup: FC<Props> = (props) => {
   const {
     borderRadius = 0,
     initialIndex = 0,
@@ -86,9 +86,9 @@ function Shared(props: Props): React.ReactElement {
       })}
     </View>
   );
-}
+};
 
-Shared.defaultProps = {
+ButtonGroup.defaultProps = {
   containerStyle: {
     backgroundColor: 'transparent',
     flexDirection: 'row',
@@ -130,10 +130,7 @@ Shared.defaultProps = {
     textAlign: 'center',
     alignSelf: 'center',
   },
-  selectedOption: {
-    index: 0,
-  },
   data: ['option 1', 'option 2'],
 };
 
-export default Shared;
+export { ButtonGroup };

main/EditText/index.tsx

@@ -7,7 +7,7 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native';
-import React, { ReactElement, useState } from 'react';
+import React, { FC, ReactElement, useState } from 'react';
 
 import styled from 'styled-components/native';
 
@@ -131,7 +131,7 @@ export enum EditTextInputType {
   ROW_BOX = 'rowBox',
 }
 
-function EditText(props: Props): ReactElement {
+const EditText: FC<Props> = (props) => {
   const [focused, setFocus] = useState(false);
 
   const {
@@ -459,6 +459,6 @@ function EditText(props: Props): ReactElement {
         </RowContainer>
       );
   }
-}
+};
 
-export default EditText;
+export { EditText };

main/LoadingIndicator/index.tsx

@@ -91,4 +91,4 @@ LoadingIndicator.defaultProps = {
   color: '#969696',
 };
 
-export default LoadingIndicator;
+export { LoadingIndicator };

main/RadioButton/index.tsx

@@ -155,4 +155,4 @@ RadioButton.defaultProps = {
   labelPlacement: 'end',
 };
 
-export default RadioButton;
+export { RadioButton };

main/Rating/index.tsx

@@ -85,4 +85,4 @@ function Rating(props: Props): React.ReactElement {
   );
 }
 
-export default Rating;
+export { Rating };

main/SearchInput/index.tsx

@@ -148,4 +148,4 @@ const SearchInput: FC<Props> = (props) => {
   );
 };
 
-export default SearchInput;
+export { SearchInput };

main/Select/Select.tsx

@@ -7,7 +7,7 @@ import {
 import React, { Fragment, ReactNode } from 'react';
 
 import Arrow from './Arrow';
-import LoadingIndicator from '../LoadingIndicator';
+import { LoadingIndicator } from '../LoadingIndicator';
 import styled from 'styled-components/native';
 
 interface Props {

main/Slider/index.tsx

@@ -210,4 +210,4 @@ const Slider: FC<Props> = ({
   );
 };
 
-export default Slider;
+export { Slider };

main/SwitchToggle/index.tsx

@@ -181,4 +181,4 @@ SwitchToggle.defaultProps = {
   duration: 300,
 };
 
-export default SwitchToggle;
+export { SwitchToggle };

main/__tests__/Accordion.test.tsx

@@ -5,7 +5,8 @@ import {
   fireEvent,
   render,
 } from '@testing-library/react-native';
-import Accordion from '../Accordion';
+
+import { Accordion } from '../../main';
 import { Text } from 'react-native';
 
 let props: any;

main/__tests__/Button.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Button from '../Button';
+import { Button } from '../../main';
 import { Text } from 'react-native';
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

main/__tests__/ButtonGroup.test.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { RenderResult, act, fireEvent, render } from '@testing-library/react-native';
 
-import ButtonGroup from '../ButtonGroup';
+import { ButtonGroup } from '../../main';
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 

main/__tests__/EditText.test.tsx

@@ -8,7 +8,7 @@ import {
   waitForElement,
 } from '@testing-library/react-native';
 
-import EditText from '../EditText';
+import { EditText } from '../../main';
 import { View } from 'react-native';
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

main/__tests__/LoadingIndicator.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import LoadingIndicator from '../LoadingIndicator';
+import { LoadingIndicator } from '../../main';
 import { View } from 'react-native';
 import renderer from 'react-test-renderer';
 

main/__tests__/RadioButton.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import RadioButton from '../RadioButton';
+import { RadioButton } from '../../main';
 // Note: test renderer must be required after react-native.
 import { TouchableOpacity } from 'react-native';
 import renderer from 'react-test-renderer';

main/__tests__/Rating.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Rating from '../Rating';
+import { Rating } from '../../main';
 // Note: test renderer must be required after react-native.
 import { TouchableOpacity } from 'react-native';
 import renderer from 'react-test-renderer';

main/__tests__/SearchInput.test.tsx

@@ -6,7 +6,8 @@ import {
   fireEvent,
   render,
 } from '@testing-library/react-native';
-import SearchInput from '../SearchInput';
+
+import { SearchInput } from '../../main';
 
 let props: any;
 let component: ReactElement;

main/__tests__/Select.test.tsx

@@ -4,7 +4,7 @@ import {
   cleanup,
   render,
 } from '@testing-library/react-native';
-import { Select, SelectItem } from '../Select';
+import { Select, SelectItem } from '../../main';
 
 let props: any;
 let component: ReactElement;

main/__tests__/Slider.test.tsx

@@ -14,7 +14,7 @@ import {
 import Label from '../Slider/Label';
 import Marks from '../Slider/Marks';
 import Rail from '../Slider/Rail';
-import Slider from '../Slider';
+import { Slider } from '../../main';
 import Thumb from '../Slider/Thumb';
 import Track from '../Slider/Track';
 

main/__tests__/SwitchToggle.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 // Note: test renderer must be required after react-native.
-import SwitchToggle from '../SwitchToggle';
+import { SwitchToggle } from '../../main';
 import { TouchableOpacity } from 'react-native';
 import renderer from 'react-test-renderer';
 

main/index.ts

@@ -1,8 +1,11 @@
-export * from './Accordion';
-export * from './Button';
-export * from './ButtonGroup';
-export * from './EditText';
-export * from './LoadingIndicator';
-export * from './Slider';
-export * from './SwitchToggle';
-export * from './Select';
+export { Accordion } from './Accordion';
+export { Button } from './Button';
+export { ButtonGroup } from './ButtonGroup';
+export { EditText, EditTextInputType } from './EditText';
+export { LoadingIndicator } from './LoadingIndicator';
+export { Slider } from './Slider';
+export { RadioButton } from './RadioButton';
+export { Rating } from './Rating';
+export { SearchInput } from './SearchInput';
+export { SwitchToggle } from './SwitchToggle';
+export { Select, SelectItem } from './Select';