ronantakizawa/codereview-bench huggingface dataset:
Repository: h2oai/wave
File: py/examples/tall_stats.py (Python)

Code before:
# Tall stat
# Create a card with stats laid out vertically 
# ---
from h2o_wave import main, app, Q, ui

@app('/demo')
async def serve(q: Q):
    # Modify the page

    q.page['example'] = ui.tall_stats_card(box='2 2 4 4', items=[
        ui.stat(label='PARAMETER NAME', value='125%'),
        ui.stat(label='PARAMETER NAME', value='578 Users'),
        ui.stat(label='PARAMETER NAME', value='25K')
    ])

    # Save the page
    await q.page.save()

Review comment (suggestion):
Start from the first row and col in order to look good in Tour app. Also since this card is intended to be vertical, the square may not be the best solution here.
```suggestion
    q.page['example'] = ui.tall_stats_card(box='1 1 2 4', items=[
```

Code after:
# Tall stat
# Create a vertical label-value pairs collection.
# ---
from h2o_wave import site, ui

page = site['/demo']

page.add('example', ui.tall_stats_card(
    box='1 1 2 4',
    items=[
        ui.stat(label='PARAMETER NAME', value='125%'),
        ui.stat(label='PARAMETER NAME', value='578 Users'),
        ui.stat(label='PARAMETER NAME', value='25K')
    ]
))

page.save()
Repository: h2oai/wave
File: ui/src/tall_stats.tsx (TypeScript)

Code before:
import React from 'react'
import { Stat } from './stats'
import { cards } from './layout'
import { bond } from './ui'
import { stylesheet } from 'typestyle'
import { clas, cssVar } from './theme'

/** Create a vertical label-value pairs collection. */
export interface State {
  /** The individual stats to be displayed. */
  items: Stat[]
}

const
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      textAlign: 'center',
      padding: 24,
    },
    stat: {
      marginTop: 24,
    },
    value: {
      color: cssVar('themePrimary'),
    },
    label: {
      color: cssVar('neutralPrimary'),
      marginTop: -8,
    }
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    
    const
      render = () => {
        const stats = state.items.map(({ label, value }, i) => (
          <div key={`${i}-${label}`} className={i ? css.stat : ''}>
            {value && <div className={clas(css.value, 'wave-s40 wave-w4')}>{value}</div>}
            <div className={clas(css.label, 'wave-s14 wave-w2')}>{label}</div>
          </div>)
        )
        return (
          <div data-test={name} className={css.card}>
            {stats}
          </div>
        )
      }
      return { render, changed }

Review comment (suggestion):
cssVar value needs to be prefixed with $ otherwise color string you specified is used, in this case, invalid color:

![image](https://user-images.githubusercontent.com/64769322/140895329-a292cb80-a2c4-46d6-b045-eb46555d26c3.png)

```suggestion
      color: cssVar('$themePrimary'),
```

Code after:
import React from 'react'
import { Stat } from './stats'
import { cards } from './layout'
import { bond } from './ui'
import { stylesheet } from 'typestyle'
import { clas, cssVar } from './theme'

/** Create a vertical label-value pairs collection. */
export interface State {
  /** The individual stats to be displayed. */
  items: Stat[]
}

const
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      textAlign: 'center',
      padding: 24,
      justifyContent: 'space-around',
    },
    value: {
      color: cssVar('$themePrimary'),
    },
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const render = () => (
      <div data-test={name} className={css.card}>
        {
          state.items.map(({ label, value }, i) => (
            <div key={`${i}-${label}`}>
              {value && <div className={clas(css.value, 'wave-s40 wave-w4')}>{value}</div>}
              <div className='wave-s14 wave-w2'>{label}</div>
            </div>)
          )
        }
      </div>
    )

    return { render, changed }
  })

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

Code before:
import { bond } from './ui'
import { stylesheet } from 'typestyle'
import { clas, cssVar } from './theme'

/** Create a vertical label-value pairs collection. */
export interface State {
  /** The individual stats to be displayed. */
  items: Stat[]
}

const
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      textAlign: 'center',
      padding: 24,
    },
    stat: {
      marginTop: 24,
    },
    value: {
      color: cssVar('themePrimary'),
    },
    label: {
      color: cssVar('neutralPrimary'),
      marginTop: -8,
    }
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    
    const
      render = () => {
        const stats = state.items.map(({ label, value }, i) => (
          <div key={`${i}-${label}`} className={i ? css.stat : ''}>
            {value && <div className={clas(css.value, 'wave-s40 wave-w4')}>{value}</div>}
            <div className={clas(css.label, 'wave-s14 wave-w2')}>{label}</div>
          </div>)
        )
        return (
          <div data-test={name} className={css.card}>
            {stats}
          </div>
        )
      }
      return { render, changed }
  })

cards.register('tall_stats', View)

Review comment (suggestion):
```suggestion
      color: cssVar('$neutralPrimary'),
```

Code after:
import { bond } from './ui'
import { stylesheet } from 'typestyle'
import { clas, cssVar } from './theme'

/** Create a vertical label-value pairs collection. */
export interface State {
  /** The individual stats to be displayed. */
  items: Stat[]
}

const
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      textAlign: 'center',
      padding: 24,
      justifyContent: 'space-around',
    },
    value: {
      color: cssVar('$themePrimary'),
    },
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const render = () => (
      <div data-test={name} className={css.card}>
        {
          state.items.map(({ label, value }, i) => (
            <div key={`${i}-${label}`}>
              {value && <div className={clas(css.value, 'wave-s40 wave-w4')}>{value}</div>}
              <div className='wave-s14 wave-w2'>{label}</div>
            </div>)
          )
        }
      </div>
    )

    return { render, changed }
  })

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

Code before:
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      textAlign: 'center',
      padding: 24,
    },
    stat: {
      marginTop: 24,
    },
    value: {
      color: cssVar('themePrimary'),
    },
    label: {
      color: cssVar('neutralPrimary'),
      marginTop: -8,
    }
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    
    const
      render = () => {
        const stats = state.items.map(({ label, value }, i) => (
          <div key={`${i}-${label}`} className={i ? css.stat : ''}>
            {value && <div className={clas(css.value, 'wave-s40 wave-w4')}>{value}</div>}
            <div className={clas(css.label, 'wave-s14 wave-w2')}>{label}</div>
          </div>)
        )
        return (
          <div data-test={name} className={css.card}>
            {stats}
          </div>
        )
      }
      return { render, changed }
  })

cards.register('tall_stats', View)

Review comment (suggestion):
Use flexbox spacing instead.
```suggestion
          <div key={`${i}-${label}`}>
```

Code after:
  css = stylesheet({
    card: {
      display: 'flex',
      flexDirection: 'column',
      textAlign: 'center',
      padding: 24,
      justifyContent: 'space-around',
    },
    value: {
      color: cssVar('$themePrimary'),
    },
  })

export const
  View = bond(({ name, state, changed }: Model<State>) => {
    const render = () => (
      <div data-test={name} className={css.card}>
        {
          state.items.map(({ label, value }, i) => (
            <div key={`${i}-${label}`}>
              {value && <div className={clas(css.value, 'wave-s40 wave-w4')}>{value}</div>}
              <div className='wave-s14 wave-w2'>{label}</div>
            </div>)
          )
        }
      </div>
    )

    return { render, changed }
  })

cards.register('tall_stats', View)
Repository: h2oai/wave
File: py/examples/postcard.py (Python)

Code before:
                ui.command(name='calendar', label='Calendar Event', icon='Calendar'),
            ]
        ),
        ui.command(name='upload', label='Upload', icon='Upload'),
        ui.command(name='share', label='Share', icon='Share'),
        ui.command(name='download', label='Download', icon='Download'),
    ],
    items=[
        ui.inline(justify='end', items=[
            ui.mini_buttons([
                ui.mini_button(name='like', label='4', icon='Heart'),
                ui.mini_button(name='comment', label='2', icon='Comment'),
                ui.mini_button(name='share', label='1', icon='Share'),
            ]),
        ]),
        ui.buttons(items=[
            ui.button(name='like', label='Like'),
            ui.button(name='comment', label='Comment'),
            ui.button(name='share', label='Share'),
        ]),
    ],
    caption='''
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia aliquam maxime quos facere
necessitatibus tempore eum odio, qui illum. Repellat modi dolor facilis odio ex possimus
ratione voluptate pariatur cupiditate, quidem quaerat sapiente exercitationem in omnis nulla
maiores consequatur dolores illo inventore quae obcaecati culpa totam corporis! Repudiandae, nostrum repellendus.
''',
    aux_value='2h ago',
    image='https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' # noqa
)
page.save()


Review comment (suggestion):
Either reduce the text or increase the example card height so that it looks better.

```suggestion
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia aliquam maxime quos facere
necessitatibus tempore eum odio, qui illum. Repellat modi dolor facilis odio ex possimus
```

Code after:
        ]),
        ui.command(name='upload', label='Upload', icon='Upload'),
        ui.command(name='share', label='Share', icon='Share'),
        ui.command(name='download', label='Download', icon='Download'),
    ],
    items=[
        ui.inline(justify='end', items=[
            ui.mini_buttons([
                ui.mini_button(name='like', label='4', icon='Heart'),
                ui.mini_button(name='comment', label='2', icon='Comment'),
                ui.mini_button(name='share', label='1', icon='Share'),
            ]),
        ]),
        ui.buttons(items=[
            ui.button(name='like', label='Like'),
            ui.button(name='comment', label='Comment'),
            ui.button(name='share', label='Share'),
        ]),
    ],
    caption='''
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia aliquam maxime quos facere
necessitatibus tempore eum odio, qui illum. Repellat modi dolor facilis odio ex possimus
''',
    aux_value='2h ago',
    image='https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' # noqa
)
page.save()
Repository: h2oai/wave
File: ui/src/postcard.tsx (TypeScript)

Code before:
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    padding: 24,
    paddingBottom: 16,
    marginTop: -4,
    $nest: {
      '.ms-Persona-primaryText': {
        fontSize: 16,
        lineHeight: px(22),
        fontWeight: 500,
        color: cssVar('$neutralPrimary')
      },
      '.ms-Persona-secondaryText': {
        fontSize: 14,
        lineHeight: px(20),
        color: cssVar('$text7')
      },
      '.ms-Persona-image, .ms-Persona-imageArea': {
        height: '40px !important',
        width: '40px !important',
      }
    }
  },
  aux_value: {
    marginBottom: 4
  },
  content: {
    padding: 24,
    paddingTop: 16
  },
  img: {
    flexGrow: 1,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  },
  items: {
    marginTop: 12
  }
})

/** Create a postcard displaying a persona, image, caption and optional buttons. */
interface State {
  /** The card's user avatar, 'size' prop is restricted to 'xs'. */
  persona: Component
  /** The card’s image. */
  image: S
  /** The card's aux_value, displayed on the right hand side of the image. */
  aux_value?: S
  /** The card's caption, displayed below the image. */

Review comment (suggestion):
Super nit: This misses one px.

![image](https://user-images.githubusercontent.com/64769322/141955186-f68d5dc2-a779-4186-9a19-6cae12f53cc9.png)

vs

![image](https://user-images.githubusercontent.com/64769322/141955345-e95a5ba2-a49b-407a-b9f4-db4763939f11.png)
```suggestion
    marginBottom: 5
```

I use https://chrome.google.com/webstore/detail/pixelzoomer/fogkjckfkdcnmnnfmbieljpkmmihhpao?hl=en for these things.

Code after:
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    padding: 24,
    paddingBottom: 16,
    marginTop: -4,
    $nest: {
      '.ms-Persona-primaryText': {
        fontSize: 16,
        lineHeight: px(22),
        fontWeight: 500,
      },
      '.ms-Persona-secondaryText': {
        fontSize: 14,
        lineHeight: px(20),
        color: cssVar('$text7')
      },
      '.ms-Persona-image, .ms-Persona-imageArea': {
        height: '40px !important',
        width: '40px !important',
      }
    }
  },
  aux_value: {
    marginBottom: 5
  },
  content: {
    padding: 24,
    paddingTop: 16
  },
  img: {
    flexGrow: 1,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
  },
  items: {
    marginTop: 12
  }
})

/** Create a postcard displaying a persona, image, caption and optional buttons. */
interface State {
  /** The card's user avatar, 'size' prop is restricted to 'xs'. */
  persona: Component
  /** The card’s image. */
  image: S
  /** The card's aux_value, displayed on the right hand side of the image. */
  aux_value?: S
  /** The card's caption, displayed below the image. */
  caption?: S
Repository: h2oai/wave
File: ui/src/preview.tsx (TypeScript)

Code before:
    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'),
      }
    }
  }
})


/** Create a preview card displaying an image with shadow overlay, title, social icons, caption, and button. */
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. */
  image: S
  /** The card's title */
  title?: S
  /** Component's displayed at the top-right corner */
  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,

Review comment (suggestion):
```suggestion
        color: cssVar('$text'),
```

Code after:
    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. */
  image: S
  /** The card's title */
  title?: S
  /** Mini buttons displayed at the top-right corner */
  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, the 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()
      }
Repository: h2oai/wave
File: ui/src/preview.tsx (TypeScript)

Code before:
  /** 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):
```suggestion
          <div className={css.content} style={{ background: getGradient() }}>
```

Code after:
    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:
  /** 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):
```suggestion
              {title && <div className='wave-s20 wave-w6'>{title}</div>}
```

Code after:
      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)