organize components exports

apps/web/Components/Admin/Layout.tsx

@@ -0,0 +1,18 @@
+import { min } from '@/styles/mq';
+import styled from 'styled-components';
+import { Box } from 'ui/grid';
+
+export const Layout = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  ${min('laptop')} {
+    display: grid;
+    place-items: center;
+  }
+
+  ${min('desktop-xl')} {
+    margin: 8px 10% !important;
+  }
+`;

apps/web/Components/Admin/index.ts

@@ -0,0 +1,2 @@
+export * from './Cache';
+export * from './Layout';

apps/web/Components/Admin/index.tsx

@@ -1 +0,0 @@
-export { CacheQueries } from './Cache';

apps/web/Components/Calculation/Form/index.jsx

@@ -44,13 +44,13 @@ const ComponentWrapper = styled.div`
   }
 `;
 
-function Form({ prune }) {
+export function Form({ prune }) {
   return (
     <Wrapper>
       <Tabs type="card" tabBarGutter="5px">
         {formTabs
           .filter((tab) => !prune?.includes(tab.id))
-          .map(({ id, title, Component }) => (
+          .map(({ Component, id, title }) => (
             <Tabs.TabPane tab={title} key={id}>
               <ComponentWrapper>
                 <Component />
@@ -61,5 +61,3 @@ function Form({ prune }) {
     </Wrapper>
   );
 }
-
-export default Form;

apps/web/Components/Calculation/Layout.jsx

@@ -2,7 +2,7 @@ import { min } from '@/styles/mq';
 import styled from 'styled-components';
 import { Box } from 'ui/grid';
 
-export const Grid = styled(Box)`
+export const Layout = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -22,18 +22,3 @@ export const Grid = styled(Box)`
     margin: 8px 10% !important;
   }
 `;
-
-export const AdminGrid = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  ${min('laptop')} {
-    display: grid;
-    place-items: center;
-  }
-
-  ${min('desktop-xl')} {
-    margin: 8px 10% !important;
-  }
-`;

apps/web/Components/Calculation/Output/Results/index.jsx

@@ -22,7 +22,7 @@ const Wrapper = styled.div`
 `;
 
 const Results = observer(() => {
-  const { $results, $process } = useStore();
+  const { $process, $results } = useStore();
 
   const resultsValues = toJS($results.values);
   // eslint-disable-next-line no-negated-condition

apps/web/Components/Calculation/Output/Validation.jsx

@@ -41,7 +41,7 @@ function getElementsErrors({ $calculation, $process }) {
   });
 }
 
-function getPaymentsTableErrors({ $tables, $process }) {
+function getPaymentsTableErrors({ $process, $tables }) {
   const { payments } = $tables;
   const errors = payments.validation.getErrors();
   const title = payments.validation.params.err_title;
@@ -58,7 +58,7 @@ function getPaymentsTableErrors({ $tables, $process }) {
   ));
 }
 
-function getInsuranceTableErrors({ $tables, $process }) {
+function getInsuranceTableErrors({ $process, $tables }) {
   const { insurance } = $tables;
   const errors = insurance.validation.getErrors();
   const title = insurance.validation.params.err_title;
@@ -75,7 +75,7 @@ function getInsuranceTableErrors({ $tables, $process }) {
   ));
 }
 
-function getFingapTableErrors({ $tables, $process }) {
+function getFingapTableErrors({ $process, $tables }) {
   const { fingap } = $tables;
   const errors = fingap.validation.getErrors();
   const title = fingap.validation.params.err_title;

apps/web/Components/Calculation/Output/index.jsx

@@ -42,7 +42,7 @@ const Wrapper = styled(Background)`
   }
 `;
 
-const Output = observer(() => {
+export const Output = observer(() => {
   const { $results } = useStore();
   const [activeKey, setActiveKey] = useState(undefined);
   const { hasErrors } = useErrors();
@@ -69,5 +69,3 @@ const Output = observer(() => {
     </Wrapper>
   );
 });
-
-export default Output;

apps/web/Components/Calculation/Settings/index.jsx

@@ -17,7 +17,7 @@ const Wrapper = styled(Background)`
   }
 `;
 
-export default function Settings() {
+export function Settings() {
   const { $process } = useStore();
 
   const mainRows = $process.has('Unlimited')

apps/web/Components/Calculation/index.js

@@ -1,2 +0,0 @@
-export { default as Form } from './Form';
-export { default as Settings } from './Settings';

apps/web/Components/Calculation/index.ts

@@ -0,0 +1,4 @@
+export * from './Form';
+export * from './Layout';
+export * from './Output';
+export * from './Settings';

apps/web/pages/admin/cache.jsx

@@ -1,9 +1,8 @@
 import { getQueries } from '@/api/cache/query';
 import { getUser } from '@/api/user/query';
 import initializeApollo from '@/apollo/client';
-import { CacheQueries } from '@/Components/Admin';
+import * as Admin from '@/Components/Admin';
 import { Error } from '@/Components/Common/Error';
-import { AdminGrid } from '@/Components/Layout/Page';
 import { adminRoles } from '@/config/users';
 import * as CRMTypes from '@/graphql/crm.types';
 import { getPageTitle } from '@/utils/page';
@@ -12,16 +11,16 @@ import Head from 'next/head';
 
 function Content() {
   return (
-    <AdminGrid>
+    <Admin.Layout>
       <Head>
         <title>{getPageTitle('Управление кэшем')}</title>
       </Head>
-      <CacheQueries />
-    </AdminGrid>
+      <Admin.CacheQueries />
+    </Admin.Layout>
   );
 }
 
-export default function Admin(props) {
+export default function Page(props) {
   if (props.statusCode !== 200) return <Error {...props} />;
 
   return <Content />;

apps/web/pages/index.jsx

@@ -2,8 +2,6 @@ import { getUser } from '@/api/user/query';
 import initializeApollo from '@/apollo/client';
 import * as Calculation from '@/Components/Calculation';
 import { Error } from '@/Components/Common/Error';
-import { Grid } from '@/Components/Layout/Page';
-import Output from '@/Components/Output';
 import { defaultRoles } from '@/config/users';
 import * as CRMTypes from '@/graphql/crm.types';
 import * as hooks from '@/process/hooks';
@@ -18,18 +16,18 @@ function Content() {
   hooks.useReactions();
 
   return (
-    <Grid>
+    <Calculation.Layout>
       <Head>
         <title>{getPageTitle()}</title>
       </Head>
       <Calculation.Form prune={['unlimited']} />
       <Calculation.Settings />
-      <Output />
-    </Grid>
+      <Calculation.Output />
+    </Calculation.Layout>
   );
 }
 
-export default function Home(props) {
+export default function Page(props) {
   if (props.statusCode !== 200) return <Error {...props} />;
 
   return <Content />;

apps/web/pages/unlimited.jsx

@@ -1,8 +1,6 @@
 import { makeGetServerSideProps } from '.';
 import * as Calculation from '@/Components/Calculation';
 import { Error } from '@/Components/Common/Error';
-import { Grid } from '@/Components/Layout/Page';
-import Output from '@/Components/Output';
 import { unlimitedRoles } from '@/config/users';
 import * as hooks from '@/process/hooks';
 import { useStore } from '@/stores/hooks';
@@ -20,18 +18,18 @@ function Content() {
   hooks.useReactions();
 
   return (
-    <Grid>
+    <Calculation.Layout>
       <Head>
         <title>{getPageTitle('Без ограничений')}</title>
       </Head>
       <Calculation.Form />
       <Calculation.Settings />
-      <Output />
-    </Grid>
+      <Calculation.Output />
+    </Calculation.Layout>
   );
 }
 
-export default function Unlimited(props) {
+export default function Page(props) {
   if (props.statusCode !== 200) return <Error {...props} />;
 
   return <Content />;