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

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);