@mobilestockweb/snackbar 0.0.1

package/index.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SnackbarProviderProps } from 'notistack';
+import React from 'react';
+
+interface SnackbarProps extends SnackbarProviderProps {
+    children: React.ReactNode;
+}
+declare function SnackbarProvider({ children, ...rest }: SnackbarProps): react_jsx_runtime.JSX.Element;
+
+export { SnackbarProvider };

package/index.js

@@ -0,0 +1,66 @@
+"use strict";var I=Object.create;var l=Object.defineProperty,N=Object.defineProperties,W=Object.getOwnPropertyDescriptor,H=Object.getOwnPropertyDescriptors,J=Object.getOwnPropertyNames,x=Object.getOwnPropertySymbols,L=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var h=(t,e,a)=>e in t?l(t,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[e]=a,$=(t,e)=>{for(var a in e||(e={}))b.call(e,a)&&h(t,a,e[a]);if(x)for(var a of x(e))v.call(e,a)&&h(t,a,e[a]);return t},w=(t,e)=>N(t,H(e));var C=(t,e)=>{var a={};for(var r in t)b.call(t,r)&&e.indexOf(r)<0&&(a[r]=t[r]);if(t!=null&&x)for(var r of x(t))e.indexOf(r)<0&&v.call(t,r)&&(a[r]=t[r]);return a};var O=(t,e)=>{for(var a in e)l(t,a,{get:e[a],enumerable:!0})},g=(t,e,a,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of J(e))!b.call(t,i)&&i!==a&&l(t,i,{get:()=>e[i],enumerable:!(r=W(e,i))||r.enumerable});return t};var p=(t,e,a)=>(a=t!=null?I(L(t)):{},g(e||!t||!t.__esModule?l(a,"default",{value:t,enumerable:!0}):a,t)),A=t=>g(l({},"__esModule",{value:!0}),t);var tt={};O(tt,{SnackbarProvider:()=>_});module.exports=A(tt);var R=require("notistack");var y=p(require("chroma-js")),E=require("notistack"),s=p(require("react")),P=require("react-icons/fa"),M=require("react-icons/io5"),o=p(require("styled-components")),V=p(require("@mobilestockweb/button")),m=p(require("@mobilestockweb/tools"));function T(t){let e=(t==null?void 0:t.toString())||"",a=80;if(e.length>a){let r=e.lastIndexOf(" ",a);return r===-1&&(r=a),e.slice(0,r)}return e}var n=require("react/jsx-runtime"),d=(0,s.forwardRef)(function({id:e,message:a,variant:r},i){let{closeSnackbar:k}=(0,E.useSnackbar)(),[f,z]=(0,s.useState)(!1),u=T(a),B=(0,s.useCallback)(()=>{k(e)},[e,k]);return s.default.isValidElement(a)?(0,n.jsx)(j,{ref:i,children:a}):(0,n.jsxs)(F,{ref:i,$variant:r,$isExpanded:f,children:[(0,n.jsxs)(q,{children:[u&&(0,n.jsx)(G,{children:(0,n.jsx)(K,{"data-testid":"snackbar-title",$variant:r,children:u})}),(0,n.jsx)(S,{"data-testid":"snackbar-close-button",onClick:B,children:(0,n.jsx)(X,{$variant:r,size:16})})]}),(0,n.jsx)(Y,{$isExpanded:f,children:(0,n.jsx)(Z,{$variant:r,children:u&&(0,n.jsx)(Q,{"data-testid":"snackbar-full-message",$variant:r,children:a})})}),u!==a&&(0,n.jsx)(S,{"data-testid":"snackbar-expand-button",onClick:()=>z(!f),children:(0,n.jsx)(U,{$variant:r,$isExpanded:f})})]})});function c(t="default",e){return e.colors.alert[t]}var F=o.default.div`
+  background-color: ${({theme:t,$variant:e})=>c(e,t)};
+  border-radius: 0.4rem;
+  display: flex;
+  min-height: 3rem;
+  padding: ${({$isExpanded:t})=>t?"0 0.75rem":"0.25rem 0.75rem"};
+  flex-direction: column;
+  justify-content: center;
+`,j=o.default.div``,q=o.default.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+`,S=(0,o.default)(V.default)`
+  background-color: transparent;
+  width: auto;
+  min-height: unset;
+  box-shadow: none;
+  @media (max-width: 768px) {
+    font-size: calc(1rem - (48rem - 100vw) / 100);
+  }
+  padding: 0.2rem 0;
+`,G=o.default.div`
+  max-width: 75vw;
+`,K=o.default.p`
+  align-items: center;
+  color: ${({theme:t,$variant:e})=>m.default.defineTextColor(c(e,t))};
+  font-size: 1rem;
+  display: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @media (min-width: 768px) {
+    width: 25vw;
+  }
+  @media (max-width: 768px) {
+    font-size: calc(1.15rem - (48rem - 100vw) / 100);
+  }
+`,Q=o.default.p`
+  color: ${({theme:t,$variant:e})=>m.default.defineTextColor(c(e,t))};
+  word-break: break-word;
+  @media (min-width: 768px) {
+    width: 25vw;
+  }
+`,U=(0,o.default)(P.FaChevronDown)`
+  color: ${({theme:t,$variant:e})=>m.default.defineTextColor(c(e,t))};
+  transition: all 0.3s ease-in-out;
+  transform: rotate(0deg);
+
+  ${({$isExpanded:t})=>t&&o.css`
+      transform: rotate(180deg);
+    `}
+`,X=(0,o.default)(M.IoClose)`
+  color: ${({theme:t,$variant:e})=>m.default.defineTextColor(c(e,t))};
+`,Y=o.default.div`
+  overflow: hidden;
+  transition:
+    opacity ${({$isExpanded:t})=>t?"0.3s":"0.05s"} ease-in-out,
+    max-height 0.3s ease-in-out;
+  max-height: ${({$isExpanded:t})=>t?"31.25rem":"0"};
+  opacity: ${({$isExpanded:t})=>t?"1":"0"};
+`,Z=o.default.div`
+  background-color: ${({theme:t,$variant:e})=>(0,y.default)(c(e,t)).shade(.25).css()};
+  border-radius: 0.6rem;
+  display: flex;
+  padding: 0 0.5rem;
+`;var D=require("react/jsx-runtime");function _(a){var r=a,{children:t}=r,e=C(r,["children"]);return(0,D.jsx)(R.SnackbarProvider,w($({Components:{default:d,error:d,info:d,success:d,warning:d},anchorOrigin:{vertical:"top",horizontal:"left"},classes:{containerRoot:"snackbar-style"},autoHideDuration:5e3},e),{children:t}))}0&&(module.exports={SnackbarProvider});

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@mobilestockweb/snackbar",
+  "version": "0.0.1",
+  "main": "index.js",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-icons": "^5.3.0",
+    "styled-components": "^6.1.8",
+    "chroma-js": "^3.1.2",
+    "notistack": "^3.0.1",
+    "@mobilestockweb/button": "^0.0.8",
+    "@mobilestockweb/tools": "^0.0.10"
+  }
+}