welcome-ui 7.0.1-alpha.0 → 7.0.1

package/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

package/dist/Toast.js

@@ -39,4 +39,4 @@
     ${l.th("toasts.snackbar.separator.default")};
     ${l.th(`toasts.snackbar.separator.${t}`)};
     padding-left: sm;
-  `),X={"top-left":{top:0,left:0},"top-center":{top:0,left:"50%"},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-center":{bottom:0,left:"50%"},"bottom-right":{bottom:0,right:0}},Z=({calculateOffset:t,toast:e,updateHeight:s})=>{var m,g,y;if(typeof e.message=="string")return console.warn("You must pass a React component or a HTML element."),null;const n=t(e,{reverseOrder:!1,gutter:0}),r=d=>{if(d&&typeof e.height!="number"){const b=d.getBoundingClientRect().height;s(e.id,b)}},o=(m=e.position)==null?void 0:m.includes("center"),u=(g=e.position)==null?void 0:g.includes("top"),i=(y=e.position)==null?void 0:y.includes("bottom"),f=()=>{e.onClose&&e.onClose(),S.dismiss(e.id)},p={opacity:e.visible?1:0,transform:`translate(${o?"-50%":"0"}, ${n*(u?1:-1)}px)`,...X[e.position]};return a.createElement(F,{isBottom:i,opacity:p.opacity,ref:r,style:p,transform:p.transform,...e.ariaProps},a.cloneElement(e.message,{onClose:f}))},D=C.forwardRef(({children:t,dataTestId:e,hasCloseButton:s=!0,icon:n,onClose:r,variant:o="default"},u)=>{const i=e?`${e}-close-button`:void 0;return a.createElement(J,{"data-testid":e,hasCloseButton:s,icon:n,ref:u,variant:o},s&&a.createElement(B.CloseButton,{dataTestId:i,onClick:r,position:"absolute",right:"sm",top:"sm"}),a.createElement(w.Box,{pr:"xl"},t))});D.displayName="Growl";const I=C.forwardRef(({children:t,cta:e,hasCloseButton:s=!0,icon:n,onClose:r,variant:o="default",...u},i)=>a.createElement(Q,{icon:n,ref:i,variant:o,...u},a.createElement(w.Box,{alignItems:"center",display:"flex",gap:"sm"},t,e&&a.createElement(V,{variant:o},e),s&&a.createElement(B.CloseButton,{onClick:r,size:"xs"})))),tt=C.forwardRef((t,e)=>a.createElement(q.Button,{flexShrink:0,ref:e,size:"xs",variant:"ghost",...t}));I.displayName="Snackbar";const et=({pauseOnHover:t=!0})=>{const e=a.useContext(l.ThemeContext),s=U(),{handlers:n,toasts:r}=j(),{calculateOffset:o,endPause:u,startPause:i,updateHeight:f}=n,p=t?i:void 0,m=t?u:void 0;return a.createElement(l.ThemeProvider,{theme:e},r.length>0&&s(a.createElement("div",{onMouseEnter:p,onMouseLeave:m},r.map(g=>a.createElement(Z,{calculateOffset:o,key:g.id,toast:g,updateHeight:f})))))},st=({children:t,...e})=>a.createElement(K,{...e},t),ot=(t,e)=>{var o,u;const r={duration:7e3,position:(typeof t=="string"?void 0:((o=t==null?void 0:t.type)==null?void 0:o.displayName)||((u=t==null?void 0:t.type)==null?void 0:u.name))==="Growl"?"top-right":"bottom-center",...e};return S(t,r)},rt=t=>{S.remove(t)},nt=t=>{S.dismiss(t)},at={Title:st,Growl:D,Snackbar:I,SnackbarAction:tt};exports.Notifications=et;exports.Toast=at;exports.dismiss=nt;exports.remove=rt;exports.toast=ot;
+  `),X={"top-left":{top:0,left:0},"top-center":{top:0,left:"50%"},"top-right":{top:0,right:0},"bottom-left":{bottom:0,left:0},"bottom-center":{bottom:0,left:"50%"},"bottom-right":{bottom:0,right:0}},Z=({calculateOffset:t,toast:e,updateHeight:s})=>{var m,g,y;if(typeof e.message=="string")return console.warn("You must pass a React component or a HTML element."),null;const n=t(e,{reverseOrder:!1,gutter:0}),r=d=>{if(d&&typeof e.height!="number"){const b=d.getBoundingClientRect().height;s(e.id,b)}},o=(m=e.position)==null?void 0:m.includes("center"),u=(g=e.position)==null?void 0:g.includes("top"),i=(y=e.position)==null?void 0:y.includes("bottom"),f=()=>{e.onClose&&e.onClose(),S.dismiss(e.id)},p={opacity:e.visible?1:0,transform:`translate(${o?"-50%":"0"}, ${n*(u?1:-1)}px)`,...X[e.position]};return a.createElement(F,{isBottom:i,opacity:p.opacity,ref:r,style:p,transform:p.transform,...e.ariaProps},a.cloneElement(e.message,{onClose:f}))},D=C.forwardRef(({children:t,dataTestId:e,hasCloseButton:s=!0,icon:n,onClose:r,variant:o="default"},u)=>{const i=e?`${e}-close-button`:void 0;return a.createElement(J,{"data-testid":e,hasCloseButton:s,icon:n,ref:u,variant:o},s&&a.createElement(B.CloseButton,{dataTestId:i,onClick:r,position:"absolute",right:"sm",top:"sm"}),a.createElement(w.Box,{pr:"xl"},t))});D.displayName="Growl";const I=C.forwardRef(({children:t,cta:e,hasCloseButton:s=!0,icon:n,onClose:r,variant:o="default",...u},i)=>a.createElement(Q,{icon:n,ref:i,variant:o,...u},a.createElement(w.Box,{alignItems:"center",display:"flex",gap:"sm"},t,e&&a.createElement(V,{variant:o},e),s&&a.createElement(B.CloseButton,{onClick:r,size:"xs"})))),tt=C.forwardRef((t,e)=>a.createElement(q.Button,{flexShrink:0,ref:e,size:"xs",variant:"ghost",...t}));I.displayName="Snackbar";const et=({pauseOnHover:t=!0})=>{const e=a.useContext(l.ThemeContext),s=U(),{handlers:n,toasts:r}=j(),{calculateOffset:o,endPause:u,startPause:i,updateHeight:f}=n,p=t?i:void 0,m=t?u:void 0;return a.createElement(l.ThemeProvider,{theme:e},r.length>0&&s(a.createElement("div",{"data-wui-persistent":!0,onMouseEnter:p,onMouseLeave:m},r.map(g=>a.createElement(Z,{calculateOffset:o,key:g.id,toast:g,updateHeight:f})))))},st=({children:t,...e})=>a.createElement(K,{...e},t),ot=(t,e)=>{var o,u;const r={duration:7e3,position:(typeof t=="string"?void 0:((o=t==null?void 0:t.type)==null?void 0:o.displayName)||((u=t==null?void 0:t.type)==null?void 0:u.name))==="Growl"?"top-right":"bottom-center",...e};return S(t,r)},rt=t=>{S.remove(t)},nt=t=>{S.dismiss(t)},at={Title:st,Growl:D,Snackbar:I,SnackbarAction:tt};exports.Notifications=et;exports.Toast=at;exports.dismiss=nt;exports.remove=rt;exports.toast=ot;

package/dist/Toast.mjs

@@ -231,7 +231,7 @@ G.displayName = "Snackbar";
 const xt = ({ pauseOnHover: t = !0 }) => {
   const e = H(L), s = st(), { handlers: a, toasts: r } = et(), { calculateOffset: o, endPause: i, startPause: n, updateHeight: c } = a, f = t ? n : void 0, p = t ? i : void 0;
   return /* @__PURE__ */ d.createElement(W, { theme: e }, r.length > 0 && s(
-    /* @__PURE__ */ d.createElement("div", { onMouseEnter: f, onMouseLeave: p }, r.map((g) => /* @__PURE__ */ d.createElement(
+    /* @__PURE__ */ d.createElement("div", { "data-wui-persistent": !0, onMouseEnter: f, onMouseLeave: p }, r.map((g) => /* @__PURE__ */ d.createElement(
       dt,
       {
         calculateOffset: o,

package/dist/WuiProvider.js

@@ -1,7 +1,7 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),t=require("@xstyled/styled-components");function b(e,n,i){return i?n.map(o=>`url('${e}.${o}') format('${o}-variations')`).join(", "):n.map(o=>`url('${e}.${o}') format('${o}')`).join(", ")}function d({name:e,variation:{display:n="swap",extensions:i=["woff2","woff"],isVariable:o,style:r,unicodeRange:s,url:l,weight:c}}){return t.css`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),t=require("@xstyled/styled-components");function d(e,n,i){return i?n.map(o=>`url('${e}.${o}') format('${o}-variations')`).join(", "):n.map(o=>`url('${e}.${o}') format('${o}')`).join(", ")}function m({name:e,variation:{display:n="swap",extensions:i=["woff2","woff"],isVariable:o,style:r,unicodeRange:s,url:l,weight:c}}){return t.css`
     @font-face {
       font-family: ${e};
-      src: ${b(l,i,o)};
+      src: ${d(l,i,o)};
       font-display: ${n};
       ${c&&t.css`
         font-weight: ${c};
@@ -13,7 +13,7 @@
         unicode-range: ${s};
       `}
     }
-  `}const m=()=>({theme:e})=>!e||!e.fontFaces?null:Object.entries(e.fontFaces).map(([n,i])=>i.map(o=>d({name:n,variation:o}))),f=t.css`
+  `}const f=()=>({theme:e})=>!e||!e.fontFaces?null:Object.entries(e.fontFaces).map(([n,i])=>i.map(o=>m({name:n,variation:o}))),g=t.css`
   html,
   body,
   div,
@@ -167,7 +167,7 @@
     padding-top: 1px;
     margin-top: -1px;
   }
-`,g=t.css`
+`,h=t.css`
   html {
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
@@ -349,7 +349,7 @@
   [hidden] {
     display: none;
   }
-`,h=t.css`
+`,y=t.css`
   * {
     &,
     &::before,
@@ -357,7 +357,7 @@
       box-sizing: border-box;
     }
   }
-`;function y(){return t.css`
+`;function w(){return t.css`
     body,
     button,
     input,
@@ -369,11 +369,11 @@
       line-height: html;
       letter-spacing: html;
     }
-  `}const w=t.createGlobalStyle(({useReset:e})=>t.css`
-    ${g};
-    ${m()};
-    ${y()};
-    ${e?f:h};
+  `}const b=t.createGlobalStyle(({useReset:e})=>t.css`
+    ${h};
+    ${f()};
+    ${w()};
+    ${e?g:y};
 
     html {
       color: neutral-60;
@@ -404,4 +404,4 @@
     [${u}] *:focus {
       outline: none;
     }
-  `),k=({children:e,reactRootId:n})=>{const[i,o]=a.useState(!1);return a.useEffect(()=>{const r=i?"keydown":"mousemove",s=()=>o(c=>!c);window.addEventListener(r,s);const l=document.getElementById(n);return l&&(i?l.setAttribute(u,"true"):l.removeAttribute(u)),()=>{window.removeEventListener(r,s)}},[i,n]),a.createElement(a.Fragment,null,a.createElement(x,null),e)},p=({children:e,hasGlobalStyle:n=!0,reactRootId:i="root",shouldHideFocusRingOnClick:o=!0,theme:r,useReset:s})=>a.createElement(t.ThemeProvider,{theme:r},a.createElement(a.Fragment,null,n&&a.createElement(w,{useReset:s}),o?a.createElement(k,{reactRootId:i},e):e));p.displayName="WuiProvider";exports.WuiProvider=p;
+  `),k=({children:e,reactRootId:n})=>{const[i,o]=a.useState(!1);return a.useEffect(()=>{const r=i?"keydown":"mousemove",s=()=>o(c=>!c);window.addEventListener(r,s);const l=document.getElementById(n);return l&&(i?l.setAttribute(u,"true"):l.removeAttribute(u)),()=>{window.removeEventListener(r,s)}},[i,n]),a.createElement(a.Fragment,null,a.createElement(x,null),e)},p=({children:e,hasGlobalStyle:n=!0,reactRootId:i="root",shouldHideFocusRingOnClick:o=!0,theme:r,useReset:s})=>a.createElement(t.ThemeProvider,{theme:r},a.createElement(a.Fragment,null,n&&a.createElement(b,{useReset:s}),o?a.createElement(k,{reactRootId:i},e):e)),v=b;p.displayName="WuiProvider";exports.GlobalStyle=v;exports.WuiProvider=p;

package/dist/WuiProvider.mjs

@@ -1,10 +1,10 @@
 "use client";
-import a, { useState as b, useEffect as d } from "react";
-import { css as i, createGlobalStyle as p, th as m, ThemeProvider as f } from "@xstyled/styled-components";
-function g(e, o, n) {
+import a, { useState as d, useEffect as m } from "react";
+import { css as i, createGlobalStyle as p, th as f, ThemeProvider as g } from "@xstyled/styled-components";
+function h(e, o, n) {
   return n ? o.map((t) => `url('${e}.${t}') format('${t}-variations')`).join(", ") : o.map((t) => `url('${e}.${t}') format('${t}')`).join(", ");
 }
-function h({
+function y({
   name: e,
   variation: {
     display: o = "swap",
@@ -19,7 +19,7 @@ function h({
   return i`
     @font-face {
       font-family: ${e};
-      src: ${g(l, n, t)};
+      src: ${h(l, n, t)};
       font-display: ${o};
       ${c && i`
         font-weight: ${c};
@@ -33,9 +33,9 @@ function h({
     }
   `;
 }
-const y = () => ({ theme: e }) => !e || !e.fontFaces ? null : Object.entries(e.fontFaces).map(
-  ([o, n]) => n.map((t) => h({ name: o, variation: t }))
-), w = i`
+const w = () => ({ theme: e }) => !e || !e.fontFaces ? null : Object.entries(e.fontFaces).map(
+  ([o, n]) => n.map((t) => y({ name: o, variation: t }))
+), x = i`
   html,
   body,
   div,
@@ -189,7 +189,7 @@ const y = () => ({ theme: e }) => !e || !e.fontFaces ? null : Object.entries(e.f
     padding-top: 1px;
     margin-top: -1px;
   }
-`, x = i`
+`, k = i`
   html {
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
@@ -371,7 +371,7 @@ const y = () => ({ theme: e }) => !e || !e.fontFaces ? null : Object.entries(e.f
   [hidden] {
     display: none;
   }
-`, k = i`
+`, v = i`
   * {
     &,
     &::before,
@@ -380,7 +380,7 @@ const y = () => ({ theme: e }) => !e || !e.fontFaces ? null : Object.entries(e.f
     }
   }
 `;
-function v() {
+function z() {
   return i`
     body,
     button,
@@ -395,19 +395,19 @@ function v() {
     }
   `;
 }
-const z = p(
+const b = p(
   ({ useReset: e }) => i`
-    ${x};
-    ${y()};
-    ${v()};
-    ${e ? w : k};
+    ${k};
+    ${w()};
+    ${z()};
+    ${e ? x : v};
 
     html {
       color: neutral-60;
     }
 
     ::selection {
-      ${m("selection")};
+      ${f("selection")};
     }
 
     /* for firefox */
@@ -438,8 +438,8 @@ const z = p(
   children: e,
   reactRootId: o
 }) => {
-  const [n, t] = b(!1);
-  return d(() => {
+  const [n, t] = d(!1);
+  return m(() => {
     const r = n ? "keydown" : "mousemove", s = () => t((c) => !c);
     window.addEventListener(r, s);
     const l = document.getElementById(o);
@@ -454,8 +454,9 @@ const z = p(
   shouldHideFocusRingOnClick: t = !0,
   theme: r,
   useReset: s
-}) => /* @__PURE__ */ a.createElement(f, { theme: r }, /* @__PURE__ */ a.createElement(a.Fragment, null, o && /* @__PURE__ */ a.createElement(z, { useReset: s }), t ? /* @__PURE__ */ a.createElement(F, { reactRootId: n }, e) : e));
+}) => /* @__PURE__ */ a.createElement(g, { theme: r }, /* @__PURE__ */ a.createElement(a.Fragment, null, o && /* @__PURE__ */ a.createElement(b, { useReset: s }), t ? /* @__PURE__ */ a.createElement(F, { reactRootId: n }, e) : e)), R = b;
 E.displayName = "WuiProvider";
 export {
+  R as GlobalStyle,
   E as WuiProvider
 };

package/dist/types/components/WuiProvider/index.d.ts

@@ -9,3 +9,7 @@ export interface WuiProviderProps {
     useReset?: boolean;
 }
 export declare const WuiProvider: React.FC<WuiProviderProps>;
+declare const GlobalStyle: import('styled-components').GlobalStyleComponent<{
+    useReset?: boolean;
+}, import('styled-components').DefaultTheme>;
+export { GlobalStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "7.0.1-alpha.0",
+  "version": "7.0.1",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"