ronantakizawa/codereview-bench huggingface dataset:
Repository: h2oai/wave
File: ui/src/preview.tsx (TypeScript)

Code before:

export const View = bond(({ name, state, changed }: Model<State>) => {
  const render = () => {
    const { image, title, name: stateName, label, caption, items } = state,
    onClick = () => {
      if (stateName.startsWith('#')) {
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
    },
    getGradient = () => {
      const { r, g, b } = Fluent.getColorFromString(cssVarValue('$card')) || { r: 255, g: 255, b: 255 }
      return `linear-gradient(rgba(${r}, ${g}, ${b}, .8) 50%, rgba(${r}, ${g}, ${b}, 0) 100%)`
    }

    return (
      <div data-test={name} className={css.card}>
        <div className={css.img} style={{ backgroundImage: `url('${image}')` }}>
          <div className={css.content} style={{ backgroundImage: `${getGradient()}` }}>
            <div className={css.header}>
              {title && <div className={clas(css.title, 'wave-s20 wave-w5')}>{title}</div>}
              {items && <div className={css.items}><XComponents items={items} /></div>}
            </div>
            {caption && <div className={clas(css.caption, 'wave-s14 wave-w5')}>{caption}</div>}
          </div>
          {label && <Fluent.PrimaryButton onClick={onClick} text={label} styles={{ root: { margin: '0 24px 24px 0', alignSelf: 'flex-end' } }} />}
        </div>
      </div>
    )
  }

  return { render, changed }
})

cards.register('preview', View)

Review comment (suggestion):
```suggestion
            {caption && <div className='wave-s14 wave-t8'>{caption}</div>}
```

Code after:
      }
      wave.args[stateName] = stateName
      wave.push()
      }

    return (
      <div
        data-test={name}
        onClick={stateName && !label ? onClick : undefined}
        className={clas(css.card, stateName && !label ? css.clickable : '')}
        style={{ backgroundImage: `url('${image}')` }}
      >
        <div className={css.content} style={{ background: cssVar('$card7'), boxShadow: `0px 6px 30px 30px ${cssVar('$card7')}`  }}>
          <div className={css.header}>
            {title && <div className='wave-s20 wave-w6'>{title}</div>}
            {items && <div className={css.items}><XComponents items={items} /></div>}
          </div>
          {caption && <div className='wave-s14 wave-t8'>{caption}</div>}
        </div>
        {label && <Fluent.PrimaryButton onClick={onClick} text={label} styles={{ root: { margin: '0 24px 24px 0', alignSelf: 'flex-end' } }} />}
      </div>
    )
  }

  return { render, changed }
})

cards.register('preview', View)
Repository: h2oai/wave
File: ui/src/preview.tsx (TypeScript)

Code before:
  items?: Component[]
  /** The card's caption, displayed bellow the title. */
  caption?: S
  /** Label of a button rendered at the bottom of the card. If specified, whole card is not clickable anymore.. */
  label?: S
}

export const View = bond(({ name, state, changed }: Model<State>) => {
  const render = () => {
    const { image, title, name: stateName, label, caption, items } = state,
    onClick = () => {
      if (stateName.startsWith('#')) {
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
    },
    getGradient = () => {
      const { r, g, b } = Fluent.getColorFromString(cssVarValue('$card')) || { r: 255, g: 255, b: 255 }
      return `linear-gradient(rgba(${r}, ${g}, ${b}, .8) 50%, rgba(${r}, ${g}, ${b}, 0) 100%)`
    }

    return (
      <div data-test={name} className={css.card}>
        <div className={css.img} style={{ backgroundImage: `url('${image}')` }}>
          <div className={css.content} style={{ backgroundImage: `${getGradient()}` }}>
            <div className={css.header}>
              {title && <div className={clas(css.title, 'wave-s20 wave-w5')}>{title}</div>}
              {items && <div className={css.items}><XComponents items={items} /></div>}
            </div>
            {caption && <div className={clas(css.caption, 'wave-s14 wave-w5')}>{caption}</div>}
          </div>
          {label && <Fluent.PrimaryButton onClick={onClick} text={label} styles={{ root: { margin: '0 24px 24px 0', alignSelf: 'flex-end' } }} />}
        </div>
      </div>
    )
  }

  return { render, changed }
})

cards.register('preview', View)

Review comment (suggestion):
Also rename css.img to css.card.
```suggestion
      <div data-test={name} className={css.img} style={{ backgroundImage: `url('${image}')` }}>
```

Code after:
  const render = () => {
    const { image, title, name: stateName, label, caption, items } = state,
    onClick = () => {
      if (stateName.startsWith('#')) {
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
      }

    return (
      <div
        data-test={name}
        onClick={stateName && !label ? onClick : undefined}
        className={clas(css.card, stateName && !label ? css.clickable : '')}
        style={{ backgroundImage: `url('${image}')` }}
      >
        <div className={css.content} style={{ background: cssVar('$card7'), boxShadow: `0px 6px 30px 30px ${cssVar('$card7')}`  }}>
          <div className={css.header}>
            {title && <div className='wave-s20 wave-w6'>{title}</div>}
            {items && <div className={css.items}><XComponents items={items} /></div>}
          </div>
          {caption && <div className='wave-s14 wave-t8'>{caption}</div>}
        </div>
        {label && <Fluent.PrimaryButton onClick={onClick} text={label} styles={{ root: { margin: '0 24px 24px 0', alignSelf: 'flex-end' } }} />}
      </div>
    )
  }

  return { render, changed }
})

cards.register('preview', View)
Repository: h2oai/wave
File: ui/src/preview.tsx (TypeScript)

Code before:
// See the License for the specific language governing permissions and
// limitations under the License.

import { Model, S } from 'h2o-wave'
import React from 'react'
import { stylesheet } from 'typestyle'
import { Component, XComponents } from './form'
import { cards } from './layout'
import { clas, cssVar, cssVarValue } from './theme'
import { bond, wave } from './ui'
import * as Fluent from '@fluentui/react'

const css = stylesheet({
  card: {
    borderRadius: 4,
  },
  img: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    height: '100%',
    boxSizing: 'border-box',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    borderRadius: 4,
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  title: {
    color: cssVar('$black') ,
  },
  caption: {
    color: cssVar('$neutralPrimary') ,
  },
  content: {
    padding: 24,
    paddingBottom: 100,
  },
  items: {
    $nest: {
      // Target mini button's icon and label
      '& .ms-Icon, & .ms-Button-label': {
        color: cssVar('$black'),
      }
    }
  }

Review comment (suggestion):
Wave currently doesn't use rounded corners for cards.
```suggestion
```

Code after:
// See the License for the specific language governing permissions and
// limitations under the License.

import { Model, S } from 'h2o-wave'
import React from 'react'
import { stylesheet } from 'typestyle'
import { Component, XComponents } from './form'
import { cards } from './layout'
import { clas, cssVar } from './theme'
import { bond, wave } from './ui'
import * as Fluent from '@fluentui/react'

const css = stylesheet({
  card: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  },
  clickable: {
    cursor: 'pointer'
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  content: {
    padding: 24,
    paddingBottom: 0,
    color: cssVar('$text'),
  },
  items: {
    $nest: {
      // Target mini button's icons and labels
      '& .ms-Icon, & .ms-Button-label': {
        color: cssVar('$text'),
      }
    }
  }
})


/** Create a preview card displaying an image with shadow overlay, title, social icons, caption, and button. */
export interface State {
  /** An identifying name for this card. Makes the card clickable if label is not provided, similar to a button. */
  name: S
  /** The card’s image. */
Repository: h2oai/wave
File: ui/src/preview.tsx (TypeScript)

Code before:
      if (stateName.startsWith('#')) {
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
      },
    // We use the overlay with a solid color for the content (title, icons, caption) to match the proper contrast
    // and the box shadow to smooth the transition, almost like a gradient
    getOverlay = () => {
      const { r, g, b } = Fluent.getColorFromString(cssVarValue('$card')) || { r: 255, g: 255, b: 255 }
      return `rgba(${r}, ${g}, ${b}, .7)`
    },
    getBoxShadow = () => {
      const { r, g, b } = Fluent.getColorFromString(cssVarValue('$card')) || { r: 255, g: 255, b: 255 }
      return `0px 6px 30px 30px rgba(${r}, ${g}, ${b}, .7)`
    }

    return (
      <div
        data-test={name}
        onClick={stateName && !label ? onClick : undefined}
        className={clas(css.card, stateName && !label ? css.clickable : '')}
        style={{ backgroundImage: `url('${image}')` }}
      >
        <div className={css.content} style={{ background: `${getOverlay()}`, boxShadow: getBoxShadow(), }}>
          <div className={css.header}>
            {title && <div className='wave-s20 wave-w6'>{title}</div>}
            {items && <div className={css.items}><XComponents items={items} /></div>}
          </div>
          {caption && <div className='wave-s14 wave-t8'>{caption}</div>}
        </div>
        {label && <Fluent.PrimaryButton onClick={onClick} text={label} styles={{ root: { margin: '0 24px 24px 0', alignSelf: 'flex-end' } }} />}
      </div>
    )
  }

  return { render, changed }
})

cards.register('preview', View)

Review comment (suggestion):
```suggestion
        <div className={css.content} style={{ background: cssVar('$card7'), boxShadow: `0px 6px 30px 30px ${cssVar('$card7')}`  }}>
```

Code after:
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
      }

    return (
      <div
        data-test={name}
        onClick={stateName && !label ? onClick : undefined}
        className={clas(css.card, stateName && !label ? css.clickable : '')}
        style={{ backgroundImage: `url('${image}')` }}
      >
        <div className={css.content} style={{ background: cssVar('$card7'), boxShadow: `0px 6px 30px 30px ${cssVar('$card7')}`  }}>
          <div className={css.header}>
            {title && <div className='wave-s20 wave-w6'>{title}</div>}
            {items && <div className={css.items}><XComponents items={items} /></div>}
          </div>
          {caption && <div className='wave-s14 wave-t8'>{caption}</div>}
        </div>
        {label && <Fluent.PrimaryButton onClick={onClick} text={label} styles={{ root: { margin: '0 24px 24px 0', alignSelf: 'flex-end' } }} />}
      </div>
    )
  }

  return { render, changed }
})

cards.register('preview', View)
Repository: h2oai/wave
File: ui/src/tall_info.tsx (TypeScript)

Code before:
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
    },
    render = () => (
      <div
        data-test={name}
        onClick={stateName && !label ? onClick : undefined}
        className={clas(css.card, stateName && !label ? css.clickable : '')}
      >
        <div className={css.imgContainer}>
          {
            image
              ? <div className={css.img} style={{ backgroundImage: `url('${image}')`, height: image_height }}></div>
              : <div className={css.iconWrapper}><Fluent.Icon iconName={icon || 'MiniExpand'} styles={iconStyles} /></div>
          }
        </div>
        <div className={css.textContainer}>
          <div className={css.header}>
            <div className={clas('wave-s20 wave-w6 wave-t9', css.title)}>{title}</div>
            {category && <div className={clas('wave-s14 wave-w4 wave-t5', css.category)}>{category}</div>}
          </div>
          {caption && <div className='wave-s14 wave-w4 wave-t7'><Markdown source={caption} /></div>}
          {label && <Fluent.DefaultButton data-test={label} text={label} styles={{ root: { marginTop: 16 } }} onClick={onClick} />}
        </div>
      </div >
    )

  return { render, changed }
})

cards.register('tall_info', View)

Review comment (suggestion):
Let's apply `data-test` consistently, on card wrapper only.

```suggestion
          {label && <Fluent.DefaultButton text={label} styles={{ root: { marginTop: 16 } }} onClick={onClick} />}
```

Code after:
        window.location.hash = stateName.substr(1)
        return
      }
      wave.args[stateName] = stateName
      wave.push()
    },
    render = () => (
      <div
        data-test={name}
        onClick={stateName && !label ? onClick : undefined}
        className={clas(css.card, stateName && !label ? css.clickable : '')}
      >
        <div className={css.imgContainer}>
          {
            image
              ? <div className={css.img} style={{ backgroundImage: `url('${image}')`, height: image_height }}></div>
              : <div className={css.iconWrapper}><Fluent.Icon iconName={icon || 'MiniExpand'} styles={iconStyles} /></div>
          }
        </div>
        <div className={css.textContainer}>
          <div className={css.header}>
            <div className={clas('wave-s20 wave-w6 wave-t9', css.title)}>{title}</div>
            {category && <div className={clas('wave-s14 wave-w4 wave-t5', css.category)}>{category}</div>}
          </div>
          {caption && <div className='wave-s14 wave-w4 wave-t7'><Markdown source={caption} /></div>}
          {label && <Fluent.DefaultButton text={label} styles={{ root: { marginTop: 16 } }} onClick={onClick} />}
        </div>
      </div >
    )

  return { render, changed }
})

cards.register('tall_info', View)
Repository: h2oai/wave
File: ui/src/dropdown.tsx (TypeScript)

Code before:
                </div>
              )
            }
            <Fluent.ScrollablePane styles={{ root: { marginTop: 100, boxShadow: `0px 3px 7px ${cssVar('$text3')}` } }}>
              <Fluent.List
                items={filteredItems}
                getPageSpecification={getPageSpecification}
                renderedWindowsAhead={3}
                onRenderCell={onRenderCell}
              />
            </Fluent.ScrollablePane>
          </Fluent.DialogContent>
          {
            isMultivalued && (
              <Fluent.DialogFooter>
                <Fluent.DefaultButton text='Cancel' onClick={cancelDialog} />
                <Fluent.PrimaryButton text='Select' onClick={() => submit()} />
              </Fluent.DialogFooter>
            )
          }
        </Fluent.Dialog>
      </>
    )
  },
  getCompBasedOnDialogProp = (m: Dropdown) => {
    m.dialog = m.dialog ?? 'auto'
    switch (m.dialog) {
      case 'always':
        return <DialogDropdown {...m} />
      case 'never':
        return <BaseDropdown {...m} />
      case 'auto':
        return (m.choices?.length || 0) > 100 ? <DialogDropdown {...m} /> : <BaseDropdown {...m} />
    }
  }

export const XDropdown = ({ model: m }: { model: Dropdown }) => {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  React.useEffect(() => { wave.args[m.name] = m.values ? (m.values || []) : (m.value || null) }, [])
  
  return getCompBasedOnDialogProp(m)
}

Review comment (suggestion):
```suggestion

```
No point in mutating this field unnecessarily.

Code after:
                </div>
              )
            }
            <Fluent.ScrollablePane styles={{ root: { marginTop: 100, boxShadow: `0px 3px 7px ${cssVar('$text3')}` } }}>
              <Fluent.List
                items={filteredItems}
                getPageSpecification={getPageSpecification}
                renderedWindowsAhead={3}
                onRenderCell={onRenderCell}
              />
            </Fluent.ScrollablePane>
          </Fluent.DialogContent>
          {
            isMultivalued && (
              <Fluent.DialogFooter>
                <Fluent.DefaultButton text='Cancel' onClick={cancelDialog} />
                <Fluent.PrimaryButton text='Select' onClick={() => submit()} />
              </Fluent.DialogFooter>
            )
          }
        </Fluent.Dialog>
      </>
    )
  }

export const XDropdown = ({ model: m }: { model: Dropdown }) => {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  React.useEffect(() => { wave.args[m.name] = m.values ? (m.values || []) : (m.value || null) }, [])
  
  return m.popup === 'always'
      ? <DialogDropdown {...m} />
      : m.popup === 'never'
          ? <BaseDropdown {...m} />
          : (m.choices?.length || 0) > 100
              ? <DialogDropdown {...m} />
              : <BaseDropdown {...m} />
}
Repository: h2oai/wave
File: py/examples/combobox.py (Python)

Code before:
# #form #combobox
# ---
from h2o_wave import main, app, Q, ui

combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']


@app('/demo')
async def serve(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'combobox={q.args.combobox}'),
            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
            ui.text(f'combobox_error={q.args.combobox_error}'),
            ui.text(f'combobox_trigger={q.args.combobox_trigger}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices),
            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, disabled=True),
            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, error='This combobox has an error!'),
            ui.combobox(name='combobox_trigger', trigger=True, label='Enter or choose a color (trigger on selection)', placeholder='Color...', value=q.args.combobox_trigger,
                        choices=combobox_choices),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()


Review comment (bug):
@mturoci is there something wrong with using the value that was recently send to the server? And how do I conditionally pass arguments in Python like in JS `value || fallback`?

Code after:
# #form #combobox
# ---
from h2o_wave import main, app, Q, ui

combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']


@app('/demo')
async def serve(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'combobox={q.args.combobox}'),
            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
            ui.text(f'combobox_error={q.args.combobox_error}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices),
            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, disabled=True),
            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, error='This combobox has an error!'),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()
Repository: h2oai/wave
File: py/examples/combobox.py (Python)

Code before:
# #form #combobox
# ---
from h2o_wave import main, app, Q, ui

combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']


@app('/demo')
async def serve(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'combobox={q.args.combobox}'),
            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
            ui.text(f'combobox_error={q.args.combobox_error}'),
            ui.text(f'combobox_trigger={q.args.combobox_trigger}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices),
            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, disabled=True),
            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, error='This combobox has an error!'),
            ui.combobox(name='combobox_trigger', trigger=True, label='Enter or choose a color (trigger on selection)', placeholder='Color...', value=q.args.combobox_trigger,
                        choices=combobox_choices),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()


Review comment (suggestion):
```suggestion
            ui.combobox(name='combobox_trigger', trigger=True, label='Enter or choose a color (submit color when changed)', placeholder='Color...', value='Blue',
```

Code after:
# #form #combobox
# ---
from h2o_wave import main, app, Q, ui

combobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']


@app('/demo')
async def serve(q: Q):
    if q.args.show_inputs:
        q.page['example'].items = [
            ui.text(f'combobox={q.args.combobox}'),
            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),
            ui.text(f'combobox_error={q.args.combobox_error}'),
            ui.button(name='show_form', label='Back', primary=True),
        ]
    else:
        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices),
            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, disabled=True),
            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',
                        choices=combobox_choices, error='This combobox has an error!'),
            ui.button(name='show_inputs', label='Submit', primary=True),
        ])
    await q.page.save()