feat: new Flex component

[tresorama]

It would be great to have a new Layout component - Flex, with gap props that accepts the lib spacing scale (small, "medium, ... )

---

Usage

<Flex
   justifyContent='space-between' 
   alignItems="flex-end" 
   space="medium" 
   style={{ marginTop: 'auto' }}
>
  <Text>Left</Text>
  <Text>Right</Text>
</Flex>

Example Definition

import { h } from 'preact';
import { ReactNode } from "preact/compat";

type FlexProps = {
  children: ReactNode,
  direction?: "row" | "row-reverse" | "column" | "column-reverse",
  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly",
  alignItems?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline",
  flexWrap?: "nowrap" | "wrap" | "wrap-reverse",
  space?: "extraSmall" | "small" | "medium" | "large" | "extraLarge" | (string & {}),  // SAME API OF <VerticalSpace />
  style?: h.JSX.CSSProperties,
};
const getSpaceValue = (spaceKey: "extraSmall" | "small" | "medium" | "large" | "extraLarge" | string) => {
  switch (spaceKey) {
    case "extraSmall":
      return "var(--space-extra-small)";
    case "small":
      return "var(--space-small)";
    case "medium":
      return "var(--space-medium)";
    case "large":
      return "var(--space-large)";
    case "extraLarge":
      return "var(--space-extra-large)";
    default:
      return spaceKey;
  }
};

export const Flex = (props: FlexProps) => {
  const flexProps = {
    display: 'flex',
    justifyContent: props.justifyContent ?? 'flex-start',
    alignItems: props.alignItems ?? 'center',
    flexWrap: props.flexWrap ?? 'nowrap',
    flexDirection: props.direction ?? 'row',
    gap: props.space ? getSpaceValue(props.space) : undefined,
  };
  return (
    <div style={{ ...props.style, ...flexProps }}>
      {props.children}
    </div>
  );
};