ui: rewrap @theme-ui's remaining component (#10073)

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

packages/ui/src/components/checkbox.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 {
+  Checkbox as ThemeUICheckbox,
+  CheckboxProps as ThemeUICheckboxProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface CheckboxProps
+  extends Omit<
+      ThemeUICheckboxProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    return <ThemeUICheckbox ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/grid.tsx

@@ -0,0 +1,46 @@
+/*
+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 {
+  Grid as ThemeUIGrid,
+  GridProps as ThemeUIGridProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface GridProps
+  extends Omit<
+      ThemeUIGridProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  (props, ref) => {
+    return <ThemeUIGrid ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/image.tsx

@@ -0,0 +1,46 @@
+/*
+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 {
+  Image as ThemeUIImage,
+  ImageProps as ThemeUIImageProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface ImageProps
+  extends Omit<
+      ThemeUIImageProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  (props, ref) => {
+    return <ThemeUIImage ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/index.ts

@@ -25,3 +25,14 @@ export * from "./button.js";
 export * from "./box.js";
 export * from "./flex.js";
 export * from "./slider.js";
+export * from "./text.js";
+export * from "./label.js";
+export * from "./textarea.js";
+export * from "./input.js";
+export * from "./image.js";
+export * from "./switch.js";
+export * from "./checkbox.js";
+export * from "./link.js";
+export * from "./grid.js";
+export * from "./progress.js";
+export * from "./radio.js";

packages/ui/src/components/input.tsx

@@ -0,0 +1,51 @@
+/*
+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 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 {
+  Input as ThemeUIInput,
+  InputProps as ThemeUIInputProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface InputProps
+  extends Omit<
+      ThemeUIInputProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => {
+    return <ThemeUIInput ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/label.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 {
+  Label as ThemeUILabel,
+  LabelProps as ThemeUILabelProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface LabelProps
+  extends Omit<
+      ThemeUILabelProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  (props, ref) => {
+    return <ThemeUILabel ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/link.tsx

@@ -0,0 +1,46 @@
+/*
+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 {
+  Link as ThemeUILink,
+  LinkProps as ThemeUILinkProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface LinkProps
+  extends Omit<
+      ThemeUILinkProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (props, ref) => {
+    return <ThemeUILink ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/progress.tsx

@@ -0,0 +1,46 @@
+/*
+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 {
+  Progress as ThemeUIProgress,
+  ProgressProps as ThemeUIProgressProps
+} from "@theme-ui/components";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface ProgressProps
+  extends Omit<
+      ThemeUIProgressProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: string;
+  sx?: RestrictedSxProp;
+}
+
+export const Progress = React.forwardRef<HTMLProgressElement, ProgressProps>(
+  (props, ref) => {
+    return <ThemeUIProgress ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/radio.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 {
+  Radio as ThemeUIRadio,
+  RadioProps as ThemeUIRadioProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface RadioProps
+  extends Omit<
+      ThemeUIRadioProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (props, ref) => {
+    return <ThemeUIRadio ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/switch.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 {
+  Switch as ThemeUISwitch,
+  SwitchProps as ThemeUISwitchProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface SwitchProps
+  extends Omit<
+      ThemeUISwitchProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (props, ref) => {
+    return <ThemeUISwitch ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/text.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 {
+  Text as ThemeUIText,
+  TextProps as ThemeUITextProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface TextProps
+  extends Omit<
+      ThemeUITextProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["text"];
+  sx?: RestrictedSxProp;
+}
+
+export const Text = React.forwardRef<HTMLDivElement, TextProps>(
+  (props, ref) => {
+    return <ThemeUIText ref={ref} {...(props as any)} />;
+  }
+);

packages/ui/src/components/textarea.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 {
+  Textarea as ThemeUITextarea,
+  TextareaProps as ThemeUITextareaProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import {
+  RestrictedColorProps,
+  RestrictedSpaceProps,
+  RestrictedSxProp
+} from "../utils/types.js";
+
+export interface TextareaProps
+  extends Omit<
+      ThemeUITextareaProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps | keyof RestrictedColorProps
+    >,
+    RestrictedSpaceProps,
+    RestrictedColorProps {
+  variant?: keyof Theme["forms"];
+  sx?: RestrictedSxProp;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    return <ThemeUITextarea ref={ref} {...(props as any)} />;
+  }
+);