addon-ui 0.3.0

package/src/providers/ui/styles/default.scss

@@ -0,0 +1,95 @@
+@use "../../../styles/mixins" as theme;
+
+@include theme.light {
+  --min-height: 440px;
+  --max-height: 540px;
+
+  --min-width: 380px;
+  --max-width: var(--min-width);
+
+  --font-family: "Arial", sans-serif;
+  --font-size: 14px;
+  --font-weight: 400;
+  --letter-spacing: 0.2px;
+  --line-height: normal;
+
+  --border-radius: 20px;
+
+  --side-padding-xs: 15px;
+  --side-padding-sm: 20px;
+  --side-padding-md: 25px;
+  --side-padding-lg: 30px;
+
+  --transition-speed-xs: 100ms;
+  --transition-speed-sm: 200ms;
+  --transition-speed-md: 250ms;
+  --transition-speed-lg: 500ms;
+
+  /* Common colors */
+  --primary-color: #5959ff;
+  --secondary-color: #3ea2f3;
+  --accent-color: #1dce75;
+  --error-color: #e54d2e;
+  --success-color: #1fd8a4;
+
+  --border-color: #dbdbdb;
+
+  --bg-transparent: transparent;
+  --bg-default-color: #fff;
+  --bg-primary-color: #f5f6f7;
+  --bg-secondary-color: #e9ecef;
+
+  --text-default-color: #000;
+  --text-primary-color: #2e4453;
+  --text-secondary-color: #25282b;
+  --text-accent-color: var(--accent-color);
+  --text-disabled-color: #333337;
+
+  --separator-color: #ccc;
+
+  /* Components colors */
+  --avatar-fallback-bg-color: #edeef0;
+  --avatar-fallback-color: #2e2f3b;
+
+  --checkbox-bg-color: #ddd;
+
+  --icon-button-color: #59647c;
+  --icon-button-bg-color: #ddd;
+  --icon-button-border-color: #ededed;
+  --icon-button-color-hover: #404a61;
+  --icon-button-bg-color-hover: #ccc;
+
+  --scroll-area-thumb-bg-color: #d9d9d9;
+}
+
+@include theme.dark {
+  /* Common colors */
+  --border-color: #545863;
+
+  --bg-transparent: transparent;
+  --bg-default-color: #000;
+  --bg-primary-color: #2e2f3b;
+  --bg-secondary-color: #3f404b;
+
+  --text-default-color: #fff;
+  --text-primary-color: #ededed;
+  --text-secondary-color: #fbfbfb;
+  --text-accent-color: var(--accent-color);
+  --text-disabled-color: #90aab9;
+
+  --separator-color: #555;
+
+  /* Components colors */
+  --avatar-fallback-bg-color: #606060;
+  --avatar-fallback-color: #eeeeee;
+
+  --checkbox-bg-color: #777;
+
+  --icon-button-color: #838a99;
+  --icon-button-bg-color: #404a61;
+  --icon-button-border-color: #3f404b;
+  --icon-button-color-hover: #959ca9;
+  --icon-button-bg-color-hover: #444;
+
+  --scroll-area-thumb-bg-color: #5e6063;
+}

package/src/providers/ui/styles/reset.scss

@@ -0,0 +1,127 @@
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+main,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  outline: none !important;
+  box-sizing: border-box;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+  display: block;
+}
+
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+body {
+  background-color: var(--bg-primary-color);
+  color: var(--text-primary-color);
+  font-family: var(--font-family), "sans-serif";
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  will-change: background-color, color;
+  transition:
+    background-color var(--transition-speed-md),
+    color var(--transition-speed-md);
+}

package/src/styles/mixins.scss

@@ -0,0 +1,23 @@
+@mixin light {
+  :root {
+    @content;
+  }
+}
+
+@mixin dark {
+  html[theme="dark"] {
+    @content;
+  }
+}
+
+@mixin ltr {
+  html[dir="ltr"] & {
+    @content;
+  }
+}
+
+@mixin rtl {
+  html[dir="rtl"] & {
+    @content;
+  }
+}

package/src/types/config.ts

@@ -0,0 +1,15 @@
+import {SvgSpriteProps} from "../components";
+import {ComponentsProps} from "../components/types";
+
+export type {ComponentsProps};
+
+export type Icons = SvgSpriteProps["icons"];
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ExtraProps {}
+
+export interface Config {
+    components: ComponentsProps;
+    extra: ExtraProps;
+    icons: Icons;
+}

package/src/types/theme.ts

@@ -0,0 +1,11 @@
+export enum Theme {
+    Light = "light",
+    Dark = "dark",
+}
+
+export interface ThemeStorageContract {
+    get: () => Promise<Theme | undefined>;
+    change: (theme: Theme) => Promise<void>;
+    toggle: () => Promise<void>;
+    watch: (callback: (theme: Theme) => void) => () => void;
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./utils";
+export * from "./react";

package/src/utils/react.ts

@@ -0,0 +1,21 @@
+import {cloneElement, createElement, isValidElement, JSX, ReactNode} from "react";
+import classnames from "classnames";
+
+export const cloneOrCreateElement = <T extends keyof JSX.IntrinsicElements>(
+    element: ReactNode,
+    props: JSX.IntrinsicElements[T] = {},
+    wrapperTag: T = "span" as T
+) => {
+    if (isValidElement<{className?: string}>(element)) {
+        return cloneElement(element, {
+            ...props,
+            className: classnames(element.props.className, props.className),
+        });
+    }
+
+    if (element) {
+        return createElement(wrapperTag, {...props}, element);
+    }
+
+    return null;
+};

package/src/utils/utils.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const hideInTable = {table: {disable: true}};
+
+export const capitalizeFirstLetter = (text: string) => {
+    if (text.length < 2) return text;
+    return text[0].toUpperCase() + text.slice(1);
+};
+
+export const splitProps = <T extends object>(props: Record<string, any>, keys: Set<keyof T>) => {
+    return Object.fromEntries(Object.entries(props).filter(([key]) => keys.has(key as keyof T))) as T;
+};