@descope/flow-components 2.0.38 → 2.0.40

package/src/icons/linkedin.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-export default ({ noColor }) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="1.5em"
-		height="1.5em"
-		viewBox="0 0 40 40"
-		fill={noColor ? 'currentColor' : '#2867B2'}
-		data-icon="linkedin"
-	>
-		<path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M37.1429 0H2.84821C1.27679 0 0 1.29464 0 2.88393V37.1161C0 38.7054 1.27679 40 2.84821 40H37.1429C38.7143 40 40 38.7054 40 37.1161V2.88393C40 1.29464 38.7143 0 37.1429 0ZM12.0893 34.2857H6.16071V15.1964H12.0982V34.2857H12.0893ZM9.125 12.5893C7.22321 12.5893 5.6875 11.0446 5.6875 9.15179C5.6875 7.25893 7.22321 5.71429 9.125 5.71429C11.0179 5.71429 12.5625 7.25893 12.5625 9.15179C12.5625 11.0536 11.0268 12.5893 9.125 12.5893V12.5893ZM34.3125 34.2857H28.3839V25C28.3839 22.7857 28.3393 19.9375 25.3036 19.9375C22.2143 19.9375 21.7411 22.3482 21.7411 24.8393V34.2857H15.8125V15.1964H21.5V17.8036H21.5804C22.375 16.3036 24.3125 14.7232 27.1964 14.7232C33.1964 14.7232 34.3125 18.6786 34.3125 23.8214V34.2857V34.2857Z"
-		/>
-	</svg>
-);

package/src/icons/microsoft.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-
-export default ({ noColor }) => (
-	<svg
-		width="1.5em"
-		height="1.5em"
-		xmlns="http://www.w3.org/2000/svg"
-		fill={noColor ? 'currentColor' : ''}
-		viewBox="3 3 24 24"
-		data-icon="microsoft"
-	>
-		<rect
-			x="5"
-			y="15.7143"
-			width="9.28571"
-			height="9.28571"
-			fill={noColor ? '' : '#05A6F0'}
-		/>
-		<rect
-			x="5"
-			y="5"
-			width="9.28571"
-			height="9.28571"
-			fill={noColor ? '' : '#F35325'}
-		/>
-		<rect
-			x="15.7143"
-			y="15.7143"
-			width="9.28571"
-			height="9.28571"
-			fill={noColor ? '' : '#FFBA08'}
-		/>
-		<rect
-			x="15.7143"
-			y="5"
-			width="9.28571"
-			height="9.28571"
-			fill={noColor ? '' : '#81BC06'}
-		/>{' '}
-	</svg>
-);

package/src/icons/passkey.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-export default ({ noColor }) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		width="1.5em"
-		height="1.5em"
-		fill={noColor ? 'currentColor' : '#000000'}
-		data-icon="passkey"
-	>
-		<circle cx="10.5" cy="6" r="4.5" />
-		<path d="M22.5,10.5a3.5,3.5,0,1,0-5,3.15V19L19,20.5,21.5,18,20,16.5,21.5,15l-1.24-1.24A3.5,3.5,0,0,0,22.5,10.5Zm-3.5,0a1,1,0,1,1,1-1A1,1,0,0,1,19,10.5Z" />
-		<path d="M14.44,12.52A6,6,0,0,0,12,12H9a6,6,0,0,0-6,6v2H16V14.49A5.16,5.16,0,0,1,14.44,12.52Z" />
-	</svg>
-);

package/src/icons/sso.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export default ({ noColor }) => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="1.5em"
-		height="1.5em"
-		viewBox="50 30 410 450"
-		fill={noColor ? 'currentColor' : '#000000'}
-		data-icon="sso"
-	>
-		<path d="M56.629,379.2c-14.09,14.071-14.09,36.975,0,51.055  c14.08,14.087,36.981,14.087,50.965,0l10.177-10.08l42.438,42.428c7.257,7.268,18.888,7.268,26.155,0l63.244-63.244  c7.268-7.255,7.268-18.89,0-26.157l-42.429-42.427l75.586-75.682c16.174,8.357,34.61,13.075,54.059,13.075  c65.234,0,118.111-52.869,118.111-118.109c0-65.232-52.877-118.111-118.111-118.111c-65.238,0-118.11,52.879-118.11,118.111  c0,19.449,4.721,37.886,13.077,54.06L56.629,379.2z M291.396,150.059c0-25.075,20.354-45.429,45.427-45.429  c25.076,0,45.426,20.354,45.426,45.429s-20.35,45.426-45.426,45.426C311.751,195.485,291.396,175.133,291.396,150.059z" />
-	</svg>
-);

package/src/index.ts

@@ -1,29 +0,0 @@
-import '@descope/web-components-ui';
-
-export * from './Boolean';
-export * from './Button';
-export * from './Checkbox';
-export * from './Code';
-export * from './Container';
-export * from './Divider';
-export * from './icons';
-export * from './Image';
-export * from './Input';
-export * from './Link';
-export * from './Loader';
-export * from './Logo';
-export * from './NewPassword';
-export * from './NumberField';
-export * from './Password';
-export * from './Phone';
-export * from './Select';
-export * from './Switch';
-export * from './Text';
-export * from './Textarea';
-export * from './TextField';
-export * from './TOTPImage';
-export * from './TOTPLink';
-export { default as themeToCssVars } from './themeToCssVars';
-export type { Theme } from './themeToCssVars/types';
-
-export * from '@descope/web-components-ui';

package/src/inputHelpers.ts

@@ -1,41 +0,0 @@
-export function handleCustomValidationMessages() {
-	const kebabCase = (str: string) =>
-		str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-
-	if (!this) {
-		return;
-	}
-
-	const targetEle = this.querySelector('.descope-input');
-	if (!targetEle) {
-		return;
-	}
-
-	const disabledChars = ['e'];
-
-	if (targetEle.type === 'number') {
-		targetEle.addEventListener('keypress', (e: KeyboardEvent) => {
-			if (disabledChars.includes(e.key.toLowerCase())) {
-				e.preventDefault();
-			}
-		});
-	}
-
-	targetEle.addEventListener('input', () => {
-		if (targetEle.classList.contains('invalid:input-error')) {
-			targetEle.checkValidity();
-		}
-	});
-
-	targetEle.addEventListener('invalid', () => {
-		targetEle.setCustomValidity('');
-		targetEle.classList.add('invalid:input-error');
-		['patternMismatch', 'valueMissing'].forEach((type) => {
-			if (targetEle.validity[type]) {
-				const attrName = `data-errormessage-${kebabCase(type)}`;
-				const customMessage = targetEle.getAttribute(attrName);
-				if (customMessage) targetEle.setCustomValidity(customMessage);
-			}
-		});
-	});
-}

package/src/themeToCssVars/constants.ts

@@ -1,13 +0,0 @@
-export const optionalColors = {
-	p: { focus: true },
-	s: { focus: true },
-	a: { focus: true }
-};
-
-export enum CssVarNameMapping {
-	primary = 'p',
-	error = 'er',
-	warning = 'wa',
-	secondary = 's',
-	accent = 'a'
-}

package/src/themeToCssVars/index.ts

@@ -1,153 +0,0 @@
-import Color from 'color';
-import { Theme, OptionalColorsVars } from './types';
-import { optionalColors, CssVarNameMapping } from './constants';
-
-// adds starting & trailing quotes to string with spaces that missing it
-const addMissingQuotesWhenSpace = (str: string) =>
-	/\s/g.test(str) ? str.replace(/(^[^""]*$)/g, '"$1"') : str;
-
-const getVarName = (name: string) =>
-	CssVarNameMapping[name as keyof CssVarNameMapping] || name;
-
-const contrastMaker = (color: string, percentage = 0.9) => {
-	const isDark = Color(color).isDark();
-
-	return Color(color)
-		.mix(Color(isDark ? 'white' : 'black'), percentage)
-		.saturate(1)
-		.hex();
-};
-
-const darken = (color: string, percentage = 0.2) =>
-	Color(color).darken(percentage).hex();
-
-const toHsl = (hex: string) => {
-	const { h, s, l } = Color(hex).hsl().object();
-
-	return { h, s, l };
-};
-
-const toHslString = (hsl: { h: number; s: number; l: number }) =>
-	`${hsl.h} ${hsl.s}% ${hsl.l}%`;
-
-const generateCssVar = (varName: string, value: string) =>
-	value !== undefined
-		? {
-				[`--${varName}`]: value
-		  }
-		: {};
-
-const generateColorCssVar = (varName: string, hex: string) =>
-	generateCssVar(varName, toHslString(toHsl(hex)));
-
-const generateOptionalColorsVars = (
-	varName: OptionalColorsVars,
-	hex: string
-) => {
-	const optsColors: Record<string, string> = generateColorCssVar(
-		`${varName}c`,
-		contrastMaker(hex)
-	);
-	if (optionalColors[varName]?.focus)
-		Object.assign(optsColors, generateColorCssVar(`${varName}f`, darken(hex)));
-
-	return optsColors;
-};
-
-const generateColorsCssVars = (values: Record<string, string> | undefined) =>
-	Object.entries(values || {}).reduce((acc, [name, hex]) => {
-		const varName = getVarName(name);
-		const update = generateColorCssVar(varName, hex);
-		const optsColors = generateOptionalColorsVars(
-			varName as OptionalColorsVars,
-			hex
-		);
-
-		return Object.assign(acc, update, optsColors);
-	}, {});
-
-const toCssUrl = (str: string) => `url(${str})`;
-
-const mapObjValues = (
-	obj: Object,
-	mapper: (val: any, key: string, idx: number) => any
-) =>
-	obj &&
-	Object.fromEntries(
-		Object.entries(obj).map(([k, v], i) => [k, mapper(v, k, i)])
-	);
-
-const pickNonFalsy = (obj: Object, keys: string[]) =>
-	obj &&
-	Object.fromEntries(
-		Object.entries(obj).filter(([k, v]) => v && keys.includes(k))
-	);
-
-/**
- * Takes and object and flatten its keys
- * for example: for {a: {b: {c: 1}}}
- * we will get {'a-b-c': 1}
- */
-const flattenObj = (obj: Object, roots = [], sep = '-') =>
-	obj &&
-	Object.keys(obj).reduce(
-		(acc, key) => ({
-			...acc,
-			...(Object.prototype.toString.call(obj[key]) === '[object Object]'
-				? flattenObj(obj[key], roots.concat([key]), sep)
-				: { [roots.concat([key]).join(sep)]: obj[key] })
-		}),
-		{}
-	);
-
-const generateCssVars = (values: Record<string, string> | undefined) =>
-	Object.entries(values || {}).reduce(
-		(acc, [varName, value]) =>
-			Object.assign(acc, generateCssVar(varName, value)),
-		{}
-	);
-
-const generateTypographyCssVars = (
-	typography: Theme['typography'] | undefined,
-	fontSizeUnit = 'px'
-) => {
-	const fontFamiliesVars = typography?.fontFamilies?.reduce(
-		(acc, val, idx) =>
-			Object.assign(acc, {
-				[`font-family-${idx}`]: val.family
-					.map(addMissingQuotesWhenSpace)
-					.join(',')
-			}),
-		{}
-	);
-
-	const typographyVars = flattenObj(
-		mapObjValues(typography?.variants, (val) => ({
-			...val,
-			'font-family': `var(--font-family-${val['font-family']})`,
-			'font-size': val['font-size'] && val['font-size'] + fontSizeUnit
-		}))
-	);
-
-	return generateCssVars(
-		Object.assign(fontFamiliesVars || {}, typographyVars || {})
-	);
-};
-
-const generateLogoCssVars = (logo: Theme['logo'] | undefined) =>
-	generateCssVars(
-		mapObjValues(
-			// we want to generate the logo-url var only if it has a value
-			pickNonFalsy(logo || {}, ['logo-url']),
-			toCssUrl
-		)
-	);
-
-const generateCssVarsFromTheme = (theme: Partial<Theme> = {}) => ({
-	...generateColorsCssVars(theme.colors),
-	...generateCssVars(theme.components),
-	...generateLogoCssVars(theme.logo),
-	...generateTypographyCssVars(theme.typography)
-});
-
-export default generateCssVarsFromTheme;

package/src/themeToCssVars/types.ts

@@ -1,56 +0,0 @@
-import { optionalColors } from './constants';
-
-type TypographyShallowVariant = {
-	'font-family': string;
-};
-
-type FontFamily = {
-	label: string;
-	family: string[];
-	url?: string;
-};
-
-export type TypographyVariant = TypographyShallowVariant & {
-	'font-size': string;
-	'font-weight': string;
-};
-
-export type Theme = {
-	components: {
-		'input-border-opacity': '0' | undefined;
-		'container-background-color': string;
-		'button-border-radius': string;
-		'input-background-color': string;
-		'input-label-color': string;
-		'input-color': string;
-		'input-placeholder-color': string;
-		'input-border-radius': string;
-		'primary-text-color': string;
-		'secondary-text-color': string;
-	};
-	colors: {
-		primary: string;
-		secondary: string;
-		error: string;
-		accent: string;
-	};
-	logo: { 'logo-url'?: string };
-	typography: {
-		fontFamilies: [FontFamily, FontFamily];
-		variants: {
-			h1: TypographyVariant;
-			h2: TypographyVariant;
-			h3: TypographyVariant;
-			subtitle1: TypographyVariant;
-			subtitle2: TypographyVariant;
-			body1: TypographyVariant;
-			body2: TypographyVariant;
-			input: TypographyShallowVariant;
-			button: TypographyShallowVariant;
-		};
-	};
-};
-
-export type ColorNames = keyof Theme['colors'];
-
-export type OptionalColorsVars = keyof typeof optionalColors;

package/src/types.ts

@@ -1,52 +0,0 @@
-type KebabCase<S extends string> = S extends `${infer First}${infer Rest}`
-	? Rest extends Uncapitalize<Rest>
-		? `${Uncapitalize<First>}${KebabCase<Rest>}`
-		: `${Uncapitalize<First>}-${KebabCase<Rest>}`
-	: S;
-
-export type ExcludeMatchingProperties<F, S extends Partial<F>> = Pick<
-	F,
-	{ [K in keyof F]: S[K] extends F[K] ? never : K }[keyof F]
->;
-
-export type CustomInputEvent = InputEvent & {
-	target: HTMLSelectElement;
-};
-
-export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type InputType = 'number' | 'email' | 'text' | 'password';
-
-export type TextAlign = 'left' | 'right' | 'center';
-
-export type FlexAlignment = 'start' | 'center' | 'end';
-
-export type HTMLInputAttrs = Omit<JSX.IntrinsicElements['input'], 'size'>;
-
-export type DescopeInputExtraProps = {
-	'full-width'?: boolean;
-	bordered?: boolean;
-	label?: string;
-	placeholder?: string;
-	size?: ComponentSize;
-	'helper-text'?: string;
-	'data-errormessage-pattern-mismatch'?: string;
-	'data-errormessage-value-missing'?: string;
-};
-
-export type DescopeInputProps = HTMLInputAttrs & DescopeInputExtraProps;
-
-export type PropsToAttrs<R extends Record<string, any>> = {
-	[K in keyof R as KebabCase<K & string>]: R[K];
-};
-
-export type TypographyVariants =
-	| 'h1'
-	| 'h2'
-	| 'h3'
-	| 'subtitle1'
-	| 'subtitle2'
-	| 'body1'
-	| 'body2';
-
-export type Mode = 'primary' | 'secondary' | 'error' | 'success';

package/src/utils.tsx

@@ -1,69 +0,0 @@
-import React, { useCallback, useImperativeHandle, useRef } from 'react';
-import { ExcludeMatchingProperties } from './types';
-
-// eslint-disable-next-line import/exports-last
-export const withFixedProps = <P extends {}, F extends Partial<P>>(
-	Component: React.ComponentType<P>,
-	fixedProps: F
-) =>
-	React.forwardRef<HTMLElement, ExcludeMatchingProperties<P, F>>(
-		(props, ref) => {
-			const allProps = { ...props, ...fixedProps } as unknown as P;
-			return <Component {...allProps} ref={ref} />;
-		}
-	);
-
-const getFnBodyStr = (fn: Function) =>
-	fn.toString().match(/[^{]+\{([\s\S]*)\}$/)[1];
-
-type CustomScriptFn = () => void;
-
-const hash = (s: string) =>
-	// eslint-disable-next-line no-return-assign, no-bitwise, no-param-reassign
-	s.split('').reduce((a, b) => (a = (a << 5) - a + b.charCodeAt(0)) & a, 0);
-
-/**
- * This HOC allows us to bind a script (in vanilla JS) to the component and consume it in 2 different ways
- * 1. By rendering the component using React
- * 2. By adding a script tag next to the dom element that is later parsed and run by the web-component
- */
-export const withCustomScripts = <T extends {}>(
-	Component: React.ComponentType<T>,
-	...nonArrowFns: CustomScriptFn[]
-) =>
-	React.forwardRef<HTMLElement, T>((props, ref) => {
-		const internalRef = useRef<HTMLElement>();
-
-		const refFn = useCallback((recRef: HTMLElement) => {
-			if (!recRef) return;
-
-			internalRef.current = recRef;
-			// when in React, the context is taken from the root node,
-			// when in web-component, the context is injected to the function
-			nonArrowFns.forEach((fn) =>
-				fn.bind(recRef, (recRef?.getRootNode() as any)?.context)()
-			);
-		}, []);
-
-		useImperativeHandle(ref, () => internalRef.current);
-
-		return (
-			<>
-				<Component {...props} ref={refFn} />
-				{global?.process?.env?.SSR &&
-					nonArrowFns.map((fn, i) => {
-						const fnStr = getFnBodyStr(fn);
-						return (
-							// eslint-disable-next-line react/no-array-index-key
-							<script
-								// eslint-disable-next-line react/no-array-index-key
-								key={i}
-								data-id={hash(fnStr)}
-								// eslint-disable-next-line react/no-danger
-								dangerouslySetInnerHTML={{ __html: fnStr }}
-							/>
-						);
-					})}
-			</>
-		);
-	});

package/stories/Boolean.stories.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Boolean as Bool } from '../src';
-
-export default {
-	title: 'WCUI/Boolean',
-	component: Bool,
-	argTypes: {
-		type: {
-			options: ['checkbox', 'switch'],
-			control: { type: 'radio' }
-		}
-	}
-};
-
-const BooleanTemplate = (args) => (
-	<form
-		onSubmit={(e) => {
-			e.preventDefault();
-		}}
-		style={{ display: 'flex', flexWrap: 'wrap' }}
-	>
-		<Bool {...args} />
-
-		<div>
-			<button type="submit">Submit</button>
-		</div>
-	</form>
-);
-
-export const Boolean = BooleanTemplate.bind({});
-Boolean.args = {
-	label: 'Boolean Input Label',
-	size: 'md',
-	'full-width': false,
-	required: true,
-	type: 'checkbox'
-};

package/stories/Button.stories.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Button } from '../src';
-import * as icons from '../src/icons';
-export default {
-	title: 'WCUI/Button',
-	component: Button,
-	parameters: {
-		controls: { expanded: true }
-	},
-	argTypes: {
-		variant: {
-			options: ['contained', 'outline', 'link'],
-			control: { type: 'radio' }
-		},
-		color: {
-			options: ['primary', 'secondary', 'success', 'error'],
-			control: { type: 'radio' }
-		},
-		size: {
-			options: ['xs', 'sm', 'md', 'lg', 'xl'],
-			control: { type: 'radio' }
-		},
-		startIcon: {
-			options: Object.keys(icons),
-			control: { type: 'select' }
-		}
-	}
-};
-
-const StandardTemplate = (args) => <Button {...args} />;
-export const Standard = StandardTemplate.bind({});
-Standard.args = {
-	variant: 'contained',
-	children: 'Button',
-	color: 'primary',
-	loading: false,
-	size: 'md',
-	'full-width': false,
-	startIconColorText: true
-};
-
-const ProvidersTemplate = (args) => (
-	<div className="flex">
-		<div
-			className="flex"
-			style={{ gap: '0.5rem', display: 'flex', flexWrap: 'wrap' }}
-		>
-			<Button {...args} startIcon="facebook" />
-			<Button {...args} startIcon="google" />
-			<Button {...args} startIcon="microsoft" />
-			<Button {...args} startIcon="github" />
-			<Button {...args} startIcon="gitlab" />
-			<Button {...args} startIcon="apple" />
-			<Button {...args} startIcon="discord" />
-			<Button {...args} startIcon="linkedin" />
-			<Button {...args} startIcon="sso" />
-			<Button {...args} startIcon="fingerprint" />
-			<Button {...args} startIcon="passkey" />
-		</div>
-	</div>
-);
-export const Providers = ProvidersTemplate.bind({});
-Providers.args = {
-	variant: 'contained',
-	children: '',
-	color: 'primary',
-	loading: false,
-	size: 'md',
-	'full-width': false,
-	startIconColorText: true
-};

package/stories/Checkbox.stories.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Checkbox } from '../src';
-
-export default {
-	title: 'WCUI/Checkbox',
-	component: Checkbox
-};
-
-const CheckboxTemplate = (args) => (
-	<form
-		onSubmit={(e) => {
-			e.preventDefault();
-		}}
-		style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}
-	>
-		<Checkbox {...args} />
-		<div>
-			<button type="submit">Submit</button>
-		</div>
-	</form>
-);
-
-export const Check = CheckboxTemplate.bind({});
-Check.args = {
-	label: 'Checkbox Label',
-	size: 'sm',
-	'full-width': false,
-	required: true
-};