refactor: format and lint codebase (#971)

app/assets/javascripts/Components/Button/Button.tsx

@@ -0,0 +1,68 @@
+import { JSXInternal } from 'preact/src/jsx'
+import { ComponentChildren, FunctionComponent, Ref } from 'preact'
+import { forwardRef } from 'preact/compat'
+
+const baseClass = 'rounded px-4 py-1.75 font-bold text-sm fit-content'
+
+type ButtonVariant = 'normal' | 'primary'
+
+const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean) => {
+  const borders = variant === 'normal' ? 'border-solid border-main border-1' : 'no-border'
+  const cursor = disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+
+  let colors = variant === 'normal' ? 'bg-default color-text' : 'bg-info color-info-contrast'
+
+  let focusHoverStates =
+    variant === 'normal'
+      ? 'focus:bg-contrast focus:outline-none hover:bg-contrast'
+      : 'hover:brightness-130 focus:outline-none focus:brightness-130'
+
+  if (danger) {
+    colors = variant === 'normal' ? 'bg-default color-danger' : 'bg-danger color-info-contrast'
+  }
+
+  if (disabled) {
+    colors = variant === 'normal' ? 'bg-default color-grey-2' : 'bg-grey-2 color-info-contrast'
+    focusHoverStates =
+      variant === 'normal'
+        ? 'focus:bg-default focus:outline-none hover:bg-default'
+        : 'focus:brightness-default focus:outline-none hover:brightness-default'
+  }
+
+  return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`
+}
+
+type ButtonProps = JSXInternal.HTMLAttributes<HTMLButtonElement> & {
+  children?: ComponentChildren
+  className?: string
+  variant?: ButtonVariant
+  dangerStyle?: boolean
+  label?: string
+}
+
+export const Button: FunctionComponent<ButtonProps> = forwardRef(
+  (
+    {
+      variant = 'normal',
+      label,
+      className = '',
+      dangerStyle: danger = false,
+      disabled = false,
+      children,
+      ...props
+    }: ButtonProps,
+    ref: Ref<HTMLButtonElement>,
+  ) => {
+    return (
+      <button
+        type="button"
+        className={`${getClassName(variant, danger, disabled)} ${className}`}
+        disabled={disabled}
+        ref={ref}
+        {...props}
+      >
+        {label ?? children}
+      </button>
+    )
+  },
+)

app/assets/javascripts/Components/Button/IconButton.tsx

@@ -0,0 +1,56 @@
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
+import { IconType } from '@standardnotes/snjs'
+
+interface Props {
+  /**
+   * onClick - preventDefault is handled within the component
+   */
+  onClick: () => void
+
+  className?: string
+
+  icon: IconType
+
+  iconClassName?: string
+
+  /**
+   * Button tooltip
+   */
+  title: string
+
+  focusable: boolean
+
+  disabled?: boolean
+}
+
+/**
+ * IconButton component with an icon
+ * preventDefault is already handled within the component
+ */
+export const IconButton: FunctionComponent<Props> = ({
+  onClick,
+  className = '',
+  icon,
+  title,
+  focusable,
+  iconClassName = '',
+  disabled = false,
+}) => {
+  const click = (e: MouseEvent) => {
+    e.preventDefault()
+    onClick()
+  }
+  const focusableClass = focusable ? '' : 'focus:shadow-none'
+  return (
+    <button
+      type="button"
+      title={title}
+      className={`no-border cursor-pointer bg-transparent flex flex-row items-center hover:brightness-130 p-0 ${focusableClass} ${className}`}
+      onClick={click}
+      disabled={disabled}
+    >
+      <Icon type={icon} className={iconClassName} />
+    </button>
+  )
+}

app/assets/javascripts/Components/Button/RoundIconButton.tsx

@@ -0,0 +1,40 @@
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon'
+import { IconType } from '@standardnotes/snjs'
+
+type ButtonType = 'normal' | 'primary'
+
+interface Props {
+  /**
+   * onClick - preventDefault is handled within the component
+   */
+  onClick: () => void
+
+  type: ButtonType
+
+  className?: string
+
+  icon: IconType
+}
+
+/**
+ * IconButton component with an icon
+ * preventDefault is already handled within the component
+ */
+export const RoundIconButton: FunctionComponent<Props> = ({
+  onClick,
+  type,
+  className,
+  icon: iconType,
+}) => {
+  const click = (e: MouseEvent) => {
+    e.preventDefault()
+    onClick()
+  }
+  const classes = type === 'primary' ? 'info ' : ''
+  return (
+    <button className={`sn-icon-button ${classes} ${className ?? ''}`} onClick={click}>
+      <Icon type={iconType} />
+    </button>
+  )
+}