@ably/ui 15.5.0 → 15.5.1-dev.96cb1c5a
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.
- package/core/Meganav.js.map +1 -1
- package/core/Notice.js +1 -1
- package/core/Notice.js.map +1 -1
- package/core/styles/colors/computed-colors.json +1 -0
- package/index.d.ts +24 -18
- package/package.json +14 -15
package/core/Meganav.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\n\nimport { connectState } from \"./remote-data-store.js\";\nimport { selectSessionData } from \"./remote-session-data.js\";\n\nimport Logo from \"./Logo\";\nimport MeganavData from \"./Meganav/component.json\";\nimport MeganavScripts from \"./Meganav/component.js\";\nimport MeganavItemsDesktop from \"./MeganavItemsDesktop\";\nimport MeganavItemsSignedIn from \"./MeganavItemsSignedIn\";\nimport MeganavItemsMobile from \"./MeganavItemsMobile\";\nimport Notice from \"./Notice\";\nimport _absUrl from \"./url-base.js\";\nimport MeganavContentProducts from \"./MeganavContentProducts\";\nimport MeganavContentUseCases from \"./MeganavContentUseCases\";\nimport MeganavContentCompany from \"./MeganavContentCompany\";\nimport MeganavContentDevelopers from \"./MeganavContentDevelopers\";\nimport MeganavSearch from \"./MeganavSearch\";\nimport { ColorClass } from \"./styles/colors/types\";\n\nexport type MeganavTheme = {\n backgroundColor?: ColorClass;\n textColor?: ColorClass;\n buttonBackgroundColor?: ColorClass;\n buttonTextColor?: ColorClass;\n mobileMenuColor: ColorClass;\n logoTextColor?: ColorClass;\n barShadow?: string;\n};\n\nexport type AbsUrl = (path: string) => string;\n\nexport type MeganavPaths = {\n logo?: string;\n iconSprites: string;\n ablyStack: string;\n blogThumb1: string;\n blogThumb2: string;\n blogThumb3: string;\n awsLogo?: string;\n};\n\nexport type MeganavPanels = {\n [index: string]: ({\n paths,\n absUrl,\n statusUrl,\n }: {\n paths?: MeganavPaths;\n absUrl: (path: string) => string;\n statusUrl: string;\n }) => ReactNode;\n};\n\nexport type MeganavSessionState = {\n signedIn: boolean;\n logOut: {\n token: string;\n href: string;\n text: string;\n };\n accountName: string;\n preferredEmail: string;\n account: {\n links: {\n dashboard: {\n href: string;\n };\n };\n };\n mySettings: {\n text: string;\n href: string;\n };\n myAccessTokens: {\n text: string;\n href: string;\n };\n};\n\ntype SignInProps = {\n sessionState: MeganavSessionState;\n theme: MeganavTheme;\n loginLink: string;\n absUrl: AbsUrl;\n searchDataId?: string;\n};\n\
|
|
1
|
+
{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\n\nimport { connectState } from \"./remote-data-store.js\";\nimport { selectSessionData } from \"./remote-session-data.js\";\n\nimport Logo from \"./Logo\";\nimport MeganavData from \"./Meganav/component.json\";\nimport MeganavScripts from \"./Meganav/component.js\";\nimport MeganavItemsDesktop from \"./MeganavItemsDesktop\";\nimport MeganavItemsSignedIn from \"./MeganavItemsSignedIn\";\nimport MeganavItemsMobile from \"./MeganavItemsMobile\";\nimport Notice from \"./Notice\";\nimport _absUrl from \"./url-base.js\";\nimport MeganavContentProducts from \"./MeganavContentProducts\";\nimport MeganavContentUseCases from \"./MeganavContentUseCases\";\nimport MeganavContentCompany from \"./MeganavContentCompany\";\nimport MeganavContentDevelopers from \"./MeganavContentDevelopers\";\nimport MeganavSearch from \"./MeganavSearch\";\nimport { ColorClass } from \"./styles/colors/types\";\n\nexport type MeganavTheme = {\n backgroundColor?: ColorClass;\n textColor?: ColorClass;\n buttonBackgroundColor?: ColorClass;\n buttonTextColor?: ColorClass;\n mobileMenuColor: ColorClass;\n logoTextColor?: ColorClass;\n barShadow?: string;\n};\n\nexport type AbsUrl = (path: string) => string;\n\nexport type MeganavPaths = {\n logo?: string;\n iconSprites: string;\n ablyStack: string;\n blogThumb1: string;\n blogThumb2: string;\n blogThumb3: string;\n awsLogo?: string;\n};\n\nexport type MeganavPanels = {\n [index: string]: ({\n paths,\n absUrl,\n statusUrl,\n }: {\n paths?: MeganavPaths;\n absUrl: (path: string) => string;\n statusUrl: string;\n }) => ReactNode;\n};\n\nexport type MeganavSessionState = {\n signedIn: boolean;\n logOut: {\n token: string;\n href: string;\n text: string;\n };\n accountName: string;\n preferredEmail: string;\n account: {\n links: {\n dashboard: {\n href: string;\n };\n };\n };\n mySettings: {\n text: string;\n href: string;\n };\n myAccessTokens: {\n text: string;\n href: string;\n };\n};\n\ntype SignInProps = {\n sessionState: MeganavSessionState;\n theme: MeganavTheme;\n loginLink: string;\n absUrl: AbsUrl;\n searchDataId?: string;\n};\n\n// This type is based on the API response from the notice API and the data\n// passed into the Meganav component, which then turns it into something\n// the Notice component can use. The type is exported for the benefit of\n// Voltaire\nexport type MeganavNoticeProps = {\n props: {\n title: string;\n bodyText: string;\n buttonLink: string;\n buttonLabel: string;\n closeBtn: boolean;\n };\n config: {\n cookieId: string;\n noticeId: string | number;\n options: {\n collapse: boolean;\n };\n };\n};\n\ntype MeganavProps = {\n paths?: MeganavPaths;\n themeName: \"white\" | \"black\" | \"transparentToWhite\";\n notice?: MeganavNoticeProps;\n loginLink?: string;\n urlBase?: string;\n addSearchApiKey: string;\n statusUrl: string;\n searchDataId?: string;\n};\n\nconst SignIn = ({\n sessionState,\n theme,\n loginLink,\n absUrl,\n searchDataId,\n}: SignInProps) => {\n return sessionState.signedIn ? (\n <MeganavItemsSignedIn\n absUrl={absUrl}\n sessionState={sessionState}\n theme={theme}\n searchDataId={searchDataId}\n />\n ) : (\n <ul className=\"hidden md:flex items-center\">\n <li className=\"ui-meganav-item\">\n <a\n href={absUrl(\"/contact\")}\n className={`ui-meganav-link ${theme.textColor}`}\n data-id=\"meganav-link\"\n >\n Contact us\n </a>\n </li>\n <li className=\"ui-meganav-item\">\n <a\n href={absUrl(loginLink)}\n className={`ui-meganav-link mr-0 ${theme.textColor}`}\n data-id=\"meganav-link\"\n >\n Login\n </a>\n </li>\n <li className=\"ui-meganav-item\">\n <MeganavSearch absUrl={absUrl} dataId={searchDataId} />\n </li>\n <li className=\"ui-meganav-item\">\n <a\n href={absUrl(\"/sign-up\")}\n data-id=\"meganav-sign-up-btn\"\n className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}\n >\n Sign up free\n </a>\n </li>\n </ul>\n );\n};\n\nconst SignInPlaceholder = () => <div />;\n\nconst panels = {\n MeganavContentProducts,\n MeganavContentUseCases,\n MeganavContentCompany,\n MeganavContentDevelopers,\n};\n\nconst Meganav = ({\n paths,\n themeName = \"white\",\n notice,\n loginLink = \"/login\",\n urlBase,\n addSearchApiKey,\n statusUrl,\n searchDataId,\n}: MeganavProps) => {\n const [sessionState, setSessionState] = useState<MeganavSessionState>();\n\n useEffect(() => {\n // Note if state is never updated, sessionState stays null and never removes the placeholder.\n // This makes SSR consistent (ie. we always show the placeholder)\n connectState(selectSessionData, setSessionState);\n }, []);\n\n useEffect(() => {\n const teardown = MeganavScripts({ themeName, addSearchApiKey });\n return () => teardown();\n }, [sessionState]);\n\n const theme = MeganavData.themes[themeName] as MeganavTheme;\n const absUrl = (path: string) => _absUrl(path, urlBase);\n\n return (\n <nav\n className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`}\n data-id=\"meganav\"\n aria-label=\"Main\"\n >\n {notice && <Notice {...notice.props} config={notice.config} />}\n <div className=\"ui-meganav ui-grid-px\">\n <div className=\"mr-24\">\n <Logo dataId=\"meganav-logo\" href={urlBase} logoUrl={paths?.logo} />\n </div>\n\n <MeganavItemsDesktop\n panels={panels}\n paths={paths}\n theme={theme}\n absUrl={absUrl}\n statusUrl={statusUrl}\n />\n\n {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}\n {sessionState ? (\n <SignIn\n sessionState={sessionState}\n theme={theme}\n loginLink={loginLink}\n absUrl={absUrl}\n searchDataId={searchDataId}\n />\n ) : (\n <SignInPlaceholder />\n )}\n\n <MeganavItemsMobile\n panels={panels}\n sessionState={sessionState}\n paths={paths}\n theme={theme}\n loginLink={loginLink}\n absUrl={absUrl}\n statusUrl={statusUrl}\n searchDataId={searchDataId}\n />\n </div>\n </nav>\n );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useState","connectState","selectSessionData","Logo","MeganavData","MeganavScripts","MeganavItemsDesktop","MeganavItemsSignedIn","MeganavItemsMobile","Notice","_absUrl","MeganavContentProducts","MeganavContentUseCases","MeganavContentCompany","MeganavContentDevelopers","MeganavSearch","SignIn","sessionState","theme","loginLink","absUrl","searchDataId","signedIn","ul","className","li","a","href","textColor","data-id","dataId","buttonBackgroundColor","buttonTextColor","SignInPlaceholder","div","panels","Meganav","paths","themeName","notice","urlBase","addSearchApiKey","statusUrl","setSessionState","teardown","themes","path","nav","backgroundColor","barShadow","aria-label","props","config","logoUrl","logo"],"mappings":"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"}
|
package/core/Notice.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useEffect}from"react";import
|
|
1
|
+
import React,{useEffect}from"react";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";const defaultTextColor="text-neutral-1300";const contentWrapperClasses="w-full pr-8 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100",textColor=defaultTextColor})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}})},[]);return React.createElement("div",{className:cn("ui-announcement",bgColor,textColor),"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
|
|
2
2
|
//# sourceMappingURL=Notice.js.map
|
package/core/Notice.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\n\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\n\ntype ContentWrapperProps = {\n buttonLink: string;\n children: ReactNode;\n textColor?: ColorClass | ColorThemeSet;\n};\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n buttonLink?: string;\n buttonLabel?: string;\n bodyText?: string;\n title?: string;\n closeBtn?: boolean;\n config?: {\n options: {\n collapse: boolean;\n };\n noticeId: string | number;\n cookieId: string;\n };\n bgColor?: string;\n textColor?: ColorClass | ColorThemeSet;\n\n bannerContainer?: Element | null;\n cookieId?: string;\n noticeId?: string;\n options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300\";\n\nconst contentWrapperClasses = \"w-full pr-8 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n buttonLink,\n textColor = defaultTextColor,\n children,\n}: ContentWrapperProps) =>\n buttonLink ? (\n <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n {children}\n </a>\n ) : (\n <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n );\n\nconst Notice = ({\n buttonLink,\n buttonLabel,\n bodyText,\n title,\n config,\n closeBtn,\n bgColor = \"bg-orange-100\",\n textColor = defaultTextColor,\n}: NoticeProps) => {\n useEffect(() => {\n NoticeScripts({\n bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n cookieId: config?.cookieId,\n noticeId: config?.noticeId,\n options: {\n collapse: config?.options?.collapse || false,\n },\n });\n }, []);\n\n return (\n <div\n className={cn(\"ui-announcement\", bgColor, textColor)}\n data-id=\"ui-notice\"\n style={{ maxHeight: 0, overflow: \"hidden\" }}\n >\n <div className=\"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start\">\n <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n <strong className=\"font-bold whitespace-nowrap pr-4\">{title}</strong>\n <span className=\"pr-4\">{bodyText}</span>\n {buttonLabel && (\n <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light\">\n {buttonLabel}\n </span>\n )}\n </ContentWrapper>\n\n {closeBtn && (\n <button\n type=\"button\"\n className=\"ml-auto h-20 w-20 border-none bg-none self-baseline\"\n >\n <Icon\n name=\"icon-gui-x-mark-outline\"\n size=\"1.25rem\"\n color={textColor}\n />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","Icon","cn","NoticeScripts","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","data-id","style","maxHeight","overflow","strong","span","button","type","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AAGpD,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,CAkClD,MAAMC,iBAAmB,oBAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWV,GAAGG,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWV,GAAGG,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,eAAe,CACzBZ,UAAYJ,gBAAgB,CAChB,IACZJ,UAAU,KACRG,cAAc,CACZkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUN,QAAQM,SAClBC,SAAUP,QAAQO,SAClBC,QAAS,CACPC,SAAUT,QAAQQ,SAASC,UAAY,KACzC,CACF,EACF,EAAG,EAAE,EAEL,OACE,oBAACd,OACCD,UAAWV,GAAG,kBAAmBkB,QAASZ,WAC1CoB,UAAQ,YACRC,MAAO,CAAEC,UAAW,EAAGC,SAAU,QAAS,GAE1C,oBAAClB,OAAID,UAAU,6DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAACyB,UAAOpB,UAAU,oCAAoCK,OACtD,oBAACgB,QAAKrB,UAAU,QAAQI,UACvBD,aACC,oBAACkB,QAAKrB,UAAU,gEACbG,cAKNI,UACC,oBAACe,UACCC,KAAK,SACLvB,UAAU,uDAEV,oBAACX,MACCmC,KAAK,0BACLC,KAAK,UACLC,MAAO9B,cAOrB,CAEA,gBAAeM,MAAO"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]
|
package/index.d.ts
CHANGED
|
@@ -763,23 +763,26 @@ export type MeganavSessionState = {
|
|
|
763
763
|
href: string;
|
|
764
764
|
};
|
|
765
765
|
};
|
|
766
|
-
type
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
cookieId: string;
|
|
779
|
-
noticeId: string;
|
|
766
|
+
export type MeganavNoticeProps = {
|
|
767
|
+
props: {
|
|
768
|
+
title: string;
|
|
769
|
+
bodyText: string;
|
|
770
|
+
buttonLink: string;
|
|
771
|
+
buttonLabel: string;
|
|
772
|
+
closeBtn: boolean;
|
|
773
|
+
};
|
|
774
|
+
config: {
|
|
775
|
+
cookieId: string;
|
|
776
|
+
noticeId: string | number;
|
|
777
|
+
options: {
|
|
780
778
|
collapse: boolean;
|
|
781
779
|
};
|
|
782
780
|
};
|
|
781
|
+
};
|
|
782
|
+
type MeganavProps = {
|
|
783
|
+
paths?: MeganavPaths;
|
|
784
|
+
themeName: "white" | "black" | "transparentToWhite";
|
|
785
|
+
notice?: MeganavNoticeProps;
|
|
783
786
|
loginLink?: string;
|
|
784
787
|
urlBase?: string;
|
|
785
788
|
addSearchApiKey: string;
|
|
@@ -1043,19 +1046,22 @@ function Notice({ bannerContainer, cookieId, noticeId, options }: {
|
|
|
1043
1046
|
}
|
|
1044
1047
|
|
|
1045
1048
|
declare module '@ably/ui/core/Notice' {
|
|
1046
|
-
|
|
1049
|
+
import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
|
|
1050
|
+
export type NoticeProps = {
|
|
1047
1051
|
buttonLink?: string;
|
|
1048
1052
|
buttonLabel?: string;
|
|
1049
1053
|
bodyText?: string;
|
|
1050
1054
|
title?: string;
|
|
1051
1055
|
closeBtn?: boolean;
|
|
1052
1056
|
config?: {
|
|
1053
|
-
|
|
1054
|
-
|
|
1057
|
+
options: {
|
|
1058
|
+
collapse: boolean;
|
|
1059
|
+
};
|
|
1060
|
+
noticeId: string | number;
|
|
1055
1061
|
cookieId: string;
|
|
1056
1062
|
};
|
|
1057
1063
|
bgColor?: string;
|
|
1058
|
-
textColor?:
|
|
1064
|
+
textColor?: ColorClass | ColorThemeSet;
|
|
1059
1065
|
bannerContainer?: Element | null;
|
|
1060
1066
|
cookieId?: string;
|
|
1061
1067
|
noticeId?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "15.5.
|
|
3
|
+
"version": "15.5.1-dev.96cb1c5a",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -19,24 +19,23 @@
|
|
|
19
19
|
"workerDirectory": "./public"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@storybook/addon-a11y": "^8.
|
|
23
|
-
"@storybook/addon-essentials": "^8.
|
|
24
|
-
"@storybook/addon-interactions": "^8.
|
|
25
|
-
"@storybook/addon-links": "^8.
|
|
26
|
-
"@storybook/blocks": "^8.
|
|
27
|
-
"@storybook/react-vite": "^8.
|
|
28
|
-
"@storybook/test": "^8.
|
|
29
|
-
"@storybook/test-runner": "^0.21.
|
|
22
|
+
"@storybook/addon-a11y": "^8.6.0",
|
|
23
|
+
"@storybook/addon-essentials": "^8.6.0",
|
|
24
|
+
"@storybook/addon-interactions": "^8.6.0",
|
|
25
|
+
"@storybook/addon-links": "^8.6.0",
|
|
26
|
+
"@storybook/blocks": "^8.6.0",
|
|
27
|
+
"@storybook/react-vite": "^8.6.0",
|
|
28
|
+
"@storybook/test": "^8.6.0",
|
|
29
|
+
"@storybook/test-runner": "^0.21.3",
|
|
30
30
|
"@swc/cli": "^0.6.0",
|
|
31
31
|
"@swc/core": "^1.4.11",
|
|
32
32
|
"@tailwindcss/container-queries": "^0.1.1",
|
|
33
|
-
"@types/dompurify": "^3.0.5",
|
|
34
33
|
"@types/js-cookie": "^3.0.6",
|
|
35
34
|
"@types/lodash.throttle": "^4.1.9",
|
|
36
35
|
"@types/react-dom": "^18.3.0",
|
|
37
36
|
"@types/svg-sprite": "^0.0.39",
|
|
38
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
39
|
-
"@typescript-eslint/parser": "^8.
|
|
37
|
+
"@typescript-eslint/eslint-plugin": "^8.25.0",
|
|
38
|
+
"@typescript-eslint/parser": "^8.25.0",
|
|
40
39
|
"@vitejs/plugin-react": "^4.2.1",
|
|
41
40
|
"@whitespace/storybook-addon-html": "^6.1.1",
|
|
42
41
|
"autoprefixer": "^10.0.2",
|
|
@@ -53,13 +52,13 @@
|
|
|
53
52
|
"posthog-js": "^1.217.4",
|
|
54
53
|
"prettier": "^3.2.5",
|
|
55
54
|
"react-syntax-highlighter": "^15.6.1",
|
|
56
|
-
"storybook": "^8.
|
|
55
|
+
"storybook": "^8.6.0",
|
|
57
56
|
"storybook-dark-mode": "^4.0.2",
|
|
58
57
|
"svg-sprite": "^2.0.4",
|
|
59
58
|
"tailwindcss": "^3.3.6",
|
|
60
59
|
"ts-node": "^10.9.2",
|
|
61
60
|
"typescript": "5.7.3",
|
|
62
|
-
"vite": "^6.
|
|
61
|
+
"vite": "^6.2.0"
|
|
63
62
|
},
|
|
64
63
|
"scripts": {
|
|
65
64
|
"build:prebuild": "rm -rf core reset && mkdir -p dist/core",
|
|
@@ -89,7 +88,7 @@
|
|
|
89
88
|
"addsearch-js-client": "^1.0.2",
|
|
90
89
|
"array-flat-polyfill": "^1.0.1",
|
|
91
90
|
"clsx": "^2.1.1",
|
|
92
|
-
"dompurify": "^3.
|
|
91
|
+
"dompurify": "^3.2.4",
|
|
93
92
|
"highlight.js": "^11.9.0",
|
|
94
93
|
"highlightjs-curl": "^1.3.0",
|
|
95
94
|
"js-cookie": "^3.0.5",
|