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>
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { MouseEvent } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
|
|
|
import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';
|
|
|
|
const StyledIconButtonGroupContainer = styled.div`
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
display: flex;
|
|
`;
|
|
|
|
export type IconButtonGroupProps = Pick<
|
|
IconButtonProps,
|
|
'accent' | 'size' | 'variant'
|
|
> & {
|
|
iconButtons: {
|
|
Icon: IconComponent;
|
|
onClick?: (event: MouseEvent<any>) => void;
|
|
}[];
|
|
className?: string;
|
|
};
|
|
|
|
export const IconButtonGroup = ({
|
|
accent,
|
|
iconButtons,
|
|
size,
|
|
variant,
|
|
className,
|
|
}: IconButtonGroupProps) => (
|
|
<StyledIconButtonGroupContainer className={className}>
|
|
{iconButtons.map(({ Icon, onClick }, index) => {
|
|
const position: IconButtonPosition =
|
|
index === 0
|
|
? 'left'
|
|
: index === iconButtons.length - 1
|
|
? 'right'
|
|
: 'middle';
|
|
|
|
return (
|
|
<IconButton
|
|
accent={accent}
|
|
Icon={Icon}
|
|
onClick={onClick}
|
|
position={position}
|
|
size={size}
|
|
variant={variant}
|
|
/>
|
|
);
|
|
})}
|
|
</StyledIconButtonGroupContainer>
|
|
);
|