@descope/flow-components 2.0.38

package/src/types.ts

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,29 @@
+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
+};

package/stories/Code.stories.jsx

@@ -0,0 +1,60 @@
+/* eslint-disable import/exports-last */
+import React from 'react';
+import { Code } from '../src';
+
+export default {
+	title: 'WCUI/Code',
+	component: Code,
+	parameters: {
+		controls: { expanded: true }
+	},
+	argTypes: {
+		color: {
+			options: [
+				'',
+				'primary',
+				'secondary',
+				'accent',
+				'ghost',
+				'info',
+				'success',
+				'warning',
+				'error'
+			],
+			control: { type: 'select' }
+		},
+		'data-errormessage-pattern-mismatch': {
+			control: { type: 'text' }
+		},
+		'data-errormessage-value-missing': {
+			control: { type: 'text' }
+		}
+	}
+};
+
+const defaults = {
+	label: 'Label',
+	disabled: false,
+	digits: 6,
+	bordered: true,
+	size: 'md',
+	color: '',
+	'full-width': false,
+	required: false
+};
+
+const StandardTemplate = (args) => (
+	<form
+		onSubmit={(e) => {
+			e.preventDefault();
+		}}
+	>
+		<Code {...args} />
+		<br />
+		<button type="submit">submit</button>
+	</form>
+);
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+	...defaults
+};

package/stories/Container.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Container } from '../src';
+
+const StandardTemplate = (args) => (
+	<Container {...args}>
+		<button type="button">Click</button>
+		<button type="button">click</button>
+	</Container>
+);
+
+const OldProps = StandardTemplate.bind({});
+OldProps.args = {
+	shadow: '2xl',
+	'border-radius': 'lg',
+	paddingX: '20px',
+	paddingY: '20px',
+	align: 'center',
+	background: '200',
+	direction: 'row',
+	width: '100%'
+};
+
+const NewProps = StandardTemplate.bind({});
+NewProps.args = {
+	shadow: '2xl',
+	'border-radius': 'lg',
+	paddingX: '20px',
+	paddingY: '20px',
+	'vertical-alignment': 'center',
+	'horizontal-alignment': 'center',
+	'space-between': '10px',
+	background: '200',
+	direction: 'row',
+	width: '100%'
+};
+
+export default {
+	title: 'WCUI/Container',
+	component: Container,
+	parameters: {
+		controls: { expanded: true }
+	},
+	argTypes: {
+		'border-radius': {
+			control: { type: 'radio' }
+		},
+		justify: {
+			control: { type: 'radio' }
+		}
+	}
+};
+
+export { OldProps, NewProps };

package/stories/Divider.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Divider } from '../src';
+
+export default {
+	title: 'WCUI/Divider',
+	component: Divider,
+	parameters: {
+		controls: { expanded: true }
+	}
+};
+
+const StandardTemplate = (args) => (
+	<div style={{ width: '400px' }}>
+		<Divider {...args} />
+	</div>
+);
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+	children: 'label',
+	italic: false,
+	vertical: false,
+	variant: 'h3'
+};

package/stories/EmailField.stories.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { EmailField } from '../src/EmailField';
+
+export default {
+	title: 'WCUI/EmailField',
+	component: EmailField,
+	parameters: {
+		controls: { expanded: true }
+	}
+};
+
+const defaults = {
+	label: 'Email Input',
+	placeholder: 'Enter your email',
+	disabled: false,
+	bordered: true,
+	'full-width': true,
+	required: false,
+	size: 'md',
+	'error-message': 'Enter a valid e-mail address'
+};
+
+const StandardTemplate = (args) => (
+	<form
+		onSubmit={(e) => {
+			e.preventDefault();
+		}}
+	>
+		<EmailField {...args} />
+		<button type="submit">Submit</button>
+	</form>
+);
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+	...defaults
+};

package/stories/Image.stories.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Image } from '../src';
+
+export default {
+	title: 'WCUI/Image',
+	component: Image,
+	parameters: {
+		controls: { expanded: true }
+	}
+};
+
+const StandardTemplate = (args) => <Image {...args} />;
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+	src: 'https://joomisp.de/images/blog/joomisp-demo.jpg'
+};

package/stories/Input.stories.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Input } from '../src';
+
+export default {
+	title: 'WCUI/Input',
+	component: Input,
+	parameters: {
+		controls: { expanded: true }
+	},
+	argTypes: {}
+};
+
+const defaults = {
+	placeholder: 'Placeholder',
+	label: 'Label',
+	bordered: true,
+	size: 'md',
+	'full-width': false,
+	required: true,
+	'data-errormessage-value-missing': 'Required'
+};
+
+const StandardTemplate = (args) => (
+	<form
+		onSubmit={(e) => {
+			e.preventDefault();
+		}}
+	>
+		<Input {...args} />
+		<button type="submit">Submit</button>
+	</form>
+);
+export const Text = StandardTemplate.bind({});
+Text.args = {
+	...defaults
+};
+
+export const Email = StandardTemplate.bind({});
+Email.args = {
+	...defaults,
+	placeholder: 'Enter your email',
+	label: 'Email',
+	type: 'email',
+	'data-errormessage-pattern-mismatch': 'Enter a valid e-mail address'
+};
+
+export const Password = StandardTemplate.bind({});
+Password.args = {
+	...defaults,
+	placeholder: 'Enter your password',
+	label: 'Password',
+	type: 'password'
+};
+
+export const Numeric = StandardTemplate.bind({});
+Numeric.args = {
+	...defaults,
+	placeholder: 'Enter number value',
+	label: 'Number Value',
+	type: 'number',
+	step: 'any',
+	'data-errormessage-pattern-mismatch': 'Must be a number'
+};

package/stories/Link.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from '../src';
+
+export default {
+	title: 'WCUI/Link',
+	component: Link,
+	parameters: {
+		controls: { expanded: true }
+	}
+};
+
+const StandardTemplate = (args) => <Link {...args} />;
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+	children: 'Hello World',
+	italic: true,
+	variant: 'h3',
+	mode: 'primary',
+	'text-align': 'center',
+	'full-width': true
+};

package/stories/Loader.stories.jsx

@@ -0,0 +1,34 @@
+/* eslint-disable import/exports-last */
+import React from 'react';
+import { Loader } from '../src';
+
+const StandardTemplate = (args) => <Loader {...args} />;
+
+export default {
+	title: 'WCUI/Loader',
+	component: Loader,
+	parameters: {
+		controls: { expanded: true }
+	},
+	argTypes: {
+		variant: {
+			options: ['linear', 'radial'],
+			control: { type: 'select' }
+		},
+		size: {
+			options: ['xs', 'sm', 'md', 'lg'],
+			control: { type: 'select' }
+		},
+		color: {
+			options: ['primary', 'secondary'],
+			control: { type: 'select' }
+		}
+	}
+};
+
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+	variant: 'radial',
+	size: 'md',
+	color: 'primary'
+};

package/stories/Logo.stories.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Logo } from '../src';
+
+export default {
+	title: 'WCUI/Logo',
+	component: Logo,
+	parameters: {
+		controls: { expanded: true }
+	}
+};
+
+const StandardTemplate = (args) => <Logo {...args} />;
+export const Standard = StandardTemplate.bind({});
+Standard.args = {};

package/stories/NewPassword.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { NewPassword } from '../src';
+
+export default {
+	title: 'WCUI/NewPassword',
+	component: NewPassword,
+	parameters: {
+		controls: { expanded: true }
+	},
+	argTypes: {
+		'data-errormessage-pattern-mismatch': {
+			control: { type: 'text' }
+		},
+		'data-errormessage-value-missing': {
+			control: { type: 'text' }
+		}
+	}
+};
+
+const defaults = {
+	disabled: false,
+	bordered: true,
+	size: 'md',
+	'full-width': true,
+	name: 'standard',
+	isConfirm: true,
+	required: true,
+	passwordInputProps: {
+		label: 'Password',
+		placeholder: 'Password'
+	},
+	confirmInputProps: {
+		label: 'Confirm password',
+		placeholder: 'Confirm password'
+	}
+};
+
+const StandardTemplate = (args) => (
+	<form
+		onSubmit={(e) => {
+			e.preventDefault();
+		}}
+	>
+		<NewPassword {...args} />
+		<button type="submit">submit</button>
+	</form>
+);
+export const Standard = StandardTemplate.bind({});
+
+Standard.args = {
+	...defaults
+};

package/stories/NumberField.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { NumberField } from '../src/NumberField';
+
+export default {
+	title: 'WCUI/NumberField',
+	component: NumberField,
+	parameters: {
+		controls: { expanded: true }
+	}
+};
+
+const defaults = {
+	label: 'Label',
+	placeholder: 'Enter number value',
+	disabled: false,
+	bordered: true,
+	'full-width': false,
+	size: 'md',
+	required: false
+};
+
+const StandardTemplate = (args) => (
+	<form
+		onSubmit={(e) => {
+			e.preventDefault();
+		}}
+	>
+		<NumberField {...args} />
+		<button type="submit">Submit</button>
+	</form>
+);
+export const Standard = StandardTemplate.bind({});
+Standard.args = {
+	...defaults
+};