mirror of
https://github.com/lingble/twenty.git
synced 2025-10-31 12:47:58 +00:00
a70a9281eb
* 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>
107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
|
|
|
export type FloatingButtonSize = 'small' | 'medium';
|
|
export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
|
|
|
|
export type FloatingButtonProps = {
|
|
className?: string;
|
|
Icon?: IconComponent;
|
|
title?: string;
|
|
size?: FloatingButtonSize;
|
|
position?: FloatingButtonPosition;
|
|
applyShadow?: boolean;
|
|
applyBlur?: boolean;
|
|
disabled?: boolean;
|
|
focus?: boolean;
|
|
};
|
|
|
|
const StyledButton = styled.button<
|
|
Pick<
|
|
FloatingButtonProps,
|
|
'size' | 'focus' | 'position' | 'applyBlur' | 'applyShadow'
|
|
>
|
|
>`
|
|
align-items: center;
|
|
backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
|
|
background: ${({ theme }) => theme.background.primary};
|
|
|
|
border: ${({ focus, theme }) =>
|
|
focus ? `1px solid ${theme.color.blue}` : 'none'};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
box-shadow: ${({ theme, applyShadow, focus }) =>
|
|
applyShadow
|
|
? `0px 2px 4px 0px ${
|
|
theme.background.transparent.light
|
|
}, 0px 0px 4px 0px ${theme.background.transparent.medium}${
|
|
focus ? `,0 0 0 3px ${theme.color.blue10}` : ''
|
|
}`
|
|
: focus
|
|
? `0 0 0 3px ${theme.color.blue10}`
|
|
: 'none'};
|
|
color: ${({ theme, disabled, focus }) => {
|
|
return !disabled
|
|
? focus
|
|
? theme.color.blue
|
|
: theme.font.color.secondary
|
|
: theme.font.color.extraLight;
|
|
}};
|
|
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
font-weight: ${({ theme }) => theme.font.weight.regular};
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
|
|
padding: ${({ theme }) => {
|
|
return `0 ${theme.spacing(2)}`;
|
|
}};
|
|
transition: background 0.1s ease;
|
|
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: ${({ theme, disabled }) =>
|
|
!disabled ? theme.background.transparent.lighter : 'transparent'};
|
|
}
|
|
|
|
&:active {
|
|
background: ${({ theme, disabled }) =>
|
|
!disabled ? theme.background.transparent.medium : 'transparent'};
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
`;
|
|
|
|
export const FloatingButton = ({
|
|
className,
|
|
Icon,
|
|
title,
|
|
size = 'small',
|
|
applyBlur = true,
|
|
applyShadow = true,
|
|
disabled = false,
|
|
focus = false,
|
|
}: FloatingButtonProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<StyledButton
|
|
disabled={disabled}
|
|
focus={focus && !disabled}
|
|
size={size}
|
|
applyBlur={applyBlur}
|
|
applyShadow={applyShadow}
|
|
className={className}
|
|
>
|
|
{Icon && <Icon size={theme.icon.size.sm} />}
|
|
{title}
|
|
</StyledButton>
|
|
);
|
|
};
|