admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Reorganize frontend and install Craco to alias modules (#190)

Browse Source
This commit is contained in:
Charles Bochet
2023-06-04 11:23:09 +02:00
committed by GitHub
parent bbc80cd543
commit 7b858fd7c9
149 changed files with 3441 additions and 1158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/pages/auth/Callback.tsx
View File

@ -1,6 +1,7 @@
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { refreshAccessToken } from '../../services/auth/AuthService';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { refreshAccessToken } from '@/auth/services/AuthService';
function Callback() {
const [searchParams] = useSearchParams();

7
front/src/pages/auth/Login.tsx
View File

@ -1,8 +1,9 @@
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { hasAccessToken } from '../../services/auth/AuthService';
function Login() {
import { hasAccessToken } from '@/auth/services/AuthService';
export function Login() {
const navigate = useNavigate();
useEffect(() => {
if (!hasAccessToken()) {
@ -14,5 +15,3 @@ function Login() {
return <></>;
}
export default Login;

43
front/src/pages/companies/Companies.tsx
View File

@ -1,41 +1,42 @@
import { useState, useCallback } from 'react';
import { useCallback, useState } from 'react';
import { FaList } from 'react-icons/fa';
import { TbBuilding } from 'react-icons/tb';
import styled from '@emotion/styled';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import { v4 as uuidv4 } from 'uuid';
import {
Company,
mapToCompany,
} from '@/companies/interfaces/company.interface';
import {
CompaniesSelectedSortType,
defaultOrderBy,
insertCompany,
useCompaniesQuery,
} from '../../services/api/companies';
import { EntityTable } from '../../components/table/EntityTable';
import {
Company,
mapToCompany,
} from '../../interfaces/entities/company.interface';
} from '@/companies/services';
import {
reduceFiltersToWhere,
reduceSortsToOrderBy,
} from '../../components/table/table-header/helpers';
import { CompanyOrderByWithRelationInput as Companies_Order_By } from '../../generated/graphql';
import { SelectedFilterType } from '../../interfaces/filters/interface';
import { BoolExpType } from '../../interfaces/entities/generic.interface';
import { useCompaniesColumns } from './companies-columns';
import { availableSorts } from './companies-sorts';
import { availableFilters } from './companies-filters';
import { TbBuilding } from 'react-icons/tb';
import { EntityTableActionBar } from '../../components/table/action-bar/EntityTableActionBar';
} from '@/filters-and-sorts/helpers';
import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
import { TableActionBarButtonToggleComments } from '@/ui/components/table/action-bar/TableActionBarButtonOpenComments';
import { EntityTable } from '@/ui/components/table/EntityTable';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { BoolExpType } from '@/utils/interfaces/generic.interface';
import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
import { TableActionBarButtonDeleteCompanies } from './table/TableActionBarButtonDeleteCompanies';
import { TableActionBarButtonToggleComments } from '../../components/table/action-bar/TableActionBarButtonOpenComments';
import { useCompaniesColumns } from './companies-columns';
import { availableFilters } from './companies-filters';
import { availableSorts } from './companies-sorts';
const StyledCompaniesContainer = styled.div`
display: flex;
width: 100%;
`;
function Companies() {
export function Companies() {
const [orderBy, setOrderBy] = useState<Companies_Order_By[]>(defaultOrderBy);
const [where, setWhere] = useState<BoolExpType<Company>>({});
@ -99,5 +100,3 @@ function Companies() {
</WithTopBarContainer>
);
}
export default Companies;

3
front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx
View File

@ -2,7 +2,8 @@ import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import Companies from '../Companies';
import { Companies } from '../Companies';
import { Story } from './Companies.stories';
import { mocks, render } from './shared';

3
front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
View File

@ -2,7 +2,8 @@ import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import Companies from '../Companies';
import { Companies } from '../Companies';
import { Story } from './Companies.stories';
import { mocks, render } from './shared';

6
front/src/pages/companies/__stories__/Companies.stories.tsx
View File

@ -1,9 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react';
import Companies from '../Companies';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { getRenderWrapperForPage } from '../../../testing/renderWrappers';
import { graphqlMocks } from '../../../testing/graphqlMocks';
import { Companies } from '../Companies';
const meta: Meta<typeof Companies> = {
title: 'Pages/Companies',

24
front/src/pages/companies/__stories__/shared.tsx
View File

@ -1,19 +1,19 @@
import { graphql } from 'msw';
import { RecoilRoot } from 'recoil';
import { ThemeProvider } from '@emotion/react';
import { MemoryRouter } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { ThemeProvider } from '@emotion/react';
import { graphql } from 'msw';
import { RecoilRoot } from 'recoil';
import { filterAndSortData } from '../../../testing/mock-data';
import { mockedCompaniesData } from '../../../testing/mock-data/companies';
import { GraphqlQueryCompany } from '../../../interfaces/entities/company.interface';
import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
import { lightTheme } from '@/ui/layout/styles/themes';
import { GraphqlQueryUser } from '@/users/interfaces/user.interface';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { filterAndSortData } from '~/testing/mock-data';
import { mockedCompaniesData } from '~/testing/mock-data/companies';
import { mockedUsersData } from '~/testing/mock-data/users';
import { mockedClient } from '~/testing/mockedClient';
import { lightTheme } from '../../../layout/styles/themes';
import { FullHeightStorybookLayout } from '../../../testing/FullHeightStorybookLayout';
import { mockedClient } from '../../../testing/mockedClient';
import Companies from '../Companies';
import { GraphqlQueryUser } from '../../../interfaces/entities/user.interface';
import { mockedUsersData } from '../../../testing/mock-data/users';
import { Companies } from '../Companies';
export const mocks = [
graphql.query('GetCompanies', (req, res, ctx) => {

39
front/src/pages/companies/companies-columns.tsx
View File

@ -1,21 +1,4 @@
import { useMemo } from 'react';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import { SEARCH_USER_QUERY } from '../../services/api/search/search';
import { SearchConfigType } from '../../interfaces/search/interface';
import { Company } from '../../interfaces/entities/company.interface';
import { updateCompany } from '../../services/api/companies';
import { User, mapToUser } from '../../interfaces/entities/user.interface';
import ColumnHead from '../../components/table/ColumnHead';
import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
import EditableDate from '../../components/editable-cell/EditableDate';
import EditableRelation from '../../components/editable-cell/EditableRelation';
import EditableText from '../../components/editable-cell/EditableText';
import PersonChip, {
PersonChipPropsType,
} from '../../components/chips/PersonChip';
import {
TbBuilding,
TbCalendar,
@ -24,9 +7,25 @@ import {
TbSum,
TbUser,
} from 'react-icons/tb';
import { QueryMode } from '../../generated/graphql';
import { CheckboxCell } from '../../components/table/CheckboxCell';
import { CompanyEditableNameChipCell } from '../../components/companies/CompanyEditableNameCell';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
import { Company } from '@/companies/interfaces/company.interface';
import { updateCompany } from '@/companies/services';
import {
PersonChip,
PersonChipPropsType,
} from '@/people/components/PersonChip';
import { SearchConfigType } from '@/search/interfaces/interface';
import { SEARCH_USER_QUERY } from '@/search/services/search';
import { EditableDate } from '@/ui/components/editable-cell/EditableDate';
import { EditableRelation } from '@/ui/components/editable-cell/EditableRelation';
import { EditableText } from '@/ui/components/editable-cell/EditableText';
import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
import { mapToUser, User } from '@/users/interfaces/user.interface';
import { QueryMode } from '~/generated/graphql';
const columnHelper = createColumnHelper<Company>();

11
front/src/pages/companies/companies-filters.tsx
View File

@ -6,11 +6,12 @@ import {
TbSum,
TbUser,
} from 'react-icons/tb';
import { Company } from '../../interfaces/entities/company.interface';
import { FilterConfigType } from '../../interfaces/filters/interface';
import { SEARCH_USER_QUERY } from '../../services/api/search/search';
import { User, mapToUser } from '../../interfaces/entities/user.interface';
import { QueryMode } from '../../generated/graphql';
import { Company } from '@/companies/interfaces/company.interface';
import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
import { SEARCH_USER_QUERY } from '@/search/services/search';
import { mapToUser, User } from '@/users/interfaces/user.interface';
import { QueryMode } from '~/generated/graphql';
export const nameFilter = {
key: 'name',

5
front/src/pages/companies/companies-sorts.tsx
View File

@ -5,8 +5,9 @@ import {
TbMapPin,
TbSum,
} from 'react-icons/tb';
import { CompanyOrderByWithRelationInput as Companies_Order_By } from '../../generated/graphql';
import { SortType } from '../../interfaces/sorts/interface';
import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
import { CompanyOrderByWithRelationInput as Companies_Order_By } from '~/generated/graphql';
export const availableSorts = [
{

9
front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx
View File

@ -1,9 +1,10 @@
import { TbTrash } from 'react-icons/tb';
import { EntityTableActionBarButton } from '../../../components/table/action-bar/EntityTableActionBarButton';
import { useDeleteCompaniesMutation } from '../../../generated/graphql';
import { selectedRowIdsState } from '../../../modules/ui/tables/states/selectedRowIdsState';
import { useRecoilValue } from 'recoil';
import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection';
import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
import { useDeleteCompaniesMutation } from '~/generated/graphql';
export function TableActionBarButtonDeleteCompanies() {
const selectedRowIds = useRecoilValue(selectedRowIdsState);

7
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,12 +1,11 @@
import { FaBullseye } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
function Opportunities() {
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
export function Opportunities() {
return (
<WithTopBarContainer title="Opportunities" icon={<FaBullseye />}>
<></>
</WithTopBarContainer>
);
}
export default Opportunities;

47
front/src/pages/people/People.tsx
View File

@ -1,34 +1,31 @@
import { useCallback, useState } from 'react';
import { FaList } from 'react-icons/fa';
import { v4 as uuidv4 } from 'uuid';
import { TbUser } from 'react-icons/tb';
import styled from '@emotion/styled';
import { v4 as uuidv4 } from 'uuid';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import { EntityTable } from '../../components/table/EntityTable';
import {
Person,
mapToPerson,
} from '../../interfaces/entities/person.interface';
import {
PeopleSelectedSortType,
defaultOrderBy,
insertPerson,
usePeopleQuery,
} from '../../services/api/people';
import {
reduceFiltersToWhere,
reduceSortsToOrderBy,
} from '../../components/table/table-header/helpers';
import { SelectedFilterType } from '../../interfaces/filters/interface';
import { BoolExpType } from '../../interfaces/entities/generic.interface';
import { usePeopleColumns } from './people-columns';
import { availableSorts } from './people-sorts';
import { availableFilters } from './people-filters';
import { TbUser } from 'react-icons/tb';
import { EntityTableActionBar } from '../../components/table/action-bar/EntityTableActionBar';
} from '@/filters-and-sorts/helpers';
import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
import { mapToPerson, Person } from '@/people/interfaces/person.interface';
import {
defaultOrderBy,
insertPerson,
PeopleSelectedSortType,
usePeopleQuery,
} from '@/people/services';
import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
import { TableActionBarButtonToggleComments } from '@/ui/components/table/action-bar/TableActionBarButtonOpenComments';
import { EntityTable } from '@/ui/components/table/EntityTable';
import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
import { BoolExpType } from '@/utils/interfaces/generic.interface';
import { TableActionBarButtonDeletePeople } from './table/TableActionBarButtonDeletePeople';
import { TableActionBarButtonToggleComments } from '../../components/table/action-bar/TableActionBarButtonOpenComments';
import { usePeopleColumns } from './people-columns';
import { availableFilters } from './people-filters';
import { availableSorts } from './people-sorts';
const StyledPeopleContainer = styled.div`
display: flex;
@ -36,7 +33,7 @@ const StyledPeopleContainer = styled.div`
height: 100%;
`;
function People() {
export function People() {
const [orderBy, setOrderBy] = useState(defaultOrderBy);
const [where, setWhere] = useState<BoolExpType<Person>>({});
@ -101,5 +98,3 @@ function People() {
</WithTopBarContainer>
);
}
export default People;

6
front/src/pages/people/__stories__/People.filterBy.stories.tsx
View File

@ -2,10 +2,12 @@ import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import People from '../People';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { People } from '../People';
import { Story } from './People.stories';
import { render } from './shared';
import { graphqlMocks } from '../../../testing/graphqlMocks';
const meta: Meta<typeof People> = {
title: 'Pages/People/FilterBy',

16
front/src/pages/people/__stories__/People.inputs.stories.tsx
View File

@ -1,16 +1,18 @@
import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { graphql } from 'msw';
import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { fetchOneFromData } from '~/testing/mock-data';
import { mockedPeopleData } from '~/testing/mock-data/people';
import { sleep } from '~/testing/sleep';
import { People } from '../People';
import People from '../People';
import { Story } from './People.stories';
import { render } from './shared';
import { mockedPeopleData } from '../../../testing/mock-data/people';
import { sleep } from '../../../testing/sleep';
import { graphqlMocks } from '../../../testing/graphqlMocks';
import { graphql } from 'msw';
import { fetchOneFromData } from '../../../testing/mock-data';
import { GraphqlQueryCompany } from '../../../interfaces/entities/company.interface';
const meta: Meta<typeof People> = {
title: 'Pages/People/Input',

6
front/src/pages/people/__stories__/People.sortBy.stories.tsx
View File

@ -2,10 +2,12 @@ import { expect } from '@storybook/jest';
import type { Meta } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import People from '../People';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { People } from '../People';
import { Story } from './People.stories';
import { render } from './shared';
import { graphqlMocks } from '../../../testing/graphqlMocks';
const meta: Meta<typeof People> = {
title: 'Pages/People/SortBy',

5
front/src/pages/people/__stories__/People.stories.tsx
View File

@ -1,9 +1,10 @@
import type { Meta, StoryObj } from '@storybook/react';
import People from '../People';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { People } from '../People';
import { render } from './shared';
import { graphqlMocks } from '../../../testing/graphqlMocks';
const meta: Meta<typeof People> = {
title: 'Pages/People',

13
front/src/pages/people/__stories__/shared.tsx
View File

@ -1,12 +1,13 @@
import { RecoilRoot } from 'recoil';
import { ThemeProvider } from '@emotion/react';
import { MemoryRouter } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { ThemeProvider } from '@emotion/react';
import { RecoilRoot } from 'recoil';
import { lightTheme } from '../../../layout/styles/themes';
import { FullHeightStorybookLayout } from '../../../testing/FullHeightStorybookLayout';
import { mockedClient } from '../../../testing/mockedClient';
import People from '../People';
import { lightTheme } from '@/ui/layout/styles/themes';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedClient } from '~/testing/mockedClient';
import { People } from '../People';
export function render() {
return (

24
front/src/pages/people/people-columns.tsx
View File

@ -1,14 +1,4 @@
import { useMemo } from 'react';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import { Person } from '../../interfaces/entities/person.interface';
import { updatePerson } from '../../services/api/people';
import ColumnHead from '../../components/table/ColumnHead';
import { SelectAllCheckbox } from '../../components/table/SelectAllCheckbox';
import EditablePhone from '../../components/editable-cell/EditablePhone';
import { EditablePeopleFullName } from '../../components/people/EditablePeopleFullName';
import EditableDate from '../../components/editable-cell/EditableDate';
import EditableText from '../../components/editable-cell/EditableText';
import {
TbBuilding,
TbCalendar,
@ -17,8 +7,18 @@ import {
TbPhone,
TbUser,
} from 'react-icons/tb';
import { PeopleCompanyCell } from '../../components/people/PeopleCompanyCell';
import { CheckboxCell } from '../../components/table/CheckboxCell';
import { CellContext, createColumnHelper } from '@tanstack/react-table';
import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
import { Person } from '@/people/interfaces/person.interface';
import { updatePerson } from '@/people/services';
import { EditableDate } from '@/ui/components/editable-cell/EditableDate';
import { EditablePhone } from '@/ui/components/editable-cell/EditablePhone';
import { EditableText } from '@/ui/components/editable-cell/EditableText';
import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
import { ColumnHead } from '@/ui/components/table/ColumnHead';
import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
const columnHelper = createColumnHelper<Person>();

17
front/src/pages/people/people-filters.tsx
View File

@ -1,10 +1,3 @@
import { Person } from '../../interfaces/entities/person.interface';
import { SEARCH_COMPANY_QUERY } from '../../services/api/search/search';
import {
Company,
mapToCompany,
} from '../../interfaces/entities/company.interface';
import { FilterConfigType } from '../../interfaces/filters/interface';
import {
TbBuilding,
TbCalendar,
@ -13,7 +6,15 @@ import {
TbPhone,
TbUser,
} from 'react-icons/tb';
import { QueryMode } from '../../generated/graphql';
import {
Company,
mapToCompany,
} from '@/companies/interfaces/company.interface';
import { FilterConfigType } from '@/filters-and-sorts/interfaces/filters/interface';
import { Person } from '@/people/interfaces/person.interface';
import { SEARCH_COMPANY_QUERY } from '@/search/services/search';
import { QueryMode } from '~/generated/graphql';
export const fullnameFilter = {
key: 'fullname',

11
front/src/pages/people/people-sorts.tsx
View File

@ -1,8 +1,3 @@
import {
SortOrder as Order_By,
PersonOrderByWithRelationInput as People_Order_By,
} from '../../generated/graphql';
import { SortType } from '../../interfaces/sorts/interface';
import {
TbBuilding,
TbCalendar,
@ -12,6 +7,12 @@ import {
TbUser,
} from 'react-icons/tb';
import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface';
import {
PersonOrderByWithRelationInput as People_Order_By,
SortOrder as Order_By,
} from '~/generated/graphql';
export const availableSorts = [
{
key: 'fullname',

9
front/src/pages/people/table/TableActionBarButtonDeletePeople.tsx
View File

@ -1,9 +1,10 @@
import { TbTrash } from 'react-icons/tb';
import { EntityTableActionBarButton } from '../../../components/table/action-bar/EntityTableActionBarButton';
import { useDeletePeopleMutation } from '../../../generated/graphql';
import { selectedRowIdsState } from '../../../modules/ui/tables/states/selectedRowIdsState';
import { useRecoilValue } from 'recoil';
import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection';
import { EntityTableActionBarButton } from '@/ui/components/table/action-bar/EntityTableActionBarButton';
import { useResetTableRowSelection } from '@/ui/tables/hooks/useResetTableRowSelection';
import { selectedRowIdsState } from '@/ui/tables/states/selectedRowIdsState';
import { useDeletePeopleMutation } from '~/generated/graphql';
export function TableActionBarButtonDeletePeople() {
const selectedRowIds = useRecoilValue(selectedRowIdsState);