profile
viewpoint
Jake Trent jaketrent @pluralsight Salt Lake City, UT USA https://jaketrent.com

jaketrent/backbone-intro 3

Simple BackboneJs project for demo

jaketrent/broccoli-ember-emblem 2

broccoli plugin to compile emblem templates for ember

jaketrent/aprilandjake 1

aprilandjake.com site code

jaketrent/awesome-electron 1

Useful resources for creating apps with Electron

jaketrent/builtbyjake 1

Recent projects portfolio

Pull request review commentpluralsight/design-system

Card TS Convert

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])+  const size = props.size || sizes.medium+  return (+    <div {...styles.card()} {...htmlProps}>+      <div {...styles.overlays({ size })}>+        {props.image ? props.image : null}++        {props.fullOverlay ? (+          <div {...styles.fullOverlay(props)}>{props.fullOverlay}</div>+        ) : null}++        {Array.isArray(props.actionBar) && props.actionBar.length > 0 ? (+          <div {...styles.actionBar(props)}>{props.actionBar}</div>+        ) : null}++        {props.bonusBar ? (+          <div {...styles.bonusBar()}>{props.bonusBar}</div>+        ) : null}++        {props.tag}++        {props.progress ? (+          <div {...styles.progress()}>+            <div+              {...styles.progressBar(props)}+              aria-label={`${toPercentageString(props.progress)} complete`}+            />+          </div>+        ) : null}

ditto, yes, tsc.

jaketrent

comment created time in 7 hours

PullRequestReviewEvent

Pull request review commentpluralsight/design-system

Card TS Convert

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])+  const size = props.size || sizes.medium+  return (+    <div {...styles.card()} {...htmlProps}>+      <div {...styles.overlays({ size })}>+        {props.image ? props.image : null}++        {props.fullOverlay ? (+          <div {...styles.fullOverlay(props)}>{props.fullOverlay}</div>+        ) : null}++        {Array.isArray(props.actionBar) && props.actionBar.length > 0 ? (+          <div {...styles.actionBar(props)}>{props.actionBar}</div>+        ) : null}++        {props.bonusBar ? (+          <div {...styles.bonusBar()}>{props.bonusBar}</div>+        ) : null}

ditto, yes, tsc.

jaketrent

comment created time in 7 hours

PullRequestReviewEvent

Pull request review commentpluralsight/design-system

Card TS Convert

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])+  const size = props.size || sizes.medium+  return (+    <div {...styles.card()} {...htmlProps}>+      <div {...styles.overlays({ size })}>+        {props.image ? props.image : null}

for tsc, yes. I can't remember if it was strict or unstrict that exposed this.

jaketrent

comment created time in 7 hours

PullRequestReviewEvent

Pull request review commentpluralsight/design-system

Card TS Convert

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}+interface ActionBarActionComponent+  extends RefForwardingComponent<+    ActionBarActionProps,+    HTMLButtonElement,+    ActionBarActionStatics+  > {}+const ActionBarAction = React.forwardRef((props, ref) => {+  const { title, icon, ...rest } = props+  const ariaLabel = props['aria-label'] || title+  return (+    <button+      {...styles.actionButton(props)}+      {...rest}+      aria-label={ariaLabel}+      ref={ref}+      title={title}+    >+      {icon}+    </button>+  )+}) as ActionBarActionComponent+ActionBarAction.displayName = 'Card.Action'++const FullOverlayLink: React.FC<React.HTMLAttributes<+  HTMLSpanElement+>> = props => <span {...styles.fullOverlayLink()} {...props} />++FullOverlayLink.displayName = 'Card.FullOverlayLink'++interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {+  src: string+}+const Image: React.FC<ImageProps> = props => {+  const { src, ...rest } = props+  return (+    <div+      {...styles.image()}+      {...rest}+      style={{ backgroundImage: `url(${src})` }}+    />+  )+}+Image.displayName = 'Card.Image'++const ImageLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...styles.imageLink()} {...props} />+)+ImageLink.displayName = 'Card.ImageLink'++interface TagProps extends React.HTMLAttributes<HTMLDivElement> {+  icon?: React.ReactElement // TODO: Icon when Icon is TS+}+const Tag: React.FC<TagProps> = ({ children, icon, ...rest }) => (+  <div {...styles.tag()} {...rest}>+    {icon && (+      <div {...styles.tagIcon()}>+        {React.cloneElement(icon, { size: iconSizes.small })}+      </div>+    )}++    <span {...styles.tagText()}>{children}</span>+  </div>+)++Tag.displayName = 'Card.Tag'++const Text: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => (+  <span {...props} />+)+Text.displayName = 'Card.Text'++const TextLink: React.FC<React.HTMLAttributes<HTMLSpanElement>> = props => {+  const themeName = useTheme()+  return <span {...styles.textLink(themeName)} {...props} />+}+TextLink.displayName = 'Card.TextLink'++const Title: React.FC<React.HTMLAttributes<HTMLDivElement>> = props => {+  const themeName = useTheme()+  const { children, ...rest } = props++  return (+    <div {...styles.title(themeName)} {...rest}>+      <Shiitake lines={2}>{children}</Shiitake>+    </div>+  )+}+Title.displayName = 'Card.Title'++interface MetaDataProps {+  metadata: (string | React.ReactElement<typeof TextLink>)[]+  size: ValueOf<typeof vars.sizes>+}+const MetaData: React.FC<MetaDataProps> = props => {+  const { metadata, size, ...rest } = props+  const themeName = useTheme()+  return (+    <div {...styles.metadata(props, themeName)} {...rest}>+      {metadata.map((m, i) => [+        <span key={`datum${i}`} {...styles.metadataDatum()}>+          {m}+        </span>,+        i < metadata.length - 1 && (+          <span aria-hidden key={`dot${i}`} {...styles.metadataDot()}>+            ·+          </span>+        )+      ])}+    </div>+  )+}++export interface CardProps extends Record<string, unknown> {+  actionBar?: React.ReactElement<typeof ActionBarAction>[]+  actionBarVisible?: boolean+  bonusBar?: React.ReactNode+  fullOverlay?: React.ReactElement<typeof FullOverlayLink>+  fullOverlayVisible?: boolean+  image: React.ReactElement<typeof ImageLink>+  metadata1?: (string | React.ReactElement<typeof TextLink>)[]+  metadata2?: (string | React.ReactElement<typeof TextLink>)[]+  progress?: number+  size?: ValueOf<typeof vars.sizes>+  tag?: React.ReactElement<typeof Tag>+  title: React.ReactElement<typeof TextLink> | React.ReactElement<typeof Title>+}++interface CardStatics {+  Action: typeof ActionBarAction+  FullOverlayLink: typeof FullOverlayLink+  Image: typeof Image+  ImageLink: typeof ImageLink+  sizes: typeof vars.sizes+  Tag: typeof Tag+  Text: typeof Text+  TextLink: typeof TextLink+  Title: typeof Title+}+const Card: React.FC<CardProps> & CardStatics = props => {+  const htmlProps = omit<+    CardProps,+    [+      'actionBar',+      'actionBarVisible',+      'bonusBar',+      'fullOverlay',+      'fullOverlayVisible',+      'image',+      'metadata1',+      'metadata2',+      'progress',+      'size',+      'tag',+      'title'+    ]+  >(props, [+    'actionBar',+    'actionBarVisible',+    'bonusBar',+    'fullOverlay',+    'fullOverlayVisible',+    'image',+    'metadata1',+    'metadata2',+    'progress',+    'size',+    'tag',+    'title'+  ])

yeah, def seems overkill

jaketrent

comment created time in 7 hours

PullRequestReviewEvent

Pull request review commentpluralsight/design-system

Card TS Convert

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'+import Shiitake from 'shiitake'++import stylesheet from '../css'+import { toPercentageString } from '../js'+import * as vars from '../vars'++if (canUseDOM()) polyfillFocusWithin(document)++const styles = {+  actionBar: ({+    actionBarVisible: visible,+    fullOverlay+  }: Partial<CardProps>) => {+    const label = 'psds-card__action-bar'++    return compose(+      css(stylesheet[`.${label}`]),+      fullOverlay &&+        !visible &&+        css(stylesheet[`.${label}--fullOverlay.${label}--no-actionBarVisible`]),+      visible && css(stylesheet[`${label}--actionBarVisible`])+    )+  },+  actionButton: ({ disabled }: Partial<ActionBarActionProps>) => {+    const label = 'psds-card__action-bar__button'++    return compose(+      css(stylesheet[`.${label}`]),+      disabled && css(stylesheet[`.${label}--disabled`])+    )+  },++  bonusBar: () => css(stylesheet['.psds-card__bonus-bar']),++  card: () => css(stylesheet['.psds-card']),++  fullOverlay: ({ fullOverlayVisible: visible }: Partial<CardProps>) => {+    const label = 'psds-card__full-overlay'++    return compose(+      css(stylesheet[`.${label}`]),+      visible && css(stylesheet[`.${label}--fullOverlayVisible`])+    )+  },+  fullOverlayLink: () => css(stylesheet['.psds-card__full-overlay-link']),++  image: () => css(stylesheet['.psds-card__image']),+  imageLink: () => css(stylesheet['.psds-card__image-link']),++  metadata: (+    { size }: Partial<MetaDataProps>,+    themeName: ValueOf<typeof themeNames>+  ) => {+    const label = 'psds-card__metadata'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },+  metadataDatum: () => css(stylesheet['.psds-card__metadata__datum']),+  metadataDot: () => css(stylesheet['.psds-card__metadata__dot']),++  overlays: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__overlays'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  },++  progress: () => css(stylesheet['.psds-card__progress']),+  progressBar: ({ progress }: Partial<CardProps>) => {+    const label = 'psds-card__progress__bar'+    const percent = toPercentageString(progress || 0)+    const isCompleted = percent === '100%'++    return compose(+      css(stylesheet[`.${label}`]),+      isCompleted && css(stylesheet[`.${label}--complete`]),+      css({ width: percent })+    )+  },++  tag: () => css(stylesheet['.psds-card__tag']),+  tagIcon: () => css(stylesheet['.psds-card__tag__icon']),+  tagText: () => css(stylesheet['.psds-card__tag__text']),++  textLink: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__text-link'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  title: (themeName: ValueOf<typeof themeNames>) => {+    const label = 'psds-card__title'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--theme-${themeName}`])+    )+  },++  titleContainer: ({ size }: Partial<CardProps>) => {+    const label = 'psds-card__title-container'++    return compose(+      css(stylesheet[`.${label}`]),+      css(stylesheet[`.${label}--size-${size}`])+    )+  }+}++interface ActionBarActionProps extends React.HTMLAttributes<HTMLButtonElement> {+  disabled?: boolean+  icon?: React.ReactElement // TODO: retype as Icon when it's TS+  title: string+}+interface ActionBarActionStatics {}

Great, yeah, I'd love to see an example.

jaketrent

comment created time in 7 hours

PullRequestReviewEvent

Pull request review commentpluralsight/design-system

Card TS Convert

+import polyfillFocusWithin from 'focus-within'++import { sizes as iconSizes } from '@pluralsight/ps-design-system-icon'+import {+  names as themeNames,+  useTheme+} from '@pluralsight/ps-design-system-theme'+import {+  canUseDOM,+  omit,+  RefForwardingComponent,+  ValueOf+} from '@pluralsight/ps-design-system-util'+import { compose, css, StyleAttribute } from 'glamor'+import * as React from 'react'

Not sure why we wouldn't keep the new pattern. We're going to go in that direction eventually. I'm not stressed about going there piecemeal instead of en masse at a future point. You ok with piecemeal, per-package?

jaketrent

comment created time in 7 hours

PullRequestReviewEvent

push eventpluralsight/design-system

Jake Trent

commit sha 9eea7e22aaf4de4722d4493ab689213316f176c1

refactor(card): name err param Co-authored-by: Dane Thurber <dane.thurber@gmail.com>

view details

push time in 7 hours

issue openedpluralsight/design-system

storyshots: fix typings for create

Solve the typings problem for storyshots.spec.ts

Some packages require this line:

test: snapshotWithOptions({ createNodeMock })

But it's not in the typings. Figure it out.

For instance: https://github.com/pluralsight/design-system/pull/1346#discussion_r510249818

created time in 7 hours

push eventpluralsight/design-system

jaketrent

commit sha 45f915a571e86cd74d59241795db486584bf7a35

build(carousel): eslint fixies

view details

push time in 7 hours

PR opened pluralsight/design-system

Carousel TS Convert

yeeehaa!

+574 -545

0 comment

29 changed files

pr created time in 8 hours

push eventpluralsight/design-system

jaketrent

commit sha d649c85fd0598a61f30eee7f42db285ecd332992

refactor(carousel): restore swiping functionality with types

view details

push time in 8 hours

push eventpluralsight/design-system

jaketrent

commit sha 1d38706b8f5577a93b3d12a19295ea4243ed6eb1

refactor(carousel): readd filling page with empty items

view details

push time in 8 hours

push eventpluralsight/design-system

Dane Thurber

commit sha 32cf0b047a7b60a9128b16c60fea73846b0c2ec0

refactor(util): move to ts files

view details

Dane Thurber

commit sha 7e20cef7d423ee8baeb122f31673c7c2360d53c6

refactor(util): convert a few files to ts

view details

Dane Thurber

commit sha da359dfac67d6811ed794136a01c075651fa14d2

ci: lint ignore dist ts

view details

Dane Thurber

commit sha 324159e3daf1c40b0b1cdc99e1692696b2f03337

fix(util): bad import path

view details

Dane Thurber

commit sha 04d8367ff747378a7750624d688332e3b959a76c

style(verticaltabs): update typing signature

view details

Dane Thurber

commit sha b57e56ad7eac0c65154663bc3b1b0eae0ebd6c36

fix(util): call canUseDom in portal creation fn

view details

Dane Thurber

commit sha 3faaa9a46fd4f5dcd1b99f7f55cb7c23c735cd31

Merge branch 'master' into refactor/util-ts

view details

Dane Thurber

commit sha a5c10ad1ca4a73340a507906b700d5b7e0d3e755

test(util): also tsc when testing

view details

Dane Thurber

commit sha 784ce4c98f3ed527f680bc11e9efa6e62697cd95

test(util): fix ts error in snapshot config

view details

Dane Thurber

commit sha 9899684dc49ee9305a7d5a7940bee4195ac5da96

feat(util): deprecate prop-type utils

view details

Dane Thurber

commit sha 811ee18b7b44370569b2ec0570e4fc1302e78fd2

fix(util): update ref typings

view details

Dane Thurber

commit sha 82856528e81a337006be40bd8352982ed6f53f0b

feat(actionmenu): update failing ref typings

view details

Dane Thurber

commit sha 51703f86ba55589de9c903c1485b4bd6e509de36

feat(dropdown): update failing ref typings

view details

Dane Thurber

commit sha adbef7a184e586fd61cf700e319151211692ca84

Merge branch 'refactor/util-ts' of github.com:pluralsight/design-system into refactor/util-ts * 'refactor/util-ts' of github.com:pluralsight/design-system: refactor(docs): adjust max-width of main refactor(docs): rename vars for clarity fix(docs): restore the scroll restore, broken by scrollable feat(docs): persist sidenav group toggling feat(docs): open sidenav group containing active link feat(docs): highlight active sidenav link fix(docs): make heading more specific for unreliable style order fix(docs): hack search thin enough to mostly fit and not disturb scrollbar fix(docs): horz align scrollbar on sidenav refactor(docs): adjust color of fade to match editor background color refactor(docs): spacing page - move toc below heading

view details

Dane Thurber

commit sha 88e5e6ef50c116f4653e12f6644308dbfd2646b6

Merge branch 'master' into refactor/util-ts * master: fix(docs): ssr and sessionstorage build: publish build: publish build: publish build: commit lock refactor(halo): make props to styles required build(halo): tsc strict build(halo): return to storyshots.spec.tsx and cleanup test(halo): rename storyshots file for ts refactor(halo): fully convert to typescript refactor(halo): move to ts build refactor(halo): move to ts files Feat/linerprogress ts conversion (#1332) refactor(prop-types): change method of determining NODE_ENV to be compat with webpack5

view details

Dane Thurber

commit sha 1cb194696991b36f0be9593c4d9157241ec6467c

refactor(util): strict type ref hooks

view details

Dane Thurber

commit sha 96b71765d117aae1d5a3c10eac244ecead52eb6b

refactor(util): strict type menu keys

view details

Dane Thurber

commit sha 084dd989d6698fc1635a29ad2b2b2c5d987eaf08

refactor(util): strict ts

view details

Dane Thurber

commit sha 9c44d39a7d401f594d281240800b41846dcec89b

Merge branch 'master' into refactor/util-ts

view details

Dane Thurber

commit sha c0eb3e616bf2816549fb27eb88f674b89c3e9c09

style(radio): fix util typing

view details

push time in 9 hours

create barnchpluralsight/design-system

branch : feat/tscarousel

created branch time in 9 hours

issue openedpluralsight/design-system

tab: select first listitem in where children can be null

In regard to: https://pluralsight.slack.com/archives/C70HPSJPP/p1603298931117900

Repro: https://codesandbox.io/s/psds-example-template-forked-cxr61?file=/src/App.js

Tab selects first child with props.active to be active index or defaults to 0. If 0th child is null, no tabs look active. Make first real list item active instead.

created time in a day

MemberEvent

push eventpluralsight/design-system

dependabot[bot]

commit sha a70e74655cca06c482085ef0bda2726329a0c35c

build(deps): bump object-path from 0.11.4 to 0.11.5 Bumps [object-path](https://github.com/mariocasciaro/object-path) from 0.11.4 to 0.11.5. - [Release notes](https://github.com/mariocasciaro/object-path/releases) - [Commits](https://github.com/mariocasciaro/object-path/commits) Signed-off-by: dependabot[bot] <support@github.com>

view details

Jake Trent

commit sha 47f755b1b5e648dd3a3410d6b2db16ffed1b8bcb

Merge pull request #1347 from pluralsight/dependabot/npm_and_yarn/object-path-0.11.5 build(deps): bump object-path from 0.11.4 to 0.11.5

view details

push time in 2 days

delete branch pluralsight/design-system

delete branch : dependabot/npm_and_yarn/object-path-0.11.5

delete time in 2 days

PR merged pluralsight/design-system

build(deps): bump object-path from 0.11.4 to 0.11.5 dependencies

Bumps object-path from 0.11.4 to 0.11.5. <details> <summary>Commits</summary> <ul> <li>See full diff in <a href="https://github.com/mariocasciaro/object-path/commits">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+3 -3

0 comment

1 changed file

dependabot[bot]

pr closed time in 2 days

PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha b3be66ffe1ca4e169511207b8b6f3ac1f48548a3

test(card): lint on story

view details

push time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+  }) =>+    css(+      stylesheet['.psds-text-input__icon'],+      Boolean(icon) &&+        stylesheet[`.psds-text-input__icon--icon-align-${iconAlign}`],+      stylesheet[`.psds-text-input__icon--appearance-${appearance}`],+      stylesheet[`.psds-text-input__icon.psds-theme--${themeName}`]+    ),+  textInput: (disabled: boolean) =>+    css(+      stylesheet['.psds-text-input'],+      disabled && stylesheet['.psds-text-input--disabled']+    ),+  label: (themeName: ValueOf<typeof Theme.names>) =>+    css(+      stylesheet['.psds-text-input__label'],+      stylesheet[`.psds-text-input__label.psds-theme--${themeName}`]+    ),+  subLabel: (themeName: ValueOf<typeof Theme.names>) =>
  subLabel: (themeName: ValueOf<typeof themeNames>) =>
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+  }) =>+    css(+      stylesheet['.psds-text-input__icon'],+      Boolean(icon) &&+        stylesheet[`.psds-text-input__icon--icon-align-${iconAlign}`],+      stylesheet[`.psds-text-input__icon--appearance-${appearance}`],+      stylesheet[`.psds-text-input__icon.psds-theme--${themeName}`]+    ),+  textInput: (disabled: boolean) =>+    css(+      stylesheet['.psds-text-input'],+      disabled && stylesheet['.psds-text-input--disabled']+    ),+  label: (themeName: ValueOf<typeof Theme.names>) =>+    css(+      stylesheet['.psds-text-input__label'],+      stylesheet[`.psds-text-input__label.psds-theme--${themeName}`]+    ),+  subLabel: (themeName: ValueOf<typeof Theme.names>) =>+    css(+      stylesheet['.psds-text-input__sub-label'],+      stylesheet[`.psds-text-input__sub-label.psds-theme--${themeName}`]+    )+}++export interface TextInputStatics {+  appearances: typeof vars.appearances+  iconAligns: typeof vars.iconAligns+  sizes: typeof vars.sizes+}++export interface TextInputProps extends HTMLAttributes<HTMLInputElement> {+  appearance?: ValueOf<typeof vars.appearances>+  disabled?: boolean+  error?: boolean+  fieldAfter?: React.ReactNode+  icon?: React.ReactNode+  iconAlign?: ValueOf<typeof vars.iconAligns>+  label?: React.ReactNode+  placeholder?: string+  type?: string+  name?: string+  size?: ValueOf<typeof vars.sizes>+  subLabel?: React.ReactNode+}++export interface TextInputComponent+  extends RefForwardingComponent<+    TextInputProps,+    HTMLInputElement,+    TextInputStatics+  > {}++export type MultipleRefs =

Way to make this work!! 👏 👏

EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'
import { names as themeNames, useTheme } from '@pluralsight/ps-design-system-theme'
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>
    themeName: ValueOf<typeof themeNames>
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>
    themeName: ValueOf<typeof themeNames>
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>+  ) =>+    css(+      stylesheet['.psds-text-input__field-input'],+      stylesheet[`.psds-text-input__field-input--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field-input.psds-theme--${themeName}`]+    ),+  icon: ({+    appearance,+    icon,+    iconAlign,+    themeName+  }: {+    appearance: ValueOf<typeof vars.appearances>+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+  }) =>+    css(+      stylesheet['.psds-text-input__icon'],+      Boolean(icon) &&+        stylesheet[`.psds-text-input__icon--icon-align-${iconAlign}`],+      stylesheet[`.psds-text-input__icon--appearance-${appearance}`],+      stylesheet[`.psds-text-input__icon.psds-theme--${themeName}`]+    ),+  textInput: (disabled: boolean) =>+    css(+      stylesheet['.psds-text-input'],+      disabled && stylesheet['.psds-text-input--disabled']+    ),+  label: (themeName: ValueOf<typeof Theme.names>) =>
  label: (themeName: ValueOf<typeof themeNames>) =>
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

+import { css } from 'glamor'+import React, { HTMLAttributes } from 'react'++import Halo from '@pluralsight/ps-design-system-halo'+import { WarningIcon } from '@pluralsight/ps-design-system-icon'+import Theme, { useTheme } from '@pluralsight/ps-design-system-theme'+import {+  ValueOf,+  RefForwardingComponent+} from '@pluralsight/ps-design-system-util'++import stylesheet from '../css'+import * as vars from '../vars'++const styles = {+  error: () => css(stylesheet['.psds-text-input__error']),+  field: ({+    appearance,+    error,+    fieldAfter,+    icon,+    iconAlign,+    themeName,+    size+  }: {+    appearance: ValueOf<typeof vars.appearances>+    error: boolean+    fieldAfter: React.ReactNode+    icon: React.ReactNode+    iconAlign: ValueOf<typeof vars.iconAligns>+    themeName: ValueOf<typeof Theme.names>+    size: ValueOf<typeof vars.sizes>+  }) => {+    const small = size === vars.sizes.small+    return css(+      stylesheet['.psds-text-input__field'],+      stylesheet[`.psds-text-input__field--appearance-${appearance}`],+      stylesheet[`.psds-text-input__field.psds-theme--${themeName}`],+      stylesheet[+        `.psds-text-input__field--appearance-${appearance}.psds-theme--${themeName}`+      ],+      Boolean(fieldAfter) && stylesheet[`.psds-text-input__field--w-after`],+      small && stylesheet['.psds-text-input__field.psds-text-input--small'],+      Boolean(icon) &&+        small &&+        stylesheet[+          `.psds-text-input__field--icon-align-${iconAlign}.psds-text-input--small`+        ],+      Boolean(icon) &&+        !small &&+        stylesheet[`.psds-text-input__field--icon-align-${iconAlign}`],+      error &&+        stylesheet[`.psds-text-input__field--error.psds-theme--${themeName}`]+    )+  },+  fieldContainer: () => css(stylesheet['.psds-text-input__field-container']),+  fieldInput: (+    appearance: ValueOf<typeof vars.appearances>,+    themeName: ValueOf<typeof Theme.names>
    themeName: ValueOf<typeof themeNames>
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

   "main": "dist/cjs/index.js",   "module": "dist/esm/index.js",   "scripts": {-    "build": "run-s build:js build:cjs build:css",-    "build:cjs": "babel --root-mode upward src --out-dir dist/cjs",+    "build": "run-s build:cjs build:esm build:css",+    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --target es5 --outDir dist/cjs",     "build:css": "build-css --useGlamor -i dist/cjs/css/index.js",-    "build:js": "cross-env ESM=true babel --root-mode upward src --out-dir dist/esm",-    "build:watch": "yarn build:js -- --watch",+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",+    "build:watch": "yarn build:esm -- --watch",     "storybook": "start-storybook -p 6006",     "test": "jest",
    "test": "tsc --noEmit --project ./tsconfig.json && jest",
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

 import { css } from 'glamor'-import React, { useRef, useState } from 'react'-import PropTypes from 'prop-types'+import React, { useRef, useState, HTMLAttributes } from 'react'  import Button from '@pluralsight/ps-design-system-button' import CircularProgress from '@pluralsight/ps-design-system-circularprogress' import { CloseIcon, SearchIcon } from '@pluralsight/ps-design-system-icon' import TextInput from '@pluralsight/ps-design-system-textinput' import { callAll } from '@pluralsight/ps-design-system-util' -import stylesheet from '../css/index.js'+import stylesheet from '../css'  const styles = {-  clear: clearVisible =>+  clear: (clearVisible: boolean) =>     css(       stylesheet['.psds-searchinput-clear'],       clearVisible && stylesheet['.psds-searchinput-clear__visible']     ),-  field: _ => css(stylesheet['.psds-searchinput-field'])+  field: () => css(stylesheet['.psds-searchinput-field']) } -const SearchInput = React.forwardRef(-  ({ loading, onClear, onChange, ...rest }, forwardedRef) => {+export interface SearchInputProps+  extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {+  loading?: boolean+  onClear?: (evt?: React.MouseEvent) => void+  onChange?: (evt?: React.MouseEvent, val?: React.ReactText) => void
  onChange?: (evt: React.MouseEvent) => void

I don't see where the event possibly undefined. I also don't see where val is ever defined. I'm probably missing it. Will you help me find these references?

EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

   "compilerOptions": {     "allowJs": true,     "rootDir": null,-    "jsx": "react"+    "jsx": "react",+    "strict": true

Did you find out that this duplicated option is required?

EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

 import { css } from 'glamor'-import React, { useRef, useState } from 'react'-import PropTypes from 'prop-types'+import React, { useRef, useState, HTMLAttributes } from 'react'  import Button from '@pluralsight/ps-design-system-button' import CircularProgress from '@pluralsight/ps-design-system-circularprogress' import { CloseIcon, SearchIcon } from '@pluralsight/ps-design-system-icon' import TextInput from '@pluralsight/ps-design-system-textinput' import { callAll } from '@pluralsight/ps-design-system-util' -import stylesheet from '../css/index.js'+import stylesheet from '../css'  const styles = {-  clear: clearVisible =>+  clear: (clearVisible: boolean) =>     css(       stylesheet['.psds-searchinput-clear'],       clearVisible && stylesheet['.psds-searchinput-clear__visible']     ),-  field: _ => css(stylesheet['.psds-searchinput-field'])+  field: () => css(stylesheet['.psds-searchinput-field']) } -const SearchInput = React.forwardRef(-  ({ loading, onClear, onChange, ...rest }, forwardedRef) => {+export interface SearchInputProps+  extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {+  loading?: boolean+  onClear?: (evt?: React.MouseEvent) => void
  onClear?: (evt: React.MouseEvent) => void

I don't see where event is every undefined.

EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

     "access": "public"   },   "scripts": {-    "build": "run-s build:js build:cjs build:css",-    "build:cjs": "babel --root-mode upward src --out-dir dist/cjs",+    "build": "run-s build:cjs build:esm build:css",+    "build:cjs": "tsc --project tsconfig.build.json --module commonjs --target es5 --outDir dist/cjs",     "build:css": "build-css --useGlamor -i dist/cjs/css/index.js",-    "build:js": "cross-env ESM=true babel --root-mode upward src --out-dir dist/esm",-    "build:watch": "yarn build:js -- --watch",+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --target es5 --outDir dist/esm",+    "build:watch": "yarn build:esm -- --watch",     "storybook": "start-storybook -p 6006",     "test": "jest",
    "test": "tsc --noEmit --project ./tsconfig.json && jest",
EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

     "test": "tsc --noEmit --project ./tsconfig.json && jest",     "test:watch": "yarn test -- --watchAll"   },+  "style": "dist/index.css",

why the move?

I put these next to main and module because they are the corresponding "main" entrypoint for these other techs: styles and typings.

EdwardIrby

comment created time in 3 days

Pull request review commentpluralsight/design-system

Feat/searchinput ts conversion

     "test": "jest",     "test:watch": "yarn test -- --watchAll"   },+  "types": "dist/esm/index.d.ts",

want to add the style key too?

EdwardIrby

comment created time in 3 days

PullRequestReviewEvent
PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha efb30f6790e087c75bb1d525fb5363cea3abc274

test(card): key on array in test

view details

push time in 3 days

push eventpluralsight/design-system

Dane Thurber

commit sha c860e51de9efb97d7955241003e76ed691e65b66

refactor(icon): convert to typescript BREAKING CHANGE: drop support for antiquated css prop Co-authored-by: Edward Irby<e.irby@pm.me>

view details

Dane Thurber

commit sha c1fc58344edace2528e33a662a5b559e1aba2e4f

test(card): update because of icon change Co-authored-by: Edward Irby<e.irby@pm.me>

view details

Dane Thurber

commit sha 5dd8ca313a417f07a1666e47e7cc83e71d87af41

test(tag): update because of icon changes Co-authored-by: Edward Irby <e.irby@pm.me>

view details

Dane Thurber

commit sha 16c2b10cbe9ca6d1ddf23838f3afd74994a66890

ci: ignore ts dist files

view details

Dane Thurber

commit sha d06d70e183b87b25dd0086daf55285adfa794ac9

ci: force workspaces

view details

Dane Thurber

commit sha b0cb5cd5710aa322683033a9ce8e8cfb867695e3

fix(util): drop storybook dep to fix circle dep

view details

Dane Thurber

commit sha af88aca2e408e81ddaad1e79c38587a708374dd5

Merge pull request #1345 from pluralsight/refactor/ts-icon-part-deux Icon convert to typescript

view details

Dane Thurber

commit sha 36d4ee9b82578db17f65b837c34b3f7ce3ebe31a

build: publish - @pluralsight/ps-design-system-docs@0.8.2 - @pluralsight/ps-design-system-actionmenu@15.2.2 - @pluralsight/ps-design-system-appframe@1.2.2 - @pluralsight/ps-design-system-avatar@6.1.2 - @pluralsight/ps-design-system-badge@10.1.2 - @pluralsight/ps-design-system-banner@6.1.2 - @pluralsight/ps-design-system-breadcrumb@7.1.2 - @pluralsight/ps-design-system-button@18.4.2 - @pluralsight/ps-design-system-card@14.1.2 - @pluralsight/ps-design-system-carousel@10.2.2 - @pluralsight/ps-design-system-checkbox@6.2.2 - @pluralsight/ps-design-system-circularprogress@6.4.0 - @pluralsight/ps-design-system-datawell@4.1.2 - @pluralsight/ps-design-system-datepicker@7.2.2 - @pluralsight/ps-design-system-dialog@8.3.2 - @pluralsight/ps-design-system-drawer@7.3.2 - @pluralsight/ps-design-system-dropdown@9.2.2 - @pluralsight/ps-design-system-emptystate@8.2.2 - @pluralsight/ps-design-system-errors@8.1.2 - @pluralsight/ps-design-system-focusmanager@5.1.2 - @pluralsight/ps-design-system-form@7.1.2 - @pluralsight/ps-design-system-halo@7.1.2 - @pluralsight/ps-design-system-icon@19.0.0 - @pluralsight/ps-design-system-layout@7.1.2 - @pluralsight/ps-design-system-linearprogress@5.2.2 - @pluralsight/ps-design-system-link@10.3.2 - @pluralsight/ps-design-system-navbar@1.2.2 - @pluralsight/ps-design-system-navbrand@1.2.2 - @pluralsight/ps-design-system-navcookiebanner@1.3.2 - @pluralsight/ps-design-system-navitem@1.4.2 - @pluralsight/ps-design-system-navuser@1.2.2 - @pluralsight/ps-design-system-note@7.1.2 - @pluralsight/ps-design-system-position@4.2.2 - @pluralsight/ps-design-system-radio@7.2.2 - @pluralsight/ps-design-system-row@10.1.2 - @pluralsight/ps-design-system-screenreaderonly@2.1.2 - @pluralsight/ps-design-system-scrollable@1.2.2 - @pluralsight/ps-design-system-searchinput@5.2.2 - @pluralsight/ps-design-system-starrating@7.2.2 - @pluralsight/ps-design-system-storybook-addon-theme@7.1.2 - @pluralsight/ps-design-system-storybook-preset@0.2.2 - @pluralsight/ps-design-system-switch@6.2.2 - @pluralsight/ps-design-system-tab@15.2.2 - @pluralsight/ps-design-system-table@9.1.2 - @pluralsight/ps-design-system-tag@7.1.2 - @pluralsight/ps-design-system-text@16.1.2 - @pluralsight/ps-design-system-textarea@7.1.2 - @pluralsight/ps-design-system-textinput@8.2.2 - @pluralsight/ps-design-system-theme@5.1.2 - @pluralsight/ps-design-system-tooltip@6.1.2 - @pluralsight/ps-design-system-typeahead@4.2.2 - @pluralsight/ps-design-system-util@5.4.2 - @pluralsight/ps-design-system-verticaltabs@4.2.2 - @pluralsight/ps-design-system-viewtoggle@6.1.2

view details

jaketrent

commit sha e239442edbb9856966b876de0e05c6490a13fe6f

Merge branch 'master' into feat/tscard * master: build: publish fix(util): drop storybook dep to fix circle dep ci: force workspaces ci: ignore ts dist files test(tag): update because of icon changes test(card): update because of icon change refactor(icon): convert to typescript

view details

jaketrent

commit sha 74cf68b30dcb2de49aefc4f1b942e5e8d51ffc01

build(card): tsc strict mode

view details

push time in 3 days

Pull request review commentpluralsight/design-system

Icon convert to typescript

+{+  "extends": "./tsconfig.json",+  "include": ["src"],+  "exclude": [+    ".storybook",+    "node_modules",+    "dist",+    "**/*.spec.*",+    "**/*.story.*"+  ],+  "compilerOptions": {+    "declaration": true,+    "outDir": "dist",+    "rootDir": "src"

strict eventually?

danethurber

comment created time in 3 days

Pull request review commentpluralsight/design-system

Icon convert to typescript

 const { promises: fs } = require('fs') const fg = require('fast-glob') const path = require('path') const SVGO = require('svgo')+ const svgo = new SVGO({   plugins: [     { removeXMLNS: true },     { removeDimensions: true },     { removeAttrs: { attrs: '(stroke|fill)' } }   ] })-const regex = /aria-label=(?:"|')([\w ]+)(?:"|')/-const addAria = (svg, name) =>-  regex.test(svg) ? svg : svg.replace(/<svg/, `<svg aria-label="${name} icon"`)++const ariaLabelRegEx = /aria-label=(?:"|')([\w ]+)(?:"|')/

I don't remember this change last time. But this time, I'm not seeing any change that seems significant. Am I missing something?

danethurber

comment created time in 3 days

Pull request review commentpluralsight/design-system

Icon convert to typescript

 const SVGO = require('svgo')  const svgo = new SVGO({ plugins: [{ removeXMLNS: true }] }) -const regex = />/-const componentTemplate = (svg, componentName, core) => `-import React from 'react'-import PropTypes from 'prop-types'-import Icon from ${-  core ? "'../index.js'" : "'@pluralsight/ps-design-system-icon'"-}-export const ${componentName} =  React.forwardRef(function ${componentName}({'aria-label': ariaLabel, ...props}, ref){ return (-  <Icon {...props} ref={ref}>-    ${svg.replace(-      regex,-      "role='img' {...(ariaLabel && { 'aria-label': ariaLabel })}>"-    )}-  </Icon>-)})-${componentName}.displayName = '${componentName}'-${componentName}.propTypes = {-  'aria-label': PropTypes.string,+exports.generateComponents = async ({

Is this just a file resort? Or are there some significant changes you would highlight here?

danethurber

comment created time in 3 days

Pull request review commentpluralsight/design-system

Icon convert to typescript

 default:  before_script:   - yarn config set ignore-engines true+  - yarn config set workspaces-experimental true

What is this voodoo?

danethurber

comment created time in 3 days

PullRequestReviewEvent
PullRequestReviewEvent

pull request commentpluralsight/design-system

Icon convert to typescript

All checks pass. Well, I'm sold. :) Reviewing...

danethurber

comment created time in 3 days

Pull request review commentpluralsight/design-system

Card TS Convert

+import polyfillFocusWithin from 'focus-within'

Lots o changes to this file around the sub components. In short, there were a lot. Now there are a lot fewer.

jaketrent

comment created time in 3 days

PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha 40c76f5226639e1d7fa0aeaa81e6d3240e2bdbd1

style(card): rm unused comment

view details

push time in 3 days

Pull request review commentpluralsight/design-system

Card TS Convert

 const createNodeMock = () => document.createElement('div') initStoryshots({   configPath: path.resolve(__dirname, '../../../.storybook'),   framework: 'react',+  // @ts-ignore

This is the thing I feel the worst about.

The answer in other packages has been to remove this line. Here, it broke Shiitake in the storyshots.

Putting it back, the typings for the package don't even indicate that this is available.

Perhaps there are new typings? I haven't looked yet. Perhaps we could patch/extend the typings locally. Haven't tried that yet either.

jaketrent

comment created time in 3 days

PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha 6707c1116ca0c99e91297b07dda4ae1c383fb0a3

test(card): ts-ignore createNodeMock for shiitake

view details

jaketrent

commit sha a7147787463ccca4ab689ac101edfd6ddbaed4cd

refactor(card): rm filterReactComponents

view details

jaketrent

commit sha 020c29224e9647655f16b5fdc57d798ecfafbacb

refactor(card): rm prop-types

view details

jaketrent

commit sha 3aec56b018551a2a9ddecd6a9eb735bbffe1a4e1

refactor(card): type style functions

view details

jaketrent

commit sha c5b1c195e442f3e1d33f338e80cb57d8c8cd54ce

refactor(card): use named theme.names import

view details

jaketrent

commit sha fe8565173e03749048b886575556b764cc5088e6

refactor(card): a few more specific types

view details

jaketrent

commit sha 31fd118776e604104a2fb91dec9b04415455a73d

refactor(card): specify component prop types

view details

jaketrent

commit sha 4d4d84e293e2cba800ca3800f1e1049099b343ae

refactor(card): replace defaultProps

view details

jaketrent

commit sha 2a0588853a5edb7f3ec563d7c1431fb55d736624

refactor(card): use standard canUseDOM

view details

jaketrent

commit sha 2fae2e2ffca7bdde7d45db54b09c35e0e55e216e

refactor(card): type style functions better

view details

jaketrent

commit sha 88e93f3b00501bc92b5beebdafdc202a62c0dffa

refactor(card): rename internal CardComponent to Card

view details

push time in 3 days

PR opened pluralsight/design-system

Card TS Convert

Instructions

  • fill in title: format of "<package name>: short description"
  • label: attach bug or enhancement request label

What You're Solving

  • Any links to #57 related issues
  • Explanation of the purpose of the code

Design Decisions

  • Why you made certain design decisions
  • Anything to watch out for
  • Any input you're seeking related to the design
  • Tradeoffs you conciously made

How to Verify

  • Steps needed to independently verify additions
+385 -434

0 comment

14 changed files

pr created time in 3 days

push eventpluralsight/design-system

jaketrent

commit sha 6844332b30034b7d81aeeeb7a0f2600628271537

refactor(breadcrumb): rename js to ts files

view details

jaketrent

commit sha 7a713ce7ebb43acff9a1b219efa0cd029a8ac8c5

build(breadcrumb): add tsconfigs

view details

jaketrent

commit sha d15bee6d8a18ec8cc1fa6c65edcfa73e1ddadc12

refactor(breadcrumb): initial tsc convert

view details

jaketrent

commit sha 52d72a0fd91324a1f313b39aeeac197ef2ad6f3a

test(breadcrumb): pass as tsx

view details

jaketrent

commit sha 6af914312f92589ca2219dd2eb9be716035ac996

refactor(breadcrumb): remove filter-react-props

view details

jaketrent

commit sha e0f3833e5c19f56479fd8d2704a1a7f797d0b462

refactor(breadcrumb): remove prop-types

view details

jaketrent

commit sha 4d8419e6e4811f45def0199054a5ff89bf0fe4ce

refactor(breadcrumb): remove defaultProps

view details

jaketrent

commit sha 7f30c27890ac27be02234be688d2a418032adbd1

style(breadcrumb): remove unneeded comment

view details

jaketrent

commit sha 930f82371a11ec6cba98d1f875418f06a31737dd

build(breadcrumb): update npm-scripts

view details

Edward Irby

commit sha c8685a9af7ced52913878cbcf09e4ccff0930c12

Feat/radio ts conversion (#1342) * build(radio): rename file extensions * feat(radio): remove js imports * feat(radio): convert to typescript * feat(radio): remove unused import * feat(radio): requested pr changes * test(radio): update snapshots * test(radio): lint:fix

view details

Jake Trent

commit sha 44db848b0bf31175b5650f3b3136bd171d783eef

Merge pull request #1343 from pluralsight/feat/tsbreadcrumb Breadcrumb TS convert

view details

jaketrent

commit sha dc94e074301585884a13a7c2a90973003dabcfd5

test(card): update jest.config.js

view details

jaketrent

commit sha 6af08360d5a252ab77fa6aa7728af278f6bb4a58

refactor(card): separate themeName from allProps

view details

jaketrent

commit sha 3c5ed56c82018d0d21aab5abf82bcf7b2f16bd7e

style(card): rm console.log

view details

jaketrent

commit sha 6f55c9188e13f59dd4b58499ee7d6b561d65cdc3

Merge branch 'master' into feat/tscard * master: Feat/radio ts conversion (#1342) build(breadcrumb): update npm-scripts style(breadcrumb): remove unneeded comment refactor(breadcrumb): remove defaultProps refactor(breadcrumb): remove prop-types refactor(breadcrumb): remove filter-react-props test(breadcrumb): pass as tsx refactor(breadcrumb): initial tsc convert build(breadcrumb): add tsconfigs refactor(breadcrumb): rename js to ts files

view details

push time in 3 days

issue commentpluralsight/design-system

fix(dropdown): dropdown menu closes on scroll

Team triage: Max-height at 400px, cuz easy peazy.

oleksandrKariaka

comment created time in 4 days

push eventpluralsight/design-system

jaketrent

commit sha 8d88bad34db6c697b625ad9ce497b20e10ccb832

refactor(card): more tsc; lots of any/todos; keep going

view details

push time in 4 days

Pull request review commentpluralsight/design-system

Breadcrumb TS convert

+import Button from '@pluralsight/ps-design-system-button'+import { CaretLeftIcon } from '@pluralsight/ps-design-system-icon'+import { RefForwardingComponent } from '@pluralsight/ps-design-system-util'+import { css } from 'glamor'+import React from 'react'++import stylesheet from '../css'++const styles = {+  breadcrumb: () => css(stylesheet['.psds-breadcrumb'])+}++interface BreadcrumbProps+  extends Omit<+    React.HTMLAttributes<HTMLDivElement>,+    'disabled' | 'href' | 'onClick'

Hey, I think the point on the surrounding div is a fair point. I felt that myself as I was realizing what we had done there. But for now, I'm just wanting to type what is there with minimal collateral damage.

jaketrent

comment created time in 6 days

PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha 6844332b30034b7d81aeeeb7a0f2600628271537

refactor(breadcrumb): rename js to ts files

view details

jaketrent

commit sha 7a713ce7ebb43acff9a1b219efa0cd029a8ac8c5

build(breadcrumb): add tsconfigs

view details

jaketrent

commit sha d15bee6d8a18ec8cc1fa6c65edcfa73e1ddadc12

refactor(breadcrumb): initial tsc convert

view details

jaketrent

commit sha 52d72a0fd91324a1f313b39aeeac197ef2ad6f3a

test(breadcrumb): pass as tsx

view details

jaketrent

commit sha 6af914312f92589ca2219dd2eb9be716035ac996

refactor(breadcrumb): remove filter-react-props

view details

jaketrent

commit sha e0f3833e5c19f56479fd8d2704a1a7f797d0b462

refactor(breadcrumb): remove prop-types

view details

jaketrent

commit sha 4d8419e6e4811f45def0199054a5ff89bf0fe4ce

refactor(breadcrumb): remove defaultProps

view details

jaketrent

commit sha 7f30c27890ac27be02234be688d2a418032adbd1

style(breadcrumb): remove unneeded comment

view details

jaketrent

commit sha 930f82371a11ec6cba98d1f875418f06a31737dd

build(breadcrumb): update npm-scripts

view details

Jake Trent

commit sha 44db848b0bf31175b5650f3b3136bd171d783eef

Merge pull request #1343 from pluralsight/feat/tsbreadcrumb Breadcrumb TS convert

view details

push time in 6 days

delete branch pluralsight/design-system

delete branch : feat/tsbreadcrumb

delete time in 6 days

PR merged pluralsight/design-system

Breadcrumb TS convert

A couple interesting challenges here, surprisingly. The one that had me going for a while was related to how we split props. Some go onto a button, others onto a div. Getting the HTMLAttributes of props and ref types right was "fun". See the "Omit" line for the light bulb.

+100 -318

0 comment

14 changed files

jaketrent

pr closed time in 6 days

create barnchpluralsight/design-system

branch : feat/tscard

created branch time in 6 days

PullRequestReviewEvent

Pull request review commentpluralsight/design-system

Feat/radio ts conversion

+{+  "extends": "./tsconfig.json",+  "include": ["src"],+  "exclude": [+    ".storybook",+    "node_modules",+    "dist",+    "**/*.spec.*",+    "**/*.story.*"+  ],+  "compilerOptions": {+    "declaration": true,+    "outDir": "dist",+    "rootDir": "src"

oh, yeah, I think you're right. because tsconfig.build.json extends tsconfig.json

EdwardIrby

comment created time in 6 days

PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha 90601298f80be1e982e2ee171198b466c02c9120

build(slack-issues): add dir to store the slack issues project

view details

push time in 6 days

IssuesEvent

issue commentpluralsight/design-system

fix(dropdown): dropdown menu closes on scroll

@sweeting Thanks for the options. It seems like we'll want one of this to accompany our current close-on-scroll functionality so that we cover all scenarios. I'll reopen. We need to triage to decide on a solution.

oleksandrKariaka

comment created time in 6 days

issue openedpluralsight/design-system

datepicker: find onSubBlur bug

Bug

Expected behavior

Actual behavior

A few related things:

  • Will's screencast and thread: https://pluralsight.slack.com/archives/C70HPSJPP/p1602861794095000
  • In Will's experience, null always returned, even when date is valid/full.
  • In Jake's experience, null always returned except for the blur on the mm field, then the value is returned
  • In test, the onSubBlur tests pass, but upon console logging, the internal behavior is odd (see below) (ie, why would you ever set nextDate as anything less than a full date.
  • The predictability of what happens on blur just feels fragile. Some thing is not quite right.
  • There is an uncontrolled-to-controlled error from react on blur (see below)

TEST

~  13     it.only('should call onBlur when onBlur is called for a valid date', () => {
   12       const onBlurMock = jest.fn()
   11       const { getByDisplayValue } = render(
   10         <DatePicker value="8/14/2001" onSubBlur={onBlurMock} />
    9       )
~   8       fireEvent.blur(getByDisplayValue('14'))
    7       expect(onBlurMock).toHaveBeenCalledTimes(1)
    6       expect(onBlurMock).toHaveBeenCalledWith('8/14/2001')
+   5       fireEvent.blur(getByDisplayValue('14'))
+   4       expect(onBlurMock).toHaveBeenCalledTimes(2)
+   3       expect(onBlurMock).toHaveBeenCalledWith('8/14/2001')
+   2       fireEvent.blur(getByDisplayValue('14'))
+   1       expect(onBlurMock).toHaveBeenCalledTimes(3)
+ 41        expect(onBlurMock).toHaveBeenCalledWith('8/14/2001')

OUTPUTS:
    console.log
      { currentDateOverwrittenByEventValue: { dd: '14', mm: 8, yyyy: 2001 },
        alwaysReValidateDay: 14,
        nextDate: { dd: 14 },
        onBlurDate: { dd: 14, mm: 8, yyyy: 2001 } }

      at handleSubFieldBlur (packages/datepicker/src/react/index.js:164:13)

    console.log
      { currentDateOverwrittenByEventValue: { dd: '14' },
        alwaysReValidateDay: 14,
        nextDate: { dd: 14 },
        onBlurDate: { dd: 14 } }

      at handleSubFieldBlur (packages/datepicker/src/react/index.js:164:13)

    console.log
      { currentDateOverwrittenByEventValue: { dd: '14' },
        alwaysReValidateDay: 14,
        nextDate: { dd: 14 },
        onBlurDate: { dd: 14 } }

OTHER ERROR:

console.error
      Warning: A component is changing a controlled input of type undefined to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-control
led-components

created time in 6 days

Pull request review commentpluralsight/design-system

Feat/radio ts conversion

 import { compose, css } from 'glamor'-import PropTypes from 'prop-types'-import React, { useState } from 'react'+import React, { HTMLAttributes, useState, useContext } from 'react' -import filterReactProps from '@pluralsight/ps-design-system-filter-react-props' import Halo from '@pluralsight/ps-design-system-halo'-import { useTheme } from '@pluralsight/ps-design-system-theme'-import { combineFns } from '@pluralsight/ps-design-system-util'-import { useRadioContext } from './context.js'-import stylesheet from '../css/index.js'+import { useTheme, names } from '@pluralsight/ps-design-system-theme'+import { combineFns, ValueOf } from '@pluralsight/ps-design-system-util'+import { RadioContext } from './context'+import stylesheet from '../css'  const styles = {-  button: ({ disabled }) =>+  button: (disabled: boolean) =>     compose(       css(stylesheet['.psds-radio-button']),       disabled && css(stylesheet['.psds-radio-button--disabled'])     ),-  circle: (themeName, checked) =>+  circle: (themeName: ValueOf<typeof names>, checked: boolean) =>

Yes, I see the import. I'm just saying it's not immediately clear what it is without tracing it to its declaration. This is an indicator to me that "names" isn't descriptive enough. "themeNames" or "Theme.names" wouldn't need to be traced to its declaration, because would could reasonably rely on the meaning of the name.

EdwardIrby

comment created time in 7 days

PullRequestReviewEvent

Pull request review commentpluralsight/design-system

Feat/radio ts conversion

+{+  "extends": "./tsconfig.json",+  "include": ["src"],+  "exclude": [+    ".storybook",+    "node_modules",+    "dist",+    "**/*.spec.*",+    "**/*.story.*"+  ],+  "compilerOptions": {+    "declaration": true,+    "outDir": "dist",+    "rootDir": "src"
    "rootDir": "src",
    "strict": true
EdwardIrby

comment created time in 7 days

Pull request review commentpluralsight/design-system

Feat/radio ts conversion

 const Button = React.forwardRef(({ value, label, ...props }, forwardedRef) => {       </div>        <input-        {...filterReactProps(props, { tagName: 'input' })}-        onClick={disabled ? null : handleClick}+        {...props}+        onClick={disabled ? () => {} : handleClick}

undefined seems to also be a valid type that may be a little more obvious.

EdwardIrby

comment created time in 7 days

Pull request review commentpluralsight/design-system

Feat/radio ts conversion

-import filterReactProps from '@pluralsight/ps-design-system-filter-react-props' import { useTheme } from '@pluralsight/ps-design-system-theme' import { css } from 'glamor'-import PropTypes from 'prop-types'-import React from 'react'-import { RadioContext } from './context.js'+import React, { HTMLAttributes } from 'react'+import { RadioContext } from './context' -import stylesheet from '../css/index.js'+import stylesheet from '../css'  const styles = {-  buttonContainer: _ => css(stylesheet['.psds-radio-group__button-container']),-  group: disabled =>+  buttonContainer: () => css(stylesheet['.psds-radio-group__button-container']),+  group: (disabled: boolean) =>     css(       stylesheet['.psds-radio-group'],       disabled && stylesheet['.psds-radio-group--disabled']     ),-  label: themeName =>+  label: (themeName: string) =>

ValueOf<typeof Theme.names> seems more accurate.

EdwardIrby

comment created time in 7 days

Pull request review commentpluralsight/design-system

Feat/radio ts conversion

 const styles = {   circleInner: () => css(stylesheet['.psds-radio-button__circle-inner']),   halo: () => css(stylesheet['.psds-radio-button__halo']),   input: () => css(stylesheet['.psds-radio-button__input']),-  label: themeName =>+  label: (themeName: ValueOf<typeof names>) =>     compose(       css(stylesheet['.psds-radio-button__label']),       css(stylesheet[`.psds-radio-button__label.psds-theme--${themeName}`])     ) } -const isChecked = (a, b) => a === b+const isChecked = (a: React.ReactText, b?: React.ReactText) => a === b -const Button = React.forwardRef(({ value, label, ...props }, forwardedRef) => {+export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onClick'> {+  label: React.ReactNode+  onBlur?: (e?: React.FocusEvent) => void+  onClick?: (e?: React.MouseEvent, v?: React.ReactText) => void

I'd give more than one letter names to these params. e is perhaps easily guessable. I'd go for evt or event to make sure. v, I really don't know without reading more code.

EdwardIrby

comment created time in 7 days

Pull request review commentpluralsight/design-system

Feat/radio ts conversion

 import { compose, css } from 'glamor'-import PropTypes from 'prop-types'-import React, { useState } from 'react'+import React, { HTMLAttributes, useState, useContext } from 'react' -import filterReactProps from '@pluralsight/ps-design-system-filter-react-props' import Halo from '@pluralsight/ps-design-system-halo'-import { useTheme } from '@pluralsight/ps-design-system-theme'-import { combineFns } from '@pluralsight/ps-design-system-util'-import { useRadioContext } from './context.js'-import stylesheet from '../css/index.js'+import { useTheme, names } from '@pluralsight/ps-design-system-theme'+import { combineFns, ValueOf } from '@pluralsight/ps-design-system-util'+import { RadioContext } from './context'+import stylesheet from '../css'  const styles = {-  button: ({ disabled }) =>+  button: (disabled: boolean) =>     compose(       css(stylesheet['.psds-radio-button']),       disabled && css(stylesheet['.psds-radio-button--disabled'])     ),-  circle: (themeName, checked) =>+  circle: (themeName: ValueOf<typeof names>, checked: boolean) =>

I'd either use Theme.names or alias this themeNames. Names in this context isn't immediately identifiable.

EdwardIrby

comment created time in 7 days

PullRequestReviewEvent
PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha 930f82371a11ec6cba98d1f875418f06a31737dd

build(breadcrumb): update npm-scripts

view details

push time in 7 days

create barnchpluralsight/design-system

branch : feat/tsbreadcrumb

created branch time in 7 days

PR opened pluralsight/design-system

Breadcrumb TS convert

A couple interesting challenges here, surprisingly. The one that had me going for a while was related to how we split props. Some go onto a button, others onto a div. Getting the HTMLAttributes of props and ref types right was "fun". See the "Omit" line for the light bulb.

+93 -313

0 comment

14 changed files

pr created time in 7 days

Pull request review commentpluralsight/design-system

util typescript

 interface ActionMenuComponent  export const ActionMenu = React.forwardRef<HTMLUListElement, Props>(   ({ onClick, onClose, children, origin, ...props }, forwardedRef) => {-    const fallbackRef = React.useRef()-    const ref = forwardedRef || fallbackRef+    const ref = React.useRef<HTMLUListElement>()+    useImperativeHandle(forwardedRef, () => ref.current)

Not null problem for you like mine, eh? 🤷

danethurber

comment created time in 7 days

PullRequestReviewEvent
PullRequestReviewEvent

push eventpluralsight/design-system

jaketrent

commit sha 36927d30ce930a0d072bc3d9838877d3e6a0db25

build(checkbox): mv js to ts files

view details

jaketrent

commit sha ac6d700028320e6bd8355af1b1be200d048d6430

refactor(checkbox): convert to ts

view details

jaketrent

commit sha 52ceacbc0bd814bd1e67d9534f0cf8393e3073f5

build(checkbox): convert scripts to tsc

view details

jaketrent

commit sha 340552aca49bd09e0a2cb285795e73711928f25d

test(checkbox): tsc tests

view details

jaketrent

commit sha 0669260be08fd80b0c73fe2e551f77ebce33d701

test(checkbox): tests pass, regen snapshot

view details

jaketrent

commit sha e2a96a0e23c26ced3914ce9ac29a113979f3e6f7

refactor(checkbox): remove filter-react-props

view details

jaketrent

commit sha 44a24824a349a260af0f0d7acc3ed6f4b2b43f6d

fix(checkbox): type the omit call

view details

jaketrent

commit sha 0b7bd5569f0f491d5f021b279f595614a194f3b5

Merge branch 'master' into feat/checkts * master: build: publish build: publish build: publish build: commit lock refactor(halo): make props to styles required build(halo): tsc strict build(halo): return to storyshots.spec.tsx and cleanup test(halo): rename storyshots file for ts refactor(halo): fully convert to typescript refactor(halo): move to ts build refactor(halo): move to ts files

view details

jaketrent

commit sha 820871b714348ba1d0dceda0fa4c08df100d5023

test(form): update snapshot that includes checkbox

view details

Jake Trent

commit sha cc7a2474a32227d3e5f351c21d01315b58145b64

refactor(checkbox): make onCheck event type more specific Co-authored-by: Dane Thurber <dane.thurber@gmail.com>

view details

Jake Trent

commit sha cabaffb86bba25789ef63777ca07c42c7e603203

refactor(checkbox): use reacttext type as value Co-authored-by: Dane Thurber <dane.thurber@gmail.com>

view details

jaketrent

commit sha 2421ea4a5c333de9dc3bd088d64d6098f04b3c0f

refactor(checkbox): tsc strict; fix first swath of errors

view details

jaketrent

commit sha c893a715fe512cab9da7cba96fd8d01615a65a0c

refactor(checkbox): tsc strict mode

view details

jaketrent

commit sha 1f70409cdbdfb94ae986408f72a29315495ad225

refactor(badge): tsc strict mode

view details

Jake Trent

commit sha 0875fbe44db9ac84685eb7f544b7b7c84546543c

Merge pull request #1337 from pluralsight/feat/checkts Checkbox TS Convert

view details

push time in 7 days

delete branch pluralsight/design-system

delete branch : feat/checkts

delete time in 7 days

PR merged pluralsight/design-system

Reviewers
Checkbox TS Convert

Instructions

  • fill in title: format of "<package name>: short description"
  • label: attach bug or enhancement request label

What You're Solving

  • Any links to #57 related issues
  • Explanation of the purpose of the code

Design Decisions

  • Why you made certain design decisions
  • Anything to watch out for
  • Any input you're seeking related to the design
  • Tradeoffs you conciously made

How to Verify

  • Steps needed to independently verify additions
+343 -267

1 comment

20 changed files

jaketrent

pr closed time in 7 days

push eventpluralsight/design-system

jaketrent

commit sha 542df09f3674d0c2641e9386567245c31aa3b4c0

build(banner): mv js to ts files

view details

jaketrent

commit sha 03c515fe165e61a83351441aed62c34d0332b19c

Merge branch 'master' into feat/bannerts * master: build: publish build: publish build: publish build: commit lock refactor(halo): make props to styles required build(halo): tsc strict build(halo): return to storyshots.spec.tsx and cleanup test(halo): rename storyshots file for ts refactor(halo): fully convert to typescript refactor(halo): move to ts build refactor(halo): move to ts files

view details

jaketrent

commit sha 1362fd28edfb7c4e1aebf87530b744361e3450dd

refactor(banner): ts conversion

view details

jaketrent

commit sha afc67f74adc00693abd97dbc204491c5ad529590

fix(banner): align with snapshot in blue default color

view details

jaketrent

commit sha 2089472317ee8b536a4de235dbe7712da7643a94

Merge branch 'master' into feat/bannerts * master: Feat/text ts conversion (#1340) fix(docs): ssr and sessionstorage

view details

jaketrent

commit sha 09a06704eee10fad0d52f26a98cf5c136c2f4057

refactor(banner): keyMirror colors vars

view details

jaketrent

commit sha 809af9d77bda527c7ade898f4942e7db3ade50c0

build(banner): add tsconfig.build.json file

view details

jaketrent

commit sha 5e015d8d89e20df8b1f4e61265c6c0f051956f55

build(banner): tsc strict mode; noop

view details

jaketrent

commit sha 90ebe14c3dd83f97221b5be48cf70e7a30706c89

build(banner): add packagejson entries for style and types

view details

jaketrent

commit sha 560444add003ec5ed29b8ac00758153f70f9dcaa

refactor(banner): name empty static interface

view details

jaketrent

commit sha c1ce8a9c91b5c9ddfaebcdb275b63ffd11538a1e

build(banner): add temp icon .d.ts until it's converted

view details

Jake Trent

commit sha 6c95ca52b6ea5edff5a3c32cfcb5deb33626a42c

Merge pull request #1339 from pluralsight/feat/bannerts Banner TS Convert

view details

push time in 7 days

delete branch pluralsight/design-system

delete branch : feat/bannerts

delete time in 7 days

PR merged pluralsight/design-system

Reviewers
Banner TS Convert

Instructions

  • fill in title: format of "<package name>: short description"
  • label: attach bug or enhancement request label

What You're Solving

  • Any links to #57 related issues
  • Explanation of the purpose of the code

Design Decisions

  • Why you made certain design decisions
  • Anything to watch out for
  • Any input you're seeking related to the design
  • Tradeoffs you conciously made

How to Verify

  • Steps needed to independently verify additions
+164 -129

1 comment

17 changed files

jaketrent

pr closed time in 7 days

push eventpluralsight/design-system

jaketrent

commit sha 58fd9cf7b04dd8ba17b1abf784249c38b5f5c0d2

refactor(circularprogress): mv .js to .ts

view details

jaketrent

commit sha e3c20f9c4dcb16128880bd4491215110f22254f2

refactor(circularprogress): fix imports

view details

jaketrent

commit sha 495c2d34c5c37d51eaf09f200745446e3bee2c3f

feat(screenreaderonly): support other html props in types

view details

jaketrent

commit sha f2b5aed2275192b11c12ec624bb87cfd175229b5

feat(circularprogress): add typescript typings

view details

jaketrent

commit sha 853178c571473531297c18e75010d939712b54bc

refactor(circularprogress): rm old .d.ts file

view details

jaketrent

commit sha c4d25e9e05496992077df5931bd5191cf396699f

build(circularprogress): update build scripts to ts

view details

jaketrent

commit sha 1c5adfa704ce430ddb369860df824b562a2d0547

build(circularprogress): remove prop-types

view details

jaketrent

commit sha 8263b25814154352e69c4abd91f75060e46ae54d

refactor(circularprogress): default size without defaultProps

view details

jaketrent

commit sha 0f57cbba908fefa413fb429028e6c03db14d8c41

Merge branch 'master' into feat/circprogts * master: Feat/linerprogress ts conversion (#1332) refactor(docs): adjust max-width of main

view details

jaketrent

commit sha d379548db72d817ebbe37e7286da4b2a485f7d0b

build(circularprogress): tsc strict, remove filterReactProps

view details

jaketrent

commit sha c9328b6abb26a7afdb034459b78fbb48e5078edf

build(circularprogress): tsc strict for build too

view details

Jake Trent

commit sha 7d8391413ebabc1ab595892c07a27ef2b8080dbf

style(circularprogress): remove commented code Co-authored-by: Dane Thurber <dane.thurber@gmail.com>

view details

jaketrent

commit sha 7a515e27a6c59983d1ef38e877d8ba44be89bd68

Merge branch 'master' into feat/circprogts * master: Feat/text ts conversion (#1340) fix(docs): ssr and sessionstorage build: publish build: publish build: publish build: commit lock refactor(halo): make props to styles required build(halo): tsc strict build(halo): return to storyshots.spec.tsx and cleanup test(halo): rename storyshots file for ts refactor(halo): fully convert to typescript refactor(halo): move to ts build refactor(halo): move to ts files refactor(prop-types): change method of determining NODE_ENV to be compat with webpack5

view details

jaketrent

commit sha 7631a16dfbacb0a5720db620fb9fe4699c5a3572

Merge branch 'feat/circprogts' of github.com:pluralsight/design-system into feat/circprogts * 'feat/circprogts' of github.com:pluralsight/design-system: style(circularprogress): remove commented code

view details

jaketrent

commit sha 614ccf20137e582dcd5eaddd57afef6156a15a27

build(circularprogress): add packagejson entries for style and types

view details

Jake Trent

commit sha 660f9de448092d4cad50b5d7c31344b8fc73578a

Merge pull request #1334 from pluralsight/feat/circprogts CircularProgress TS Convert

view details

push time in 7 days

delete branch pluralsight/design-system

delete branch : feat/circprogts

delete time in 7 days

PR merged pluralsight/design-system

Reviewers
CircularProgress TS Convert

The yarn-script for test has a nice addition for tsc that Justin had put in, that I kept here, and I think would be good to have generally.

Another diff on this one is that strict: true in tsconfig. I think we should do this everywhere as well.

+325 -88

1 comment

15 changed files

jaketrent

pr closed time in 7 days

push eventpluralsight/design-system

jaketrent

commit sha c1ce8a9c91b5c9ddfaebcdb275b63ffd11538a1e

build(banner): add temp icon .d.ts until it's converted

view details

push time in 7 days

more