diff --git a/examples/vanilla-extract-react/src/App.tsx b/examples/vanilla-extract-react/src/App.tsx index a9f8405..dc3a649 100755 --- a/examples/vanilla-extract-react/src/App.tsx +++ b/examples/vanilla-extract-react/src/App.tsx @@ -1,4 +1,3 @@ -import { Button, Radio, RadioGroup } from "@hover-design/react"; import { StyleWrapper } from "components/appWraper/StyleWrapper"; import { BreakpointsExample } from "components/breakpointsExample/BreakpointsExample"; import { ColorsPreview } from "components/colorsPreview/colorsPreview"; @@ -7,12 +6,11 @@ import FontSizePreview from "components/fontSizePreview/FontSizePreview"; import { Footer } from "components/footer/footer"; import { Header } from "components/header/header"; import { PageMain } from "components/pageMain/PageMain"; -import React, { useState } from "react"; +import React from "react"; import { fonts, fontSizes } from "styles/index.css"; import "styles/reset.css"; const App: React.FC = () => { - const [radioVal, setRadioVal] = useState("radio1"); return (
diff --git a/lib/src/components/Accordion/Accordion.tsx b/lib/src/components/Accordion/Accordion.tsx index 509b357..312ad36 100644 --- a/lib/src/components/Accordion/Accordion.tsx +++ b/lib/src/components/Accordion/Accordion.tsx @@ -1,4 +1,4 @@ -import React, { ForwardRefRenderFunction, LegacyRef } from "react"; +import React, { ForwardRefRenderFunction } from "react"; import { accordionThemeClass, detailsClass } from "./accordion.styles.css"; import "./accordion.global.styles.css"; diff --git a/lib/src/components/Input/input.styles.css.ts b/lib/src/components/Input/input.styles.css.ts index 67f4428..dc25e98 100644 --- a/lib/src/components/Input/input.styles.css.ts +++ b/lib/src/components/Input/input.styles.css.ts @@ -1,5 +1,4 @@ import { createTheme, style } from "@vanilla-extract/css"; -import { recipe } from "@vanilla-extract/recipes"; import { lightColors } from "src/styles/tokens"; import { IInputTheme } from "./input.types"; diff --git a/lib/src/components/Modal/Modal.tsx b/lib/src/components/Modal/Modal.tsx index d88845d..d34c402 100644 --- a/lib/src/components/Modal/Modal.tsx +++ b/lib/src/components/Modal/Modal.tsx @@ -1,5 +1,5 @@ import { assignInlineVars } from "@vanilla-extract/dynamic"; -import React, { useState } from "react"; +import React from "react"; import { eliminateUndefinedKeys } from "../../utils/object-utils"; import { useClickOutside } from "../../hooks/useClickOutside"; import { Portal } from "../Portal/Portal"; diff --git a/lib/src/components/NativeSelect/NativeSelect.tsx b/lib/src/components/NativeSelect/NativeSelect.tsx index 84d79d3..0f632da 100644 --- a/lib/src/components/NativeSelect/NativeSelect.tsx +++ b/lib/src/components/NativeSelect/NativeSelect.tsx @@ -1,5 +1,5 @@ import { assignInlineVars } from "@vanilla-extract/dynamic"; -import { FC, useEffect } from "react"; +import { FC } from "react"; import { Flex } from "../Flex"; import { ArrowDown } from "../_internal/Icons/ArrowDown"; import { diff --git a/lib/src/components/NativeSelect/nativeSelect.types.ts b/lib/src/components/NativeSelect/nativeSelect.types.ts index 79c3c37..31b88de 100644 --- a/lib/src/components/NativeSelect/nativeSelect.types.ts +++ b/lib/src/components/NativeSelect/nativeSelect.types.ts @@ -9,7 +9,7 @@ export type NativeSelectPropsType = JSX.IntrinsicElements["select"] & { export type OptionsType = { label: string; value: string | number; - disabled?: boolean | undefined; + disabled?: boolean; }; export type NativeSelectThemeType = [ diff --git a/lib/src/components/Popover/Popover.tsx b/lib/src/components/Popover/Popover.tsx index 4bb8e59..b4e0c35 100644 --- a/lib/src/components/Popover/Popover.tsx +++ b/lib/src/components/Popover/Popover.tsx @@ -54,7 +54,7 @@ const PopoverComponent: ForwardRefRenderFunction< }, [isOpened]); useEffect(() => { - isOpen !== null && onChange(isOpen!); + isOpen !== null && onChange(isOpen); }, [isOpen]); useEffect(() => { @@ -70,7 +70,7 @@ const PopoverComponent: ForwardRefRenderFunction< () => { isOpened === undefined && setIsOpen(false); }, - isOpen! + isOpen || false ); const internalClickHandler = () => { diff --git a/lib/src/components/Popover/popover.styles.css.ts b/lib/src/components/Popover/popover.styles.css.ts index 34d099e..0cb87e9 100644 --- a/lib/src/components/Popover/popover.styles.css.ts +++ b/lib/src/components/Popover/popover.styles.css.ts @@ -1,4 +1,4 @@ -import { createTheme, createVar, style } from "@vanilla-extract/css"; +import { createVar, style } from "@vanilla-extract/css"; import { calc } from "@vanilla-extract/css-utils"; import { recipe } from "@vanilla-extract/recipes"; diff --git a/lib/src/components/Select/select.css.ts b/lib/src/components/Select/select.css.ts index 284ab82..f4ad8f8 100644 --- a/lib/src/components/Select/select.css.ts +++ b/lib/src/components/Select/select.css.ts @@ -1,4 +1,4 @@ -import { createTheme, globalStyle, style } from "@vanilla-extract/css"; +import { createTheme, style } from "@vanilla-extract/css"; import { calc } from "@vanilla-extract/css-utils"; import { recipe } from "@vanilla-extract/recipes"; import { SelectTheme } from "./select.types"; diff --git a/lib/src/components/Select/select.types.ts b/lib/src/components/Select/select.types.ts index 47a1c9b..ecc65b9 100644 --- a/lib/src/components/Select/select.types.ts +++ b/lib/src/components/Select/select.types.ts @@ -1,9 +1,4 @@ -import { - ChangeEvent, - KeyboardEvent, - MouseEvent, - MutableRefObject, -} from "react"; +import { KeyboardEvent, MouseEvent, MutableRefObject } from "react"; type divType = Omit; export type SelectPropsType = divType & { placeholder?: string; @@ -34,7 +29,7 @@ export type SelectPropsType = divType & { export type OptionsType = { label: string; value: string | number; - disabled?: boolean | undefined; + disabled?: boolean; ref?: MutableRefObject; }; diff --git a/lib/src/components/Table/Table.css.ts b/lib/src/components/Table/Table.css.ts index eff988e..1b762b4 100644 --- a/lib/src/components/Table/Table.css.ts +++ b/lib/src/components/Table/Table.css.ts @@ -1,4 +1,4 @@ -import { globalStyle, style, createTheme } from "@vanilla-extract/css"; +import { style, createTheme } from "@vanilla-extract/css"; import { ITableContainerThemeVars, ITableThemeVars } from "./Table.types"; export const [ diff --git a/lib/src/components/Table/Tfoot/Tfoot.css.ts b/lib/src/components/Table/Tfoot/Tfoot.css.ts index ee61c9d..e38ead9 100644 --- a/lib/src/components/Table/Tfoot/Tfoot.css.ts +++ b/lib/src/components/Table/Tfoot/Tfoot.css.ts @@ -1,4 +1,4 @@ -import { createTheme, globalStyle, style } from "@vanilla-extract/css"; +import { createTheme, style } from "@vanilla-extract/css"; import { ITfootThemeVars } from "./Tfoot.types"; export const [tfootThemeClass, tfootThemeVars]: ITfootThemeVars = createTheme({ @@ -6,4 +6,3 @@ export const [tfootThemeClass, tfootThemeVars]: ITfootThemeVars = createTheme({ }); export const footerDefaults = style({}); - diff --git a/lib/src/components/Table/Thead/Thead.css.ts b/lib/src/components/Table/Thead/Thead.css.ts index 74a4880..aa0b2db 100644 --- a/lib/src/components/Table/Thead/Thead.css.ts +++ b/lib/src/components/Table/Thead/Thead.css.ts @@ -1,4 +1,4 @@ -import { createTheme, globalStyle, style } from "@vanilla-extract/css"; +import { createTheme, style } from "@vanilla-extract/css"; import { ITheadThemeVars } from "./Thead.types"; export const [theadThemeClass, theadThemeVars]: ITheadThemeVars = createTheme({ @@ -6,4 +6,3 @@ export const [theadThemeClass, theadThemeVars]: ITheadThemeVars = createTheme({ }); export const headerDefaults = style({}); - diff --git a/lib/src/components/TextArea/text-area.css.ts b/lib/src/components/TextArea/text-area.css.ts index 4be7935..5e57d1b 100644 --- a/lib/src/components/TextArea/text-area.css.ts +++ b/lib/src/components/TextArea/text-area.css.ts @@ -1,21 +1,19 @@ -import { createTheme } from "@vanilla-extract/css"; -import { style } from "@vanilla-extract/css"; +import { createTheme, style } from "@vanilla-extract/css"; import { TextAreaBorder } from "./text-area.types"; -export const [textAreaColorClass, textAreaColorVars]: TextAreaBorder = createTheme({ +export const [textAreaColorClass, textAreaColorVars]: TextAreaBorder = + createTheme({ textAreaBorderColor: { statusBorderColor: "#082D59", }, }); export const textAreaStyle = style({ - border: `1px solid ${textAreaColorVars.textAreaBorderColor.statusBorderColor}`, - borderRadius: '10px', - padding: '20px' -}) + border: `1px solid ${textAreaColorVars.textAreaBorderColor.statusBorderColor}`, + borderRadius: "10px", + padding: "20px", +}); export const textAreaResize = style({ - resize: 'none' -}) - - + resize: "none", +}); diff --git a/lib/src/components/Tooltip/tooltip.styles.css.ts b/lib/src/components/Tooltip/tooltip.styles.css.ts index 9077039..c88988a 100644 --- a/lib/src/components/Tooltip/tooltip.styles.css.ts +++ b/lib/src/components/Tooltip/tooltip.styles.css.ts @@ -1,5 +1,7 @@ + import { style } from "@vanilla-extract/css"; + export const tooltipContainerStyles = style({ padding: "6px 10px", }); diff --git a/lib/src/components/Tooltip/tooltip.types.ts b/lib/src/components/Tooltip/tooltip.types.ts index 1b33e72..4264f7a 100644 --- a/lib/src/components/Tooltip/tooltip.types.ts +++ b/lib/src/components/Tooltip/tooltip.types.ts @@ -1,5 +1,7 @@ + import { PopoverType } from "../Popover/popover.types"; + type divType = Omit & Omit; diff --git a/lib/src/components/reset/reset.css.ts b/lib/src/components/reset/reset.css.ts index 1e67791..63d6753 100644 --- a/lib/src/components/reset/reset.css.ts +++ b/lib/src/components/reset/reset.css.ts @@ -1,36 +1,2 @@ import { globalStyle } from "@vanilla-extract/css"; -// globalStyle( -// "html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video", -// { -// margin: 0, -// padding: 0, -// border: 0, -// fontSize: "100%", -// font: "inherit", -// verticalAlign: "baseline", -// } -// ); - -// /* HTML5 display-role reset for older browsers */ -// globalStyle( -// "article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section", -// { -// display: "block", -// } -// ); -// globalStyle("body", { -// lineHeight: 1, -// fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', -// 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', -// sans-serif`, -// WebkitFontSmoothing: "antialiased", -// MozOsxFontSmoothing: "grayscale", -// }); -// globalStyle("ol,ul", { listStyle: "none" }); -// globalStyle("blockquote,q", { quotes: "none" }); -// globalStyle("blockquote:before,blockquote:after,q:before,q:after", { -// content: "", -// }); -// globalStyle("table", { borderCollapse: "collapse", borderSpacing: 0 }); -// globalStyle("button", { border: 0 }); globalStyle("*", { boxSizing: "border-box" }); diff --git a/lib/src/hooks/useBodyScrollLock.tsx b/lib/src/hooks/useBodyScrollLock.tsx index b6062e2..ac1131a 100644 --- a/lib/src/hooks/useBodyScrollLock.tsx +++ b/lib/src/hooks/useBodyScrollLock.tsx @@ -2,9 +2,7 @@ import { useLayoutEffect } from "react"; const useLockBodyScroll = (value: boolean): void => { useLayoutEffect((): (() => void) => { - value - ? (document.body.style.overflow = "hidden") - : (document.body.style.overflow = "auto"); + document.body.style.overflow = value ? "hidden" : "auto"; return () => (document.body.style.overflow = "auto"); }, []);