@webitel/styleguide 26.2.4 → 26.2.6

package/package.json

@@ -1,52 +1,58 @@
 {
-  "name": "@webitel/styleguide",
-  "version": "26.2.4",
-  "main": "",
-  "exports": {
-    ".": "./src/lib/main.scss",
-    "./typography": "./src/lib/styleguide/typography/_typography.scss",
-    "./_typography": "./src/lib/styleguide/typography/_typography.scss",
-    "./scroll": "./src/lib/styleguide/scroll.scss",
-    "./_scroll": "./src/lib/styleguide/scroll.scss",
-    "./viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss",
-    "./_viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss",
-    "./auditor": "./src/auditor/main.scss",
-    "./_auditor": "./src/auditor/main.scss",
-    "./client": "./src/client/main.scss",
-    "./_client": "./src/client/main.scss",
-    "./crm": "./src/crm/main.scss",
-    "./_crm": "./src/crm/main.scss",
-    "./history": "./src/history/main.scss",
-    "./_history": "./src/history/main.scss",
-    "./supervisor": "./src/supervisor/main.scss",
-    "./_supervisor": "./src/supervisor/main.scss",
-    "./workspaces": "./src/workspaces/main.scss",
-    "./_workspaces": "./src/workspaces/main.scss",
-    "./wt-flow-diagram": "./src/wt-flow-diagram/main.scss",
-    "./_wt-flow-diagram": "./src/wt-flow-diagram/main.scss",
-    "./fonts": "./src/lib/styleguide/fonts/_fonts.scss",
-    "./_fonts": "./src/lib/styleguide/fonts/_fonts.scss",
-    "./component-schemes": {
-      "import": "./src/lib/primevue/components/index.js"
-    },
-    "./semantic": {
-      "import": "./src/lib/primevue/semantic/index.js"
-    },
-    "./extend": {
-      "import": "./src/lib/primevue/extend/extend.js"
-    },
-    "./primitive": {
-      "import": "./src/lib/primevue/primitive/index.js"
-    }
-  },
-  "files": [
-    "src/"
-  ],
-  "scripts": {
-    "publish-styleguide": "npm run build && npm publish --access public",
-    "build": "tsc"
-  },
-  "devDependencies": {
-    "typescript": "^5.8.3"
-  }
+	"name": "@webitel/styleguide",
+	"version": "26.2.6",
+	"main": "",
+	"files": [
+		"src/"
+	],
+	"scripts": {
+		"publish-styleguide": "npm run build && npm publish --access public",
+		"build": "tsc -p ./tsconfig.build.json",
+		"lint:fix": "npx biome check --write ./src"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.3.14",
+		"typescript": "^5.9.x"
+	},
+	"exports": {
+		".": {
+			"style": "./src/lib/main.css",
+			"import": "./src/lib/main.css"
+		},
+		"./src/lib/main.css": {
+			"style": "./src/lib/main.css",
+			"import": "./src/lib/main.css"
+		},
+		"./typography": "./src/lib/styleguide/typography/typography.css",
+		"./scroll": "./src/lib/styleguide/scroll.css",
+		"./viewport-breakpoints": "./src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss",
+		"./fonts": "./src/lib/styleguide/fonts/fonts.css",
+		"./applications/auditor": "./src/applications/auditor/main.scss",
+		"./applications/client": "./src/applications/client/main.scss",
+		"./applications/crm": "./src/applications/crm/main.scss",
+		"./applications/history": "./src/applications/history/main.scss",
+		"./applications/supervisor": "./src/applications/supervisor/main.scss",
+		"./applications/workspaces": "./src/applications/workspaces/main.scss",
+		"./applications/wt-flow-diagram": "./src/applications/wt-flow-diagram/main.scss",
+		"./component-schemes": {
+			"types": "./types/lib/primevue/components/index.d.ts",
+			"import": "./src/lib/primevue/components/index.ts"
+		},
+		"./semantic": {
+			"types": "./types/lib/primevue/semantic/index.d.ts",
+			"import": "./src/lib/primevue/semantic/index.ts"
+		},
+		"./extend": {
+			"types": "./types/lib/primevue/extend/extend.d.ts",
+			"import": "./src/lib/primevue/extend/extend.ts"
+		},
+		"./primitive": {
+			"types": "./types/lib/primevue/primitive/index.d.ts",
+			"import": "./src/lib/primevue/primitive/index.ts"
+		},
+		"./enums": {
+			"types": "./types/enums/index.d.ts",
+			"import": "./src/enums/index.ts"
+		}
+	}
 }

package/src/{wt-flow-diagram → applications/wt-flow-diagram}/styleguide/spacings/_spacing.scss

@@ -1,6 +1,6 @@
 #wt-flow-diagram {
   /* В компоненті `key-value-pair` присутні компоненти з бібліотеки `webitel.ui`,
-  наприклад, `<wt-input>`, margin яких = 10px, тому у даному випадку я використав
+  наприклад, `<wt-input-text>`, margin яких = 10px, тому у даному випадку я використав
   змінну `--body-block-margin` , яка також = 10px.
  Можна працювати по нових спейсінгах, але треба переписати компоненти, які є в бібліотеці*/
   --body-block-margin: 10px;
@@ -12,7 +12,7 @@
   --nodes-panel-width: 260px;
   --config-panel-width: -16px; // invisible config panel width is -16 to compensate minimap offset from side + from config panel itself
   --min-flow-toolbar-width: 491px;
-  --flow-toolbar-height: 56px;
+  --flow-toolbar-height: 40px;
   --flow-pages-height: 56px;
   --zoom-panel-width: 227px;
   --zoom-panel-height: calc(

package/src/enums/WtTypography/WtTypography.enum.ts

@@ -0,0 +1,15 @@
+export const WtTypography = {
+	Button: 'typo-button',
+	Body1: 'typo-body-1',
+	Body2: 'typo-body-2',
+	Subtitle1: 'typo-subtitle-1',
+	Subtitle2: 'typo-subtitle-2',
+	Heading1: 'typo-heading-1',
+	Heading2: 'typo-heading-2',
+	Heading3: 'typo-heading-3',
+	Heading4: 'typo-heading-4',
+	Caption: 'typo-caption',
+	Overline: 'typo-overline',
+} as const;
+
+export type WtTypography = (typeof WtTypography)[keyof typeof WtTypography];

package/src/enums/index.ts

@@ -0,0 +1 @@
+export * from './WtTypography/WtTypography.enum';

package/src/lib/main.css

@@ -0,0 +1 @@
+@import "./styleguide/styleguide.css";

package/src/lib/primevue/components/avatar/colors/dark/index.ts

@@ -1,22 +1,22 @@
 export default {
-  root: {
-    background: '{content.border.color}',
-    color: '{text.avatar.color}',
-  },
-  letters: {
-    'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
-    'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
-    'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
-    'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
-    'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
-    'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
-    'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
-    'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
-    'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
-    'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
-    'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
-    'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
-    'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
-    'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
-  }
-}
+	root: {
+		background: '{content.border.color}',
+		color: '{text.avatar.color}',
+	},
+	letters: {
+		'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
+		'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
+		'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
+		'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
+		'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
+		'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
+		'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
+		'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
+		'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
+		'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
+		'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
+		'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
+		'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
+		'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
+	},
+};

package/src/lib/primevue/components/avatar/colors/index.ts

@@ -2,8 +2,8 @@ import darkColors from './dark';
 import lightColors from './light';
 
 const colorScheme = {
-  light: lightColors,
-  dark: darkColors
-}
+	light: lightColors,
+	dark: darkColors,
+};
 
 export default colorScheme;

package/src/lib/primevue/components/avatar/colors/light/index.ts

@@ -1,22 +1,22 @@
 export default {
-  root: {
-    background: '{content.border.color}',
-    color: '{text.avatar.color}',
-  },
-  letters: {
-    'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
-    'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
-    'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
-    'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
-    'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
-    'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
-    'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
-    'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
-    'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
-    'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
-    'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
-    'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
-    'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
-    'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
-  }
-}
+	root: {
+		background: '{content.border.color}',
+		color: '{text.avatar.color}',
+	},
+	letters: {
+		'p1-color': 'linear-gradient(45deg, {deep-purple.700}, {deep-purple.350})',
+		'p2-color': 'linear-gradient(45deg, {indigo.550}, {indigo.300})',
+		'p3-color': 'linear-gradient(45deg, {deep-purple.350}, {cyan.250})',
+		'p4-color': 'linear-gradient(45deg, {deep-purple.500}, {green.500})',
+		'p5-color': 'linear-gradient(45deg, {green.300}, {pink.350})',
+		'p6-color': 'linear-gradient(45deg, {purple.550}, {pink.450})',
+		'p7-color': 'linear-gradient(45deg, {pink.450}, {pink.200})',
+		'p8-color': 'linear-gradient(45deg, {red.500}, {amber.500})',
+		'p9-color': 'linear-gradient(45deg, {blue.450}, {light-green.450})',
+		'p10-color': 'linear-gradient(45deg, {green.550}, {teal.200})',
+		'p11-color': 'linear-gradient(45deg, {amber.500}, {green.500})',
+		'p12-color': 'linear-gradient(45deg, {green.500}, {indigo.500})',
+		'p13-color': 'linear-gradient(45deg, {orange.400}, {amber.200})',
+		'p14-color': 'linear-gradient(45deg, {amber.400}, {lime.350})',
+	},
+};

package/src/lib/primevue/components/avatar/index.ts

@@ -2,9 +2,8 @@ import colorScheme from './colors';
 import sizes from './sizes';
 
 const AvatarScheme = {
-  colorScheme,
-  sizes,
-}
-
-export default AvatarScheme
+	colorScheme,
+	sizes,
+};
 
+export default AvatarScheme;

package/src/lib/primevue/components/avatar/sizes/index.ts

@@ -1,49 +1,49 @@
 const sizes = {
-  width: '2rem',
-  height: '2rem',
-  fontSize: '1rem',
-  borderRadius: '{content.border.radius}',
+	width: '2rem',
+	height: '2rem',
+	fontSize: '1rem',
+	borderRadius: '{content.border.radius}',
 
-  '2xs': {
-    width: '1rem',
-    height: '1rem',
-    fontSize: '0.4rem',
-  },
-  xs: {
-    width: '1.5rem',
-    height: '1.5rem',
-    fontSize: '0.6rem',
-  },
-  sm: {
-    width: '2rem',
-    height: '2rem',
-    fontSize: '0.75rem',
-  },
-  md: {
-    width: '2.5rem',
-    height: '2.5rem',
-    fontSize: '0.875rem',
-  },
-  lg: {
-    width: '3.5rem',
-    height: '3.5rem',
-    fontSize: '1.25rem',
-  },
-  xl: {
-    width: '4.5rem',
-    height: '4.5rem',
-    fontSize: '1.5rem',
-  },
-  '2xl': {
-    width: '6rem',
-    height: '6rem',
-    fontSize: '2.25rem',
-  },
-  '3xl': {
-    width: '8rem',
-    height: '8rem',
-    fontSize: '3rem',
-  },
+	'2xs': {
+		width: '1rem',
+		height: '1rem',
+		fontSize: '0.4rem',
+	},
+	xs: {
+		width: '1.5rem',
+		height: '1.5rem',
+		fontSize: '0.6rem',
+	},
+	sm: {
+		width: '2rem',
+		height: '2rem',
+		fontSize: '0.75rem',
+	},
+	md: {
+		width: '2.5rem',
+		height: '2.5rem',
+		fontSize: '0.875rem',
+	},
+	lg: {
+		width: '3.5rem',
+		height: '3.5rem',
+		fontSize: '1.25rem',
+	},
+	xl: {
+		width: '4.5rem',
+		height: '4.5rem',
+		fontSize: '1.5rem',
+	},
+	'2xl': {
+		width: '6rem',
+		height: '6rem',
+		fontSize: '2.25rem',
+	},
+	'3xl': {
+		width: '8rem',
+		height: '8rem',
+		fontSize: '3rem',
+	},
 };
 
-export default sizes
+export default sizes;

package/src/lib/primevue/components/badge/colors/dark/index.ts

@@ -1,50 +1,50 @@
 const darkColors = {
-  background: '{secondary.color}',
-  color: '{secondary.foreground}',
-  secondary: {
-    background: '{secondary.color}',
-    color: '{secondary.foreground}',
-  },
-  success: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-  },
-  info: {
-    background: '{info.color}',
-    color: '{info.foreground}',
-  },
-  warn: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-  },
-  error: {
-    background: '{error.color}',
-    color: '{error.foreground}',
-  },
-  online: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-  },
-  dnd: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-  },
-  busy: {
-    background: '{error.color}',
-    color: '{error.foreground}',
-  },
-  pause: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-  },
-  onlineCc: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-  },
-  offline: {
-    background: '{secondary.color}',
-    color: '{secondary.foreground}',
-  },
-}
+	background: '{secondary.color}',
+	color: '{secondary.foreground}',
+	secondary: {
+		background: '{secondary.color}',
+		color: '{secondary.foreground}',
+	},
+	success: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+	},
+	info: {
+		background: '{info.color}',
+		color: '{info.foreground}',
+	},
+	warn: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+	},
+	error: {
+		background: '{error.color}',
+		color: '{error.foreground}',
+	},
+	online: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+	},
+	dnd: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+	},
+	busy: {
+		background: '{error.color}',
+		color: '{error.foreground}',
+	},
+	pause: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+	},
+	onlineCc: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+	},
+	offline: {
+		background: '{secondary.color}',
+		color: '{secondary.foreground}',
+	},
+};
 
-export default darkColors
+export default darkColors;

package/src/lib/primevue/components/badge/colors/index.ts

@@ -2,8 +2,8 @@ import darkColors from './dark';
 import lightColors from './light';
 
 const colorScheme = {
-  light: lightColors,
-  dark: darkColors
-}
+	light: lightColors,
+	dark: darkColors,
+};
 
 export default colorScheme;

package/src/lib/primevue/components/badge/colors/light/index.ts

@@ -1,50 +1,50 @@
 const darkColors = {
-  background: '{secondary.color}',
-  color: '{secondary.foreground}',
-  secondary: {
-    background: '{secondary.color}',
-    color: '{secondary.foreground}',
-  },
-  success: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-  },
-  info: {
-    background: '{info.color}',
-    color: '{info.foreground}',
-  },
-  warn: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-  },
-  error: {
-    background: '{error.color}',
-    color: '{error.foreground}',
-  },
-  online: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-  },
-  dnd: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-  },
-  busy: {
-    background: '{error.color}',
-    color: '{error.foreground}',
-  },
-  pause: {
-    background: '{warn.color}',
-    color: '{warn.foreground}',
-  },
-  onlineCc: {
-    background: '{success.color}',
-    color: '{success.foreground}',
-  },
-  offline: {
-    background: '{secondary.color}',
-    color: '{secondary.foreground}',
-  },
-}
+	background: '{secondary.color}',
+	color: '{secondary.foreground}',
+	secondary: {
+		background: '{secondary.color}',
+		color: '{secondary.foreground}',
+	},
+	success: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+	},
+	info: {
+		background: '{info.color}',
+		color: '{info.foreground}',
+	},
+	warn: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+	},
+	error: {
+		background: '{error.color}',
+		color: '{error.foreground}',
+	},
+	online: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+	},
+	dnd: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+	},
+	busy: {
+		background: '{error.color}',
+		color: '{error.foreground}',
+	},
+	pause: {
+		background: '{warn.color}',
+		color: '{warn.foreground}',
+	},
+	onlineCc: {
+		background: '{success.color}',
+		color: '{success.foreground}',
+	},
+	offline: {
+		background: '{secondary.color}',
+		color: '{secondary.foreground}',
+	},
+};
 
-export default darkColors
+export default darkColors;

package/src/lib/primevue/components/badge/index.ts

@@ -2,8 +2,8 @@ import colorScheme from './colors';
 import sizes from './sizes';
 
 const BadgeScheme = {
-  colorScheme,
-  sizes,
-}
+	colorScheme,
+	sizes,
+};
 
-export default BadgeScheme
+export default BadgeScheme;

package/src/lib/primevue/components/badge/sizes/index.ts

@@ -1,19 +1,19 @@
 const sizes = {
-  sm: {
-    width: '0.5rem',
-    height: '0.5rem',
-    fontSize: '0.5rem',
-  },
-  md: {
-    width: '1rem',
-    height: '1rem',
-    fontSize: '1rem',
-  },
-  lg: {
-    width: '1.5rem',
-    height: '1.5rem',
-    fontSize: '1.5rem',
-  },
-}
+	sm: {
+		width: '0.5rem',
+		height: '0.5rem',
+		fontSize: '0.5rem',
+	},
+	md: {
+		width: '1rem',
+		height: '1rem',
+		fontSize: '1rem',
+	},
+	lg: {
+		width: '1.5rem',
+		height: '1.5rem',
+		fontSize: '1.5rem',
+	},
+};
 
-export default sizes
+export default sizes;