diff --git a/Makefile b/Makefile
index 9d40cf0287500d9625478489852bcead9df24cff..368965e9c1aa83a5ad924b2ef61ef08cdec62408 100644
--- a/Makefile
+++ b/Makefile
@@ -20,6 +20,14 @@ push:
@pnpm push
clean:
+ rm -rf node_modules
+ rm -rf apps/web/node_modules
+ rm -rf libs/shared/node_modules
+ rm -rf libs/storybook/node_modules
+ rm -rf libs/config/node_modules
+ pnpm i
+
+cleanrm:
rm -rf pnpm-lock.yaml
rm -rf node_modules
rm -rf apps/web/node_modules
diff --git a/libs/shared/lib/components/buttons/index.tsx b/libs/shared/lib/components/buttons/index.tsx
index 2cfdfea12023db49f2889b4a9e7386721f7abb9c..38ea1a0c366475746561e049a3551bb2241da9ac 100644
--- a/libs/shared/lib/components/buttons/index.tsx
+++ b/libs/shared/lib/components/buttons/index.tsx
@@ -4,6 +4,7 @@ import Icon, { Sizes } from '../icon';
import { forwardRef } from 'react';
type ButtonProps = {
+ as?: 'button' | 'a' | 'div';
type?: 'primary' | 'secondary' | 'danger';
variant?: 'solid' | 'outline' | 'ghost';
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
@@ -11,18 +12,19 @@ type ButtonProps = {
rounded?: boolean;
disabled?: boolean;
block?: boolean;
- onClick: (e: any) => void;
+ onClick?: (e: any) => void;
+ href?: string;
iconComponent?: React.ReactElement;
iconPosition?: 'leading' | 'trailing';
ariaLabel?: string;
children?: React.ReactNode;
- additionalClasses?: string;
- notAButton?: boolean;
+ className?: string;
};
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps & React.HTMLAttributes<HTMLButtonElement>>(
+export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement, ButtonProps>(
(
{
+ as = 'button',
type = 'secondary',
variant = 'solid',
label,
@@ -30,16 +32,16 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps & React.HT
rounded = false,
disabled = false,
onClick,
+ href,
block = false,
iconComponent,
iconPosition = 'leading',
ariaLabel,
- additionalClasses,
+ className,
children,
- notAButton,
...props
},
- forwardRef,
+ forwardedRef,
) => {
let typeClass = useMemo(() => {
switch (type) {
@@ -114,30 +116,25 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps & React.HT
[iconComponent, label, children],
);
- additionalClasses = (additionalClasses || '') + (props.className || '');
+ const ButtonComponent = as;
+
+ const isAnchor = as === 'a';
- if (notAButton)
- return (
- <div
- className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${additionalClasses}`}
- >
- {icon}
- </div>
- );
return (
- <button
+ <ButtonComponent
+ className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${className}`}
onClick={onClick}
disabled={disabled}
aria-label={ariaLabel}
- ref={forwardRef}
+ href={isAnchor ? href : undefined}
+ ref={forwardedRef as React.RefObject<any>}
{...props}
- className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${additionalClasses}`}
>
{iconPosition === 'leading' && icon}
{label && <span>{label}</span>}
{children && <span>{children}</span>}
{iconPosition === 'trailing' && icon}
- </button>
+ </ButtonComponent>
);
},
);
diff --git a/libs/shared/lib/components/tooltip/tooltip.stories.tsx b/libs/shared/lib/components/tooltip/tooltip.stories.tsx
index 955eb37c764949e70ca75cbd6fad1b992715e915..1335dde4ae0813ee421cc0c2eddd7cab327708c5 100644
--- a/libs/shared/lib/components/tooltip/tooltip.stories.tsx
+++ b/libs/shared/lib/components/tooltip/tooltip.stories.tsx
@@ -25,7 +25,7 @@ const TooltipStory = (args: any) => {
<div className="flex justify-center items-center py-16">
<Tooltip {...args}>
<TooltipTrigger>
- <button className={'mx-auto'}>Hover over me</button>
+ <div className={'mx-auto'}>Hover over me</div>
</TooltipTrigger>
<TooltipContent side={args.side}>
<p>This is a tooltip</p>
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
index 6fca5ec417fcdfef7a84e607c004c03f2b18b6e1..5c3b9a459401e449d5e554015481ab31c2796669 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -499,7 +499,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
variant="ghost"
size="xs"
iconComponent={<Settings />}
- additionalClasses="query-settings"
+ className="query-settings"
onClick={(event) => {
event.stopPropagation();
if (toggleSettings === 'settings') setToggleSettings(undefined);
diff --git a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
index fae11e3ea55d054ca5937199a4d8c63e308c0839..d96f52f5ed44003bad181c092d53a2ac1d174b7e 100644
--- a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
+++ b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
@@ -106,7 +106,7 @@ export const PillDropdown = (props: PillDropdownProps) => {
key={(attribute.handleData.attributeName || '') + i}
iconComponent={attribute?.handleData?.attributeDimension ? IconMap[attribute.handleData.attributeDimension] : undefined}
iconPosition="trailing"
- additionalClasses={`w-full ${attributesOfInterest[i] ? 'bg-secondary-100' : 'bg-white'} justify-between rounded-none text-[0.7em]`}
+ className={`w-full ${attributesOfInterest[i] ? 'bg-secondary-100' : 'bg-white'} justify-between rounded-none text-[0.7em]`}
variant="ghost"
size={'xs'}
label={attribute.handleData.attributeName}
diff --git a/libs/shared/lib/sidebar/index.tsx b/libs/shared/lib/sidebar/index.tsx
index aa1fb99bdbdbf71e9681f390579e69bfb90c5a34..8f92890cf5d537fc222169c66ffb2017c11678f1 100644
--- a/libs/shared/lib/sidebar/index.tsx
+++ b/libs/shared/lib/sidebar/index.tsx
@@ -35,7 +35,7 @@ export function Sidebar({ onTab, tab }: { onTab: (tab: SideNavTab) => void; tab:
onTab(t.name);
}
}}
- additionalClasses={tab === t.name ? 'bg-secondary-100' : ''}
+ className={tab === t.name ? 'bg-secondary-100' : ''}
/>
</TooltipTrigger>
<TooltipContent side={'right'}>{t.name}</TooltipContent>
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index 9cddc55943facfafafad1aa559aa1fd07769a763..269d25f5753df057a0edcc952180edf687bef741 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -39,7 +39,7 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
- <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
+ <Button as={'a'} type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
</TooltipTrigger>
<TooltipContent side={'top'}>
<p>Add visualization</p>
diff --git a/libs/shared/lib/vis/components/config/panel.tsx b/libs/shared/lib/vis/components/config/panel.tsx
index 22adadfbb9357e3f8615fe528d0c4136d571cad4..5aae132cdf385752a62621daa7bbad0a194ae762 100644
--- a/libs/shared/lib/vis/components/config/panel.tsx
+++ b/libs/shared/lib/vis/components/config/panel.tsx
@@ -52,7 +52,7 @@ export function ConfigPanel({ manager }: Props) {
'_blank',
)
}
- additionalClasses="block w-full"
+ className="block w-full"
/>
</div>
)}