How to use the chroma-js.valid function in chroma-js

handleSave = () => {
    // checks color in color picker input is valid - can be color name in letters or hex
    if (chroma.valid(this.state.color)) {
      // checks label name is not empty
      if ( this.state.label !== '') {
        this.props.onLabelSaved({
          value: this.state.color,
          label: this.state.label,
          color: this.state.color,
          description: this.state.description,
          id: this.state.labelId
        });

        this.props.handleClose();
      }
      else {
        alert('add a name to the label to be able to save');
      }
    }

handleHexChange = (e) => {
    if (e && e.target && e.target.value) {
      const hexColor = e.target.value;
      // if it's a valid colour - css
      //   if (chroma.valid(hexColor)) {
      // if it is expressed as hex
      //   if (!hexColor.includes('#')) {
      // hexColor = chroma(hexColor).hex();
      //   }
      this.setState({ color: chroma.valid(hexColor) ? chroma(hexColor).name() : hexColor });
    //   }
    }
    else if (e && e.target && e.target.value === '') {
      this.setState({ color: '' });
    }
  }

const lightnessMap = [
    0.95,
    0.85,
    0.75,
    0.65,
    0.55,
    0.45,
    0.35,
    0.25,
    0.15,
    0.05
  ];
  const saturationMap = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32];

  const validColor = chroma.valid(colorInput.trim())
    ? chroma(colorInput.trim())
    : chroma("#000");

  const lightnessGoal = validColor.get("hsl.l");
  const closestLightness = lightnessMap.reduce((prev, curr) =>
    Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal)
      ? curr
      : prev
  );

  const baseColorIndex = lightnessMap.findIndex(l => l === closestLightness);

  const colors = lightnessMap
    .map(l => validColor.set("hsl.l", l))
    .map(color => chroma(color))
    .map((color, i) => {

handleManualColorChange = (e) => {
    if (e && e.target && e.target.value) {
      const colorValue = e.target.value;
      this.setState({ color: chroma.valid(colorValue) ? chroma(colorValue).name() : colorValue });
    }
    else if (e && e.target && e.target.value === '') {
      this.setState({ color: '' });
    }
  }

onPaste={e => {
          const text = e.clipboardData.getData('Text')
          e.preventDefault()
          if (chroma.valid(text)) {
            setBackground(
              chroma(text)
                .alpha(1)
                .hex()
                .replace('#', ''),
            )
          }
        }}
        onChange={e => {

export const parseCustomColor = (theme, customColor: CustomColor) => {
  if (
    !(
      chroma.valid(customColor) ||
      (typeof customColor === "object" &&
        chroma.valid(customColor.color) &&
        chroma.valid(customColor.secondaryColor))
    )
  ) {
    throw new Error("Provided color theme contains invalid color values")
  }
  if (typeof customColor === "object") {
    return {
      font: chroma(customColor.secondaryColor),
      background: chroma(customColor.color),
    }
  }
  customColor = chroma(customColor)
  return createParsedColorTheme(theme, customColor)
}

const getBrandPrimary = memoize(() => {
  if (chroma.valid(styles.brandPrimary)) {
    return styles.brandPrimary
  }
  const fromVar = readVar('--brand-primary')
  return fromVar && chroma.valid(fromVar) ? fromVar : '#fcc'
})

onPaste={e => {
          const text = e.clipboardData.getData('Text')
          e.preventDefault()
          if (chroma.valid(text)) {
            setForeground(
              chroma(text)
                .alpha(1)
                .hex()
                .replace('#', ''),
            )
          }
        }}
        onChange={e => {

export const parseCustomColor = (theme, customColor: CustomColor) => {
  if (
    !(
      chroma.valid(customColor) ||
      (typeof customColor === "object" &&
        chroma.valid(customColor.color) &&
        chroma.valid(customColor.secondaryColor))
    )
  ) {
    throw new Error("Provided color theme contains invalid color values")
  }
  if (typeof customColor === "object") {
    return {
      font: chroma(customColor.secondaryColor),
      background: chroma(customColor.color),
    }
  }
  customColor = chroma(customColor)
  return createParsedColorTheme(theme, customColor)
}

export const parseCustomColor = (theme, customColor: CustomColor) => {
  if (
    !(
      chroma.valid(customColor) ||
      (typeof customColor === "object" &&
        chroma.valid(customColor.color) &&
        chroma.valid(customColor.secondaryColor))
    )
  ) {
    throw new Error("Provided color theme contains invalid color values")
  }
  if (typeof customColor === "object") {
    return {
      font: chroma(customColor.secondaryColor),
      background: chroma(customColor.color),
    }
  }
  customColor = chroma(customColor)
  return createParsedColorTheme(theme, customColor)
}