Merge pull request #76 from solved-ac/release/v0.7.0

Release

package.json

@@ -1,13 +1,22 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",
   "repository": "solved-ac/ui-react",
   "homepage": "https://github.com/solved-ac/ui-react",
-  "main": "dist/index.js",
-  "source": "src/index.tsx",
+  "main": "./dist/index.js",
+  "source": "./src/index.tsx",
+  "module": "./dist/index.modern.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.modern.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "engines": {
     "node": ">=10"
   },
@@ -57,7 +66,6 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "cross-env": "^7.0.2",
-    "emotion-reset": "^3.0.1",
     "eslint": "^8.15.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.7.0",

src/components/Tooltip.tsx

@@ -16,7 +16,13 @@ import {
 } from '@floating-ui/react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { transparentize } from 'polished'
-import React, { CSSProperties, ReactNode, useRef, useState } from 'react'
+import React, {
+  CSSProperties,
+  ReactNode,
+  useRef,
+  useState,
+  useMemo,
+} from 'react'
 import { SolvedTheme, solvedThemes } from '../styles'
 import { Card, CardProps } from './Card'
 
@@ -74,6 +80,7 @@ export type TooltipProps = {
   activateOnClick?: boolean
   noThemeChange?: boolean
   zIndex?: number
+  onOpenChange?: (open: boolean) => void
 } & (
   | {
       noDefaultStyles: false
@@ -133,13 +140,21 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     activateOnClick = false,
     noThemeChange = false,
     zIndex,
+    onOpenChange,
     ...cardProps
   } = props
   const [isOpen, setIsOpen] = useState(false)
   const renderTooltip = typeof open === 'boolean' ? open : isOpen
 
   const arrowRef = useRef(null)
 
+  const handleOpenChange = (open: boolean): void => {
+    setIsOpen(open)
+    if (onOpenChange) {
+      onOpenChange(open)
+    }
+  }
+
   const {
     x,
     y,
@@ -152,7 +167,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
     placement: place,
     strategy: 'fixed',
     open: isOpen,
-    onOpenChange: setIsOpen,
+    onOpenChange: handleOpenChange,
     middleware: [
       offset(16),
       shift({ padding: 16 }),
@@ -183,8 +198,18 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
   ])
 
   const RenderComponent = noBackground ? motion.div : TooltipContainer
-  const ThemeProviderComponent =
-    noThemeChange || noBackground ? React.Fragment : ThemeProvider
+  const ThemeProviderComponent = useMemo(
+    () =>
+      noThemeChange || noBackground
+        ? React.Fragment
+        : ({ children }: { children?: ReactNode }) => (
+            // eslint-disable-next-line react/jsx-indent
+            <ThemeProvider theme={theme || solvedThemes.dark}>
+              {children}
+            </ThemeProvider>
+          ),
+    [noThemeChange, noBackground, theme]
+  )
 
   const arrowPosition =
     renderSide[placement.split('-')[0] as keyof typeof renderSide]
@@ -195,7 +220,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
         {children}
       </TooltipWrapper>
       <FloatingPortal>
-        <ThemeProviderComponent theme={theme || solvedThemes.dark}>
+        <ThemeProviderComponent>
           <AnimatePresence>
             {renderTooltip && (
               <React.Fragment>

src/styles/GlobalStyles.tsx

@@ -1,11 +1,136 @@
 import { css, Global, SerializedStyles, useTheme } from '@emotion/react'
-import emotionReset from 'emotion-reset'
 import { buttons, textInputs, transparentize } from 'polished'
 import React from 'react'
 import { SolvedTheme } from './Themes'
 
+const reset = css`
+  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;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  menu,
+  nav,
+  section {
+    display: block;
+  }
+  body {
+    line-height: 1;
+  }
+  ol,
+  ul {
+    list-style: none;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+`
+
 const globalCss = (theme: SolvedTheme): SerializedStyles => css`
-  ${emotionReset}
+  ${reset}
 
   * {
     box-sizing: border-box;

tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "outDir": "dist",
-    "module": "esnext",
+    "module": "ESNext",
+    "target": "ESNext",
     "lib": ["dom", "esnext"],
     "moduleResolution": "node",
     "jsx": "react",

yarn.lock

@@ -4475,11 +4475,6 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-emotion-reset@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/emotion-reset/-/emotion-reset-3.0.1.tgz#1445e66bab7e8fd9975ce0d8cd3324589981f0a6"
-  integrity sha512-v6scW83qSu+wtxg7lX1s0+/2U4EAAGFxDQMkvXE10jhKtyuXCzy3/su5/MU9ZjXeNv6ZjxZH51WktrKosKUy9g==
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"