Add color={...} shorthand for all shapes

[seveibar]

e.g. you should be able to do <Cube color="red" size={[1,0,0]} />

• If color is provided, wrap the shape in a Colorize (NOTE: probably should be implemented as a wrapper to prevent redundant code)
• Accept/convert colors from any standard web format, e.g. "red", "#f00", "#ff0000", "ff0000", "rgba(255,0,0,1)" (note: there are libraries that convert all of these)

[Slaviiiii]

Hey Seve could you explain the Colorize wrapper

[seveibar]

@Slaviiiii yes the idea behind the React Colorize wrapper is to make it so a component accepts the color prop without repeating code across components.

interface ColorProps {
  color?: string;
}

// Define the type for a React component that can accept any props
type ReactComponent<P = any> = React.ComponentType<P>;

export function withColorProps<P extends object>(
  WrappedComponent: ReactComponent<P>
): ReactComponent<P & ColorProps> {
  // Create a new component that includes the color prop
  const WithColor: React.FC<P & ColorProps> = ({ color, ...props }) => {
    return (
      <Colorize color={color}
        <WrappedComponent {...props as P} />;
      </Colorize>
    )
  };

  // Set the display name for easier debugging
  WithColor.displayName = `WithColor(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithColor;
}