@consumidor-positivo/aurora 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconX,\n IconClock,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_NEUTRAL_70,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport './styles.scss'\n\nexport type AlertProps = {\n showIcon?: boolean\n status?: 'success' | 'error' | 'warning' | 'info' | 'timer'\n type?: 1 | 2\n orientation?: 'horizontal' | 'vertical'\n title?: { content?: React.ReactNode; weight?: 'bold' | 'normal' }\n text?: React.ReactNode\n actionButton?: { content?: string; onClick?: () => void }\n closeButton?: boolean\n customIcon?: JSX.Element\n children?: React.ReactNode\n countdown?: number\n onCountdownEnd?: () => void\n onCloseButton?: () => void\n}\n\nexport const Alert = ({\n showIcon = true,\n status = 'info',\n type = 1,\n orientation = 'horizontal',\n title,\n text,\n actionButton,\n closeButton = false,\n children,\n countdown = 59,\n onCountdownEnd,\n onCloseButton,\n customIcon\n}: AlertProps) => {\n const [isClosed, setIsClosed] = useState(false)\n const [timeLeft, setTimeLeft] = useState(countdown)\n const [isCountdownFinished, setIsCountdownFinished] = useState(false)\n\n useEffect(() => {\n if (status !== 'timer' || timeLeft <= 0) return\n\n const timer = setInterval(() => {\n setTimeLeft((prev) => {\n if (prev <= 1) {\n clearInterval(timer)\n setIsCountdownFinished(true)\n if (onCountdownEnd) onCountdownEnd()\n }\n return prev - 1\n })\n }, 1000)\n\n return () => clearInterval(timer)\n }, [status, timeLeft, onCountdownEnd])\n\n useEffect(() => {\n if (timeLeft > 0) {\n setIsCountdownFinished(false)\n }\n }, [timeLeft])\n\t\n const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n\t\tevent.preventDefault();\n\t\t\n setTimeLeft(countdown)\n setIsCountdownFinished(false)\n actionButton?.onClick?.()\n }\n\n const handleCloseButtonClick = () => {\n setIsClosed(true)\n onCloseButton?.()\n }\n\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n timer: {\n option: 'timer',\n icon: (\n <div className=\"au-alert__timer\">\n <IconClock rawColor={COLOR_WARNING_50} />\n {!isCountdownFinished && (\n <Text\n className=\"au-alert__countdown\"\n variant=\"body-small\"\n weight=\"bold\">\n {timeLeft}s\n </Text>\n )}\n </div>\n ),\n },\n }\n\n const alertClasses = classNames('au-alert', {\n [`au-alert--${statusMap[status].option}--type-${type}`]:\n statusMap[status].option,\n })\n\n if (isClosed) return null\n\n return (\n <div className={alertClasses}>\n <div className=\"au-alert__content\">\n <Conditional condition={showIcon} renderIf={ customIcon ? customIcon : statusMap[status].icon} />\n <div className={`au-alert__container--${orientation}`}>\n <Conditional\n condition={!!title || !!text}\n renderIf={\n <div>\n <h4\n className={`au-alert__title au-alert__title--${title?.weight}`}>\n {title?.content}\n </h4>\n <p className=\"au-alert__support-text\">{text}</p>\n </div>\n }\n />\n\n {children}\n <Conditional\n condition={\n !!actionButton && (status !== 'timer' || isCountdownFinished)\n }\n renderIf={\n <button\n className=\"au-alert__action-btn\"\n onClick={(e) => handleActionClick(e)}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n </div>\n\n <Conditional\n condition={closeButton}\n renderIf={\n <button className=\"au-alert__close-btn\">\n <IconX\n rawColor={COLOR_NEUTRAL_70}\n onClick={handleCloseButtonClick}\n />\n </button>\n }\n />\n </div>\n )\n}\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Alert/index.tsx"],"sourcesContent":["import { useState, useEffect } from 'react'\nimport classNames from 'classnames'\nimport {\n IconAlertOctagon,\n IconAlertTriangle,\n IconCheck,\n IconInfo,\n IconX,\n IconClock,\n} from '@components/icons'\nimport {\n COLOR_ERROR_50,\n COLOR_INFO_50,\n COLOR_NEUTRAL_70,\n COLOR_SUCCESS_50,\n COLOR_WARNING_50,\n} from '@core/tokens'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport './styles.scss'\n\nexport type AlertProps = {\n showIcon?: boolean\n status?: 'success' | 'error' | 'warning' | 'info' | 'timer'\n type?: 1 | 2\n orientation?: 'horizontal' | 'vertical'\n title?: { content?: React.ReactNode; weight?: 'bold' | 'normal' }\n text?: React.ReactNode\n actionButton?: { content?: string; onClick?: () => void }\n closeButton?: boolean\n customIcon?: JSX.Element\n children?: React.ReactNode\n countdown?: number\n onCountdownEnd?: () => void\n onCloseButton?: () => void\n}\n\nexport const Alert = ({\n showIcon = true,\n status = 'info',\n type = 1,\n orientation = 'horizontal',\n title,\n text,\n actionButton,\n closeButton = false,\n children,\n countdown = 59,\n onCountdownEnd,\n onCloseButton,\n customIcon\n}: AlertProps) => {\n const [isClosed, setIsClosed] = useState(false)\n const [timeLeft, setTimeLeft] = useState(countdown)\n const [isCountdownFinished, setIsCountdownFinished] = useState(false)\n\n useEffect(() => {\n if (status !== 'timer' || timeLeft <= 0) return\n\n const timer = setInterval(() => {\n setTimeLeft((prev) => {\n if (prev <= 1) {\n clearInterval(timer)\n setIsCountdownFinished(true)\n if (onCountdownEnd) onCountdownEnd()\n }\n return prev - 1\n })\n }, 1000)\n\n return () => clearInterval(timer)\n }, [status, timeLeft, onCountdownEnd])\n\n useEffect(() => {\n if (timeLeft > 0) {\n setIsCountdownFinished(false)\n }\n }, [timeLeft])\n\t\n const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n\t\tevent.preventDefault();\n\t\t\n setTimeLeft(countdown)\n setIsCountdownFinished(false)\n actionButton?.onClick?.()\n }\n\n const handleCloseButtonClick = () => {\n setIsClosed(true)\n onCloseButton?.()\n }\n\n const statusMap = {\n success: {\n option: 'success',\n icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n },\n error: {\n option: 'error',\n icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n },\n warning: {\n option: 'warning',\n icon: <IconAlertTriangle rawColor={COLOR_WARNING_50} />,\n },\n info: { option: 'info', icon: <IconInfo rawColor={COLOR_INFO_50} /> },\n timer: {\n option: 'timer',\n icon: (\n <div className=\"au-alert__timer\">\n <IconClock rawColor={COLOR_WARNING_50} />\n {!isCountdownFinished && (\n <Text\n className=\"au-alert__countdown\"\n variant=\"body-small\"\n weight=\"bold\">\n {timeLeft}s\n </Text>\n )}\n </div>\n ),\n },\n }\n\n const alertClasses = classNames('au-alert', {\n [`au-alert--${statusMap[status].option}--type-${type}`]:\n statusMap[status].option,\n })\n\n if (isClosed) return null\n\n return (\n <div className={alertClasses}>\n <div className=\"au-alert__content\">\n <Conditional condition={showIcon} renderIf={ customIcon ? customIcon : statusMap[status].icon} />\n <div className={`au-alert__container--${orientation}`}>\n <Conditional\n condition={!!title || !!text}\n renderIf={\n <div>\n <h4\n className={`au-alert__title au-alert__title--${title?.weight}`}>\n {title?.content}\n </h4>\n <p className=\"au-alert__support-text\">{text}</p>\n </div>\n }\n />\n\n {children}\n <Conditional\n condition={\n !!actionButton && (status !== 'timer' || isCountdownFinished)\n }\n renderIf={\n <button\n className=\"au-alert__action-btn\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n onClick={(e) => handleActionClick(e)}>\n {actionButton?.content}\n </button>\n }\n />\n </div>\n </div>\n\n <Conditional\n condition={closeButton}\n renderIf={\n <button className=\"au-alert__close-btn\">\n <IconX\n rawColor={COLOR_NEUTRAL_70}\n onClick={handleCloseButtonClick}\n />\n </button>\n }\n />\n </div>\n )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqCO,MAAM,QAAQ,CAAC;AAAA,EACpB,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,SAAS;AAClD,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,KAAK;AAEpE,YAAU,MAAM;AACV,QAAA,WAAW,WAAW,YAAY,EAAG;AAEnC,UAAA,QAAQ,YAAY,MAAM;AAC9B,kBAAY,CAAC,SAAS;AACpB,YAAI,QAAQ,GAAG;AACb,wBAAc,KAAK;AACnB,iCAAuB,IAAI;AAC3B,cAAI,eAA+B;QACrC;AACA,eAAO,OAAO;AAAA,MAAA,CACf;AAAA,OACA,GAAI;AAEA,WAAA,MAAM,cAAc,KAAK;AAAA,EAC/B,GAAA,CAAC,QAAQ,UAAU,cAAc,CAAC;AAErC,YAAU,MAAM;AACd,QAAI,WAAW,GAAG;AAChB,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EAAA,GACC,CAAC,QAAQ,CAAC;AAEP,QAAA,oBAAoB,CAAC,UAA+C;;AAC1E,UAAM,eAAe;AAEnB,gBAAY,SAAS;AACrB,2BAAuB,KAAK;AAC5B,uDAAc,YAAd;AAAA,EAAwB;AAG1B,QAAM,yBAAyB,MAAM;AACnC,gBAAY,IAAI;AACA;AAAA,EAAA;AAGlB,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM,oBAAC,kBAAiB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACpD;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,oBAAC,mBAAkB,EAAA,UAAU,iBAAkB,CAAA;AAAA,IACvD;AAAA,IACA,MAAM,EAAE,QAAQ,QAAQ,MAAO,oBAAA,UAAA,EAAS,UAAU,cAAA,CAAe,EAAG;AAAA,IACpE,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MACE,qBAAC,OAAI,EAAA,WAAU,mBACb,UAAA;AAAA,QAAC,oBAAA,WAAA,EAAU,UAAU,iBAAkB,CAAA;AAAA,QACtC,CAAC,uBACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,QAAO;AAAA,YACN,UAAA;AAAA,cAAA;AAAA,cAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA,GAEJ;AAAA,IAEJ;AAAA,EAAA;AAGI,QAAA,eAAe,WAAW,YAAY;AAAA,IAC1C,CAAC,aAAa,UAAU,MAAM,EAAE,MAAM,UAAU,IAAI,EAAE,GACpD,UAAU,MAAM,EAAE;AAAA,EAAA,CACrB;AAED,MAAI,SAAiB,QAAA;AAGnB,SAAA,qBAAC,OAAI,EAAA,WAAW,cACd,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,MAAC,oBAAA,aAAA,EAAY,WAAW,UAAU,UAAW,aAAa,aAAa,UAAU,MAAM,EAAE,KAAM,CAAA;AAAA,MAC9F,qBAAA,OAAA,EAAI,WAAW,wBAAwB,WAAW,IACjD,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC;AAAA,YACxB,+BACG,OACC,EAAA,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,oCAAoC,+BAAO,MAAM;AAAA,kBAC3D,UAAO,+BAAA;AAAA,gBAAA;AAAA,cACV;AAAA,cACC,oBAAA,KAAA,EAAE,WAAU,0BAA0B,UAAK,MAAA;AAAA,YAAA,GAC9C;AAAA,UAAA;AAAA,QAEJ;AAAA,QAEC;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WACE,CAAC,CAAC,iBAAiB,WAAW,WAAW;AAAA,YAE3C,UACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBAClB,MAAK;AAAA,gBACG,SAAS,CAAC,MAAM,kBAAkB,CAAC;AAAA,gBAClC,UAAc,6CAAA;AAAA,cAAA;AAAA,YACjB;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,UACE,oBAAC,UAAO,EAAA,WAAU,uBAChB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,SAAS;AAAA,UAAA;AAAA,QAAA,GAEb;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|