ronantakizawa/codereview-bench huggingface dataset:
Repository: louislam/uptime-kuma
File: src/components/MonitorListFilter.vue (Vue)

Code before:

    &.running,
    &.paused {
        background-color: white !important;
        border: 1px solid #d1d5db;
        color: inherit;

        .dark & {
            background-color: transparent !important;
            border-color: #6b7280;
            color: $dark-font-color;
        }

        .icon-small {
            font-size: 0.75em;
            margin-right: 4px;
        }
    }
}

.btn-collapse-all {
    transition: none !important;
}

.tags-dropdown-scroll {
    max-height: min(50vh, 320px);
}
</style>


Review comment (bug):
```suggestion
    max-height: min(50vh, 320px);
    overflow-y: auto;
```

Code after:

    &.running,
    &.paused {
        background-color: white !important;
        border: 1px solid #d1d5db;
        color: inherit;

        .dark & {
            background-color: transparent !important;
            border-color: #6b7280;
            color: $dark-font-color;
        }

        .icon-small {
            font-size: 0.75em;
            margin-right: 4px;
        }
    }
}

.btn-collapse-all {
    transition: none !important;
}

.tags-dropdown-scroll {
    max-height: min(50vh, 320px);
    overflow-y: auto;
}
</style>
Repository: louislam/uptime-kuma
File: server/notification-providers/teltonika.js (JavaScript)

Code before:
        try {
            cleanPhoneNumber = notification.teltonikaPhoneNumber.replace(/[^\x2A-\x39]/g, "").substring(0, 30);

            if (cleanPhoneNumber.length >= 30) {
                throw Error("Phone number is too long.");
            } else if (cleanPhoneNumber.length < 1) {
                throw Error("Phone number is empty.");
            }
        } catch (error) {
            throw Error("Invalid input data for phone number.");
        }

        // Many people who use a Teltonika router will not setup a proper
        // TLS certificate. I know that we all should and I hate that I'm
        // adding the option to disable cert validation, but here we are.
        // https://sslinsights.com/how-to-fix-axios-self-signed-certificate-errors/

        let unsafeAgent = "";
        if (notification.teltonikaUnsafeTls === true) {
            unsafeAgent = new https.Agent({
                rejectUnauthorized: false, // Danger! Disables SSL verification
            });
        } else {
            unsafeAgent = undefined;
        }

        try {
            // Logging in, to get an access token.
            // API reference https://developers.teltonika-networks.com/reference/rut241/7.19.4/v1.11.1/authentication
            // Teltonika's API access tokens expire in 5 minutes.
            // Their documentation suggests performing a new login for every SMS.

            // The login API returns two things:
            // Set-Cookie: token=<32 chars hexadecimal>
            // JSON data object in body, with the username, expiry (299sec) and group.
            // We rely on the cookie, which should be passed by Axios' withCredentials=True.

            let loginData = {
                username: cleanUser,
                password: cleanPass,
            };

            let loginConfig = {
                headers: {
                    "Content-Type": "application/json",
                    "cache-control": "no-cache",
                    Accept: "application/json",
                },
            };

            if (notification.teltonikaUnsafeTls === true) {

Review comment (suggestion):
Please define things closer to where you actually need them.

for example, below there is another `if (notification.teltonikaUnsafeTls)` making this code fairly hard to read

Code after:

            // Sending the SMS.
            let smsData = {
                data: {
                    modem: notification.teltonikaModem,
                    number: notification.teltonikaPhoneNumber,
                    message: cleanMsg,
                },
            };

            axiosConfig.headers.Authorization = "Bearer " + loginResp.data.data.token;

            let smsResp = await axios.post(smsUrl, smsData, axiosConfig);

            if (smsResp.data.success !== true) {
                throw Error("Api returned: ", smsResp.data.errors.error);
            }

            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = Teltonika;
Repository: louislam/uptime-kuma
File: src/components/notifications/Teltonika.vue (Vue)

Code before:
<template>
    <div class="mb-3">
        <label for="teltonika-url" class="form-label">{{ $t("teltonikaUrl") }}</label>
        <input
            id="teltonika-url"
            v-model="$parent.notification.teltonikaUrl"
            type="text"
            minlength="10"
            placeholder="192.168.100.1"
            class="form-control"
            required
        />
        <div class="form-text">
            <i18n-t keypath="teltonikaUrlHelptext" tag="div" class="form-text">
                <code>192.168.100.1</code>
                <code>teltonika.domain.com</code>
            </i18n-t>
        </div>
    </div>
    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.teltonikaUnsafeTls" class="form-check-input" type="checkbox" />
            <label class="form-check-label">{{ $t("teltonikaUnsafeTls") }}</label>
        </div>

        <div class="form-text">
            {{ $t("teltonikaUnsafeTlsDescription") }}
        </div>
    </div>
    <div class="mb-3">
        <label for="teltonika-username" class="form-label">{{ $t("teltonikaUsername") }}</label>
        <input

Review comment (suggestion):
I don't know what kind of URL is expected.
Would this work?

```suggestion
            type="url"
```

Code after:
<template>
    <div class="mb-3">
        <i18n-t keypath="teltonikaVersionWarning" tag="div" class="form-text"></i18n-t>
    </div>
    <div class="mb-3">
        <label for="teltonika-url" class="form-label">{{ $t("teltonikaUrl") }}</label>
        <input
            id="teltonika-url"
            v-model="$parent.notification.teltonikaUrl"
            type="url"
            minlength="10"
            placeholder="192.168.100.1"
            class="form-control"
            required
        />
        <i18n-t keypath="teltonikaUrlHelptext" tag="div" class="form-text">
            <code>https://192.168.100.1</code>
            <code>http://teltonika.domain.com:8080</code>
        </i18n-t>
    </div>
    <div class="mb-3">
        <div class="form-check form-switch">
            <input v-model="$parent.notification.teltonikaUnsafeTls" class="form-check-input" type="checkbox" />
            <label class="form-check-label">{{ $t("teltonikaUnsafeTls") }}</label>
        </div>
        <i18n-t keypath="teltonikaUnsafeTlsDescription" tag="div" class="form-text"></i18n-t>
    </div>
    <div class="mb-3">
        <label for="teltonika-username" class="form-label">{{ $t("teltonikaUsername") }}</label>
        <input
            id="teltonika-username"
            v-model="$parent.notification.teltonikaUsername"
Repository: louislam/uptime-kuma
File: server/notification-providers/signal.js (JavaScript)

Code before:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");

class Signal extends NotificationProvider {
    name = "signal";

    /**
     * @inheritdoc
     */
    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
        const okMsg = "Sent Successfully.";

        try {
            let message = msg;

            // Use template if enabled
            if (notification.signalUseTemplate) {
                message = await this.renderTemplate(notification.signalTemplate, msg, monitorJSON, heartbeatJSON);
            }

            let data = {
                message: message,
                number: notification.signalNumber,
                recipients: notification.signalRecipients.replace(/\s/g, "").split(","),
            };
            let config = {};
            config = this.getAxiosConfigWithProxy(config);
            await axios.post(notification.signalURL, data, config);
            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = Signal;


Review comment (suggestion):
nit: that is what the next line says

```suggestion
```

Code after:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");

class Signal extends NotificationProvider {
    name = "signal";

    /**
     * @inheritdoc
     */
    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
        const okMsg = "Sent Successfully.";

        try {
            let message = msg;

            if (notification.signalUseTemplate) {
                message = await this.renderTemplate(notification.signalTemplate, msg, monitorJSON, heartbeatJSON);
            }

            let data = {
                message,
                number: notification.signalNumber,
                recipients: notification.signalRecipients.replace(/\s/g, "").split(","),
            };
            let config = {};
            config = this.getAxiosConfigWithProxy(config);
            await axios.post(notification.signalURL, data, config);
            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = Signal;
Repository: louislam/uptime-kuma
File: server/notification-providers/signal.js (JavaScript)

Code before:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");

class Signal extends NotificationProvider {
    name = "signal";

    /**
     * @inheritdoc
     */
    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
        const okMsg = "Sent Successfully.";

        try {
            let message = msg;

            // Use template if enabled
            if (notification.signalUseTemplate) {
                message = await this.renderTemplate(notification.signalTemplate, msg, monitorJSON, heartbeatJSON);
            }

            let data = {
                message: message,
                number: notification.signalNumber,
                recipients: notification.signalRecipients.replace(/\s/g, "").split(","),
            };
            let config = {};
            config = this.getAxiosConfigWithProxy(config);
            await axios.post(notification.signalURL, data, config);
            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = Signal;


Review comment (suggestion):
nit: linter likely will complain otherwise

```suggestion
                message,
```

Code after:
const NotificationProvider = require("./notification-provider");
const axios = require("axios");

class Signal extends NotificationProvider {
    name = "signal";

    /**
     * @inheritdoc
     */
    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
        const okMsg = "Sent Successfully.";

        try {
            let message = msg;

            if (notification.signalUseTemplate) {
                message = await this.renderTemplate(notification.signalTemplate, msg, monitorJSON, heartbeatJSON);
            }

            let data = {
                message,
                number: notification.signalNumber,
                recipients: notification.signalRecipients.replace(/\s/g, "").split(","),
            };
            let config = {};
            config = this.getAxiosConfigWithProxy(config);
            await axios.post(notification.signalURL, data, config);
            return okMsg;
        } catch (error) {
            this.throwGeneralAxiosError(error);
        }
    }
}

module.exports = Signal;
Repository: lucide-icons/lucide
File: docs/.vitepress/lib/SvgPreview/Diff.tsx (TypeScript)

Code before:
import React from 'react';
import Backdrop from './Backdrop.tsx';
import { darkModeCss, Grid } from './index.tsx';

const SvgPreview = React.forwardRef<
  SVGSVGElement,
  {
    oldSrc: string;
    newSrc: string;
  } & React.SVGProps<SVGSVGElement>
>(({ oldSrc, newSrc, children, ...props }, ref) => {
  return (
    <svg
      ref={ref}
      xmlns="http://www.w3.org/2000/svg"
      width={240}
      height={240}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <style>{darkModeCss}</style>
      <Grid
        strokeWidth={0.1}
        stroke="#777"
        strokeOpacity={0.3}
        radius={1}
      />
      <mask
        id="gray"
        maskUnits="userSpaceOnUse"
      >
        <rect
          x="0"
          y="0"
          width="24"
          height="24"
          fill="#000"

Review comment (suggestion):
```suggestion
      width={24}
      height={24}
```

Code after:
import React from 'react';
import Backdrop from './Backdrop.tsx';
import { darkModeCss, Grid } from './index.tsx';

const SvgPreview = React.forwardRef<
  SVGSVGElement,
  {
    oldSrc: string;
    newSrc: string;
  } & React.SVGProps<SVGSVGElement>
>(({ oldSrc, newSrc, children, ...props }, ref) => {
  return (
    <svg
      ref={ref}
      xmlns="http://www.w3.org/2000/svg"
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <style>{darkModeCss}</style>
      <Grid
        strokeWidth={0.1}
        stroke="#777"
        strokeOpacity={0.3}
        radius={1}
      />
      <mask
        id="gray"
        maskUnits="userSpaceOnUse"
      >
        <rect
          x="0"
          y="0"
          width="24"
          height="24"
          fill="#000"
Repository: lucide-icons/lucide
File: packages/shared/src/utils.ts (TypeScript)

Code before:

/**
 * Converts string to pascal case
 *
 * @param {string} string
 * @returns {string} A pascalized string
 */
export const toPascalCase = <T extends string>(string: T): CamelToPascal<T> => {
  const camelCase = toCamelCase(string);

  return (camelCase.charAt(0).toUpperCase() + camelCase.slice(1)) as CamelToPascal<T>;
};

/**
 * Merges classes into a single string
 *
 * @param {array} classes
 * @returns {string} A string of classes
 */
export const mergeClasses = <ClassType = string | undefined | null>(...classes: ClassType[]) =>
  classes
    .filter((className, index, array) => {
      return Boolean(className) && array.indexOf(className) === index;
    })
    .join(' ')
    .trim();


Review comment (performance):
What about doing `return Boolean(className.trim()) && array.indexOf(className) === index;` instead?

That way you don't get something weird if you do `mergeClasses('lucide', ' ', 'lucide-circle')`.

Not sure about the performance impact tho.

Code after:

/**
 * Converts string to pascal case
 *
 * @param {string} string
 * @returns {string} A pascalized string
 */
export const toPascalCase = <T extends string>(string: T): CamelToPascal<T> => {
  const camelCase = toCamelCase(string);

  return (camelCase.charAt(0).toUpperCase() + camelCase.slice(1)) as CamelToPascal<T>;
};

/**
 * Merges classes into a single string
 *
 * @param {array} classes
 * @returns {string} A string of classes
 */
export const mergeClasses = <ClassType = string | undefined | null>(...classes: ClassType[]) =>
  classes
    .filter((className, index, array) => {
      return (
        Boolean(className) &&
        (className as string).trim() !== '' &&
        array.indexOf(className) === index
      );
    })
    .join(' ')
    .trim();
Repository: lucide-icons/lucide
File: packages/shared/src/utils.ts (TypeScript)

Code before:
  string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) =>
    p2 ? p2.toUpperCase() : p1.toLowerCase(),
  );

/**
 * Converts string to pascal case
 *
 * @param {string} string
 * @returns {string} A pascalized string
 */
export const toPascalCase = <T extends string>(string: T): CamelToPascal<T> => {
  const camelCase = toCamelCase(string);

  return (camelCase.charAt(0).toUpperCase() + camelCase.slice(1)) as CamelToPascal<T>;
};

/**
 * Merges classes into a single string
 *
 * @param {array} classes
 * @returns {string} A string of classes
 */
export const mergeClasses = <ClassType = string | undefined | null>(...classes: ClassType[]) =>
  classes
    .filter((className, index, array) => {
      return Boolean(className) && (className as string).trim() !== '' && array.indexOf(className) === index;
    })
    .join(' ')
    .trim();


Review comment (suggestion):
```suggestion
      return (
        Boolean(className) &&
        (className as string).trim() !== '' &&
        array.indexOf(className) === index
      );
```

to pass prettier check

Code after:
  string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) =>
    p2 ? p2.toUpperCase() : p1.toLowerCase(),
  );

/**
 * Converts string to pascal case
 *
 * @param {string} string
 * @returns {string} A pascalized string
 */
export const toPascalCase = <T extends string>(string: T): CamelToPascal<T> => {
  const camelCase = toCamelCase(string);

  return (camelCase.charAt(0).toUpperCase() + camelCase.slice(1)) as CamelToPascal<T>;
};

/**
 * Merges classes into a single string
 *
 * @param {array} classes
 * @returns {string} A string of classes
 */
export const mergeClasses = <ClassType = string | undefined | null>(...classes: ClassType[]) =>
  classes
    .filter((className, index, array) => {
      return (
        Boolean(className) &&
        (className as string).trim() !== '' &&
        array.indexOf(className) === index
      );
    })
    .join(' ')
    .trim();
Repository: lucide-icons/lucide
File: tools/build-icons/utils/deprecationReasonTemplate.mjs (JavaScript)

Code before:
export function deprecationReasonTemplate(
  deprecationReason,
  { componentName, iconName, toBeRemovedInVersion },
) {
  const removalNotice = toBeRemovedInVersion
    ? ` This ${deprecationReason.startsWith('icon') ? 'icon' : 'alias'} will be removed in ${toBeRemovedInVersion}`
    : '';

  switch (deprecationReason) {
    case 'alias.typo':
      return `Renamed because of typo, use {@link ${componentName}} instead.${removalNotice}`;
    case 'alias.duplicate':
      return `The icon was combined with another icon that shared the same usecase, use {@link ${componentName}} instead.${removalNotice}`;
    case 'alias.naming':
      return `The name of this icon was changed because it didn't meet our guidelines anymore, use {@link ${componentName}} instead.${removalNotice}`;
    case 'icon.brand':
      return `Brand icons have been deprecated and are due to be removed, please refer to https://github.com/lucide-icons/lucide/issues/670. We recommend using https://simpleicons.org/?q=${iconName} instead.${removalNotice}`;
  }
}


Review comment (suggestion):
```suggestion
      return `The icon was combined with another icon that shares the same use case, use {@link ${componentName}} instead.${removalNotice}`;
```

Code after:
export default function deprecationReasonTemplate(
  deprecationReason,
  { componentName, iconName, toBeRemovedInVersion },
) {
  const removalNotice = toBeRemovedInVersion
    ? ` This ${
        deprecationReason.startsWith('icon') ? 'icon' : 'alias'
      } will be removed in ${toBeRemovedInVersion}`
    : '';

  switch (deprecationReason) {
    case 'alias.typo':
      return `Renamed because of typo, use {@link ${componentName}} instead.${removalNotice}`;
    case 'alias.duplicate':
      return `The icon was combined with another icon that shares the same use case, use {@link ${componentName}} instead.${removalNotice}`;
    case 'alias.naming':
      return `The name of this icon was changed because it didn't meet our guidelines anymore, use {@link ${componentName}} instead.${removalNotice}`;
    case 'icon.brand':
      return `Brand icons have been deprecated and are due to be removed, please refer to https://github.com/lucide-icons/lucide/issues/670. We recommend using https://simpleicons.org/?q=${iconName} instead.${removalNotice}`;
    default:
      return '';
  }
}
Repository: lucide-icons/lucide
File: packages/lucide-react-native/src/types.ts (TypeScript)

Code before:
import type { ForwardRefExoticComponent, SVGElementType } from 'react';
import type { SvgProps } from 'react-native-svg';

export type IconNode = [elementName: SVGElementType, attrs: Record<string, string>][];

export interface LucideProps extends SvgProps {
  size?: string | number;
  absoluteStrokeWidth?: boolean;
  'data-testid'?: string;
}

export type LucideIcon = ForwardRefExoticComponent<LucideProps>;


Review comment (suggestion):
```suggestion
type ElementName =
  'circle'
  | 'ellipse'
  | 'g'
  | 'line'
  | 'path'
  | 'polygon'
  | 'polyline'
  | 'rect';

export type IconNode = [elementName: ElementName, attrs: Record<string, string>][];
```

Code after:
import type { ForwardRefExoticComponent } from 'react';
import type { SvgProps } from 'react-native-svg';

/**
 * A reduced version of `SVGElementType` from @types/react. This type was added
 * with the release of React 19, and is included here in order to support usage
 * with older versions.
 */
type SVGElementType =
  | 'circle'
  | 'ellipse'
  | 'g'
  | 'line'
  | 'path'
  | 'polygon'
  | 'polyline'
  | 'rect';

export type IconNode = [elementName: SVGElementType, attrs: Record<string, string>][];

export interface LucideProps extends SvgProps {
  size?: string | number;
  absoluteStrokeWidth?: boolean;
  'data-testid'?: string;
}

export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
Repository: lucide-icons/lucide
File: packages/lucide-react-native/src/types.ts (TypeScript)

Code before:
import type { ForwardRefExoticComponent, SVGElementType } from 'react';
import type { SvgProps } from 'react-native-svg';

export type IconNode = [elementName: SVGElementType, attrs: Record<string, string>][];

export interface LucideProps extends SvgProps {
  size?: string | number;
  absoluteStrokeWidth?: boolean;
  'data-testid'?: string;
}

export type LucideIcon = ForwardRefExoticComponent<LucideProps>;


Review comment (suggestion):
```suggestion
import type { ForwardRefExoticComponent } from 'react';
```

Code after:
import type { ForwardRefExoticComponent } from 'react';
import type { SvgProps } from 'react-native-svg';

/**
 * A reduced version of `SVGElementType` from @types/react. This type was added
 * with the release of React 19, and is included here in order to support usage
 * with older versions.
 */
type SVGElementType =
  | 'circle'
  | 'ellipse'
  | 'g'
  | 'line'
  | 'path'
  | 'polygon'
  | 'polyline'
  | 'rect';

export type IconNode = [elementName: SVGElementType, attrs: Record<string, string>][];

export interface LucideProps extends SvgProps {
  size?: string | number;
  absoluteStrokeWidth?: boolean;
  'data-testid'?: string;
}