How to use the gradient-parser.parse function in gradient-parser

export default function CustomGradientPicker( { value, onChange } ) {
	let hasGradient = !! value;
	// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
	// More information of its structure available at.
	let gradientAST;
	let gradientValueUsed;
	try {
		gradientAST = gradientParser.parse( value || DEFAULT_GRADIENT )[ 0 ];
		gradientValueUsed = value || DEFAULT_GRADIENT;
	} catch ( error ) {
		hasGradient = false;
		gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
		gradientValueUsed = DEFAULT_GRADIENT;
	}

	const onGradientStructureChange = ( newGradientStructure ) => {
		onChange( serializeGradient( newGradientStructure ) );
	};

	const gradientPickerDomRef = useRef();
	const markerPoints = getMarkerPoints( gradientAST );

	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
		customGradientBarReducer,

const generateGradient = memoize((gradient, sizes) => {
  return parser.parse(gradient).map(({ type, colorStops, orientation }) => {
    // YOLO: Radial gradients <3
    if (type === "radial-gradient") {
      return "Only linear-gradient type is supported for now";
    }
    const colorsAndLocations =
      type === "linear-gradient"
        ? getColorsAndLocations(colorStops)
        : getRepeatingColorsAndLocations(colorStops, sizes);

    return {
      ...colorsAndLocations,
      ...getVectorsByOrientation(orientation)
    };
  });
});

export default function CustomGradientPicker( { value, onChange } ) {
	let hasGradient = !! value;
	// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
	// More information of its structure available at.
	let gradientAST;
	let gradientValueUsed;
	try {
		gradientAST = gradientParser.parse( value || DEFAULT_GRADIENT )[ 0 ];
		gradientValueUsed = value || DEFAULT_GRADIENT;
	} catch ( error ) {
		hasGradient = false;
		gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
		gradientValueUsed = DEFAULT_GRADIENT;
	}

	const onGradientStructureChange = ( newGradientStructure ) => {
		onChange( serializeGradient( newGradientStructure ) );
	};

	const gradientPickerDomRef = useRef();
	const markerPoints = getMarkerPoints( gradientAST );

	const [ gradientBarState, gradientBarStateDispatch ] = useReducer(
		customGradientBarReducer,
		customGradientBarReducerInitialState
	);
	const onMouseEnterAndMove = ( event ) => {
		const insertPosition = getHorizontalRelativeGradientPosition(

const getLinearGradientColors = (color: string) => {
  const gradients: LinearGradients = parseGradient(color);

  return gradients[0].colorStops.map(({ type, value }) => {
    if (typeof value !== 'string') {
      throw new Error(
        'Gradient parsing in Braid currently only supports hex/literal values',
      );
    }

    return `${type === 'hex' ? '#' : ''}${value}`;
  });
};

const parseGradient = (gradient, opacity) => {
    const parsed = gparser.parse(gradient)[0].colorStops;
    return parsed.map((g, i) => [g.length ? g.length.value / 100 : i / (parsed.length - 1), stepAsColor(g.value, opacity)]).sort((a, b) => a[0] - b[0]);
};

function _get_gradient(type) {
    let gradient;
    if (window.ShadyCSS) {
        gradient = window.ShadyCSS.getComputedStyleValue(this, `--highcharts-${type}--gradient`);
    } else {
        gradient = getComputedStyle(this).getPropertyValue(`--highcharts-${type}--gradient`);
    }

    const parsed = gparser.parse(gradient)[0].colorStops;
    return parsed.map((x, i) => {
        let color;
        if (x.type === "rgb") {
            color = `rgb(${x.value.join(",")})`;
        } else {
            color = `#${x.value}`;
        }
        return [Number.parseFloat(x.length ? x.length.value / 100 : `${i / (parsed.length - 1)}`), color];
    });
}