Add semantics components

pages/pages/flexPage.tsx

@@ -1,10 +1,24 @@
 import Box from '../../src/box';
+import Checkbox from '../../src/components/checkbox';
 import Flex from '../../src/components/flex';
 import Form from '../../src/components/form';
+import { H1, H2, H3, H4, H5, H6, Label, Nav } from '../../src/components/semantics';
 
 export default function FlexPage() {
   return (
     <Flex d="column">
+      <Label>
+        tetst <Checkbox />
+      </Label>
+
+      <H1>H1</H1>
+      <H2>H2</H2>
+      <H3>H3</H3>
+      <H4>H4</H4>
+      <H5>H5</H5>
+      <H6>H6</H6>
+      <Nav>nav</Nav>
+
       <Box
         fontSize={50}
         lineHeight="font-size"

src/components/dropdown.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, FunctionComponent, ReactElement, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Box, { BoxProps } from '../box';
 import Textbox from './textbox';
 import Flex from './flex';
@@ -34,8 +34,8 @@ function DropdownImpl<TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): Rea
     return refToUse.current?.getBoundingClientRect().height ?? 0;
   }, [openUp, refToUse]);
 
-  const allKids = useMemo<DropdownKidType[]>(() => (Array.isArray(children) ? children : [children]), [children]);
-  const items = useMemo(() => allKids.filter((x) => x.type?.componentName === 'DropdownItem'), [allKids]);
+  const allKids = useMemo<ReactElement<any, FunctionComponent>[]>(() => (Array.isArray(children) ? children : [children]), [children]);
+  const items = useMemo(() => allKids.filter((x) => x.type?.displayName === 'DropdownItem'), [allKids]);
   const filteredItems = useMemo<React.ReactElement<DropdownItemProps<TVal>>[]>(() => {
     return items.filter((x) => {
       if (isSearchable && search) {
@@ -48,10 +48,10 @@ function DropdownImpl<TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): Rea
     });
   }, [isSearchable, search, allKids]);
 
-  const unselectItem = useMemo(() => allKids.find((x) => x.type?.componentName === 'DropdownUnselect'), [allKids]);
-  const selectAllItem = useMemo(() => allKids.find((x) => x.type?.componentName === 'DropdownSelectAll'), [allKids]);
-  const emptyItem = useMemo(() => allKids.find((x) => x.type?.componentName === 'DropdownEmptyItem'), [allKids]);
-  const displayItem = useMemo(() => allKids.find((x) => x.type?.componentName === 'DropdownDisplay'), [allKids]);
+  const unselectItem = useMemo(() => allKids.find((x) => (x.type as FunctionComponent)?.displayName === 'DropdownUnselect'), [allKids]);
+  const selectAllItem = useMemo(() => allKids.find((x) => (x.type as FunctionComponent)?.displayName === 'DropdownSelectAll'), [allKids]);
+  const emptyItem = useMemo(() => allKids.find((x) => (x.type as FunctionComponent)?.displayName === 'DropdownEmptyItem'), [allKids]);
+  const displayItem = useMemo(() => allKids.find((x) => (x.type as FunctionComponent)?.displayName === 'DropdownDisplay'), [allKids]);
 
   const display = useMemo(() => {
     if (displayItem) return displayItem.props.children(selectedValues);
@@ -225,8 +225,6 @@ interface DropdownDisplayProps<TVal> extends Omit<BoxProps, 'children'> {
   children: (selectedValues: TVal[]) => React.ReactNode;
 }
 
-type DropdownKidType = React.ReactElement<any, ((props: any) => React.ReactNode) & { componentName: ChildrenName }>;
-
 interface DropdownType {
   <TVal>(props: Props<TVal>, ref: Ref<HTMLInputElement>): React.ReactNode;
   Item: <TVal>(props: DropdownItemProps<TVal>) => React.ReactNode;
@@ -237,8 +235,8 @@ interface DropdownType {
 }
 
 function withName<TProps>(name: ChildrenName) {
-  const fn = (_props: TProps) => null;
-  fn.componentName = name;
+  const fn: FunctionComponent<TProps> = (_props: TProps) => null;
+  fn.displayName = name;
   return fn;
 }
 

src/components/semantics.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, Ref, RefAttributes } from 'react';
+import Box, { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../core/coreTypes';
+
+type SemanticComponentType<TTag extends keyof React.JSX.IntrinsicElements> = (
+  props: Omit<BoxProps<TTag>, 'ref' | 'tag'> & RefAttributes<ExtractElementFromTag<TTag>>,
+) => React.ReactNode;
+
+function semantic<TTag extends keyof React.JSX.IntrinsicElements>(tagName: TTag, p?: BoxProps<TTag>): SemanticComponentType<TTag> {
+  return forwardRef((props: Omit<BoxProps<TTag>, 'ref' | 'tag'>, ref: Ref<ExtractElementFromTag<TTag>>) => (
+    <Box tag={tagName} ref={ref} component={tagName} {...p} {...props} />
+  ));
+}
+
+export const Label = semantic('label');
+export const Article = semantic('article');
+export const Aside = semantic('aside');
+export const Details = semantic('details');
+export const Figcaption = semantic('figcaption');
+export const Figure = semantic('figure');
+export const Footer = semantic('footer');
+export const Header = semantic('header');
+export const Main = semantic('main');
+export const Mark = semantic('mark');
+export const Nav = semantic('nav');
+export const Menu = semantic('menu');
+export const Section = semantic('section');
+export const Summary = semantic('summary');
+export const Time = semantic('time');
+export const P = semantic('p');
+export const H1 = semantic('h1', { fontSize: 14 * 2.5 });
+export const H2 = semantic('h2', { fontSize: 14 * 2.0 });
+export const H3 = semantic('h3', { fontSize: 14 * 1.75 });
+export const H4 = semantic('h4', { fontSize: 14 * 1.5 });
+export const H5 = semantic('h5', { fontSize: 14 * 1.25 });
+export const H6 = semantic('h6', { fontSize: 14 * 1.0 });
+export const Link = semantic('a');
+export const Img = semantic('img');

src/core/boxStyles.ts

@@ -355,7 +355,7 @@ export const cssStyles = {
     {
       styleName: 'font-size',
       values: 0,
-      valueFormat: BoxStylesFormatters.Value.px,
+      valueFormat: (value: number) => BoxStylesFormatters.Value.rem(value, undefined, 16),
     },
     {
       styleName: 'font-size',

src/core/boxStylesFormatters.ts

@@ -10,8 +10,8 @@ export namespace BoxStylesFormatters {
   }
 
   export namespace Value {
-    export function rem(value: number) {
-      return `${value / 4}rem`;
+    export function rem(value: number, _fn?: Function, divider = 4) {
+      return `${value / divider}rem`;
     }
     export function px(value: number) {
       return `${value}px`;