style: comply with naming conventions

src/app/components/Address/Address.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Address } from "./Address";
 
 export default {
-	title: "Components / Formatted Address",
+	title: "App / Components / Address",
 	decorators: [withKnobs],
 };
 

src/app/components/Alert/Alert.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Alert } from "./Alert";
 
 export default {
-	title: "Basic / Alert",
+	title: "App / Components / Alert",
 	decorators: [withKnobs],
 };
 

src/app/components/Avatar/Avatar.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Avatar } from "./Avatar";
 
-export default { title: "Wallets / Components / Avatar" };
+export default { title: "App / Components / Avatar" };
 
 export const Default = () => {
 	return (

src/app/components/Badge/Badge.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Badge } from "./Badge";
 
 export default {
-	title: "Components / Badge",
+	title: "App / Components / Badge",
 };
 
 export const Default = () => {

src/app/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Breadcrumbs } from "./Breadcrumbs";
 
 export default {
-	title: "Components / Breadcrumbs",
+	title: "App / Components / Breadcrumbs",
 	decorators: [withKnobs],
 };
 

src/app/components/Button/Button.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Button } from "./Button";
 
 export default {
-	title: "Basic / Button",
+	title: "App / Components / Button",
 	decorators: [withKnobs],
 };
 

src/app/components/Card/Card.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Card } from "./Card";
 import { CardControl, CardControlState } from "./CardControl";
 
-export default { title: "Basic / Card" };
+export default { title: "App / Components / Card" };
 
 export const Default = () => <Card className="inline-flex">ARK Ecosystem</Card>;
 export const Control = () => (

src/app/components/Checkbox/Checkbox.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Checkbox } from "./Checkbox";
 
 export default {
-	title: "Basic / Checkbox",
+	title: "App / Components / Checkbox",
 	decorators: [withKnobs],
 };
 

src/app/components/Circle/Circle.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Circle } from "./Circle";
 
 export default {
-	title: "Components / Circle",
+	title: "App / Components / Circle",
 	decorators: [withKnobs],
 };
 

src/app/components/CircularProgressBar/CircularProgressBar.stories.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { CircularProgressBar } from "./CircularProgressBar";
 
 export default {
-	title: "Components / CircularProgressBar",
+	title: "App / Components / CircularProgressBar",
 };
 
 export const Default = () => {

src/app/components/Clipboard/Clipboard.stories.tsx

@@ -5,7 +5,7 @@ import React, { useState } from "react";
 import { Clipboard } from "./Clipboard";
 
 export default {
-	title: "Components / Clipboard",
+	title: "App / Components / Clipboard",
 	decorators: [withKnobs],
 };
 

src/app/components/Collapse/Collapse.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Collapse } from "./Collapse";
 import { CollapseToggleButton } from "./CollapseToggleButton";
 
-export default { title: "Basic / Collapse" };
+export default { title: "App / Components / Collapse" };
 
 export const Default = () => {
 	const [show, setShow] = React.useState(false);

src/app/components/Divider/Divider.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { Divider } from "./Divider";
 
 export default {
-	title: "Basic / Divider",
+	title: "App / Components / Divider",
 	decorators: [withKnobs],
 };
 

src/app/components/Dropdown/Dropdown.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Dropdown } from "./Dropdown";
 
 export default {
-	title: "Components / Dropdown",
+	title: "App / Components / Dropdown",
 };
 
 export const Default = () => {

src/app/components/Form/Form.stories.tsx

@@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
 import { FormHelperText } from "./FormHelperText";
 import { Form, FormField, FormLabel } from "./index";
 
-export default { title: "Form / Form" };
+export default { title: "App / Components / Form" };
 
 export const Default = () => {
 	const methods = useForm({ mode: "onChange" });

src/app/components/Header/Header.stories.tsx

@@ -7,7 +7,7 @@ import { Header } from "./Header";
 import { HeaderSearchBar } from "./HeaderSearchBar";
 
 export default {
-	title: "Basic / Header",
+	title: "App / Components / Header",
 	decorators: [withKnobs],
 };
 

src/app/components/Icon/Icon.stories.tsx

@@ -6,7 +6,7 @@ import React from "react";
 import { Icon } from "./Icon";
 
 export default {
-	title: "Basic / Icon",
+	title: "App / Components / Icon",
 	decorators: [withKnobs],
 };
 

src/app/components/Input/Input.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Input, InputCounter, InputPassword } from "./index";
 
 export default {
-	title: "Input / Input",
+	title: "App / Components / Input",
 };
 
 export const Default = () => {

src/app/components/Input/InputCurrency.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { InputCurrency } from "./InputCurrency";
 
-export default { title: "Input / Input / InputCurrency" };
+export default { title: "App / Components / InputCurrency" };
 
 export const Default = () => {
 	return <InputCurrency onChange={action("onChange")} />;

src/app/components/Input/InputGroup.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Input, InputAddonEnd, InputAddonStart, InputGroup } from "./index";
 
 export default {
-	title: "Input / Input / InputGroup",
+	title: "App / Components / InputGroup",
 };
 
 export const Start = () => {

src/app/components/Input/InputRange.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { InputRange } from "./InputRange";
 
-export default { title: "Input / Input / InputRange" };
+export default { title: "App / Components / InputRange" };
 
 export const Default = () => (
 	<div className="max-w-lg">

src/app/components/Label/Label.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Label } from "./Label";
 
 export default {
-	title: "Basic / Label",
+	title: "App / Components / Label",
 };
 
 export const All = () => (

src/app/components/LineChart/LineChart.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { LineChart } from "./LineChart";
 
 export default {
-	title: "Components / Line Chart",
+	title: "App / Components / LineChart",
 };
 
 export const Default = () => {

src/app/components/ListDivided/ListDivided.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { ListDivided } from ".";
+import { ListDivided } from "./ListDivided";
 
 export default {
-	title: "Basic / List Divided / List Divided",
+	title: "App / Components / ListDivided",
 };
 
 export const Default = () => (

src/app/components/ListDivided/ListDividedItem.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ListDividedItem } from "./ListDividedItem";
 
 export default {
-	title: "Basic / List Divided / List Divided Item",
+	title: "App / Components / ListDivided / ListDividedItem",
 };
 
 const item = {

src/app/components/Modal/Modal.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Modal } from "./Modal";
 
 export default {
-	title: "Components / Modal",
+	title: "App / Components / Modal",
 	decorators: [withKnobs],
 };
 

src/app/components/NavigationBar/NavigationBar.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { NavigationBar } from "./NavigationBar";
 
-export default { title: "Navigation / NavigationBar" };
+export default { title: "App / Components / NavigationBar" };
 
 export const Default = () => {
 	const notifications = {

src/app/components/NavigationHeader/NavigationHeader.stories.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 import { NavigationHeader } from "./NavigationHeader";
 
-export default { title: "Navigation / NavigationHeader" };
+export default { title: "App / Components / NavigationHeader" };
 
 export const Default = () => <NavigationHeader title="Go back to Portfolio" route="/portfolio" />;

src/app/components/Notifications/Notifications.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Notifications } from "./Notifications";
 
 export default {
-	title: "Navigation / Notifications",
+	title: "App / Components / Notifications",
 };
 
 export const Default = () => {

src/app/components/Pagination/Pagination.stories.tsx

@@ -2,6 +2,6 @@ import React from "react";
 
 import { Pagination } from "./Pagination";
 
-export default { title: "Components / Pagination" };
+export default { title: "App / Components / Pagination" };
 
 export const Default = () => <Pagination totalCount={12} itemsPerPage={4} onSelectPage={console.log} currentPage={1} />;

src/app/components/PercentageBar/PercentageBar.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { PercentageBar } from "./PercentageBar";
 
 export default {
-	title: "Components / Percentage Bar",
+	title: "App / Components / PercentageBar",
 };
 
 export const Blank = () => {

src/app/components/RadioButton/RadioButton.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { RadioButton } from "./RadioButton";
 
 export default {
-	title: "Basic / Radio Button",
+	title: "App / Components / RadioButton",
 	decorators: [withKnobs],
 };
 

src/app/components/Range/Range.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Range } from "./Range";
 
-export default { title: "Basic / Range" };
+export default { title: "App / Components / Range" };
 
 export const Default = () => {
 	const [values, setValues] = React.useState([10]);

src/app/components/ReviewRating/ReviewRating.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ReviewRating } from "./ReviewRating";
 
 export default {
-	title: "Basic / Review / Rating",
+	title: "App / Components / ReviewRating",
 };
 
 export const Default = () => <ReviewRating rating={1.5} />;

src/app/components/SearchBar/SearchBar.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 
 import { SearchBar } from "./SearchBar";
 
-export default { title: "Search / Search Bar", decorators: [withKnobs] };
+export default { title: "App / Components / SearchBar", decorators: [withKnobs] };
 
 export const Default = () => {
 	return (

src/app/components/SearchBar/SearchBarFilters/SearchBarFilters.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { SearchBarFilters } from "./SearchBarFilters";
 
 export default {
-	title: "Search / Search Bar / Search Bar Filters",
+	title: "App / Components / SearchBar / SearchBarFilters",
 	decorators: [withKnobs],
 };
 

src/app/components/SearchBar/SearchBarOptions/SearchBarOptions.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { SearchBarOptions } from "./SearchBarOptions";
 
-export default { title: "Search / Search Bar / Search Bar Options", decorators: [withKnobs] };
+export default { title: "App / Components / SearchBar / SearchBarOptions", decorators: [withKnobs] };
 
 export const Default = () => {
 	const options = [

src/app/components/Select/Select.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Select } from "./Select";
 
 export default {
-	title: "Input / Select",
+	title: "App / Components / Select",
 };
 
 export const Default = () => (

src/app/components/SelectAsset/SelectAsset.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { SelectAsset } from "./SelectAsset";
 
 export default {
-	title: "Components / SelectAsset",
+	title: "App / Components / SelectAsset",
 };
 
 export const Default = () => {

src/app/components/SelectDropdown/SelectDropdown.stories.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { SelectDropdown } from "./SelectDropdown";
 
 export default {
-	title: "Components / SelectDropdown",
+	title: "App / Components / SelectDropdown",
 };
 
 export const Simple = () => {

src/app/components/SelectNetwork/SelectNetwork.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { SelectNetwork } from "./SelectNetwork";
 
 export default {
-	title: "Input / Select Network",
+	title: "App / Components / SelectNetwork",
 };
 
 export const Default = () => {

src/app/components/SelectionBar/SelectionBar.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { SelectionBar, SelectionBarOption } from "./SelectionBar";
 import { useSelectionState } from "./useSelectionState";
 
-export default { title: "Basic / Selection Bar" };
+export default { title: "App / Components / SelectionBar" };
 
 export const Default = () => {
 	const state = useSelectionState(1);

src/app/components/SideBar/SideBar.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 
 import { SideBar } from "./SideBar";
 
-export default { title: "Navigation / Side Bar" };
+export default { title: "App / Components / SideBar" };
 
 const items = [
 	{

src/app/components/SideBar/SideBarItem/SideBarItem.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { SideBarItem } from "./SideBarItem";
 
-export default { title: "Navigation / Side Bar / Side Bar Item", decorators: [withKnobs] };
+export default { title: "App / Components / SideBar / SideBarItem", decorators: [withKnobs] };
 
 const item = {
 	label: text("Label", "General"),