Name check

app/auth/signin/page.tsx

@@ -19,10 +19,10 @@ import {
 import Ray from '@/assets/ray.svg';
 import TitleDark from '@/assets/titleDark.svg';
 import Vault from '@/assets/vault.svg';
-import Button from '@/components/button';
-import Typography from '@/components/typography';
+import Button from '@/components/Button/Button';
+import Typography from '@/components/Typography/Typography';
 import { VOLCANIC_SAND } from '@/constants/colors';
-import NextLink from '@/components/nextLink';
+import NextLink from '@/components/NextLink/NextLink';
 
 export default function SignIn() {
   const searchParams = useSearchParams();

app/auth/signin/signin.styled.ts

@@ -3,11 +3,10 @@ import styled from 'styled-components';
 import Box from '@mui/material/Box';
 import Link from 'next/link';
 
-import Typography from '../../../components/typography';
-
+import Typography from '@/components/Typography/Typography';
 import { CELERY_MOUSSE } from '@/constants/colors';
 import { media } from '@/utils/media';
-import Column from '@/components/column';
+import Column from '@/components/Column/Column';
 
 export const Background = styled.div`
   align-items: center;

app/dashboard/applications/page.tsx

@@ -2,7 +2,7 @@
 import React, { FunctionComponent, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 
-import Applications from '../../../containers/applications';
+import Applications from '../../../containers/Applications/Applications';
 import { useAppSelector } from '../../../redux/store';
 
 import { Route } from '@/constants';

app/dashboard/cluster-management/page.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import ClusterManagement from '../../../containers/clusterManagement';
+import ClusterManagement from '@/containers/ClusterManagement/ClusterManagement';
 
 const ClusterManagementPage = () => {
   const isClusterZero = process.env.IS_CLUSTER_ZERO === 'true';

app/dashboard/environments/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { FunctionComponent } from 'react';
 
-import Environments from '../../../containers/environments';
+import Environments from '@/containers/Environments/Environments';
 
 const EnvironmentsPage: FunctionComponent = () => {
   return <Environments />;

app/dashboard/layout.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { getEnvVars, getFeatureFlags, validateLicense } from '../lib/common';
 
-import { Layout } from '@/containers/layout';
+import { Layout } from '@/containers/Layout/Layout';
 
 export default async function Page({ children }: PropsWithChildren) {
   const license = await validateLicense();

app/not-found.tsx

@@ -5,11 +5,11 @@ import { useRouter } from 'next/navigation';
 import styled from 'styled-components';
 import { styled as muiStyled } from '@mui/material';
 
-import Typography from '@/components/typography';
+import Typography from '@/components/Typography/Typography';
 import NotFoundIcon from '@/assets/404.svg';
-import Button from '@/components/button';
+import Button from '@/components/Button/Button';
 import { VOLCANIC_SAND } from '@/constants/colors';
-import Column from '@/components/column';
+import Column from '@/components/Column/Column';
 import { Route } from '@/constants';
 
 const Container = styled(Column)`

app/provision/layout.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { getEnvVars, getFeatureFlags, validateLicense } from '../lib/common';
 
-import { Layout } from '@/containers/layout';
+import { Layout } from '@/containers/Layout/Layout';
 
 export default async function Page({ children }: PropsWithChildren) {
   const license = await validateLicense();

app/provision/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { FunctionComponent } from 'react';
 
-import Provision from '../../containers/provision';
+import Provision from '@/containers/Provision/Provision';
 
 const ProvisionPage: FunctionComponent = () => {
   return <Provision />;

app/settings/layout.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
 
 import { getEnvVars, getFeatureFlags, validateLicense } from '../lib/common';
 
-import { Layout } from '@/containers/layout';
+import { Layout } from '@/containers/Layout/Layout';
 
 export default async function Page({ children }: PropsWithChildren) {
   const license = await validateLicense();

app/settings/subscription/[slug]/page.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import axios from 'axios';
 import sortBy from 'lodash/sortBy';
 
-import Subscription from '@/containers/subscription';
+import Subscription from '@/containers/Subscription/Subscription';
 import { Plan } from '@/types/plan';
 
 async function getProductPlans() {

app/settings/subscription/page.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import axios from 'axios';
 import sortBy from 'lodash/sortBy';
 
-import Subscription from '@/containers/subscription';
+import Subscription from '@/containers/Subscription/Subscription';
 import { Plan } from '@/types/plan';
 
 async function getProductPlans() {

components/application/application.stories.tsx → components/Application/Application.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import Application from '.';
+import Application from './Application';
 
 import { mockClusterApplication } from '@/tests/mocks/mockClusterApplication';
 

components/application/application.styled.ts → components/Application/Application.styled.ts

@@ -3,7 +3,7 @@ import NextLink from 'next/link';
 
 import { textTruncate } from '@/utils/theme';
 import { PASTEL_LIGHT_BLUE } from '@/constants/colors';
-import Typography from '@/components/typography';
+import Typography from '@/components/Typography/Typography';
 import styled, { css } from '@/app/lib/styled-components';
 
 export const AppConnector = styled.div`

components/application/index.tsx → components/Application/Application.tsx

@@ -2,11 +2,9 @@ import React, { FunctionComponent, useCallback, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 
-import Typography from '../typography';
-import { formatDomain } from '../../utils/url/formatDomain';
-import Tooltip from '../tooltip';
-import { MINT_GREEN, PASTEL_LIGHT_BLUE } from '../../constants/colors';
-import Button from '../button';
+import Typography from '../Typography/Typography';
+import Tooltip from '../Tooltip/Tooltip';
+import Button from '../Button/Button';
 
 import {
   AppConnector,
@@ -18,8 +16,10 @@ import {
   Links,
   LiveAppIcon,
   Title,
-} from './application.styled';
+} from './Application.styled';
 
+import { formatDomain } from '@/utils/url/formatDomain';
+import { MINT_GREEN, PASTEL_LIGHT_BLUE } from '@/constants/colors';
 import { noop } from '@/utils/noop';
 
 export interface ApplicationProps {

components/applicationsFilter/applicationsFilter.stories.tsx → components/ApplicationsFilter/ApplicationsFilter.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import ApplicationsFilter from '.';
+import ApplicationsFilter from './ApplicationsFilter';
 
 const meta: Meta<typeof ApplicationsFilter> = {
   component: ApplicationsFilter,

components/applicationsFilter/applicationsFilter.styled.ts → components/ApplicationsFilter/ApplicationsFilter.styled.ts

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { styled as muiStyled } from '@mui/material';
 
-import Column from '../column';
-import Autocomplete from '../autocomplete';
-import Row from '../row';
+import Column from '../Column/Column';
+import Autocomplete from '../Autocomplete/Autocomplete';
+import Row from '../Row/Row';
 
 import { PASTEL_LIGHT_BLUE, WHITE } from '@/constants/colors';
 import { media } from '@/utils/media';

components/applicationsFilter/index.tsx → components/ApplicationsFilter/ApplicationsFilter.tsx

@@ -8,19 +8,19 @@ import React, {
 import styled from 'styled-components';
 import SearchIcon from '@mui/icons-material/Search';
 
-import Row from '../row';
-import Typography from '../typography';
-import { IAutocompleteProps } from '../autocomplete';
-import Select from '../select';
-import TextFieldWithRef from '../textField';
-import { InputAdornmentContainer } from '../textField/textField.styled';
+import Row from '../Row/Row';
+import Typography from '../Typography/Typography';
+import { IAutocompleteProps } from '../Autocomplete/Autocomplete';
+import Select from '../Select/Select';
+import TextFieldWithRef from '../TextField/TextField';
+import { InputAdornmentContainer } from '../TextField/TextField.styled';
 
 import {
   Container,
   Content,
   DropdownContainer,
   TargetContainer,
-} from './applicationsFilter.styled';
+} from './ApplicationsFilter.styled';
 
 import { VOLCANIC_SAND } from '@/constants/colors';
 import { LabelValue } from '@/types';

components/autocomplete/autocomplete.stories.tsx → components/Autocomplete/Autocomplete.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Controller, useForm } from 'react-hook-form';
 import styled from 'styled-components';
 
-import AutoComplete from './index';
+import AutoComplete from './Autocomplete';
 
 const meta: Meta<typeof AutoComplete> = {
   component: AutoComplete,

components/autocomplete/autocomplete.styled.ts → components/Autocomplete/Autocomplete.styled.ts

@@ -4,8 +4,9 @@ import { styled as muiStyled } from '@mui/material/styles';
 import { TextField as MUITextField, MenuItem as MUIMenuItem } from '@mui/material';
 import InputAdornment from '@mui/material/InputAdornment';
 
-import { LINK_WATER, SPUN_PEARL, WHITE_SMOKE } from '../../constants/colors';
-import Typography from '../typography';
+import Typography from '../Typography/Typography';
+
+import { LINK_WATER, SPUN_PEARL, WHITE_SMOKE } from '@/constants/colors';
 
 export const AutoTextField = muiStyled(MUITextField)(({ theme, error, type, InputProps }) => ({
   '& .MuiOutlinedInput-root': {

components/autocomplete/index.tsx → components/Autocomplete/Autocomplete.tsx

@@ -8,14 +8,14 @@ import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { InputLabel } from '@mui/material';
 
-import TextField from '../textField';
-import Column from '../column';
-import Typography from '../typography';
-import { Required } from '../textField/textField.styled';
-import Row from '../row';
-import Tag from '../tag';
+import TextField from '../TextField/TextField';
+import Column from '../Column/Column';
+import Typography from '../Typography/Typography';
+import { Required } from '../TextField/TextField.styled';
+import Row from '../Row/Row';
+import Tag from '../Tag/Tag';
 
-import { AutoTextField, InputAdornmentContainer, Label, MenuItem } from './autocomplete.styled';
+import { AutoTextField, InputAdornmentContainer, Label, MenuItem } from './Autocomplete.styled';
 
 import { ClusterEnvironment } from '@/types/provision';
 import { noop } from '@/utils/noop';

components/autocomplete/tagsAutocomplete.stories.tsx → components/Autocomplete/TagsAutocomplete.stories.tsx

@@ -3,7 +3,7 @@ import React, { FunctionComponent, useCallback, useEffect } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { useForm } from 'react-hook-form';
 
-import ControlledTagsAutocomplete from '../controlledFields/autoComplete/TagsAutoComplete';
+import ControlledTagsAutocomplete from '../controlledFields/ControlledAutoComplete/ControlledTagsAutoComplete';
 
 import { createEnvMap } from '@/utils/createEnvMap';
 import { mockEnvironmentsResponse } from '@/tests/mocks/mockEnvironmentsResponse';

components/banner/banner.stories.tsx → components/Banner/Banner.stories.tsx

@@ -3,10 +3,10 @@ import { Meta, StoryObj } from '@storybook/react';
 import styled from 'styled-components';
 
 import useToggle from '../../hooks/useToggle';
-import Button from '../button';
-import Typography from '../typography';
+import Button from '../Button/Button';
+import Typography from '../Typography/Typography';
 
-import BannerComponent from '.';
+import BannerComponent from './Banner';
 
 import { WHITE } from '@/constants/colors';
 

components/banner/index.tsx → components/Banner/Banner.tsx

@@ -4,7 +4,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { SvgIconTypeMap } from '@mui/material';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 
-import { Close, Container, Text } from './banner.styled';
+import { Close, Container, Text } from './Banner.styled';
 
 import { IVY_LEAGUE, RED_VITALITY, WHITE } from '@/constants/colors';
 

components/button/button.stories.tsx → components/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import Button from '.';
+import Button from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,

components/button/index.tsx → components/Button/Button.tsx

@@ -10,7 +10,7 @@ import {
   InfoButton,
   TextButton,
   SubscriptionButton,
-} from './button.styled';
+} from './Button.styled';
 
 const BUTTONS_MAP = {
   ['primary']: PrimaryButton,

components/card/Card.stories.tsx → components/Card/Card.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import Card from '.';
+import Card from './Card';
 
 const meta: Meta<typeof Card> = {
   component: Card,

components/card/card.styled.ts → components/Card/Card.styled.tsx

@@ -1,4 +1,4 @@
-import { CardProps } from '.';
+import { CardProps } from './Card';
 
 import styled, { css } from '@/app/lib/styled-components';
 

components/card/index.tsx → components/Card/Card.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithoutRef, FunctionComponent } from 'react';
 
-import { CardContainer } from './card.styled';
+import { CardContainer } from './Card.styled';
 
 export interface CardProps extends Omit<ComponentPropsWithoutRef<'div'>, 'key'> {
   active?: boolean;

components/checkbox/checkbox.stories.tsx → components/Checkbox/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Meta, StoryObj } from '@storybook/react';
 
-import CheckboxComponent from './index';
+import CheckboxComponent from './Checkbox';
 
 const Wrapper = styled.div`
   background: rgb(255, 255, 255);

components/checkbox/index.tsx → components/Checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import CheckboxMUI, { CheckboxProps } from '@mui/material/Checkbox';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 
-import { QUARTZ, SPUN_PEARL } from '../../constants/colors';
+import { QUARTZ, SPUN_PEARL } from '@/constants/colors';
 
 type ICheckBoxProps = Omit<CheckboxProps, 'key'>;
 

components/cloudProviderCard/CloudProviderCard.stories.tsx → components/CloudProviderCard/CloudProviderCard.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { InstallationType } from '../../types/redux';
 
-import CloudProviderCard from '.';
+import CloudProviderCard from './CloudProviderCard';
 
 const meta: Meta<typeof CloudProviderCard> = {
   component: CloudProviderCard,

components/cloudProviderCard/cloudProviderCard.styled.ts → components/CloudProviderCard/CloudProviderCard.styled.ts

@@ -2,8 +2,8 @@
 import styled from 'styled-components';
 import NextLink from 'next/link';
 
-import Card from '../card';
-import Column from '../column';
+import Card from '../Card/Card';
+import Column from '../Column/Column';
 
 export const CardContainer = styled(Card)`
   display: flex;

components/cloudProviderCard/index.tsx → components/CloudProviderCard/CloudProviderCard.tsx

@@ -1,19 +1,20 @@
 import React, { FunctionComponent } from 'react';
 import Image from 'next/image';
 
-import { CardProps } from '../card';
-import Typography from '../typography';
-import Tag from '../tag';
-import { InstallationType } from '../../types/redux';
-import k3dLogo from '../../assets/k3d_logo.svg';
-import awsLogo from '../../assets/aws_logo.svg';
-import civoLogo from '../../assets/civo_logo.svg';
-import digitalOceanLogo from '../../assets/digital_ocean_logo.svg';
-import vultrLogo from '../../assets/vultr_logo.svg';
-import googleCloudLogo from '../../assets/googleCloud.svg';
-import { BISCAY } from '../../constants/colors';
+import { CardProps } from '../Card/Card';
+import Typography from '../Typography/Typography';
+import Tag from '../Tag/Tag';
 
-import { CardContainer, DetailsContainer, Link, LabelContainer } from './cloudProviderCard.styled';
+import { CardContainer, DetailsContainer, Link, LabelContainer } from './CloudProviderCard.styled';
+
+import { InstallationType } from '@/types/redux';
+import k3dLogo from '@/assets/k3d_logo.svg';
+import awsLogo from '@/assets/aws_logo.svg';
+import civoLogo from '@/assets/civo_logo.svg';
+import digitalOceanLogo from '@/assets/digital_ocean_logo.svg';
+import vultrLogo from '@/assets/vultr_logo.svg';
+import googleCloudLogo from '@/assets/googleCloud.svg';
+import { BISCAY } from '@/constants/colors';
 
 const PROVIDER_OPTIONS: Record<
   InstallationType,