4a4e65fe4a
# Introduction closes https://github.com/twentyhq/core-team-issues/issues/591 Same than for `twenty-shared` made in https://github.com/twentyhq/twenty/pull/11083. ## TODO - [x] Manual migrate twenty-website twenty-ui imports ## What's next: - Generate barrel and migration script factorization within own package + tests - Refactoring using preconstruct ? TimeBox - Lint circular dependencies - Lint import from barrel and forbid them ### Preconstruct We need custom rollup plugins addition, but preconstruct does not expose its rollup configuration. It might be possible to handle this using the babel overrides. But was a big tunnel. We could give it a try afterwards ! ( allowing cjs interop and stuff like that ) Stuck to vite lib app Closed related PRs: - https://github.com/twentyhq/twenty/pull/11294 - https://github.com/twentyhq/twenty/pull/11203
94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { differenceInSeconds, endOfDay, format } from 'date-fns';
|
|
|
|
import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
|
|
import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
|
|
import { TimelineCalendarEvent } from '~/generated/graphql';
|
|
import { CardContent } from 'twenty-ui/layout';
|
|
|
|
type CalendarDayCardContentProps = {
|
|
calendarEvents: TimelineCalendarEvent[];
|
|
divider?: boolean;
|
|
};
|
|
|
|
const StyledCardContent = styled(CardContent)`
|
|
align-items: flex-start;
|
|
border-color: ${({ theme }) => theme.border.color.light};
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: ${({ theme }) => theme.spacing(3)};
|
|
padding: ${({ theme }) => theme.spacing(2, 3)};
|
|
`;
|
|
|
|
const StyledDayContainer = styled.div`
|
|
text-align: center;
|
|
width: ${({ theme }) => theme.spacing(6)};
|
|
`;
|
|
|
|
const StyledWeekDay = styled.div`
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
font-size: ${({ theme }) => theme.font.size.xxs};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
`;
|
|
|
|
const StyledMonthDay = styled.div`
|
|
font-weight: ${({ theme }) => theme.font.weight.medium};
|
|
`;
|
|
|
|
const StyledEvents = styled.div`
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex: 1 0 auto;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(3)};
|
|
`;
|
|
|
|
const StyledEventRow = styled(CalendarEventRow)`
|
|
flex: 1 0 auto;
|
|
`;
|
|
|
|
export const CalendarDayCardContent = ({
|
|
calendarEvents,
|
|
divider,
|
|
}: CalendarDayCardContentProps) => {
|
|
const theme = useTheme();
|
|
|
|
const endOfDayDate = endOfDay(getCalendarEventStartDate(calendarEvents[0]));
|
|
const dayEndsIn = differenceInSeconds(endOfDayDate, Date.now());
|
|
|
|
const weekDayLabel = format(endOfDayDate, 'EE');
|
|
const monthDayLabel = format(endOfDayDate, 'dd');
|
|
|
|
const upcomingDayCardContentVariants = {
|
|
upcoming: {},
|
|
ended: { backgroundColor: theme.background.primary },
|
|
};
|
|
|
|
return (
|
|
<StyledCardContent
|
|
divider={divider}
|
|
initial="upcoming"
|
|
animate="ended"
|
|
variants={upcomingDayCardContentVariants}
|
|
transition={{
|
|
delay: Math.max(0, dayEndsIn),
|
|
duration: theme.animation.duration.fast,
|
|
}}
|
|
>
|
|
<StyledDayContainer>
|
|
<StyledWeekDay>{weekDayLabel}</StyledWeekDay>
|
|
<StyledMonthDay>{monthDayLabel}</StyledMonthDay>
|
|
</StyledDayContainer>
|
|
<StyledEvents>
|
|
{calendarEvents.map((calendarEvent) => (
|
|
<StyledEventRow
|
|
key={calendarEvent.id}
|
|
calendarEvent={calendarEvent}
|
|
/>
|
|
))}
|
|
</StyledEvents>
|
|
</StyledCardContent>
|
|
);
|
|
};
|