Merge remote-tracking branch 'origin/feat/v4' into beta-v4

Author: dziraf

package.json

@@ -24,7 +24,8 @@
     "storybook": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
     "storybook:deploy": "firebase deploy --only hosting",
-    "dev": "yarn build && yarn bundle"
+    "dev": "yarn build && yarn bundle",
+    "postinstall": "patch-package"
   },
   "husky": {
     "hooks": {
@@ -75,6 +76,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.11",
     "husky": "^4.2.5",
+    "patch-package": "^6.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.17.3",
@@ -112,7 +114,7 @@
     "react-datepicker": "^4.10.0",
     "react-feather": "^2.0.10",
     "react-phone-input-2": "^2.15.1",
-    "react-select": "^5.7.0",
+    "react-select": "^5.7.1",
     "react-text-mask": "^5.5.0",
     "styled-system": "^5.1.5",
     "text-mask-addons": "^3.8.0"

patches/@tiptap+core+2.0.0-beta.220.patch

@@ -0,0 +1,38 @@
+diff --git a/node_modules/@tiptap/core/dist/packages/core/src/index.d.ts b/node_modules/@tiptap/core/dist/packages/core/src/index.d.ts
+index 2626c14..6674936 100644
+--- a/node_modules/@tiptap/core/dist/packages/core/src/index.d.ts
++++ b/node_modules/@tiptap/core/dist/packages/core/src/index.d.ts
+@@ -1,18 +1,18 @@
+-export * from './CommandManager';
+-export * from './Editor';
+-export * from './Extension';
+-export * as extensions from './extensions';
+-export * from './helpers';
+-export * from './InputRule';
+-export * from './inputRules';
+-export * from './Mark';
+-export * from './Node';
+-export * from './NodeView';
+-export * from './PasteRule';
+-export * from './pasteRules';
+-export * from './Tracker';
+-export * from './types';
+-export * from './utilities';
++export * from './CommandManager.js'
++export * from './Editor.js'
++export * from './Extension.js'
++export * as extensions from './extensions.js'
++export * from './helpers.js'
++export * from './InputRule.js'
++export * from './inputRules.js'
++export * from './Mark.js'
++export * from './Node.js'
++export * from './NodeView.js'
++export * from './PasteRule.js'
++export * from './pasteRules.js'
++export * from './Tracker.js'
++export * from './types.js'
++export * from './utilities.js'
+ export interface Commands<ReturnType = any> {
+ }
+ export interface ExtensionConfig<Options = any, Storage = any> {

patches/@tiptap+react+2.0.0-beta.220.patch

@@ -0,0 +1,25 @@
+diff --git a/node_modules/@tiptap/react/dist/packages/react/src/index.d.ts b/node_modules/@tiptap/react/dist/packages/react/src/index.d.ts
+index c5109e2..5742d3c 100644
+--- a/node_modules/@tiptap/react/dist/packages/react/src/index.d.ts
++++ b/node_modules/@tiptap/react/dist/packages/react/src/index.d.ts
+@@ -1,10 +1,10 @@
+-export * from './BubbleMenu';
+-export { Editor } from './Editor';
+-export * from './EditorContent';
+-export * from './FloatingMenu';
+-export * from './NodeViewContent';
+-export * from './NodeViewWrapper';
+-export * from './ReactNodeViewRenderer';
+-export * from './ReactRenderer';
+-export * from './useEditor';
+-export * from '@tiptap/core';
++export * from './BubbleMenu.js'
++export { Editor } from './Editor.js'
++export * from './EditorContent.js'
++export * from './FloatingMenu.js'
++export * from './NodeViewContent.js'
++export * from './NodeViewWrapper.js'
++export * from './ReactNodeViewRenderer.js'
++export * from './ReactRenderer.js'
++export * from './useEditor.js'
++export * from '@tiptap/core'

src/atoms/illustration/illustration.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import { styled, DefaultTheme, withTheme } from 'styled-components'
+import React, { PropsWithChildren } from 'react'
+import { styled } from 'styled-components'
 
-import * as Illustrations from '../illustrations/index.js'
 import { cssClass } from '../../utils/index.js'
+import * as Illustrations from '../illustrations/index.js'
 
 export type IllustrationVariant = keyof typeof Illustrations
 
@@ -22,25 +22,25 @@ export type IllustrationProps = {
 const Wrapper = styled.div.attrs((props) => ({
   className: cssClass('Illustration', props.className),
 }))`
-  [fill="#3040D6"] {
-    fill: ${({ theme }) => theme.colors.primary100}
+  [fill='#3040D6'] {
+    fill: ${({ theme }) => theme.colors.primary100};
   }
-  
-  [stroke="#3B3552"] {
-    stroke: ${({ theme }) => theme.colors.accent}
+
+  [stroke='#3B3552'] {
+    stroke: ${({ theme }) => theme.colors.accent};
   }
 `
 
-type RawIllustrationType = IllustrationProps &
-  { theme: DefaultTheme, [key: string]: any } & {
-    // this fixes unknown error with some TSC version (monkey patch)
-    children?: React.ReactNode
-  }
+type RawIllustrationType = IllustrationProps & PropsWithChildren
 
 const RawIllustration: React.FC<RawIllustrationType> = (props) => {
   const { variant, ...other } = props
   const IllustrationComponent = Illustrations[variant]
-  return <Wrapper><IllustrationComponent {...other} /></Wrapper>
+  return (
+    <Wrapper>
+      <IllustrationComponent {...other} />
+    </Wrapper>
+  )
 }
 
 /**
@@ -77,6 +77,6 @@ const RawIllustration: React.FC<RawIllustrationType> = (props) => {
  * )
  * @section design-system
  */
-export const Illustration = withTheme(RawIllustration)
+export const Illustration = RawIllustration
 
 export default Illustration

src/atoms/illustrations/props.type.tsx

@@ -3,5 +3,5 @@ import { DefaultTheme } from 'styled-components'
 export type Props = {
   width?: number;
   height?: number;
-  theme: DefaultTheme;
+  theme?: DefaultTheme;
 }

src/atoms/illustrations/rocket.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { Props } from './props.type.js'
 
-export const Rocket: React.FC<Props> = () => (
-  <svg width="249px" height="179px" viewBox="0 0 249 179" version="1.1" xmlns="http://www.w3.org/2000/svg">
+export const Rocket: React.FC<Props> = ({ width = 249, height = 179 }) => (
+  <svg width={width} height={height} viewBox="0 0 249 179" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
         <stop stopColor="#FFAB86" offset="0%" />

src/atoms/illustrations/slack-logo.tsx

@@ -3,41 +3,23 @@ import React from 'react'
 import { Props } from './props.type.js'
 
 export const Slack: React.FC<Props> = ({ width = 72, height = 72 }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="70 70 140 140"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width={width} height={height} viewBox="70 70 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g>
       <g>
         <path style={{ fill: '#E01E5A' }} d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z" />
-        <path
-          style={{ fill: '#E01E5A' }}
-          d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9V151.2z"
-        />
+        <path style={{ fill: '#E01E5A' }} d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9V151.2z" />
       </g>
       <g>
         <path style={{ fill: '#36C5F0' }} d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z" />
-        <path
-          style={{ fill: '#36C5F0' }}
-          d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9H118.8z"
-        />
+        <path style={{ fill: '#36C5F0' }} d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9H118.8z" />
       </g>
       <g>
         <path style={{ fill: '#2EB67D' }} d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z" />
-        <path
-          style={{ fill: '#2EB67D' }}
-          d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9V118.8z"
-        />
+        <path style={{ fill: '#2EB67D' }} d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9V118.8z" />
       </g>
       <g>
         <path style={{ fill: '#ECB22E' }} d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z" />
-        <path
-          style={{ fill: '#ECB22E' }}
-          d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9H151.2z"
-        />
+        <path style={{ fill: '#ECB22E' }} d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9H151.2z" />
       </g>
     </g>
   </svg>

src/molecules/drop-down/drop-down-item.tsx

@@ -1,6 +1,7 @@
 import { rgba } from 'polished'
-import { space, variant } from 'styled-system'
+import type { PropsWithChildren } from 'react'
 import { styled } from 'styled-components'
+import { space, variant } from 'styled-system'
 
 import { Box, BoxProps } from '../../atoms/box/index.js'
 import type { VariantType } from '../../theme.js'
@@ -42,7 +43,7 @@ const colorVariants = variant<any, VariantType>({
  */
 export type DropDownItemProps = BoxProps & {
   colorVariant?: VariantType
-}
+} & PropsWithChildren
 
 /**
  * @component

src/molecules/select/select-async.tsx

@@ -2,7 +2,7 @@
 // @ts-nocheck
 import noop from 'lodash/noop.js'
 import React, { FC } from 'react'
-import ReactAsyncSelect, { AsyncProps } from 'react-select/async/dist/react-select-async.cjs.js'
+import ReactAsyncSelect, { AsyncProps } from 'react-select/async'
 
 import useSelectTheme from './select-theme.js'
 import { cssClass, filterStyles, selectStyles } from '../../utils/index.js'

src/molecules/select/select-theme.ts

@@ -1,9 +1,21 @@
 import { rgba } from 'polished'
-import { ThemeConfig } from 'react-select'
-import { DefaultTheme, useTheme } from 'styled-components'
+import { useEffect, useState } from 'react'
+import type { ThemeConfig } from 'react-select'
+import type { DefaultTheme } from 'styled-components'
+import { useTheme } from 'styled-components'
+
+import * as defautTheme from '../../theme.js'
 
 const useSelectTheme = (): { theme: DefaultTheme; selectTheme: ThemeConfig } => {
   const theme = useTheme()
+  const [currentTheme, setCurrentTheme] = useState<DefaultTheme>(defautTheme)
+
+  useEffect(() => {
+    if (theme) {
+      setCurrentTheme(theme)
+    }
+  }, [theme])
+
   const selectTheme: ThemeConfig = (config) => ({
     ...config,
     borderRadius: 2,
@@ -14,16 +26,16 @@ const useSelectTheme = (): { theme: DefaultTheme; selectTheme: ThemeConfig } =>
     },
     colors: {
       ...config.colors,
-      primary: theme.colors.primary100,
-      danger: theme.colors.error,
-      dangerLight: theme.colors.errorLight,
-      primary25: rgba(theme.colors.black, 0.06),
-      primary50: rgba(theme.colors.black, 0.125),
-      primary75: rgba(theme.colors.black, 0.25),
+      primary: currentTheme.colors.primary100,
+      danger: currentTheme.colors.error,
+      dangerLight: currentTheme.colors.errorLight,
+      primary25: rgba(currentTheme.colors.black, 0.06),
+      primary50: rgba(currentTheme.colors.black, 0.125),
+      primary75: rgba(currentTheme.colors.black, 0.25),
     },
   })
 
-  return { theme, selectTheme }
+  return { theme: currentTheme, selectTheme }
 }
 
 export default useSelectTheme