fix: add missing utils export and fix merge theme (#2665)

* fix: add missing utils export * chore: release v7.0.1-alpha.0
WTTJ · Feb 4, 2025 · aff9aa5 · aff9aa5
1 parent 66f0fe0
commit aff9aa5
Show file tree

Hide file tree

Showing 16 changed files with 200 additions and 178 deletions.
diff --git a/README.md b/README.md
@@ -6,124 +6,4 @@ Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://w
 
 Here you'll find all the core components you need to create a delightful webapp.
 
-🌴 [Discover all the components](https://welcome-ui.com)
-
----
-
-[![License](https://img.shields.io/npm/l/welcome-ui.svg)](https://github.com/WTTJ/welcome-ui/tree/main/LICENSE) ![Code formating](https://img.shields.io/badge/code%20formating-prettier-blue.svg) ![Code style](https://img.shields.io/badge/code%20style-styled--components-ff69b4.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-mediumspringgreen.svg)](https://github.com/WTTJ/welcome-ui/tree/main/CONTRIBUTING.mdx) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
-
----
-
-## Installation
-
-1 - Install the `welcome-ui` package and **peer dependencies** listed below:
-
-```bash
-yarn add welcome-ui @xstyled/styled-components@^3.7.3 react@^18.0.0 styled-components@^5.3.9
-```
-
-## Import library & Theme
-
-Getting started
-
-```js
-import React from 'react'
-import { createTheme } from 'welcome-ui/theme'
-import { WuiProvider } from 'welcome-ui/WuiProvider'
-import { Button } from 'welcome-ui/Button'
-
-// Add theme options (if you want)
-const options = {
-  defaultFontFamily: 'Helvetica',
-  headingFontFamily: 'Georgia',
-  colors: {
-    primary: {
-      50: '#124C80',
-    },
-    green: {
-      50: '#32CD32',
-    },
-  },
-}
-
-// Create your theme
-const theme = createTheme(options)
-export default function Root() {
-  return (
-    // Wrap your components with <WuiProvider /> with your theme
-    <WuiProvider
-      theme={theme}
-      // Will inject a CSS reset with normalizer
-      hasGlobalStyle
-      // Will show the focus ring on keyboard navigation only
-      shouldHideFocusRingOnClick
-    >
-      <Button>Welcome!</Button>
-    </WuiProvider>
-  )
-}
-```
-
-## Develop on local
-
-1. Install
-
-```bash
-yarn
-```
-
-2. Start a watch on all packages to rebuild them easily
-
-```bash
-yarn start
-```
-
-3. Start documentation website
-
-```bash
-yarn website
-```
-
-4. and go to http://localhost:3020
-
-## How to release
-
-The release of the library is automated by the CI, you just need to bump package version and push git tags to initiate the process.
-
-### Release process
-
-**The commands listed below will only prompt for library to bump**. Then they will modify package version, commit changes and create the git tag to finally push everything to github. **No further actions are required once you have validated the packages to bump.**
-
-#### How to release
-
-##### Production
-
-(ex: **7.1.0**):
-
-```bash
-yarn release
-```
-
-##### Alpha
-
-(ex: **7.1.0-alpha.0**)
-
-Generate an alpha release for broader team testing:
-
-```bash
-yarn release:alpha
-```
-
-##### Development
-
-(ex: **dev.1738060597**)
-
-Create a development release based on the current timestamp for quick testing of pre-release features:
-
-```bash
-yarn release:dev
-```
-
-### About the CI
-
-The CI will trigger on tags to build the packages and then push them to the npm registry
+[Library Documentation](lib/README.md)
diff --git a/lib/README.md b/lib/README.md
@@ -0,0 +1,129 @@
+# Welcome UI
+
+![Welcome UI Logo](https://github.com/user-attachments/assets/e7df47fd-e6c8-462a-ac09-d052d67555bc)
+
+Welcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react • typescript • styled-components • styled-system and ariakit.
+
+Here you'll find all the core components you need to create a delightful webapp.
+
+🌴 [Discover all the components](https://welcome-ui.com)
+
+---
+
+[![License](https://img.shields.io/npm/l/welcome-ui.svg)](https://github.com/WTTJ/welcome-ui/tree/main/LICENSE) ![Code formating](https://img.shields.io/badge/code%20formating-prettier-blue.svg) ![Code style](https://img.shields.io/badge/code%20style-styled--components-ff69b4.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-mediumspringgreen.svg)](https://github.com/WTTJ/welcome-ui/tree/main/CONTRIBUTING.mdx) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
+
+---
+
+## Installation
+
+1 - Install the `welcome-ui` package and **peer dependencies** listed below:
+
+```bash
+yarn add welcome-ui @xstyled/styled-components@^3.7.3 react@^18.0.0 styled-components@^5.3.9
+```
+
+## Import library & Theme
+
+Getting started
+
+```js
+import React from 'react'
+import { createTheme } from 'welcome-ui/theme'
+import { WuiProvider } from 'welcome-ui/WuiProvider'
+import { Button } from 'welcome-ui/Button'
+
+// Add theme options (if you want)
+const options = {
+  defaultFontFamily: 'Helvetica',
+  headingFontFamily: 'Georgia',
+  colors: {
+    primary: {
+      50: '#124C80',
+    },
+    green: {
+      50: '#32CD32',
+    },
+  },
+}
+
+// Create your theme
+const theme = createTheme(options)
+export default function Root() {
+  return (
+    // Wrap your components with <WuiProvider /> with your theme
+    <WuiProvider
+      theme={theme}
+      // Will inject a CSS reset with normalizer
+      hasGlobalStyle
+      // Will show the focus ring on keyboard navigation only
+      shouldHideFocusRingOnClick
+    >
+      <Button>Welcome!</Button>
+    </WuiProvider>
+  )
+}
+```
+
+## Develop on local
+
+1. Install
+
+```bash
+yarn
+```
+
+2. Start a watch on all packages to rebuild them easily
+
+```bash
+yarn start
+```
+
+3. Start documentation website
+
+```bash
+yarn website
+```
+
+4. and go to http://localhost:3020
+
+## How to release
+
+The release of the library is automated by the CI, you just need to bump package version and push git tags to initiate the process.
+
+### Release process
+
+**The commands listed below will only prompt for library to bump**. Then they will modify package version, commit changes and create the git tag to finally push everything to github. **No further actions are required once you have validated the packages to bump.**
+
+#### How to release
+
+##### Production
+
+(ex: **7.1.0**):
+
+```bash
+yarn release
+```
+
+##### Alpha
+
+(ex: **7.1.0-alpha.0**)
+
+Generate an alpha release for broader team testing:
+
+```bash
+yarn release:alpha
+```
+
+##### Development
+
+(ex: **dev.1738060597**)
+
+Create a development release based on the current timestamp for quick testing of pre-release features:
+
+```bash
+yarn release:dev
+```
+
+### About the CI
+
+The CI will trigger on tags to build the packages and then push them to the npm registry
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "7.0.0",
+  "version": "7.0.1-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
@@ -85,6 +85,7 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.range": "^3.2.9",
     "@types/node": "22.9.0",
+    "@types/ramda": "^0.30.2",
     "@types/react": "18.0.25",
     "@types/react-datepicker": "^4.15.0",
     "@types/react-dom": "18.0.11",
@@ -96,6 +97,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "7.2.0",
+    "ramda": "^0.30.1",
     "react": "^18.0.0",
     "release-it": "^18.1.2",
     "rollup-preserve-directives": "^1.1.3",

diff --git a/lib/src/components/Field/styles.ts b/lib/src/components/Field/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css, system, th } from '@xstyled/styled-components'
 
-import { FieldIconSize } from '../../utils/field-styles'
+import { DefaultFieldIconSize } from '../../utils/field-styles'
 
 import { StyledLabel } from '@/Label'
 import { shouldForwardProp, WuiProps } from '@/System'
@@ -57,7 +57,7 @@ export const LabelWithHint = styled.div`
 
 type IconWrapperProps = {
   iconPlacement: 'left' | 'right'
-  size?: FieldIconSize
+  size?: DefaultFieldIconSize
 }
 
 export const IconWrapper = styled.divBox<IconWrapperProps>(
@@ -92,7 +92,7 @@ export const IconWrapper = styled.divBox<IconWrapperProps>(
 )
 
 export const IconGroupWrapper = styled.divBox(
-  ({ size }: { size: FieldIconSize }) => css`
+  ({ size }: { size: DefaultFieldIconSize }) => css`
     position: absolute;
     padding: 0;
     top: 0;

diff --git a/lib/src/components/Select/styles.ts b/lib/src/components/Select/styles.ts
@@ -1,6 +1,6 @@
 import styled, { css, system, th } from '@xstyled/styled-components'
 
-import { defaultFieldStyles, Size } from '../../utils/field-styles'
+import { defaultFieldStyles, DefaultFieldStylesProps } from '../../utils/field-styles'
 import { overflowEllipsis } from '../../utils/overflow-ellipsis'
 
 import { SelectOptions } from './index'
@@ -126,7 +126,7 @@ export const Item = styled.li(
 )
 
 export const Indicators = styled.divBox(
-  ({ size }: { size: Size }) => css`
+  ({ size }: { size: DefaultFieldStylesProps['size'] }) => css`
     position: absolute;
     padding: 0;
     top: 0;

diff --git a/lib/src/components/Toast/index.tsx b/lib/src/components/Toast/index.tsx
@@ -5,8 +5,8 @@ import toastRHT, { ToastPosition, useToaster } from 'react-hot-toast/headless'
 import { useCreatePortal } from '../../utils/use-create-portal'
 
 import { ToastWrapper } from './ToastWrapper'
-import { Growl } from './Growl'
-import { Snackbar, SnackbarAction } from './Snackbar'
+import { Growl, GrowlProps } from './Growl'
+import { Snackbar, SnackbarAction, SnackbarProps } from './Snackbar'
 import * as S from './styles'
 
 import { TextProps } from '@/Text'
@@ -76,9 +76,5 @@ export const dismiss = (id?: string) => {
   toastRHT.dismiss(id)
 }
 
-/**
- * @deprecated use directly `toast` function instead
- */
-export const useToast = () => toast
-
 export const Toast = { Title, Growl, Snackbar, SnackbarAction }
+export type { GrowlProps, SnackbarProps }
diff --git a/lib/src/components/WuiProvider/index.tsx b/lib/src/components/WuiProvider/index.tsx
@@ -36,5 +36,7 @@ export const WuiProvider: React.FC<WuiProviderProps> = ({
     </ThemeProvider>
   )
 }
+const GlobalStyle = S.GlobalStyle
+export { GlobalStyle }
 
 WuiProvider.displayName = 'WuiProvider'
diff --git a/lib/src/theme/defaultFields.ts b/lib/src/theme/defaultFields.ts
@@ -1,6 +1,6 @@
 import { CSSObject } from '@xstyled/styled-components'
 
-import { Size } from '../utils/field-styles'
+import { DefaultFieldStylesProps } from '../utils/field-styles'
 
 import { ThemeValues } from '.'
 
@@ -26,7 +26,7 @@ export type ThemeDefaultFields = {
     default: CSSObject
   }
   hover: CSSObject
-  iconPlacement: Record<Size, CSSObject>
+  iconPlacement: Record<DefaultFieldStylesProps['size'], CSSObject>
   placeholder: CSSObject
   select: {
     default: CSSObject
@@ -36,7 +36,7 @@ export type ThemeDefaultFields = {
     selected: CSSObject
     selectedAndHighlighted: CSSObject
   }
-  sizes: Record<Size, CSSObject>
+  sizes: Record<DefaultFieldStylesProps['size'], CSSObject>
   variants: VariantsTheme
 }