Migrate to a monorepo structure (#2909)

2023-12-10 18:10:54 +01:00
parent a70a9281eb
commit 5bdca9de6c
2304 changed files with 37152 additions and 25869 deletions
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@ -0,0 +1,120 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconChevronDown } from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
+import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
+
+export type SelectProps<Value extends string | number | null> = {
+  className?: string;
+  disabled?: boolean;
+  dropdownScopeId: string;
+  label?: string;
+  onChange?: (value: Value) => void;
+  options: { value: Value; label: string; Icon?: IconComponent }[];
+  value?: Value;
+};
+
+const StyledControlContainer = styled.div<{ disabled?: boolean }>`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.tertiary : theme.font.color.primary};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme }) => theme.spacing(8)};
+  justify-content: space-between;
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  display: block;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
+const StyledControlLabel = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
+`;
+
+export const Select = <Value extends string | number | null>({
+  className,
+  disabled,
+  dropdownScopeId,
+  label,
+  onChange,
+  options,
+  value,
+}: SelectProps<Value>) => {
+  const theme = useTheme();
+  const selectedOption =
+    options.find(({ value: key }) => key === value) || options[0];
+
+  const { closeDropdown } = useDropdown({ dropdownScopeId });
+
+  const selectControl = (
+    <StyledControlContainer disabled={disabled}>
+      <StyledControlLabel>
+        {!!selectedOption?.Icon && (
+          <selectedOption.Icon
+            color={disabled ? theme.font.color.light : theme.font.color.primary}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        )}
+        {selectedOption?.label}
+      </StyledControlLabel>
+      <StyledIconChevronDown disabled={disabled} size={theme.icon.size.md} />
+    </StyledControlContainer>
+  );
+
+  return disabled ? (
+    selectControl
+  ) : (
+    <DropdownScope dropdownScopeId={dropdownScopeId}>
+      <div className={className}>
+        {!!label && <StyledLabel>{label}</StyledLabel>}
+        <Dropdown
+          dropdownMenuWidth={176}
+          dropdownPlacement="bottom-start"
+          clickableComponent={selectControl}
+          dropdownComponents={
+            <DropdownMenuItemsContainer>
+              {options.map((option) => (
+                <MenuItem
+                  key={option.value}
+                  LeftIcon={option.Icon}
+                  text={option.label}
+                  onClick={() => {
+                    onChange?.(option.value);
+                    closeDropdown();
+                  }}
+                />
+              ))}
+            </DropdownMenuItemsContainer>
+          }
+          dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
+        />
+      </div>
+    </DropdownScope>
+  );
+};