diff --git a/README.md b/README.md index 38f2ac55e..73060be9b 100644 --- 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 with your theme - - - - ) -} -``` - -## 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 new file mode 100644 index 000000000..38f2ac55e --- /dev/null +++ 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 with your theme + + + + ) +} +``` + +## 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 index 2509e37d2..9040337a1 100644 --- 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 index 95781a64c..97bdcedc3 100644 --- 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( @@ -92,7 +92,7 @@ export const IconWrapper = styled.divBox( ) 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 index 8a904c8ec..10f4c1e6e 100644 --- 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 index 2723e3cd0..676cf5c26 100644 --- 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 index 028a04e6e..987a497a2 100644 --- a/lib/src/components/WuiProvider/index.tsx +++ b/lib/src/components/WuiProvider/index.tsx @@ -36,5 +36,7 @@ export const WuiProvider: React.FC = ({ ) } +const GlobalStyle = S.GlobalStyle +export { GlobalStyle } WuiProvider.displayName = 'WuiProvider' diff --git a/lib/src/theme/defaultFields.ts b/lib/src/theme/defaultFields.ts index 717297bb1..9f1e1085f 100644 --- 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 + iconPlacement: Record placeholder: CSSObject select: { default: CSSObject @@ -36,7 +36,7 @@ export type ThemeDefaultFields = { selected: CSSObject selectedAndHighlighted: CSSObject } - sizes: Record + sizes: Record variants: VariantsTheme } diff --git a/lib/src/theme/index.ts b/lib/src/theme/index.ts index fa4857aab..17b223fe8 100644 --- a/lib/src/theme/index.ts +++ b/lib/src/theme/index.ts @@ -5,8 +5,8 @@ import { ITheme as StyledComponentDefaultTheme, DefaultTheme as XStyledDefaultTheme, } from '@xstyled/styled-components' +import merge from 'ramda/src/mergeDeepRight' -import { mergeDeepRight } from '../../utils/mergeDeepRight' import { getAccordions, ThemeAccordions } from '../components/Accordion/theme' import { getAlerts, ThemeAlerts } from '../components/Alert/theme' import { getAvatars, ThemeAvatars } from '../components/Avatar/theme' @@ -232,7 +232,7 @@ export const createTheme = (options: ThemeProps = {}): ThemeValues => { theme.timingFunction = timingFunction theme.shadows = shadows - theme = mergeDeepRight(theme, rest) as ThemeValues + theme = merge(theme, rest) as ThemeValues // These attributes depend on colors and fontSizes and must come last theme.selection = getSelection(theme) @@ -282,7 +282,7 @@ export const createTheme = (options: ThemeProps = {}): ThemeValues => { // states theme.states = defaultTheme.states - theme = mergeDeepRight(theme, rest) as ThemeValues + theme = merge(theme, rest) as ThemeValues return theme } diff --git a/lib/src/utils/field-styles.ts b/lib/src/utils/field-styles.ts index 5d72f0568..bb41b0ddd 100644 --- a/lib/src/utils/field-styles.ts +++ b/lib/src/utils/field-styles.ts @@ -1,21 +1,17 @@ import { css, th } from '@xstyled/styled-components' -type FieldIconSizes = { - lg: 'sm' - md: 'sm' - sm: 'sm' - xs: 'xs' -} +export type DefaultFieldIconSize = 'sm' | 'xs' +export type Size = 'xs' | 'sm' | 'md' | 'lg' -export const FIELD_ICON_SIZE: FieldIconSizes = { - xs: 'xs', - sm: 'sm', - md: 'sm', +export const FIELD_ICON_SIZE: { + [key in Size]: DefaultFieldIconSize +} = { lg: 'sm', + md: 'sm', + sm: 'sm', + xs: 'xs', } -export type Size = 'xs' | 'sm' | 'md' | 'lg' -export type FieldIconSize = 'xs' | 'sm' export type DefaultFieldStylesProps = Partial<{ hasIcon?: boolean iconPlacement?: 'right' | 'left' | 'both' diff --git a/lib/src/utils/index.ts b/lib/src/utils/index.ts index fa0fcbb0d..0320ec943 100644 --- a/lib/src/utils/index.ts +++ b/lib/src/utils/index.ts @@ -1,4 +1,8 @@ -export * from './use-copy-text' -export * from './throttle' -export * from './hex-to-rgba' export * from './format-bytes' +export * from './hex-to-rgba' +export * from './field-styles' +export * from './overflow-ellipsis' +export * from './throttle' +export * from './use-copy-text' +export * from './use-fork-ref' +export * from './use-isomorphic-layout-effect' diff --git a/lib/utils/mergeDeepRight.ts b/lib/utils/mergeDeepRight.ts deleted file mode 100644 index 22fe19e0f..000000000 --- a/lib/utils/mergeDeepRight.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -/* eslint-disable no-prototype-builtins */ -export function mergeDeepRight, U extends Record>( - obj1: T, - obj2: U -): T & U { - if (typeof obj1 !== 'object' || obj1 === null) return obj2 as T & U - if (typeof obj2 !== 'object' || obj2 === null) return obj1 as T & U - - const result: Record = { ...obj1 } - - for (const key in obj2) { - if (obj2.hasOwnProperty(key)) { - result[key] = mergeDeepRight(result[key], obj2[key]) - } - } - - return result as T & U -} diff --git a/package.json b/package.json index bd06608a7..5ec019344 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,5 @@ "@types/react": "18.0.25", "styled-components": "5.3.9", "@typescript-eslint/parser": "^6.21.0" - }, - "homepage": "https://welcome-ui.com", - "dependencies": {} + } } diff --git a/website/build-app/pages/foundations/migration.mdx b/website/build-app/pages/foundations/migration.mdx index 5522fd774..b1a08d717 100644 --- a/website/build-app/pages/foundations/migration.mdx +++ b/website/build-app/pages/foundations/migration.mdx @@ -38,3 +38,10 @@ yarn add welcome-ui - import { Icons } from '@welcome-ui/icons.font' + import { IconsFont } from 'welcome-ui/IconsFont' ``` + +4. Import for cardStyles is now + +```diff +- import { cardStyles } from '@welcome-ui/utils' ++ ${th('cards.default')}' +``` diff --git a/website/build-app/utils/stackblitz.ts b/website/build-app/utils/stackblitz.ts index 8d8c2bbcb..dedca329b 100644 --- a/website/build-app/utils/stackblitz.ts +++ b/website/build-app/utils/stackblitz.ts @@ -19,6 +19,8 @@ const getIndexHtml = (name: string) => ` const indexTsx = `import * as React from 'react' import * as ReactDOM from 'react-dom' +import { createTheme } from 'welcome-ui/theme'; +import { WuiProvider } from 'welcome-ui/WuiProvider'; import Demo from './demo' @@ -66,7 +68,8 @@ const getPackageJson = () => `{ const tsConfig = `{ "compilerOptions": { - "jsx": "react" + "jsx": "react", + "moduleResolution": "bundler" } }` diff --git a/yarn.lock b/yarn.lock index 244bc7175..a1e8430da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3337,6 +3337,13 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/ramda@^0.30.2": + version "0.30.2" + resolved "https://registry.yarnpkg.com/@types/ramda/-/ramda-0.30.2.tgz#70661b20c1bb969589a551b7134ae75008ffbfb6" + integrity sha512-PyzHvjCalm2BRYjAU6nIB3TprYwMNOUY/7P/N8bSzp9W/yM2YrtGtAnnVtaCNSeOZ8DzKyFDvaqQs7LnWwwmBA== + dependencies: + types-ramda "^0.30.1" + "@types/react-datepicker@^4.15.0": version "4.19.3" resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.19.3.tgz#0a58e42d820adf12337617bd72289766643775db" @@ -11518,6 +11525,11 @@ quick-lru@^4.0.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== +ramda@^0.30.1: + version "0.30.1" + resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.30.1.tgz#7108ac95673062b060025052cd5143ae8fc605bf" + integrity sha512-tEF5I22zJnuclswcZMc8bDIrwRHRzf+NqVEmqg50ShAZMP7MWeR/RGDthfM/p+BlqvF2fXAzpn8i+SJcYD3alw== + rc@1.2.8: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" @@ -13225,6 +13237,11 @@ ts-node@^10.8.1: v8-compile-cache-lib "^3.0.1" yn "3.1.1" +ts-toolbelt@^9.6.0: + version "9.6.0" + resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5" + integrity sha512-nsZd8ZeNUzukXPlJmTBwUAuABDe/9qtVDelJeT/qW0ow3ZS3BsQJtNkan1802aM9Uf68/Y8ljw86Hu0h5IUW3w== + tsconfig-paths@^3.14.2: version "3.14.2" resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088" @@ -13444,6 +13461,13 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA== +types-ramda@^0.30.1: + version "0.30.1" + resolved "https://registry.yarnpkg.com/types-ramda/-/types-ramda-0.30.1.tgz#03d255128e3696aeaac76281ca19949e01dddc78" + integrity sha512-1HTsf5/QVRmLzcGfldPFvkVsAdi1db1BBKzi7iW3KBUlOICg/nKnFS+jGqDJS3YD8VsWbAh7JiHeBvbsw8RPxA== + dependencies: + ts-toolbelt "^9.6.0" + typescript@5.0.2: version "5.0.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.2.tgz#891e1a90c5189d8506af64b9ef929fca99ba1ee5"