ui: rewrap @theme-ui's flex, box, slider && add theme colors strict typecheck

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

packages/theme/src/theme/font/fontsize.ts

@@ -27,7 +27,17 @@ export function getFontSizes(): FontSizes {
     body: "12px",
     subBody: "10px",
     menu: "12px",
-    code: "14px"
+    code: "14px",
+    xxxs: "10px",
+    xxs: "11px",
+    xs: "13px",
+    sm: "15px",
+    md: "17px",
+    lg: "20px",
+    xl: "25px",
+    "2xl": "30px",
+    "3xl": "35px",
+    "4xl": "40px"
   };
 }
 
@@ -41,4 +51,14 @@ export type FontSizes = {
   menu: string;
   subBody: string;
   code: string;
+  xxxs: string;
+  xxs: string;
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  "2xl": string;
+  "3xl": string;
+  "4xl": string;
 };

packages/theme/src/theme/index.ts

@@ -27,7 +27,22 @@ export { createButtonVariant } from "./variants/button.js";
 export { getFontConfig } from "./font/index.js";
 export type Theme = {
   breakpoints: string[];
-  space: (number | string)[] & { small?: number | string };
+  space: (number | string)[] & {
+    small?: number | string;
+    spacing1: number;
+    spacing2: number;
+    spacing3: number;
+    spacing4: number;
+    spacing5: number;
+    spacing6: number;
+    spacing7: number;
+    spacing8: number;
+    spacing9: number;
+    spacing10: number;
+    spacing11: number;
+    spacing12: number;
+    spacing13: number;
+  };
   sizes: { full: "100%"; half: "50%" };
   radii: {
     none: number;
@@ -35,6 +50,15 @@ export type Theme = {
     dialog: number;
     large: number;
     small: number;
+    radius1: number;
+    radius2: number;
+    radius3: number;
+    radius4: number;
+    radius5: number;
+    radius6: number;
+    radius7: number;
+    radius8: number;
+    radius9: number;
   };
   shadows: { menu: string };
   colors: Record<ThemeColor, string>;
@@ -51,9 +75,38 @@ export class ThemeFactory {
   static construct(config: ThemeConfig): Theme {
     const theme: Theme = {
       breakpoints: ["480px", "1000px", "1000px"],
-      space: [0, "6px", 10, 15, 20, 25, 30, 35],
+      space: Object.assign([0, "6px", 10, 15, 20, 25, 30, 35], {
+        spacing1: 3,
+        spacing2: 5,
+        spacing3: 7,
+        spacing4: 10,
+        spacing5: 13,
+        spacing6: 15,
+        spacing7: 20,
+        spacing8: 25,
+        spacing9: 30,
+        spacing10: 35,
+        spacing11: 40,
+        spacing12: 45,
+        spacing13: 50
+      }),
       sizes: { full: "100%", half: "50%" },
-      radii: { none: 0, default: 5, large: 7, dialog: 10, small: 2.5 },
+      radii: {
+        none: 0,
+        default: 5,
+        large: 7,
+        dialog: 10,
+        small: 2.5,
+        radius1: 5,
+        radius2: 10,
+        radius3: 15,
+        radius4: 20,
+        radius5: 25,
+        radius6: 30,
+        radius7: 35,
+        radius8: 40,
+        radius9: 45
+      },
       iconSizes: { big: 16, medium: 14, small: 12 },
       colors: flattenVariants(config.scope),
       shadows:

packages/ui/src/components/box.tsx

@@ -0,0 +1,45 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Box as ThemeUIBox,
+  BoxProps as ThemeUIBoxProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface BoxProps
+  extends Omit<
+      ThemeUIBoxProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["variants"];
+  sx?: RestrictedSxProp;
+}
+
+export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
+  return <ThemeUIBox ref={ref} {...props} />;
+});

packages/ui/src/components/button.tsx

@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Button as ThemeUIButton,
+  ButtonProps as ThemeUIButtonProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface ButtonProps
+  extends Omit<
+      ThemeUIButtonProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["buttons"];
+  sx?: RestrictedSxProp;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return <ThemeUIButton ref={ref} {...props} />;
+  }
+);

packages/ui/src/components/flex.tsx

@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Flex as ThemeUIFlex,
+  FlexProps as ThemeUIFlexProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface FlexProps
+  extends Omit<
+      ThemeUIFlexProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["variants"];
+  sx?: RestrictedSxProp;
+}
+
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
+  (props, ref) => {
+    return <ThemeUIFlex ref={ref} {...props} />;
+  }
+);

packages/ui/src/components/index.ts

@@ -21,3 +21,7 @@ export * from "./icon/index.js";
 export * from "./menu/index.js";
 export * from "./popup-presenter/index.js";
 export * from "./scroll-container/index.js";
+export * from "./button.js";
+export * from "./box.js";
+export * from "./flex.js";
+export * from "./slider.js";

packages/ui/src/components/slider.tsx

@@ -0,0 +1,47 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Slider as ThemeUISlider,
+  SliderProps as ThemeUISliderProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface SliderProps
+  extends Omit<
+      ThemeUISliderProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  (props, ref) => {
+    return <ThemeUISlider ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/utils/index.ts

@@ -18,3 +18,4 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 export * from "./position.js";
+export * from "./types.js";

packages/ui/src/utils/types.ts

@@ -0,0 +1,73 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { Theme, ThemeColor } from "@notesnook/theme";
+import { ThemeUIStyleObject } from "@theme-ui/core";
+
+type ThemeSpace = Theme["space"];
+
+type ValidSpaceValues =
+  | Exclude<keyof ThemeSpace, keyof Array<any> | "small">
+  | "small"
+  | number;
+
+export type RestrictedColorProps = {
+  color?: ThemeColor;
+  bg?: ThemeColor | (ThemeColor | null)[];
+  backgroundColor?: ThemeColor | (ThemeColor | null)[];
+};
+
+export type RestrictedSpaceProps = {
+  [K in
+    | "m"
+    | "mt"
+    | "mr"
+    | "mb"
+    | "ml"
+    | "mx"
+    | "my"
+    | "margin"
+    | "marginTop"
+    | "marginRight"
+    | "marginBottom"
+    | "marginLeft"
+    | "marginX"
+    | "marginY"
+    | "p"
+    | "pt"
+    | "pr"
+    | "pb"
+    | "pl"
+    | "px"
+    | "py"
+    | "padding"
+    | "paddingTop"
+    | "paddingRight"
+    | "paddingBottom"
+    | "paddingLeft"
+    | "paddingX"
+    | "paddingY"]?: ValidSpaceValues | (ValidSpaceValues | null)[];
+};
+
+export type RestrictedSxProp = Omit<
+  ThemeUIStyleObject,
+  keyof RestrictedSpaceProps | keyof RestrictedColorProps
+> &
+  RestrictedSpaceProps &
+  RestrictedColorProps;