<commit_before>import React from 'react';

import { useEffect, useState } from 'react';
import { Button } from 'react-bootstrap';
import { isStringAndNotEmpty } from '@isrd-isi-edu/chaise/src/utils/type-utils';

type ExampleComponentProps = {
  app: string;
  description?: string;
}

const ExampleComponent = ({
  // - Destructure values from `props` object
  app,
  description,
} : ExampleComponentProps) : JSX.Element => {
  // - Declare state values
  const [showDescription, setShowDescription] = useState(false);

  // - useEffect or other hooks
  useEffect(() => {
    // document.title = app;
  });

  // - any callbacks
  const onClick = () => {
    setShowDescription(true);
  };

  // - Render any dependent items into temporary variables,
  //    such as conditional components or lists
  const conditionalDescription = (isStringAndNotEmpty(description))
    ? (<Button onClick={onClick}>Show Description</Button>) : null;<commit_msg>add comments to the example component<commit_after>import React from 'react';

import { useEffect, useState } from 'react';
import { Button } from 'react-bootstrap';
import { isStringAndNotEmpty } from '@isrd-isi-edu/chaise/src/utils/type-utils';
import $log from '@isrd-isi-edu/chaise/src/services/logger';

type ExampleComponentProps = {
  /**
   * The app name
   */
  app: string;
  /**
   * description of the app.
   * Note:
   *   - Add any important things that you need to remind developers about this prop
   */
  description?: string;
}

/**
 * The example component that shows the code style of components
 * and how we should structure the code and document it.
 */
const ExampleComponent = ({
  // - Destructure values from `props` object
  app,
  description,
} : ExampleComponentProps) : JSX.Element => {
  // - Declare state values
  const [showDescription, setShowDescription] = useState(false);

  // - useEffect or other hooks

  // explain why the hook is used
  useEffect(() => {
    // document.title = app;
  });

  // - any callbacks

  /**
   * when the button is clicked, show the description.
   */
  const onClick = () => {
    setShowDescription(true);
  };

  /**
   * explain the function here
   * @param change {string} explain the input here
   */
  const onSomeChange = (change: string) => {
    $log.debug(`new change: ${change}`);
    return;
  }

  // - Render any dependent items into temporary variables,
  //    such as conditional components or lists
  const conditionalDescription = (isStringAndNotEmpty(description))
    ? (<Button onClick={onClick}>Show Description</Button>) : null;
{'fraction_non_alphanumeric': 0.12422360248447205, 'fraction_numerical': 0.0, 'mean_word_length': 3.3901192504258946, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 14, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1330856', 'n_tokens_mistral': 738, 'n_tokens_neox': 726, 'n_words': 228}