scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-11-02 21:57:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move frontend to Vite 5 (#2775)

Browse Source 
* merge squashed

- A couple of CJS modules into ESM (config mostly)
- Vite complains about node.js modules: fixed `useIsMatchingLocation.ts`
	> or use rollupOptions in vite.config.ts
	> ref: f0e4f59d97/vite.config.js (L6)
- Adjust Storybook to work with Vite: use @storybook/test
- Use SWC for jest tranformations
- Remove unused deps:
	- ts-jest: replaced with @swc/jest, typecheck by `tsc`
	- babel plugins
	- @svgr/plugin-jsx: not used
	- @testing-library/user-event: handled by @storybook/test
	- @typescript-eslint/utils: was not plugged in
	- tsup, esbuild-plugin-svgr: will look into that later
- Install Vite required deps, and remove craco/webpack deps
- Adjust SVG to work with Vite as components
- Fixed `Step.tsx`: I dont know if one should be swaped for the other,
  but there should be no slash
- Initial formating and linting:
	- removed empty object params
	- sorting imports, etc..

* prettier: fix pattern

* coverage: sb coverage report isnt working

* Add missing pieces

* `yarn lint --fix`

* fix: scripts permissions

* tsc: cut errors in half

* fix: remove `react-app-env.d.ts`

* tsc: all fixed, except `react-data-grid` types issue

* eslint: ignore env-config.js

* eslint: Align ci with config

* msw: bypass testing warnings

ref: https://stackoverflow.com/questions/68024935/msw-logging-warnings-for-unhandled-supertest-requests

* rebase: and fix things

* Adjust to current `graphql-codegen` no ESM support

* Remove vite plugin and use built-in methods

* rebase: and some fixes

* quick fix + `corepack use yarn@1.22.19`

* Fix build errors

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Aasim Attia
2023-12-10 17:22:43 +02:00
committed by GitHub
parent f24541beda
commit a70a9281eb
132 changed files with 4428 additions and 8978 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
front/src/modules/command-menu/components/CommandMenu.tsx
View File

@@ -176,124 +176,128 @@ export const CommandMenu = () => {
.concat(activities.map((activity) => activity.id));
return (
isCommandMenuOpened && (
<StyledDialog>
<StyledInput
value={search}
placeholder="Search"
onChange={handleSearchChange}
/>
<StyledList>
<ScrollWrapper>
<StyledInnerList>
<SelectableList
selectableListId="command-menu-list"
selectableItemIds={[selectableItemIds]}
hotkeyScope={AppHotkeyScope.CommandMenu}
onEnter={(_itemId) => {}}
>
{!matchingCreateCommand.length &&
!matchingNavigateCommand.length &&
!people.length &&
!companies.length &&
!activities.length && (
<StyledEmpty>No results found</StyledEmpty>
)}
<CommandGroup heading="Create">
{matchingCreateCommand.map((cmd) => (
<SelectableItem itemId={cmd.id} key={cmd.id}>
<CommandMenuItem
id={cmd.id}
to={cmd.to}
key={cmd.id}
Icon={cmd.Icon}
label={cmd.label}
onClick={cmd.onCommandClick}
firstHotKey={cmd.firstHotKey}
secondHotKey={cmd.secondHotKey}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="Navigate">
{matchingNavigateCommand.map((cmd) => (
<SelectableItem itemId={cmd.id} key={cmd.id}>
<CommandMenuItem
id={cmd.id}
to={cmd.to}
key={cmd.id}
label={cmd.label}
Icon={cmd.Icon}
onClick={cmd.onCommandClick}
firstHotKey={cmd.firstHotKey}
secondHotKey={cmd.secondHotKey}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="People">
{people.map((person) => (
<SelectableItem itemId={person.id} key={person.id}>
<CommandMenuItem
id={person.id}
key={person.id}
to={`object/person/${person.id}`}
label={
person.name.firstName + ' ' + person.name.lastName
}
Icon={() => (
<Avatar
type="rounded"
avatarUrl={null}
colorId={person.id}
placeholder={
person.name.firstName + ' ' + person.name.lastName
}
/>
)}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="Companies">
{companies.map((company) => (
<SelectableItem itemId={company.id} key={company.id}>
<CommandMenuItem
id={company.id}
key={company.id}
label={company.name}
to={`object/company/${company.id}`}
Icon={() => (
<Avatar
colorId={company.id}
placeholder={company.name}
avatarUrl={getLogoUrlFromDomainName(
company.domainName,
)}
/>
)}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="Notes">
{activities.map((activity) => (
<SelectableItem itemId={activity.id} key={activity.id}>
<CommandMenuItem
id={activity.id}
Icon={IconNotes}
key={activity.id}
label={activity.title ?? ''}
onClick={() => openActivityRightDrawer(activity.id)}
/>
</SelectableItem>
))}
</CommandGroup>
</SelectableList>
</StyledInnerList>
</ScrollWrapper>
</StyledList>
</StyledDialog>
)
<>
{isCommandMenuOpened && (
<StyledDialog>
<StyledInput
value={search}
placeholder="Search"
onChange={handleSearchChange}
/>
<StyledList>
<ScrollWrapper>
<StyledInnerList>
<SelectableList
selectableListId="command-menu-list"
selectableItemIds={[selectableItemIds]}
hotkeyScope={AppHotkeyScope.CommandMenu}
onEnter={(_itemId) => {}}
>
{!matchingCreateCommand.length &&
!matchingNavigateCommand.length &&
!people.length &&
!companies.length &&
!activities.length && (
<StyledEmpty>No results found</StyledEmpty>
)}
<CommandGroup heading="Create">
{matchingCreateCommand.map((cmd) => (
<SelectableItem itemId={cmd.id} key={cmd.id}>
<CommandMenuItem
id={cmd.id}
to={cmd.to}
key={cmd.id}
Icon={cmd.Icon}
label={cmd.label}
onClick={cmd.onCommandClick}
firstHotKey={cmd.firstHotKey}
secondHotKey={cmd.secondHotKey}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="Navigate">
{matchingNavigateCommand.map((cmd) => (
<SelectableItem itemId={cmd.id} key={cmd.id}>
<CommandMenuItem
id={cmd.id}
to={cmd.to}
key={cmd.id}
label={cmd.label}
Icon={cmd.Icon}
onClick={cmd.onCommandClick}
firstHotKey={cmd.firstHotKey}
secondHotKey={cmd.secondHotKey}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="People">
{people.map((person) => (
<SelectableItem itemId={person.id} key={person.id}>
<CommandMenuItem
id={person.id}
key={person.id}
to={`object/person/${person.id}`}
label={
person.name.firstName + ' ' + person.name.lastName
}
Icon={() => (
<Avatar
type="rounded"
avatarUrl={null}
colorId={person.id}
placeholder={
person.name.firstName +
' ' +
person.name.lastName
}
/>
)}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="Companies">
{companies.map((company) => (
<SelectableItem itemId={company.id} key={company.id}>
<CommandMenuItem
id={company.id}
key={company.id}
label={company.name}
to={`object/company/${company.id}`}
Icon={() => (
<Avatar
colorId={company.id}
placeholder={company.name}
avatarUrl={getLogoUrlFromDomainName(
company.domainName,
)}
/>
)}
/>
</SelectableItem>
))}
</CommandGroup>
<CommandGroup heading="Notes">
{activities.map((activity) => (
<SelectableItem itemId={activity.id} key={activity.id}>
<CommandMenuItem
id={activity.id}
Icon={IconNotes}
key={activity.id}
label={activity.title ?? ''}
onClick={() => openActivityRightDrawer(activity.id)}
/>
</SelectableItem>
))}
</CommandGroup>
</SelectableList>
</StyledInnerList>
</ScrollWrapper>
</StyledList>
</StyledDialog>
)}
</>
);
};