Merge pull request #270 from notifirehq/rld-95-add-onchange-event-for…

…-all-components

✨ Add onChange and onClick events to components

apps/web/src/design-system/button/Button.tsx

@@ -7,18 +7,19 @@ interface IButtonProps extends JSX.ElementChildrenAttribute {
   size?: 'md' | 'lg';
   variant?: 'outline' | 'filled';
   disabled?: boolean;
+  onClick?: () => void;
 }
 
 /**
  * Button component
  *
  */
-export function Button({ loading, children, size = 'md', disabled = false, ...props }: IButtonProps) {
+export function Button({ loading, children, size = 'md', disabled = false, onClick, ...props }: IButtonProps) {
   const { classes } = useStyles(disabled);
   const defaultDesign = { radius: 'md', classNames: classes } as SharedButtonProps;
 
   return (
-    <MantineButton {...defaultDesign} disabled={disabled} size={size} loading={loading} {...props}>
+    <MantineButton {...defaultDesign} onClick={onClick} disabled={disabled} size={size} loading={loading} {...props}>
       {children}
     </MantineButton>
   );

apps/web/src/design-system/checkbox/Checkbox.tsx

@@ -1,21 +1,30 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { Checkbox as MantineCheckbox } from '@mantine/core';
 import useStyles from './Checkbox.styles';
 
 interface CheckboxProps {
   checked?: boolean;
   disabled?: boolean;
   label?: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 /**
  * Checkbox Component
  *
  */
-export function Checkbox({ label = 'Default Checkbox', checked, disabled = false, ...props }: CheckboxProps) {
+export function Checkbox({ label = 'Default Checkbox', checked, onChange, disabled = false, ...props }: CheckboxProps) {
   const { classes } = useStyles();
 
   return (
-    <MantineCheckbox classNames={classes} label={label} disabled={disabled} size="sm" checked={checked} {...props} />
+    <MantineCheckbox
+      classNames={classes}
+      label={label}
+      onChange={onChange}
+      disabled={disabled}
+      size="sm"
+      checked={checked}
+      {...props}
+    />
   );
 }

apps/web/src/design-system/input/Input.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { TextInputProps, TextInput as MantineTextInput } from '@mantine/core';
 import { inputStyles } from '../config/inputs.styles';
 
@@ -8,14 +8,15 @@ interface IInputProps {
   placeholder?: string;
   value?: string;
   description?: string;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 /**
  * Input component
  *
  */
-export function Input({ value, ...props }: IInputProps) {
+export function Input({ value, onChange, ...props }: IInputProps) {
   const defaultDesign = { radius: 'md', size: 'md', styles: inputStyles } as TextInputProps;
 
-  return <MantineTextInput {...defaultDesign} defaultValue={value} {...props} />;
+  return <MantineTextInput {...defaultDesign} onChange={onChange} defaultValue={value} {...props} />;
 }

apps/web/src/design-system/select/Select.tsx

@@ -14,13 +14,45 @@ import { inputStyles } from '../config/inputs.styles';
 
 interface ISelectProps {
   data: (string | { value: string; label?: string })[];
+  onChange?: (value: string[] | string | null) => void;
   label?: React.ReactNode;
   placeholder?: string;
   description?: string;
   searchable?: boolean;
   type?: 'multiselect' | 'select';
 }
 
+/**
+ * Select component
+ *
+ */
+export function Select({ data, type = 'select', searchable = false, onChange, ...props }: ISelectProps) {
+  const { classes } = useStyles();
+  const searchableSelectProps = searchable ? { searchable, nothingFound: 'Nothing Found', allowDeselect: true } : {};
+  const defaultDesign = {
+    radius: 'md',
+    size: 'md',
+    rightSection: <ChevronIcon />,
+    rightSectionWidth: 60,
+    styles: inputStyles,
+    classNames: classes,
+  } as InputBaseProps;
+  const multiselect = type === 'multiselect';
+
+  return multiselect ? (
+    <MantineMultiSelect
+      onChange={onChange}
+      {...defaultDesign}
+      {...searchableSelectProps}
+      data={data}
+      valueComponent={Value}
+      {...props}
+    />
+  ) : (
+    <MantineSelect {...defaultDesign} {...searchableSelectProps} onChange={onChange} data={data} {...props} />
+  );
+}
+
 function Value({ label, onRemove }: MultiSelectValueProps) {
   const theme = useMantineTheme();
   const dark = theme.colorScheme === 'dark';
@@ -49,27 +81,3 @@ function Value({ label, onRemove }: MultiSelectValueProps) {
     </Box>
   );
 }
-
-/**
- * Select component
- *
- */
-export function Select({ data, type = 'select', searchable = false, ...props }: ISelectProps) {
-  const { classes } = useStyles();
-  const searchableSelectProps = searchable ? { searchable, nothingFound: 'Nothing Found', allowDeselect: true } : {};
-  const defaultDesign = {
-    radius: 'md',
-    size: 'md',
-    rightSection: <ChevronIcon />,
-    rightSectionWidth: 60,
-    styles: inputStyles,
-    classNames: classes,
-  } as InputBaseProps;
-  const multiselect = type === 'multiselect';
-
-  return multiselect ? (
-    <MantineMultiSelect {...defaultDesign} {...searchableSelectProps} data={data} valueComponent={Value} {...props} />
-  ) : (
-    <MantineSelect {...defaultDesign} {...searchableSelectProps} data={data} {...props} />
-  );
-}

apps/web/src/design-system/switch/Switch.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import { Switch as MantineSwitch, SwitchProps } from '@mantine/core';
 import useStyles from './Switch.styles';
 
 interface ISwitchProps {
   label?: React.ReactNode;
   checked?: boolean;
-  onChange?: () => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 /**
  * Switch component
  *
  */
-export function Switch({ ...props }: ISwitchProps) {
+export function Switch({ onChange, ...props }: ISwitchProps) {
   const { classes } = useStyles();
   const defaultDesign = { radius: 'xl', size: 'md', classNames: classes } as SwitchProps;
 
-  return <MantineSwitch {...defaultDesign} {...props} />;
+  return <MantineSwitch onChange={onChange} {...defaultDesign} {...props} />;
 }